'use client';

import React, { useState, use } from 'react';
import Link from 'next/link';
import { INITIAL_OBRAS, INITIAL_USUARIOS } from '@/lib/data/mockData';
import { RolType, Usuario } from '@/types';
import { 
  ShieldCheck, ArrowLeft, Users, UserPlus, KeyRound, Lock, 
  Mail, CheckCircle2, AlertTriangle, RefreshCw, Power, Filter, ShieldAlert
} from 'lucide-react';

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

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

  const obra = INITIAL_OBRAS.find(o => o.id === obraId) || INITIAL_OBRAS[0];

  const [usuarios, setUsuarios] = useState<Usuario[]>(
    INITIAL_USUARIOS.filter(u => u.obraId === obraId || u.rol === 'arquitecto_admin')
  );

  const [modalCrearUser, setModalCrearUser] = useState(false);
  const [notificacion, setNotificacion] = useState('');
  const [claveTemporalGenerada, setClaveTemporalGenerada] = useState<{ userId: string; clave: string } | null>(null);

  // Form para crear usuario
  const [nombre, setNombre] = useState('');
  const [correo, setCorreo] = useState('');
  const [rol, setRol] = useState<RolType>('propietario');
  const [subTipo, setSubTipo] = useState('');

  const handleCrearUsuario = (e: React.FormEvent) => {
    e.preventDefault();
    const nuevoUser: Usuario = {
      id: `user-${Date.now()}`,
      nombre,
      correo,
      rol,
      subTipo: subTipo || `${rol.toUpperCase()} asignado`,
      obraId,
      estado: 'invitado',
      fechaCreacion: new Date().toISOString().split('T')[0]
    };

    setUsuarios([...usuarios, nuevoUser]);
    setModalCrearUser(false);
    setNombre('');
    setCorreo('');
    setSubTipo('');
    setNotificacion(`Invitación creada e email enviado a "${nuevoUser.correo}". Estado: Invitado.`);
  };

  const handleGenerarClaveTemporal = (userId: string, nombreUser: string) => {
    // Generar clave temporal de 8 caracteres
    const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    let tempPass = '';
    for (let i = 0; i < 8; i++) {
      tempPass += chars.charAt(Math.floor(Math.random() * chars.length));
    }

    setClaveTemporalGenerada({ userId, clave: tempPass });
    setNotificacion(`Clave temporal generada para ${nombreUser}. Se muestra en pantalla una única vez por seguridad.`);
  };

  const handleToggleEstado = (userId: string) => {
    setUsuarios(usuarios.map(u => {
      if (u.id === userId) {
        const nuevoEstado = u.estado === 'desactivado' ? 'activo' : 'desactivado';
        return { ...u, estado: nuevoEstado };
      }
      return u;
    }));
  };

  const handleForzarReseteo = (correoUser: string) => {
    setNotificacion(`Correo de reseteo de contraseña de un solo uso enviado a "${correoUser}".`);
  };

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col justify-between selection:bg-amber-500 selection:text-white">
      {/* Header Panel Oculto */}
      <header className="border-b border-amber-900/40 bg-slate-900/90 backdrop-blur-md sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center space-x-3">
            <Link href="/admin/dashboard" className="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-colors">
              <ArrowLeft className="w-4 h-4" />
            </Link>
            <div>
              <div className="flex items-center space-x-2">
                <span className="font-bold text-white text-base">Panel Oculto de Usuarios y Credenciales</span>
                <span className="px-2 py-0.5 rounded text-[10px] font-mono bg-amber-950 text-amber-400 border border-amber-800">SOLO ADMIN</span>
              </div>
              <span className="text-xs text-slate-400 block">{obra.nombre} ({obra.comuna})</span>
            </div>
          </div>

          <button
            onClick={() => setModalCrearUser(true)}
            className="bg-amber-500 hover:bg-amber-400 text-slate-950 px-3.5 py-2 rounded-xl text-xs font-bold flex items-center space-x-1.5 transition-all shadow-md"
          >
            <UserPlus className="w-4 h-4" />
            <span>Crear e Invitar Usuario</span>
          </button>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full">
        {notificacion && (
          <div className="mb-6 p-4 bg-emerald-950/90 border border-emerald-800/80 rounded-xl text-emerald-300 text-xs flex items-center justify-between shadow-lg">
            <div className="flex items-center space-x-2">
              <CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
              <span>{notificacion}</span>
            </div>
            <button onClick={() => setNotificacion('')} className="text-slate-400 hover:text-white">✕</button>
          </div>
        )}

        {/* Modal de Clave Temporal Visible Una Sola Vez (Punto 2.4 del Plan) */}
        {claveTemporalGenerada && (
          <div className="mb-6 p-5 bg-amber-950/80 border border-amber-600/80 rounded-2xl text-amber-200 text-xs shadow-xl">
            <div className="flex items-start justify-between">
              <div className="flex items-start space-x-3">
                <ShieldAlert className="w-6 h-6 text-amber-400 shrink-0 mt-0.5" />
                <div>
                  <h4 className="font-bold text-sm text-white mb-1">Clave Temporal Generada (Transmisión Segura)</h4>
                  <p className="text-slate-300 mb-3">
                    Comunícale esta contraseña temporal directamente al usuario en persona o por WhatsApp. No se volverá a mostrar.
                  </p>
                  <div className="inline-flex items-center space-x-3 bg-slate-950 px-4 py-2 rounded-xl border border-amber-500/50">
                    <span className="text-xs text-slate-400 font-mono">CONTRASEÑA TEMPORAL:</span>
                    <span className="text-lg font-mono font-bold text-amber-400 tracking-widest">{claveTemporalGenerada.clave}</span>
                  </div>
                </div>
              </div>
              <button 
                onClick={() => setClaveTemporalGenerada(null)}
                className="text-xs bg-slate-900 px-3 py-1.5 rounded-lg border border-slate-700 text-slate-300 hover:text-white"
              >
                Entendido / Cerrar
              </button>
            </div>
          </div>
        )}

        {/* Tabla de Usuarios Oculta */}
        <div className="glass-panel rounded-2xl border border-slate-800 overflow-hidden shadow-2xl">
          <div className="p-4 bg-slate-900/90 border-b border-slate-800 flex items-center justify-between">
            <h3 className="text-sm font-bold text-white flex items-center space-x-2">
              <Users className="w-4 h-4 text-amber-400" />
              <span>Listado de Personas Asignadas ({usuarios.length})</span>
            </h3>
            <span className="text-[11px] text-slate-400">
              Las contraseñas reales están almacenadas con hash irreversible (bcrypt/argon2) por seguridad.
            </span>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse text-xs">
              <thead>
                <tr className="border-b border-slate-800 bg-slate-950/60 text-slate-400 font-medium">
                  <th className="p-3.5">Nombre & Correo</th>
                  <th className="p-3.5">Rol</th>
                  <th className="p-3.5">Sub-Tipo</th>
                  <th className="p-3.5">Estado</th>
                  <th className="p-3.5">Último Acceso</th>
                  <th className="p-3.5 text-right">Acciones de Control</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-800/60 text-slate-300">
                {usuarios.map((user) => (
                  <tr key={user.id} className="hover:bg-slate-900/40 transition-colors">
                    <td className="p-3.5">
                      <div className="font-semibold text-white">{user.nombre}</div>
                      <div className="text-[11px] text-slate-400 font-mono">{user.correo}</div>
                    </td>
                    <td className="p-3.5">
                      <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${
                        user.rol === 'arquitecto_admin' ? 'bg-amber-950 text-amber-400 border border-amber-800' :
                        user.rol === 'propietario' ? 'bg-blue-950 text-blue-400 border border-blue-800' :
                        user.rol === 'constructor' ? 'bg-orange-950 text-orange-400 border border-orange-800' :
                        user.rol === 'ito' ? 'bg-emerald-950 text-emerald-400 border border-emerald-800' :
                        'bg-purple-950 text-purple-400 border border-purple-800'
                      }`}>
                        {user.rol}
                      </span>
                    </td>
                    <td className="p-3.5 text-slate-400">
                      {user.subTipo || 'General'}
                    </td>
                    <td className="p-3.5">
                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-semibold ${
                        user.estado === 'activo' ? 'bg-emerald-950/80 text-emerald-300 border border-emerald-700/50' :
                        user.estado === 'invitado' ? 'bg-amber-950/80 text-amber-300 border border-amber-700/50' :
                        'bg-red-950/80 text-red-400 border border-red-800/50'
                      }`}>
                        {user.estado}
                      </span>
                    </td>
                    <td className="p-3.5 text-slate-400 font-mono text-[11px]">
                      {user.ultimoAcceso || 'Sin accesos'}
                    </td>
                    <td className="p-3.5 text-right space-x-2">
                      {user.rol !== 'arquitecto_admin' && (
                        <>
                          <button
                            onClick={() => handleGenerarClaveTemporal(user.id, user.nombre)}
                            className="px-2.5 py-1 bg-amber-950/80 hover:bg-amber-900 text-amber-300 rounded-lg border border-amber-800 text-[11px] font-medium transition-colors"
                            title="Generar clave temporal para comunicar al usuario"
                          >
                            Clave Temp
                          </button>
                          <button
                            onClick={() => handleForzarReseteo(user.correo)}
                            className="px-2.5 py-1 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg border border-slate-700 text-[11px] font-medium transition-colors"
                            title="Enviar enlace de reseteo al correo del usuario"
                          >
                            Reset Link
                          </button>
                          <button
                            onClick={() => handleToggleEstado(user.id)}
                            className={`p-1 rounded-lg border transition-colors ${
                              user.estado === 'desactivado'
                                ? 'bg-emerald-950 text-emerald-400 border-emerald-800'
                                : 'bg-red-950 text-red-400 border-red-900'
                            }`}
                            title={user.estado === 'desactivado' ? 'Reactivar usuario' : 'Desactivar acceso al instante'}
                          >
                            <Power className="w-3.5 h-3.5" />
                          </button>
                        </>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </main>

      {/* Modal Crear Usuario */}
      {modalCrearUser && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
          <div className="glass-panel max-w-md w-full p-6 rounded-2xl border border-slate-800 shadow-2xl">
            <h3 className="text-lg font-bold text-white mb-1">Crear e Invitar Nuevo Usuario</h3>
            <p className="text-slate-400 text-xs mb-4">
              Se enviará una invitación al correo para que la persona defina su propia contraseña.
            </p>

            <form onSubmit={handleCrearUsuario} className="space-y-4">
              <div>
                <label className="block text-xs font-medium text-slate-300 mb-1">Nombre Completo</label>
                <input
                  type="text"
                  required
                  placeholder="ej. Arq. Marcelo Vega"
                  value={nombre}
                  onChange={(e) => setNombre(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white text-sm"
                />
              </div>

              <div>
                <label className="block text-xs font-medium text-slate-300 mb-1">Correo Electrónico</label>
                <input
                  type="email"
                  required
                  placeholder="ej. mvega@empresa.cl"
                  value={correo}
                  onChange={(e) => setCorreo(e.target.value)}
                  className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white text-sm"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1">Rol Asignado</label>
                  <select
                    value={rol}
                    onChange={(e) => setRol(e.target.value as RolType)}
                    className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white text-sm"
                  >
                    <option value="propietario">Propietario</option>
                    <option value="constructor">Constructor</option>
                    <option value="ito">ITO</option>
                    <option value="externo">Externo</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1">Sub-tipo (Opcional)</label>
                  <input
                    type="text"
                    placeholder="ej. Propietario 2"
                    value={subTipo}
                    onChange={(e) => setSubTipo(e.target.value)}
                    className="w-full px-3 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white text-sm"
                  />
                </div>
              </div>

              <div className="flex space-x-3 pt-3">
                <button
                  type="button"
                  onClick={() => setModalCrearUser(false)}
                  className="w-1/2 py-2.5 bg-slate-800 text-slate-300 font-semibold rounded-xl text-xs"
                >
                  Cancelar
                </button>
                <button
                  type="submit"
                  className="w-1/2 py-2.5 bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold rounded-xl text-xs"
                >
                  Enviar Invitación
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}