import { useState } from 'react';
import { useAuth } from '../lib/auth';
import { supabase } from '../lib/supabase';

// Pagina para que el repartidor elimine SU cuenta y datos. Cumple el requisito de
// Google Play. Autonoma: si no hay sesion, deja iniciar sesion aqui mismo; luego
// confirma y borra llamando a la Edge Function.
export default function EliminarCuenta() {
  const { session } = useAuth();
  const [email, setEmail] = useState('');
  const [pass, setPass] = useState('');
  const [cargando, setCargando] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [confirmo, setConfirmo] = useState(false);
  const [listo, setListo] = useState(false);

  async function entrar() {
    setErr(null);
    setCargando(true);
    const { error } = await supabase.auth.signInWithPassword({ email: email.trim(), password: pass });
    setCargando(false);
    if (error) setErr('Correo o contraseña incorrectos.');
  }

  async function eliminar() {
    setErr(null);
    setCargando(true);
    const { data, error } = await supabase.functions.invoke('eliminar-cuenta', { method: 'POST' });
    const msg = (data as { error?: string } | null)?.error;
    if (error || msg) {
      setErr(msg ?? 'No se pudo eliminar la cuenta. Intenta de nuevo.');
      setCargando(false);
      return;
    }
    await supabase.auth.signOut();
    setCargando(false);
    setListo(true);
  }

  return (
    <div className="min-h-screen bg-stone-100 flex items-start justify-center px-4 py-10">
      <div className="w-full max-w-md rounded-3xl bg-white p-6 shadow-xl">
        <h1 className="text-2xl font-extrabold text-stone-900">Eliminar cuenta</h1>
        <p className="mt-1 text-sm text-stone-500">Gustito Xpress</p>

        {listo ? (
          <div className="mt-6 rounded-2xl bg-emerald-50 p-4 text-emerald-800">
            <p className="font-bold">Tu cuenta fue eliminada.</p>
            <p className="mt-1 text-sm">
              Se borró tu acceso y tus datos personales. Gracias por haber usado Gustito Xpress.
            </p>
          </div>
        ) : !session ? (
          <>
            <p className="mt-4 text-[15px] leading-relaxed text-stone-600">
              Inicia sesión con la cuenta de repartidor que quieres eliminar.
            </p>
            <div className="mt-4 space-y-3">
              <input
                className="w-full rounded-xl border border-stone-300 px-3.5 py-2.5 text-sm outline-none focus:border-stone-500"
                placeholder="Correo"
                type="email"
                autoCapitalize="none"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
              <input
                className="w-full rounded-xl border border-stone-300 px-3.5 py-2.5 text-sm outline-none focus:border-stone-500"
                placeholder="Contraseña"
                type="password"
                value={pass}
                onChange={(e) => setPass(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && entrar()}
              />
              {err && <p className="text-sm text-red-600">{err}</p>}
              <button
                onClick={entrar}
                disabled={cargando || !email || !pass}
                className="w-full rounded-2xl bg-stone-900 py-3 font-bold text-white disabled:opacity-60"
              >
                {cargando ? 'Entrando...' : 'Iniciar sesión'}
              </button>
            </div>
          </>
        ) : (
          <>
            <p className="mt-4 text-[15px] leading-relaxed text-stone-600">
              Vas a eliminar la cuenta <span className="font-bold text-stone-800">{session.user.email}</span>.
            </p>
            <div className="mt-4 rounded-2xl bg-red-50 p-4 text-sm text-red-800">
              <p className="font-bold">Esto es permanente.</p>
              <ul className="mt-2 list-disc pl-5 space-y-1">
                <li>Se borra tu acceso (no podrás volver a entrar).</li>
                <li>Se borran tus datos personales del perfil.</li>
                <li>Se elimina tu registro como repartidor.</li>
              </ul>
            </div>
            <label className="mt-4 flex items-start gap-2 text-sm text-stone-700">
              <input
                type="checkbox"
                className="mt-0.5"
                checked={confirmo}
                onChange={(e) => setConfirmo(e.target.checked)}
              />
              Entiendo que esta acción no se puede deshacer.
            </label>
            {err && <p className="mt-3 text-sm text-red-600">{err}</p>}
            <button
              onClick={eliminar}
              disabled={cargando || !confirmo}
              className="mt-4 w-full rounded-2xl bg-red-600 py-3 font-bold text-white disabled:opacity-60"
            >
              {cargando ? 'Eliminando...' : 'Eliminar mi cuenta permanentemente'}
            </button>
            <button
              onClick={() => (window.location.href = '/')}
              className="mt-2 w-full rounded-2xl py-2.5 text-sm font-semibold text-stone-500"
            >
              Cancelar
            </button>
          </>
        )}
        <p className="mt-6 border-t border-stone-200 pt-4 text-center text-xs text-stone-400">
          ¿Necesitas ayuda? Escríbenos a{' '}
          <a href="mailto:soporte@gustitoxpress.app" className="font-semibold text-stone-600 underline">soporte@gustitoxpress.app</a>
        </p>
      </div>
    </div>
  );
}
