'use client';
import { useActionState, useState } from 'react';
import { useFormStatus } from 'react-dom';
import { Icon } from '@/lib/icons';
import { Photo } from '@/components/Photo';
import { useGo } from '@/lib/router';
import { authenticate, type AuthState } from '@/lib/actions';

function SubmitButton({ label }: { label: string }) {
  const { pending } = useFormStatus();
  return (
    <button className="btn btn-red btn-block btn-lg" type="submit" disabled={pending} style={pending ? { opacity: 0.7 } : undefined}>
      {pending ? 'Veuillez patienter…' : label}
    </button>
  );
}

export function AuthForm({ initialMode }: { initialMode: 'login' | 'signup' }) {
  const { go } = useGo();
  const [mode, setMode] = useState<'login' | 'signup'>(initialMode);
  const [acct, setAcct] = useState<'client' | 'pro'>('client');
  const [show, setShow] = useState(false);
  const [state, formAction] = useActionState<AuthState, FormData>(authenticate, {});
  const isSignup = mode === 'signup';

  return (
    <div className="auth">
      <div className="auth-brand">
        <div
          style={{
            position: 'absolute',
            inset: 0,
            opacity: 0.14,
            background: 'radial-gradient(60% 50% at 30% 10%, var(--red) 0%, transparent 60%)',
          }}
        ></div>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
          <img
            src="/assets/darsouk-logo.png"
            alt="Darsouk"
            style={{ height: 30, alignSelf: 'flex-start', cursor: 'pointer' }}
            onClick={() => go('home')}
          />
          <div style={{ marginTop: 'auto' }}>
            <div className="row gap8" style={{ marginBottom: 18 }}>
              {['restaurants', 'spa', 'cafes'].map((c, i) => (
                <div
                  key={c}
                  style={{ width: 56, height: 56, borderRadius: 14, overflow: 'hidden', border: '2px solid rgba(255,255,255,0.15)' }}
                >
                  <Photo cat={c} h={56} radius={0} idx={i} />
                </div>
              ))}
            </div>
            <h2 className="h2" style={{ color: '#fff', fontSize: 34 }}>
              Votre ville,<br />à portée de clic.
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.7)', fontSize: 15.5, lineHeight: 1.6, marginTop: 14, maxWidth: 360 }}>
              Rejoignez plus de 210 000 Algériens qui réservent leurs adresses préférées sur Darsouk.
            </p>
            <div className="row gap24" style={{ marginTop: 28 }}>
              {(
                [
                  ['5 200+', 'commerces'],
                  ['48', 'villes'],
                  ['4.8/5', 'satisfaction'],
                ] as const
              ).map((s) => (
                <div key={s[0]}>
                  <div className="h3" style={{ color: '#fff' }}>{s[0]}</div>
                  <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13 }}>{s[1]}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="auth-form">
        <form className="auth-card" action={formAction}>
          <input type="hidden" name="mode" value={mode} />
          <input type="hidden" name="account" value={acct} />

          <img
            src="/assets/darsouk-logo.png"
            alt="Darsouk"
            style={{ height: 26, marginBottom: 22, cursor: 'pointer' }}
            onClick={() => go('home')}
          />
          <h1 className="h1" style={{ fontSize: 30 }}>{isSignup ? 'Créer un compte' : 'Bon retour !'}</h1>
          <p className="body" style={{ marginTop: 6 }}>
            {isSignup ? 'Quelques secondes suffisent.' : 'Connectez-vous pour gérer vos réservations.'}
          </p>

          {isSignup && (
            <div className="seg" style={{ marginTop: 20, width: '100%' }}>
              <button
                type="button"
                className={acct === 'client' ? 'on' : ''}
                style={{ flex: 1, justifyContent: 'center' }}
                onClick={() => setAcct('client')}
              >
                <Icon name="user" size={15} />Particulier
              </button>
              <button
                type="button"
                className={acct === 'pro' ? 'on' : ''}
                style={{ flex: 1, justifyContent: 'center' }}
                onClick={() => setAcct('pro')}
              >
                <Icon name="store" size={15} />Commerçant
              </button>
            </div>
          )}

          {state.error && (
            <div
              className="row gap8"
              style={{
                marginTop: 18,
                padding: '11px 14px',
                background: 'var(--red-tint)',
                color: 'var(--red-dark)',
                borderRadius: 'var(--r-md)',
                fontSize: 13.5,
                fontWeight: 600,
              }}
            >
              <Icon name="info" size={16} />{state.error}
            </div>
          )}

          <div className="grid" style={{ gap: 14, marginTop: 20 }}>
            {isSignup && (
              <div className="grid cols-2" style={{ gap: 12 }}>
                <div className="field"><span className="label">Prénom</span><div className="input"><input name="first" placeholder="Prénom" /></div></div>
                <div className="field"><span className="label">Nom</span><div className="input"><input name="last" placeholder="Nom" /></div></div>
              </div>
            )}
            {isSignup && acct === 'pro' && (
              <div className="field">
                <span className="label">Nom du commerce</span>
                <div className="input"><Icon name="store" size={17} /><input name="business_name" placeholder="Ex. Dar Yasmine" /></div>
              </div>
            )}
            <div className="field">
              <span className="label">E-mail</span>
              <div className="input"><Icon name="mail" size={17} /><input name="email" type="email" placeholder="vous@email.com" /></div>
            </div>
            <div className="field">
              <span className="label">Mot de passe</span>
              <div className="input">
                <Icon name="lock" size={17} />
                <input name="password" type={show ? 'text' : 'password'} placeholder="••••••••" />
                <Icon name="eye" size={17} style={{ cursor: 'pointer' }} onClick={() => setShow(!show)} />
              </div>
            </div>
            {!isSignup && (
              <div className="row between">
                <label className="row gap8 small" style={{ cursor: 'pointer' }}>
                  <input type="checkbox" name="remember" />Se souvenir de moi
                </label>
                <a className="small" style={{ color: 'var(--red-dark)', fontWeight: 600, cursor: 'pointer' }} onClick={() => go('forgot')}>
                  Mot de passe oublié ?
                </a>
              </div>
            )}
            <SubmitButton label={isSignup ? 'Créer mon compte' : 'Se connecter'} />
          </div>

          <div className="row gap12" style={{ margin: '20px 0', alignItems: 'center' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}></div>
            <span className="tiny">ou</span>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}></div>
          </div>
          <div className="grid cols-2" style={{ gap: 12 }}>
            <button type="button" className="oauth"><span style={{ fontWeight: 800, color: '#4285F4' }}>G</span>Google</button>
            <button type="button" className="oauth"><span style={{ fontWeight: 800, color: '#1877F2' }}>f</span>Facebook</button>
          </div>

          <p className="small" style={{ textAlign: 'center', marginTop: 22 }}>
            {isSignup ? 'Déjà un compte ? ' : 'Pas encore de compte ? '}
            <a
              style={{ color: 'var(--red-dark)', fontWeight: 700, cursor: 'pointer' }}
              onClick={() => setMode(isSignup ? 'login' : 'signup')}
            >
              {isSignup ? 'Se connecter' : 'Créer un compte'}
            </a>
          </p>
        </form>
      </div>
    </div>
  );
}