'use client';

import React, { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useLanguage } from '@/context/LanguageContext';
import styles from '../account.module.css';

export default function AccountProfile() {
  const { user } = useAuth();
  const { t, language } = useLanguage();
  const [saving, setSaving] = useState(false);
  
  if (!user) return null;

  const handleSave = (e: React.FormEvent) => {
    e.preventDefault();
    setSaving(true);
    setTimeout(() => {
      setSaving(false);
      alert(language === 'ar' ? 'تم الحفظ بنجاح!' : 'Profile saved!');
    }, 1000);
  };

  return (
    <div>
      <h1 className={styles.pageTitle}>👤 {t.account.profile}</h1>
      
      <form onSubmit={handleSave} className={styles.card} style={{ maxWidth: '600px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '20px' }}>
          <div>
            <label className="form-label">{t.auth.name}</label>
            <input type="text" className="form-input" defaultValue={user.name} required />
          </div>
          <div>
            <label className="form-label">{t.auth.phone}</label>
            <input type="tel" className="form-input" defaultValue={user.phone} required />
          </div>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <label className="form-label">{t.auth.email}</label>
          <input type="email" className="form-input" defaultValue={user.email} disabled style={{ opacity: 0.6 }} />
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginTop: '4px' }}>Email cannot be changed directly.</div>
        </div>

        <div style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '20px', marginBottom: '20px' }}>
          <h3 style={{ color: 'var(--text-primary)', marginBottom: '16px', fontSize: '1.1rem' }}>Change Password</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '16px' }}>
            <div>
              <label className="form-label">Current Password</label>
              <input type="password" className="form-input" placeholder="••••••••" />
            </div>
            <div>
              <label className="form-label">New Password</label>
              <input type="password" className="form-input" placeholder="••••••••" />
            </div>
          </div>
        </div>

        <button type="submit" className="btn btn-primary" disabled={saving}>
          {saving ? (language === 'ar' ? 'جاري الحفظ...' : 'Saving...') : t.account.saveChanges}
        </button>
      </form>
    </div>
  );
}
