'use client';

import React, { useState, use } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { INITIAL_OBRAS, INITIAL_USUARIOS } from '@/lib/data/mockData';
import { RolType, Usuario } from '@/types';
import { 
  Building2, Users, HardHat, ShieldCheck, FileCheck2, UserCheck, 
  Lock, Mail, ArrowLeft, AlertCircle, KeyRound, Info, CheckCircle
} from 'lucide-react';

interface PageProps {
  params: Promise<{ obraId: string }>;
}

const ROL_CONFIG: Record<string, { titulo: string; descripcion: string; icono: React.ElementType; color: string; border: string }> = {
  propietario: {
    titulo: 'Propietarios / Inmobiliaria',
    descripcion: 'Supervisión de avances, actas, hitos y galería de fotos',
    icono: Users,
    color: 'from-blue-600 to-indigo-600',
    border: 'hover:border-blue-500'
  },
  constructor: {
    titulo: 'Constructores / Terreno',
    descripcion: 'Consultas RFIs, subida de fotos, avances y actas de obra',
    icono: HardHat,
    color: 'from-amber-600 to-orange-600',
    border: 'hover:border-amber-500'
  },
  ito: {
    titulo: 'ITO (Inspector Técnico)',
    descripcion: 'Inspecciones, checklists, emisión de RFIs y control de calidad',
    icono: ShieldCheck,
    color: 'from-emerald-600 to-teal-600',
    border: 'hover:border-emerald-500'
  },
  externo: {
    titulo: 'Colaborador Externo',
    descripcion: 'Acceso acotado a planos y carpetas de especialidad asignadas',
    icono: FileCheck2,
    color: 'from-purple-600 to-purple-800',
    border: 'hover:border-purple-500'
  }
};

