import { useState, type FormEvent, type ReactNode } from 'react';
import { supabase } from '../lib/supabase';
import { medir } from '../lib/medicion';
import { LEGAL_VERSION } from './Legal';
import InputPassword from './InputPassword';

type Modo = 'entrar' | 'crear' | 'recuperar';

const PROD = import.meta.env.PROD;
const REDIRECT = PROD ? 'https://gustitoxpress.app' : 'http://localhost:5174';

const INPUT_ICON =
  'w-full rounded-xl border border-white/10 bg-superficie-2 py-3 pl-10 pr-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-dorado';
const BTN = 'w-full rounded-2xl bg-dorado py-3 text-base font-bold text-noche shadow-glow transition active:scale-[0.99] disabled:opacity-60';

export default function AuthModal({
  modoInicial,
  onCerrar,
  onLegal,
}: {
  modoInicial: 'entrar' | 'crear';
  onCerrar: () => void;
  onLegal: (doc: 'terminos' | 'privacidad') => void;
}) {
  const [modo, setModo] = useState<Modo>(modoInicial);
  const [recuperaQue, setRecuperaQue] = useState<'clave' | 'correo' | null>(null);
  const [nombre, setNombre] = useState('');
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [acepta, setAcepta] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [msg, setMsg] = useState<string | null>(null);
  const [cargando, setCargando] = useState(false);

  function irA(m: Modo) {
    setModo(m);
    setRecuperaQue(null);
    setErr(null);
    setMsg(null);
  }

  async function enviar(e: FormEvent) {
    e.preventDefault();
    setErr(null);
    setMsg(null);
    setCargando(true);
    if (modo === 'entrar') {
      const { error } = await supabase.auth.signInWithPassword({ email, password: pass });
      if (error) setErr('Correo o contrasena incorrectos.');
    } else {
      if (!acepta) {
        setErr('Debes aceptar los terminos y la politica de privacidad para registrarte.');
        setCargando(false);
        return;
      }
      const { data, error } = await supabase.auth.signUp({
        email,
        password: pass,
        options: {
          data: { nombre, acepto_terminos: true, terminos_version: LEGAL_VERSION, acepto_en: new Date().toISOString() },
        },
      });
      if (error) setErr(error.message);
      else {
        medir('cuenta_creada', 'registro');
        if (!data.session) setMsg('Revisa tu correo para confirmar la cuenta y entra.');
      }
    }
    setCargando(false);
  }

  async function enviarReset(e: FormEvent) {
    e.preventDefault();
    setErr(null);
    setMsg(null);
    setCargando(true);
    const { error } = await supabase.auth.resetPasswordForEmail(email, { redirectTo: REDIRECT });
    setCargando(false);
    if (error) setErr(error.message);
    else
      setMsg(
        `Listo. Te enviamos un correo a ${email}. Sigue estos pasos:\n1. Abre el correo y toca el enlace.\n2. Te traera aqui para crear una contrasena nueva.\n3. Con esa nueva contrasena ya entras.`,
      );
  }

  const titulo =
    modo === 'entrar' ? 'Entra a tu negocio' : modo === 'crear' ? 'Registra tu negocio' : 'Recuperar acceso';
  const sub =
    modo === 'entrar'
      ? 'Gestiona tus pedidos, tu menu y tu tienda.'
      : modo === 'crear'
        ? 'Gratis. En minutos tienes tu tienda en linea.'
        : 'Te ayudamos a volver a entrar.';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" onClick={onCerrar}>
      <div
        className="max-h-[92vh] w-full max-w-md overflow-y-auto rounded-3xl bg-superficie p-6 text-white shadow-2xl ring-1 ring-white/10 sm:p-8"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start justify-between gap-3">
          <div>
            <h2 className="text-2xl font-extrabold text-white">{titulo}</h2>
            <p className="mt-1 text-sm text-niebla">{sub}</p>
          </div>
          <button
            onClick={onCerrar}
            className="grid h-9 w-9 shrink-0 place-items-center rounded-lg text-niebla hover:bg-white/10 hover:text-white"
            aria-label="Cerrar"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
              <path d="M6 6l12 12M18 6L6 18" />
            </svg>
          </button>
        </div>

        {/* ---- ENTRAR / CREAR ---- */}
        {modo !== 'recuperar' && (
          <>
            <form onSubmit={enviar} className="mt-5">
              {modo === 'crear' && (
                <Campo label="Tu nombre" icon={<IconUser />}>
                  <input className={INPUT_ICON} value={nombre} onChange={(e) => setNombre(e.target.value)} placeholder="Como te llamas" required />
                </Campo>
              )}
              <Campo label="Correo" icon={<IconMail />}>
                <input className={INPUT_ICON} type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tucorreo@ejemplo.com" required />
              </Campo>
              <label className="mb-3.5 block">
                <span className="text-xs font-semibold text-niebla">Contrasena</span>
                <div className="mt-1">
                  <InputPassword value={pass} onChange={setPass} placeholder={modo === 'crear' ? 'Minimo 6 caracteres' : 'Tu clave'} />
                </div>
              </label>

              {modo === 'entrar' && (
                <div className="mb-4 -mt-1 text-right">
                  <button type="button" onClick={() => irA('recuperar')} className="text-xs font-semibold text-dorado">
                    Olvidaste tu acceso?
                  </button>
                </div>
              )}

              {modo === 'crear' && (
                <label className="mb-4 flex items-start gap-2 text-xs text-niebla">
                  <input type="checkbox" checked={acepta} onChange={(e) => setAcepta(e.target.checked)} className="mt-0.5 h-4 w-4 shrink-0 accent-dorado" />
                  <span>
                    Acepto los{' '}
                    <button type="button" onClick={() => onLegal('terminos')} className="font-bold text-dorado underline">
                      Terminos y Condiciones
                    </button>{' '}
                    y la{' '}
                    <button type="button" onClick={() => onLegal('privacidad')} className="font-bold text-dorado underline">
                      Politica de Privacidad
                    </button>
                    .
                  </span>
                </label>
              )}

              {err && <p className="mb-3 rounded-lg bg-red-500/15 px-3 py-2 text-sm text-red-300 ring-1 ring-red-500/25">{err}</p>}
              {msg && <p className="mb-3 whitespace-pre-line rounded-lg bg-verde/15 px-3 py-2 text-sm text-verde ring-1 ring-verde/25">{msg}</p>}

              <button disabled={cargando} className={BTN}>
                {cargando ? 'Un momento...' : modo === 'entrar' ? 'Entrar' : 'Crear mi negocio'}
              </button>
            </form>

            <div className="mt-5 border-t border-white/10 pt-4 text-center">
              <button type="button" onClick={() => irA(modo === 'entrar' ? 'crear' : 'entrar')} className="text-sm text-niebla">
                {modo === 'entrar' ? (
                  <>
                    No tienes cuenta? <span className="font-bold text-dorado">Registra tu negocio</span>
                  </>
                ) : (
                  <>
                    Ya tienes cuenta? <span className="font-bold text-dorado">Entrar</span>
                  </>
                )}
              </button>
            </div>
          </>
        )}

        {/* ---- RECUPERAR ACCESO ---- */}
        {modo === 'recuperar' && (
          <div className="mt-5">
            {recuperaQue === null && (
              <>
                <p className="text-sm font-semibold text-white">Que olvidaste?</p>
                <div className="mt-3 grid gap-2">
                  <button onClick={() => { setRecuperaQue('clave'); setErr(null); setMsg(null); }} className="w-full rounded-2xl border border-white/15 py-3 text-left font-semibold text-white hover:border-white/30">
                    <span className="px-4">Mi contrasena</span>
                  </button>
                  <button onClick={() => { setRecuperaQue('correo'); setErr(null); setMsg(null); }} className="w-full rounded-2xl border border-white/15 py-3 text-left font-semibold text-white hover:border-white/30">
                    <span className="px-4">Mi correo</span>
                  </button>
                </div>
              </>
            )}

            {recuperaQue === 'clave' && (
              <form onSubmit={enviarReset}>
                <p className="mb-3 text-sm text-niebla">
                  Pon el correo de tu negocio y te enviamos un enlace para crear una contrasena nueva.
                </p>
                <Campo label="Tu correo" icon={<IconMail />}>
                  <input className={INPUT_ICON} type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tucorreo@ejemplo.com" required />
                </Campo>
                {err && <p className="mb-3 rounded-lg bg-red-500/15 px-3 py-2 text-sm text-red-300 ring-1 ring-red-500/25">{err}</p>}
                {msg && <p className="mb-3 whitespace-pre-line rounded-lg bg-verde/15 px-3 py-2 text-sm text-verde ring-1 ring-verde/25">{msg}</p>}
                {!msg && (
                  <button disabled={cargando} className={BTN}>
                    {cargando ? 'Enviando...' : 'Enviar enlace de recuperacion'}
                  </button>
                )}
              </form>
            )}

            {recuperaQue === 'correo' && (
              <div className="rounded-xl bg-superficie-2 p-4 text-sm text-niebla ring-1 ring-white/10">
                <p className="font-semibold text-white">Tu correo es tu usuario para entrar.</p>
                <p className="mt-2">
                  Por seguridad no podemos recuperarlo automaticamente. Prueba con los correos que usas normalmente
                  (por ejemplo tu Gmail). Si aun asi no lo logras, escribenos a{' '}
                  <a href="mailto:soporte@gustitoxpress.app" className="font-semibold text-dorado underline">soporte@gustitoxpress.app</a>{' '}
                  y te ayudamos a recuperar tu negocio.
                </p>
              </div>
            )}

            <div className="mt-5 border-t border-white/10 pt-4 text-center">
              <button type="button" onClick={() => irA('entrar')} className="text-sm text-niebla">
                Volver a <span className="font-bold text-dorado">entrar</span>
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function Campo({ label, icon, children }: { label: string; icon: ReactNode; children: ReactNode }) {
  return (
    <label className="mb-3.5 block">
      <span className="text-xs font-semibold text-niebla">{label}</span>
      <div className="relative mt-1">
        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-niebla">{icon}</span>
        {children}
      </div>
    </label>
  );
}

function IconUser() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21c0-4 4-6 8-6s8 2 8 6" />
    </svg>
  );
}
function IconMail() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2" />
      <path d="m3 7 9 6 9-6" />
    </svg>
  );
}
