import { useState, type FormEvent } from 'react';
import { supabase } from '../lib/supabase';
import InputPassword from './InputPassword';

// Se muestra cuando el usuario vuelve del enlace del correo de recuperacion.
// NO le da acceso hasta que cree y guarde su contrasena nueva.
export default function RecuperarPassword({ onListo }: { onListo: () => void }) {
  const [pass, setPass] = useState('');
  const [pass2, setPass2] = useState('');
  const [err, setErr] = useState<string | null>(null);
  const [cargando, setCargando] = useState(false);

  async function guardar(e: FormEvent) {
    e.preventDefault();
    setErr(null);
    if (pass.length < 6) {
      setErr('La contrasena debe tener al menos 6 caracteres.');
      return;
    }
    if (pass !== pass2) {
      setErr('Las contrasenas no coinciden.');
      return;
    }
    setCargando(true);
    const { error } = await supabase.auth.updateUser({ password: pass });
    setCargando(false);
    if (error) {
      setErr(error.message);
      return;
    }
    onListo();
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-noche p-4 text-white">
      <form onSubmit={guardar} className="w-full max-w-md rounded-3xl bg-superficie p-6 shadow-2xl ring-1 ring-white/10 sm:p-8">
        <h2 className="text-2xl font-extrabold text-white">Crea tu contrasena nueva</h2>
        <p className="mb-5 mt-1 text-sm text-niebla">Ponla y confirmala. Con esta ya entras a tu negocio.</p>
        <label className="mb-3.5 block">
          <span className="text-xs font-semibold text-niebla">Nueva contrasena</span>
          <div className="mt-1">
            <InputPassword value={pass} onChange={setPass} placeholder="Minimo 6 caracteres" autoFocus />
          </div>
        </label>
        <label className="mb-4 block">
          <span className="text-xs font-semibold text-niebla">Confirmala</span>
          <div className="mt-1">
            <InputPassword value={pass2} onChange={setPass2} placeholder="Repite la contrasena" />
          </div>
        </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>}
        <button disabled={cargando} className="w-full rounded-2xl bg-dorado py-3 text-base font-bold text-noche shadow-glow transition active:scale-[0.99] disabled:opacity-60">
          {cargando ? 'Guardando...' : 'Guardar y entrar'}
        </button>
      </form>
    </div>
  );
}