export default function ObraRoleLoginPage({ params }: PageProps) {
  const resolvedParams = use(params);
  const router = useRouter();
  const obraId = resolvedParams.obraId;

  const obra = INITIAL_OBRAS.find(o => o.id === obraId) || INITIAL_OBRAS[0];
  
  // Roles que tienen al menos 1 usuario creado para esta obra (Paso 2.1.2)
  const rolesActivosObra = obra.rolesDisponibles;

  const [rolSeleccionado, setRolSeleccionado] = useState<RolType | null>(null);
  const [correo, setCorreo] = useState('');
  const [password, setPassword] = useState('');
  const [errorLogin, setErrorLogin] = useState('');
  const [mostrandoRecuperar, setMostrandoRecuperar] = useState(false);
  const [mensajeRecuperar, setMensajeRecuperar] = useState('');

  // Cuentas disponibles de demostración para el rol seleccionado
  const usuariosDelRol = INITIAL_USUARIOS.filter(
    u => u.obraId === obraId && u.rol === rolSeleccionado
  );

  const seleccionarDemoUser = (user: Usuario) => {
    setCorreo(user.correo);
    setPassword('••••••••');
    setErrorLogin('');
  };

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (!rolSeleccionado) return;

    const userEncontrado = INITIAL_USUARIOS.find(
      u => u.correo.toLowerCase() === correo.toLowerCase() && u.obraId === obraId && u.rol === rolSeleccionado
    );

    if (userEncontrado) {
      if (userEncontrado.estado === 'invitado') {
        setErrorLogin('Tu cuenta está en estado "Invitado". Por favor define tu contraseña mediante el correo de invitación enviado por el Administrador.');
        return;
      }
      if (userEncontrado.estado === 'desactivado') {
        setErrorLogin('Este acceso ha sido desactivado por el Administrador de la obra.');
        return;
      }

      // Guardar sesión simulada en localStorage
      localStorage.setItem('sigueobras_session', JSON.stringify({
        usuario: userEncontrado,
        obra: obra
      }));

      // Redirigir al dashboard de la obra
      router.push(`/obra/${obraId}/dashboard`);
    } else {
      setErrorLogin(`No se encontró una cuenta activa para el correo "${correo}" en el rol seleccionado para esta obra.`);
    }
  };

  const handleRecuperarPassword = (e: React.FormEvent) => {
    e.preventDefault();
    setMensajeRecuperar(`Se ha enviado un enlace de recuperación de contraseña de un solo uso a ${correo}.`);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col justify-between selection:bg-sky-500 selection:text-white">
      {/* Header */}
      <header className="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <Link href="/" className="flex items-center space-x-2 text-slate-400 hover:text-white transition-colors text-sm font-medium">
            <ArrowLeft className="w-4 h-4" />
            <span>Volver al selector de obras</span>
          </Link>
          <div className="flex items-center space-x-2">
            <Building2 className="w-5 h-5 text-sky-400" />
            <span className="font-bold text-slate-200 text-sm">{obra.nombre}</span>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-5xl mx-auto px-4 py-10 w-full flex-1 flex flex-col justify-center">
        {/* Encabezado Obra */}
        <div className="mb-8 text-center">
          <span className="inline-block px-3 py-1 bg-slate-900 border border-slate-800 rounded-full text-xs text-sky-400 font-semibold mb-2">
            Paso 2 de 2 — Selección de Rol e Inicio de Sesión
          </span>
          <h1 className="text-3xl font-extrabold text-white mb-2">{obra.nombre}</h1>
          <p className="text-slate-400 text-sm max-w-xl mx-auto">
            {obra.direccion}, {obra.comuna} — Selecciona tu rol registrado para ingresar al sistema.
          </p>
        </div>

        {!rolSeleccionado ? (
          /* PASO A: Selector de Roles Disponibles para esta Obra */
          <div>
            <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-wider text-center mb-6">
              Roles con acceso activo en esta obra
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 max-w-4xl mx-auto">
              {rolesActivosObra.map((rolKey) => {
                const config = ROL_CONFIG[rolKey];
                if (!config) return null;
                const IconComponent = config.icono;
                const countUsuarios = INITIAL_USUARIOS.filter(u => u.obraId === obraId && u.rol === rolKey).length;

                return (
                  <button
                    key={rolKey}
                    onClick={() => {
                      setRolSeleccionado(rolKey as RolType);
                      setErrorLogin('');
                    }}
                    className={`glass-card text-left p-6 rounded-2xl border border-slate-800 transition-all duration-300 group flex items-start space-x-4 cursor-pointer hover:border-sky-500/50 hover:bg-slate-900/90`}
                  >
                    <div className={`p-3.5 rounded-xl bg-gradient-to-br ${config.color} text-white shadow-lg shrink-0`}>
                      <IconComponent className="w-6 h-6" />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center justify-between mb-1">
                        <h3 className="text-lg font-bold text-white group-hover:text-sky-400 transition-colors">
                          {config.titulo}
                        </h3>
                        <span className="text-[11px] bg-slate-800 text-slate-300 font-medium px-2 py-0.5 rounded-full border border-slate-700">
                          {countUsuarios} {countUsuarios === 1 ? 'cuenta' : 'cuentas'}
                        </span>
                      </div>
                      <p className="text-slate-400 text-xs leading-relaxed mb-3">
                        {config.descripcion}
                      </p>
                      <div className="flex items-center text-xs font-semibold text-sky-400 group-hover:translate-x-1 transition-transform">
                        <span>Ingresar como {config.titulo.split('/')[0]}</span>
                        <ArrowLeft className="w-3.5 h-3.5 ml-1 rotate-180" />
                      </div>
                    </div>
                  </button>
                );
              })}
            </div>

            {/* Aviso de No Auto-registro (Paso 2.1.4 del Plan) */}
            <div className="mt-10 max-w-2xl mx-auto p-4 bg-slate-900/60 border border-slate-800 rounded-xl flex items-start space-x-3 text-slate-400 text-xs">
              <Info className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
              <div>
                <span className="font-semibold text-slate-300 block mb-0.5">¿No tienes cuenta en esta obra?</span>
                El registro es de acceso restringido. Tu usuario y rol deben ser creados e invitados directamente por el **Arquitecto / Administrador de la obra**. No existe opción de auto-registro libre.
              </div>
            </div>
          </div>
        ) : (
          /* PASO B: Formulario de Login para el Rol Seleccionado */
          <div className="max-w-md mx-auto w-full">
            <div className="glass-panel p-8 rounded-2xl border border-slate-800 shadow-2xl">
              <div className="flex items-center justify-between mb-6 pb-4 border-b border-slate-800">
                <div className="flex items-center space-x-3">
                  <div className={`p-2.5 rounded-xl bg-gradient-to-br ${ROL_CONFIG[rolSeleccionado]?.color} text-white shadow-md`}>
                    {React.createElement(ROL_CONFIG[rolSeleccionado]?.icono || Users, { className: "w-5 h-5" })}
                  </div>
                  <div>
                    <span className="text-xs text-slate-400 uppercase tracking-wider font-medium">Rol Seleccionado</span>
                    <h3 className="text-base font-bold text-white">{ROL_CONFIG[rolSeleccionado]?.titulo}</h3>
                  </div>
                </div>
                <button
                  onClick={() => setRolSeleccionado(null)}
                  className="text-xs text-sky-400 hover:underline font-medium"
                >
                  Cambiar rol
                </button>
              </div>

              {!mostrandoRecuperar ? (
                <form onSubmit={handleLogin} className="space-y-4">
                  {errorLogin && (
                    <div className="p-3 bg-red-950/80 border border-red-800/80 rounded-xl text-red-200 text-xs flex items-start space-x-2">
                      <AlertCircle className="w-4 h-4 text-red-400 shrink-0 mt-0.5" />
                      <span>{errorLogin}</span>
                    </div>
                  )}

                  <div>
                    <label className="block text-xs font-medium text-slate-300 mb-1.5">
                      Correo Electrónico
                    </label>
                    <div className="relative">
                      <Mail className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                      <input
                        type="email"
                        required
                        placeholder="tu.correo@empresa.cl"
                        value={correo}
                        onChange={(e) => setCorreo(e.target.value)}
                        className="w-full pl-9 pr-3 py-2.5 bg-slate-900 border border-slate-800 rounded-xl text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
                      />
                    </div>
                  </div>

                  <div>
                    <div className="flex justify-between items-center mb-1.5">
                      <label className="text-xs font-medium text-slate-300">
                        Contraseña
                      </label>
                      <button
                        type="button"
                        onClick={() => { setMostrandoRecuperar(true); setMensajeRecuperar(''); }}
                        className="text-[11px] text-sky-400 hover:underline"
                      >
                        ¿Olvidaste tu contraseña?
                      </button>
                    </div>
                    <div className="relative">
                      <Lock className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
                      <input
                        type="password"
                        required
                        placeholder="••••••••"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        className="w-full pl-9 pr-3 py-2.5 bg-slate-900 border border-slate-800 rounded-xl text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
                      />
                    </div>
                  </div>

                  <button
                    type="submit"
                    className="w-full btn-primary py-3 rounded-xl font-semibold text-sm shadow-lg mt-2"
                  >
                    Iniciar Sesión en Obra
                  </button>
                </form>
              ) : (
                /* Formulario de Recuperación de Contraseña (Sección 3 del Plan) */
                <form onSubmit={handleRecuperarPassword} className="space-y-4">
                  <div className="text-xs text-slate-300 mb-2">
                    Ingresa tu correo para recibir un enlace seguro de recuperación de contraseña de un solo uso.
                  </div>

                  {mensajeRecuperar && (
                    <div className="p-3 bg-emerald-950/80 border border-emerald-800/80 rounded-xl text-emerald-200 text-xs flex items-start space-x-2">
                      <CheckCircle className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
                      <span>{mensajeRecuperar}</span>
                    </div>
                  )}

                  <div>
                    <label className="block text-xs font-medium text-slate-300 mb-1.5">
                      Correo registrado
                    </label>
                    <input
                      type="email"
                      required
                      placeholder="tu.correo@empresa.cl"
                      value={correo}
                      onChange={(e) => setCorreo(e.target.value)}
                      className="w-full px-3 py-2.5 bg-slate-900 border border-slate-800 rounded-xl text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
                    />
                  </div>

                  <button
                    type="submit"
                    className="w-full bg-slate-800 hover:bg-slate-700 text-white font-semibold py-2.5 rounded-xl text-sm transition-colors"
                  >
                    Enviar Enlace de Recuperación
                  </button>

                  <button
                    type="button"
                    onClick={() => setMostrandoRecuperar(false)}
                    className="w-full text-xs text-slate-400 hover:text-white pt-1"
                  >
                    Volver al inicio de sesión
                  </button>
                </form>
              )}

              {/* Accesos de Prueba Rápida (Demo) */}
              {usuariosDelRol.length > 0 && !mostrandoRecuperar && (
                <div className="mt-6 pt-5 border-t border-slate-800">
                  <span className="text-[11px] font-semibold text-slate-400 uppercase tracking-wider block mb-2">
                    Cuentas de demostración disponibles:
                  </span>
                  <div className="space-y-2">
                    {usuariosDelRol.map((user) => (
                      <button
                        key={user.id}
                        onClick={() => seleccionarDemoUser(user)}
                        className="w-full text-left p-2.5 rounded-lg bg-slate-900/60 hover:bg-slate-800 border border-slate-800/80 hover:border-slate-700 transition-all flex items-center justify-between text-xs group"
                      >
                        <div>
                          <div className="font-medium text-slate-200 group-hover:text-sky-300">{user.nombre}</div>
                          <div className="text-[10px] text-slate-400">{user.subTipo || user.correo}</div>
                        </div>
                        <span className="text-[10px] bg-slate-800 text-sky-400 px-2 py-0.5 rounded font-mono">
                          Auto-rellenar
                        </span>
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>
        )}
      </main>
    </div>
  );
}