'use client';

import { useState, useEffect } from 'react';
import { Shield, User, ChevronRight, Check, X, ShieldCheck } from 'lucide-react';

export default function PermisosPage() {
    const [empleados, setEmpleados] = useState<any[]>([]);
    const [selectedUser, setSelectedUser] = useState<any>(null);
    const [modulos, setModulos] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/empleados')
            .then(res => res.json())
            .then(data => {
                setEmpleados(Array.isArray(data) ? data : []);
                setLoading(false);
            });
    }, []);

    const fetchPermisos = async (user: any) => {
        setSelectedUser(user);
        const res = await fetch(`/api/empleados/${user.id}/permisos`);
        const data = await res.json();
        setModulos(data);
    };

    const togglePermiso = async (modulo: any) => {
        const newValue = !modulo.puede_entrar;
        const res = await fetch(`/api/empleados/${selectedUser.id}/permisos`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ id_modulo: modulo.id, puede_entrar: newValue }),
        });

        if (res.ok) {
            setModulos(modulos.map(m => m.id === modulo.id ? { ...m, puede_entrar: newValue } : m));
        }
    };

    if (loading) return <div className="p-8">Cargando...</div>;

    return (
        <div className="space-y-6">
            <div>
                <h1 className="text-3xl font-bold tracking-tight">Gestión de Permisos</h1>
                <p className="text-muted-foreground mt-2">Configure el acceso granular para cada empleado.</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                {/* Lista de Empleados */}
                <div className="rounded-xl border border-border bg-card overflow-hidden">
                    <div className="p-4 border-b border-border bg-secondary/30">
                        <h3 className="font-semibold flex items-center">
                            <User className="w-4 h-4 mr-2" /> Empleados
                        </h3>
                    </div>
                    <div className="divide-y divide-border max-h-[600px] overflow-y-auto">
                        {empleados.map(emp => (
                            <button
                                key={emp.id}
                                onClick={() => fetchPermisos(emp)}
                                className={`w-full text-left p-4 hover:bg-secondary/50 transition-colors flex items-center justify-between ${selectedUser?.id === emp.id ? 'bg-primary/5 border-l-4 border-primary' : ''}`}
                            >
                                <div>
                                    <p className="text-sm font-medium">{emp.nombre} {emp.apellidos}</p>
                                    <p className="text-xs text-muted-foreground">@{emp.usuario} • {emp.tipo_acceso === 1 ? 'Admin' : 'Empleado'}</p>
                                </div>
                                <ChevronRight className="w-4 h-4 text-muted-foreground" />
                            </button>
                        ))}
                    </div>
                </div>

                {/* Matriz de Permisos */}
                <div className="md:col-span-2 rounded-xl border border-border bg-card">
                    {selectedUser ? (
                        <>
                            <div className="p-4 border-b border-border bg-secondary/30 flex justify-between items-center">
                                <h3 className="font-semibold flex items-center">
                                    <Shield className="w-4 h-4 mr-2" />
                                    Permisos para {selectedUser.nombre}
                                </h3>
                                {selectedUser.tipo_acceso === 1 && (
                                    <span className="flex items-center text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full border border-emerald-100">
                                        <ShieldCheck className="w-3 h-3 mr-1" /> Acceso Total (Admin)
                                    </span>
                                )}
                            </div>
                            <div className="p-6">
                                <div className="grid gap-4">
                                    {modulos.map(mod => (
                                        <div key={mod.id} className="flex items-center justify-between p-4 rounded-lg border border-border bg-secondary/20">
                                            <div>
                                                <p className="text-sm font-bold capitalize">{mod.nombre}</p>
                                                <p className="text-xs text-muted-foreground">{mod.descripcion || 'Sin descripción'}</p>
                                            </div>
                                            <button
                                                onClick={() => togglePermiso(mod)}
                                                disabled={selectedUser.tipo_acceso === 1}
                                                className={`flex items-center px-4 py-2 rounded-lg text-sm font-medium transition-all ${mod.puede_entrar
                                                        ? 'bg-emerald-500 text-white hover:bg-emerald-600 shadow-md shadow-emerald-500/20'
                                                        : 'bg-secondary text-muted-foreground hover:bg-secondary/80'
                                                    } ${selectedUser.tipo_acceso === 1 ? 'opacity-50 cursor-not-allowed' : ''}`}
                                            >
                                                {mod.puede_entrar ? <><Check className="w-4 h-4 mr-2" /> Permitido</> : <><X className="w-4 h-4 mr-2" /> Denegado</>}
                                            </button>
                                        </div>
                                    ))}
                                </div>
                                {modulos.length === 0 && (
                                    <div className="text-center py-12 text-muted-foreground">
                                        No hay módulos configurados en el sistema.
                                    </div>
                                )}
                            </div>
                        </>
                    ) : (
                        <div className="flex flex-col items-center justify-center h-full p-12 text-center text-muted-foreground">
                            <Shield className="w-12 h-12 mb-4 opacity-20" />
                            <p>Seleccione un empleado de la lista para gestionar sus permisos.</p>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}