import pool from '@/lib/db';
import { UserCircle, Mail, Phone, Palette, Shield, Plus } from 'lucide-react';

async function getProfesores() {
    try {
        const [rows]: any = await pool.query('SELECT * FROM empleados WHERE activo = 1 ORDER BY nombre_completo');
        return rows;
    } catch (error) {
        console.error('Database Error:', error);
        return [];
    }
}

export default async function ProfesoresPage() {
    const profesores = await getProfesores();

    return (
        <div className="space-y-8">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Profesores y Personal</h1>
                    <p className="text-muted-foreground mt-2">Gestión del equipo docente y accesos al sistema.</p>
                </div>
                <button className="flex items-center space-x-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg font-medium hover:opacity-90 transition-opacity">
                    <Plus className="h-5 w-5" />
                    <span>Registrar Personal</span>
                </button>
            </div>

            <div className="grid gap-6 lg:grid-cols-2">
                {profesores.length > 0 ? profesores.map((profe: any) => (
                    <div key={profe.id} className="rounded-xl border border-border bg-card p-6 shadow-sm flex items-start space-x-6">
                        <div className="flex-shrink-0">
                            <div
                                className="h-20 w-20 rounded-2xl flex items-center justify-center text-white text-2xl font-bold"
                                style={{ backgroundColor: profe.color || '#6366f1' }}
                            >
                                {profe.nombre[0]}{profe.apellidos[0]}
                            </div>
                        </div>

                        <div className="flex-1 min-w-0">
                            <div className="flex justify-between items-start">
                                <div>
                                    <h3 className="text-xl font-bold truncate">{profe.nombre_completo}</h3>
                                    <p className="text-sm font-medium text-primary mb-2">
                                        {profe.tipo_acceso === 1 ? 'Administrador' : 'Profesor'}
                                    </p>
                                </div>
                                <div className="flex space-x-2">
                                    <div className="p-2 rounded-lg bg-secondary hover:bg-border cursor-pointer transition-colors" title="Ver Perfil">
                                        <UserCircle className="h-5 w-5 text-muted-foreground" />
                                    </div>
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-y-3 mt-4">
                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                    <Mail className="h-4 w-4" />
                                    <span className="truncate">{profe.email || 'Sin email'}</span>
                                </div>
                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                    <Phone className="h-4 w-4" />
                                    <span>{profe.telefono1}</span>
                                </div>
                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                    <Shield className="h-4 w-4" />
                                    <span>Usuario: {profe.usuario}</span>
                                </div>
                                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                    <Palette className="h-4 w-4" />
                                    <span>ID: #{profe.id}</span>
                                </div>
                            </div>

                            <div className="mt-6 flex space-x-3">
                                <button className="flex-1 py-2 rounded-lg bg-secondary text-foreground text-sm font-medium hover:bg-border transition-colors">
                                    Horario
                                </button>
                                <button className="flex-1 py-2 rounded-lg bg-secondary text-foreground text-sm font-medium hover:bg-border transition-colors">
                                    Nómina
                                </button>
                            </div>
                        </div>
                    </div>
                )) : (
                    <div className="col-span-full py-10 text-center text-muted-foreground">
                        No se encontró personal registrado.
                    </div>
                )}
            </div>
        </div>
    );
}