import pool from '@/lib/db';
import { Calendar as CalendarIcon, Clock, Users, BookOpen, ClipboardCheck } from 'lucide-react';

async function getRecentSessions() {
    try {
        const [rows]: any = await pool.query(`
      SELECT s.*, g.nombre as nombre_grupo, e.nombre_completo as nombre_profesor
      FROM sesiones s
      JOIN grupos g ON s.idg = g.id
      JOIN empleados e ON s.idp = e.id
      ORDER BY s.fecha DESC, s.hora_inicio DESC
      LIMIT 15
    `);
        return rows;
    } catch (error) {
        return [];
    }
}

export default async function CalendarioPage() {
    const sessions = await getRecentSessions();

    return (
        <div className="space-y-8">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Calendario y Asistencia</h1>
                    <p className="text-muted-foreground mt-2">Registro de sesiones de clase y control de asistencia.</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">
                    <CalendarIcon className="h-5 w-5" />
                    <span>Nueva Sesión</span>
                </button>
            </div>

            <div className="grid gap-6 lg:grid-cols-3">
                <div className="lg:col-span-2 space-y-6">
                    <h3 className="text-lg font-semibold flex items-center">
                        <ClipboardCheck className="h-5 w-5 mr-2 text-primary" />
                        Sesiones Recientes
                    </h3>

                    <div className="grid gap-4">
                        {sessions.map((session: any, i: number) => (
                            <div key={i} className="rounded-xl border border-border bg-card p-5 shadow-sm hover:border-primary/50 transition-colors cursor-pointer group">
                                <div className="flex justify-between items-start">
                                    <div className="flex items-start space-x-4">
                                        <div className="h-12 w-12 rounded-xl bg-secondary flex flex-col items-center justify-center text-xs font-bold">
                                            <span className="text-primary">{new Date(session.fecha).getDate()}</span>
                                            <span className="text-muted-foreground uppercase text-[10px]">
                                                {new Date(session.fecha).toLocaleString('es', { month: 'short' })}
                                            </span>
                                        </div>
                                        <div>
                                            <h4 className="font-bold group-hover:text-primary transition-colors">{session.nombre_grupo}</h4>
                                            <p className="text-sm text-muted-foreground flex items-center mt-1">
                                                <BookOpen className="h-3 w-3 mr-1" /> {session.nombre_profesor}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="text-right">
                                        <div className="flex items-center text-sm font-medium text-foreground">
                                            <Clock className="h-4 w-4 mr-1 text-muted-foreground" />
                                            {session.hora_inicio?.substring(0, 5)} - {session.hora_fin?.substring(0, 5)}
                                        </div>
                                        <span className="text-xs text-muted-foreground mt-1 block">
                                            {session.horas} horas lectivas
                                        </span>
                                    </div>
                                </div>
                                {session.observaciones && (
                                    <div className="mt-4 text-sm text-muted-foreground bg-muted/30 p-2 rounded-lg italic">
                                        "{session.observaciones}"
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                </div>

                <div className="space-y-6">
                    <h3 className="text-lg font-semibold">Resumen de Hoy</h3>
                    <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
                        <div className="space-y-6">
                            <div>
                                <p className="text-sm font-medium text-muted-foreground mb-3 uppercase tracking-wider">Próxima Clase</p>
                                <div className="p-4 rounded-xl bg-primary/5 border border-primary/10">
                                    <p className="font-bold text-primary">Inglés B1 - Grupo A</p>
                                    <p className="text-sm text-foreground mt-1">17:00 - 18:30</p>
                                    <p className="text-xs text-muted-foreground mt-2">Aula 4 • Prof. Ricardo G.</p>
                                </div>
                            </div>

                            <div className="pt-6 border-t border-border">
                                <p className="text-sm font-medium text-muted-foreground mb-3 uppercase tracking-wider">Acciones</p>
                                <div className="grid gap-2">
                                    <button className="w-full text-left p-3 rounded-lg hover:bg-secondary text-sm font-medium flex items-center justify-between group">
                                        Pasar Lista <span className="text-primary opacity-0 group-hover:opacity-100 transition-opacity">→</span>
                                    </button>
                                    <button className="w-full text-left p-3 rounded-lg hover:bg-secondary text-sm font-medium flex items-center justify-between group">
                                        Ver Calendario Anual <span className="text-primary opacity-0 group-hover:opacity-100 transition-opacity">→</span>
                                    </button>
                                    <button className="w-full text-left p-3 rounded-lg hover:bg-secondary text-sm font-medium flex items-center justify-between group">
                                        Reporte de Ausencias <span className="text-primary opacity-0 group-hover:opacity-100 transition-opacity">→</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}