import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { toast } from 'sonner';
import { Siren, UserPlus } from 'lucide-react';
import { validarRegistroToken, registroPublico } from '../lib/api';

export default function RegistroPage() {
  const { token } = useParams();
  const navigate = useNavigate();
  const [valid, setValid] = useState(null);
  const [tenantName, setTenantName] = useState('');
  const [form, setForm] = useState({ nombre: '', direccion: '', email: '', password: '' });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    validarRegistroToken(token)
      .then(d => { setValid(true); setTenantName(d.tenant_nombre || ''); })
      .catch(e => { setValid(false); toast.error(e.message); });
  }, [token]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await registroPublico(token, form);
      toast.success('Solicitud enviada. El administrador la revisará.');
      setTimeout(() => navigate('/login'), 3000);
    } catch (e) { toast.error(e.message); }
    setLoading(false);
  };

  if (valid === null) return <div className="min-h-screen flex items-center justify-center"><div className="w-12 h-12 border-4 border-red-500 border-t-transparent rounded-full animate-spin" /></div>;
  if (valid === false) return (
    <div className="min-h-screen bg-zinc-950 flex items-center justify-center p-4">
      <div className="text-center text-white space-y-4">
        <Siren className="h-16 w-16 text-red-500 mx-auto" />
        <h1 className="text-2xl font-black">Link inválido o expirado</h1>
        <button onClick={() => navigate('/login')} className="px-6 py-2 border border-zinc-700 rounded-xl text-sm">Ir a Login</button>
      </div>
    </div>
  );

  return (
    <div className="min-h-screen bg-zinc-950 flex items-center justify-center p-4">
      <div className="w-full max-w-sm space-y-6">
        <div className="text-center">
          <Siren className="h-12 w-12 text-red-500 mx-auto mb-3" />
          <h1 className="text-2xl font-black text-white">Registro</h1>
          {tenantName && <p className="text-zinc-400 text-sm">{tenantName}</p>}
        </div>
        <form onSubmit={handleSubmit} className="space-y-3">
          <input value={form.nombre} onChange={e => setForm(f => ({ ...f, nombre: e.target.value }))} placeholder="Nombre completo" required
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-red-500" />
          <input value={form.direccion} onChange={e => setForm(f => ({ ...f, direccion: e.target.value }))} placeholder="Dirección (calle y número)"
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-red-500" />
          <input type="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} placeholder="Email" required
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-red-500" />
          <input type="password" value={form.password} onChange={e => setForm(f => ({ ...f, password: e.target.value }))} placeholder="Contraseña (mín 6)" required
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-red-500" />
          <button type="submit" disabled={loading}
            className="w-full h-12 rounded-xl bg-red-500 hover:bg-red-600 text-white font-bold text-lg transition-all disabled:opacity-50">
            {loading ? 'Enviando...' : 'Solicitar Registro'}
          </button>
        </form>
        <p className="text-center text-zinc-500 text-xs">Tu solicitud será revisada por el administrador</p>
      </div>
    </div>
  );
}