import pool from '@/lib/db';
import { Users, Clock, MapPin, Plus, Search } from 'lucide-react';

async function getGrupos() {
    try {
        const [rows]: any = await pool.query(`
      SELECT g.*, c.nombre as nombre_curso 
      FROM grupos g 
      LEFT JOIN cursos c ON g.idcurso = c.id 
      ORDER BY g.nombre
    `);
        return rows;
    } catch (error) {
        console.error('Database Error:', error);
        return [];
    }
}

export default async function GruposPage() {
    const grupos = await getGrupos();

    return (
        <div className="space-y-8">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Grupos</h1>
                    <p className="text-muted-foreground mt-2">Gestión de horarios, aulas y ocupación de grupos.</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>Nuevo Grupo</span>
                </button>
            </div>

            <div className="grid gap-6 md:grid-cols-2">
                {grupos.length > 0 ? grupos.map((grupo: any) => (
                    <div key={grupo.id} className="rounded-xl border border-border bg-card p-6 shadow-sm overflow-hidden relative">
                        <div className="flex justify-between items-start mb-6">
                            <div>
                                <h3 className="text-xl font-bold">{grupo.nombre}</h3>
                                <p className="text-sm text-primary font-medium">{grupo.nombre_curso}</p>
                            </div>
                            <div className="flex flex-col items-end">
                                <span className={`px-2 py-1 rounded-full text-xs font-semibold ${grupo.activo ? 'bg-emerald-500/10 text-emerald-600' : 'bg-destructive/10 text-destructive-foreground'}`}>
                                    {grupo.activo ? 'Activo' : 'Cerrado'}
                                </span>
                            </div>
                        </div>

                        <div className="grid grid-cols-2 gap-4 mb-6">
                            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                <Clock className="h-4 w-4" />
                                <span>{grupo.horainicio?.substring(0, 5)} - {grupo.horafin?.substring(0, 5)}</span>
                            </div>
                            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                <Users className="h-4 w-4" />
                                <span>{grupo.plazas_ocupadas} / {grupo.plazas} plazas</span>
                            </div>
                            <div className="flex items-center space-x-2 text-sm text-muted-foreground">
                                <MapPin className="h-4 w-4" />
                                <span>Aula: {grupo.idaula}</span>
                            </div>
                            <div className="flex items-center space-x-2 text-sm text-muted-foreground font-medium text-foreground">
                                <span>{grupo.dias}</span>
                            </div>
                        </div>

                        {/* Capacity Progress Bar */}
                        <div className="w-full bg-secondary h-2 rounded-full overflow-hidden mb-6">
                            <div
                                className={cn(
                                    "h-full rounded-full transition-all duration-500",
                                    (grupo.plazas_ocupadas / grupo.plazas) > 0.9 ? 'bg-orange-500' : 'bg-primary'
                                )}
                                style={{ width: `${(grupo.plazas_ocupadas / grupo.plazas) * 100}%` }}
                            />
                        </div>

                        <div className="flex justify-between items-center pt-4 border-t border-border">
                            <div className="text-xs text-muted-foreground">
                                {grupo.plazas_libres} plazas disponibles
                            </div>
                            <button className="text-primary text-sm font-semibold hover:underline">Ver Alumnos</button>
                        </div>
                    </div>
                )) : (
                    <div className="col-span-full py-10 text-center text-muted-foreground">
                        No se encontraron grupos activos.
                    </div>
                )}
            </div>
        </div>
    );
}

// Helper to use cn in server components (or import from utils)
function cn(...inputs: any[]) {
    return inputs.filter(Boolean).join(' ');
}