/* ============================================================
   lomi — pantalla CUENTA / LOGIN / REGISTRO / RECUPERAR
   ============================================================ */
function Account({ clientUser, setClientUser, go, resetToken, route }) {
  const [tab, setTab]         = useState(resetToken ? 'reset' : 'login');
  const [form, setForm]       = useState({ name: '', email: '', password: '', newPassword: '' });
  const [errors, setErrors]   = useState({});
  const [loading, setLoading] = useState(false);
  const [orders, setOrders]   = useState(null);
  const [ordLoading, setOrdLoading] = useState(false);
  const [forgotDone, setForgotDone] = useState(false);
  const [resetDone, setResetDone]   = useState(false);

  useEffect(() => {
    if (clientUser) fetchOrders();
  }, [clientUser]);

  function setF(k, v) {
    setForm(f => ({ ...f, [k]: v }));
    setErrors(e => ({ ...e, [k]: '', submit: '' }));
  }

  function switchTab(t) { setTab(t); setErrors({}); setForgotDone(false); }

  async function fetchOrders() {
    const token = localStorage.getItem('lomi_client_token');
    if (!token) return;
    setOrdLoading(true);
    try {
      const res = await fetch('/api/public/my-orders', { headers: { Authorization: `Bearer ${token}` } });
      if (res.ok) setOrders(await res.json());
      else if (res.status === 401) handleLogout();
    } catch {}
    setOrdLoading(false);
  }

  async function handleLogin(e) {
    e.preventDefault();
    const errs = {};
    if (!form.email)    errs.email    = 'Requerido';
    if (!form.password) errs.password = 'Requerido';
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setLoading(true);
    try {
      const res  = await fetch('/api/public/auth/login', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ email: form.email, password: form.password }) });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setErrors({ submit: data.error || 'Error al iniciar sesión' }); setLoading(false); return; }
      localStorage.setItem('lomi_client_token', data.token);
      setClientUser(data.user);
    } catch { setErrors({ submit: 'Error de conexión' }); }
    setLoading(false);
  }

  async function handleRegister(e) {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Requerido';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Email inválido';
    if (form.password.length < 6) errs.password = 'Mínimo 6 caracteres';
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setLoading(true);
    try {
      const res  = await fetch('/api/public/auth/register', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ name: form.name, email: form.email, password: form.password }) });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setErrors({ submit: data.error || 'Error al crear cuenta' }); setLoading(false); return; }
      localStorage.setItem('lomi_client_token', data.token);
      setClientUser(data.user);
    } catch { setErrors({ submit: 'Error de conexión' }); }
    setLoading(false);
  }

  async function handleForgot(e) {
    e.preventDefault();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) { setErrors({ email: 'Email inválido' }); return; }
    setLoading(true);
    try {
      const res  = await fetch('/api/public/auth/forgot-password', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ email: form.email }) });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setErrors({ submit: data.error || 'Error al enviar correo' }); setLoading(false); return; }
      setForgotDone(true);
    } catch { setErrors({ submit: 'Error de conexión' }); }
    setLoading(false);
  }

  async function handleReset(e) {
    e.preventDefault();
    if (form.newPassword.length < 6) { setErrors({ newPassword: 'Mínimo 6 caracteres' }); return; }
    setLoading(true);
    try {
      const res  = await fetch('/api/public/auth/reset-password', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify({ token: resetToken, password: form.newPassword }) });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) { setErrors({ submit: data.error || 'Error al cambiar contraseña' }); setLoading(false); return; }
      // Limpiar token de la URL
      window.history.replaceState({}, '', '/');
      localStorage.setItem('lomi_client_token', data.token);
      setClientUser(data.user);
    } catch { setErrors({ submit: 'Error de conexión' }); }
    setLoading(false);
  }

  function handleLogout() {
    localStorage.removeItem('lomi_client_token');
    setClientUser(null);
    setOrders(null);
    setForm({ name:'', email:'', password:'', newPassword:'' });
    setTab('login');
  }

  const STATUS = {
    pending:    ['Pendiente',  'status-pending'],
    paid:       ['Pagado',     'status-paid'],
    processing: ['Preparando', 'status-proc'],
    shipped:    ['Despachado', 'status-ship'],
    delivered:  ['Entregado',  'status-done'],
    cancelled:  ['Cancelado',  'status-cancel'],
  };

  /* ── DASHBOARD (autenticado) ─────────────────────────── */
  if (clientUser) {
    return (
      <main className="cartpage">
        <div className="wrap">
          <div className="account-page">
            <div className="account-header reveal in">
              <div className="account-av">{clientUser.name[0].toUpperCase()}</div>
              <div>
                <h1>Hola, {clientUser.name.split(' ')[0]} 👋</h1>
                <p className="account-email">{clientUser.email}</p>
              </div>
              <button className="btn btn-ghost" onClick={handleLogout} style={{ marginLeft:'auto' }}>
                <Icon name="back" size={16}/> Cerrar sesión
              </button>
            </div>

            <div className="account-quick">
              <button className="account-quick-btn reveal in" onClick={() => go({ name:'favorites' })}>
                <Icon name="heart" size={22}/><span>Mis favoritos</span>
              </button>
              <button className="account-quick-btn reveal in" onClick={() => go({ name:'catalog' })} style={{ transitionDelay:'.05s' }}>
                <Icon name="search" size={22}/><span>Explorar tienda</span>
              </button>
              <button className="account-quick-btn reveal in" onClick={() => go({ name:'cart' })} style={{ transitionDelay:'.10s' }}>
                <Icon name="cart" size={22}/><span>Ver carro</span>
              </button>
              <button className="account-quick-btn reveal in" onClick={() => go({ name:'tracking' })} style={{ transitionDelay:'.15s' }}>
                <Icon name="truck" size={22}/><span>Seguir pedido</span>
              </button>
            </div>

            <h2 className="account-section-title">Mis pedidos</h2>

            {ordLoading && (
              <div className="account-loading"><Icon name="rotate" size={26}/>  Cargando pedidos…</div>
            )}
            {!ordLoading && orders !== null && orders.length === 0 && (
              <div className="empty">
                <span className="empty-ic"><Icon name="cart" size={44}/></span>
                <h3>Aún no tienes pedidos</h3>
                <p>Cuando hagas tu primera compra aparecerá aquí.</p>
                <button className="btn btn-primary" onClick={() => go({ name:'catalog' })}>Ir a la tienda</button>
              </div>
            )}
            {!ordLoading && orders && orders.length > 0 && (
              <div className="account-orders">
                {orders.map(o => {
                  const [label, cls] = STATUS[o.status] || ['—', 'status-pending'];
                  return (
                    <div className="account-order-card reveal in" key={o.id}>
                      <div className="account-order-head">
                        <div>
                          <strong className="account-order-id">{o.id}</strong>
                          <span className="account-order-date">
                            {new Date(o.created_at).toLocaleDateString('es-CL', { day:'numeric', month:'long', year:'numeric' })}
                          </span>
                        </div>
                        <span className={"account-status " + cls}>{label}</span>
                      </div>
                      <div className="account-order-items">
                        {(o.items || []).map((it, i) => (
                          <span key={i} className="account-order-item">
                            {it.product_name}{it.qty > 1 ? ` ×${it.qty}` : ''}
                          </span>
                        ))}
                      </div>
                      <div className="account-order-footer">
                        <span>{(o.items||[]).length} producto{(o.items||[]).length !== 1 ? 's' : ''}</span>
                        <strong>{window.formatCLP(o.total)}</strong>
                        <button
                          className="btn btn-ghost"
                          style={{ fontSize:12, padding:'4px 10px', marginLeft:'auto' }}
                          onClick={() => go({ name:'tracking', orderId: o.id })}
                        >
                          <Icon name="truck" size={13}/> Seguir
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </main>
    );
  }

  /* ── AUTH CARD ────────────────────────────────────────── */
  return (
    <main className="cartpage">
      <div className="wrap">
        <div className="auth-wrap">
          <div className="auth-card reveal in">
            <div className="auth-logo"><Logo onClick={() => go({ name:'home' })}/></div>
            <p className="auth-tagline">Tu tienda de mascotas favorita</p>

            {/* ── NUEVA CONTRASEÑA (desde link de email) ── */}
            {tab === 'reset' && (
              <div className="auth-form">
                <h3 style={{ margin:'0 0 4px', fontFamily:'var(--font-display)' }}>Nueva contraseña</h3>
                <p style={{ fontSize:13.5, color:'var(--muted)', marginBottom:8 }}>Elige una contraseña segura para tu cuenta.</p>
                <form onSubmit={handleReset}>
                  <div className="field" style={{ marginBottom:14 }}>
                    <label>Nueva contraseña</label>
                    <input type="password" placeholder="Mínimo 6 caracteres" value={form.newPassword} onChange={e => setF('newPassword', e.target.value)} className={errors.newPassword ? 'error' : ''} autoComplete="new-password" autoFocus/>
                    {errors.newPassword && <span className="field-error">{errors.newPassword}</span>}
                  </div>
                  {errors.submit && <div className="submit-error">{errors.submit}</div>}
                  <button className="btn btn-primary btn-lg" type="submit" disabled={loading} style={{ width:'100%', marginTop:4 }}>
                    {loading ? 'Guardando…' : 'Guardar contraseña'}
                  </button>
                </form>
              </div>
            )}

            {/* ── OLVIDÉ MI CONTRASEÑA ── */}
            {tab === 'forgot' && (
              <div className="auth-form">
                {forgotDone ? (
                  <div className="forgot-done">
                    <div className="forgot-done-ic"><Icon name="check" size={28}/></div>
                    <h3>Revisa tu correo</h3>
                    <p>Si el email está registrado recibirás un enlace para crear una nueva contraseña. Puede tardar unos minutos.</p>
                    <button className="btn btn-ghost" style={{ width:'100%', marginTop:8 }} onClick={() => switchTab('login')}>
                      Volver al inicio de sesión
                    </button>
                  </div>
                ) : (
                  <form onSubmit={handleForgot}>
                    <h3 style={{ margin:'0 0 4px', fontFamily:'var(--font-display)' }}>¿Olvidaste tu contraseña?</h3>
                    <p style={{ fontSize:13.5, color:'var(--muted)', marginBottom:16 }}>Ingresa tu correo y te enviamos un enlace para crear una nueva.</p>
                    <div className="field" style={{ marginBottom:14 }}>
                      <label>Correo</label>
                      <input type="email" placeholder="tu@correo.cl" value={form.email} onChange={e => setF('email', e.target.value)} className={errors.email ? 'error' : ''} autoComplete="email" autoFocus/>
                      {errors.email && <span className="field-error">{errors.email}</span>}
                    </div>
                    {errors.submit && <div className="submit-error">{errors.submit}</div>}
                    <button className="btn btn-primary btn-lg" type="submit" disabled={loading} style={{ width:'100%', marginTop:4 }}>
                      {loading ? 'Enviando…' : 'Enviar enlace'}
                    </button>
                    <p className="auth-switch" style={{ marginTop:12 }}>
                      <button type="button" onClick={() => switchTab('login')}>← Volver al inicio de sesión</button>
                    </p>
                  </form>
                )}
              </div>
            )}

            {/* ── LOGIN / REGISTRO ── */}
            {(tab === 'login' || tab === 'register') && (
              <>
                <div className="auth-tabs">
                  <button className={tab === 'login' ? 'on' : ''} onClick={() => switchTab('login')}>Iniciar sesión</button>
                  <button className={tab === 'register' ? 'on' : ''} onClick={() => switchTab('register')}>Crear cuenta</button>
                </div>

                {tab === 'login' && (
                  <form className="auth-form" onSubmit={handleLogin} key="login">
                    <div className="field">
                      <label>Correo</label>
                      <input type="email" placeholder="tu@correo.cl" value={form.email} onChange={e => setF('email', e.target.value)} className={errors.email ? 'error' : ''} autoComplete="email"/>
                      {errors.email && <span className="field-error">{errors.email}</span>}
                    </div>
                    <div className="field">
                      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                        <label>Contraseña</label>
                        <button type="button" className="forgot-link" onClick={() => switchTab('forgot')}>¿Olvidaste tu contraseña?</button>
                      </div>
                      <input type="password" placeholder="••••••" value={form.password} onChange={e => setF('password', e.target.value)} className={errors.password ? 'error' : ''} autoComplete="current-password"/>
                      {errors.password && <span className="field-error">{errors.password}</span>}
                    </div>
                    {errors.submit && <div className="submit-error">{errors.submit}</div>}
                    <button className="btn btn-primary btn-lg" type="submit" disabled={loading} style={{ width:'100%', marginTop:4 }}>
                      {loading ? 'Entrando…' : 'Iniciar sesión'}
                    </button>
                    <p className="auth-switch">¿No tienes cuenta?{' '}
                      <button type="button" onClick={() => switchTab('register')}>Regístrate gratis</button>
                    </p>
                  </form>
                )}

                {tab === 'register' && (
                  <form className="auth-form" onSubmit={handleRegister} key="register">
                    <div className="field">
                      <label>Nombre completo</label>
                      <input placeholder="Camila Rojas" value={form.name} onChange={e => setF('name', e.target.value)} className={errors.name ? 'error' : ''} autoComplete="name"/>
                      {errors.name && <span className="field-error">{errors.name}</span>}
                    </div>
                    <div className="field">
                      <label>Correo</label>
                      <input type="email" placeholder="tu@correo.cl" value={form.email} onChange={e => setF('email', e.target.value)} className={errors.email ? 'error' : ''} autoComplete="email"/>
                      {errors.email && <span className="field-error">{errors.email}</span>}
                    </div>
                    <div className="field">
                      <label>Contraseña</label>
                      <input type="password" placeholder="Mínimo 6 caracteres" value={form.password} onChange={e => setF('password', e.target.value)} className={errors.password ? 'error' : ''} autoComplete="new-password"/>
                      {errors.password && <span className="field-error">{errors.password}</span>}
                    </div>
                    {errors.submit && <div className="submit-error">{errors.submit}</div>}
                    <button className="btn btn-primary btn-lg" type="submit" disabled={loading} style={{ width:'100%', marginTop:4 }}>
                      {loading ? 'Creando cuenta…' : 'Crear cuenta gratis'}
                    </button>
                    <p className="auth-switch">¿Ya tienes cuenta?{' '}
                      <button type="button" onClick={() => switchTab('login')}>Inicia sesión</button>
                    </p>
                  </form>
                )}
              </>
            )}
          </div>
        </div>
      </div>
    </main>
  );
}
window.Account = Account;