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

async function getCursos() {
    try {
        const [rows]: any = await pool.query('SELECT * FROM cursos ORDER BY nombre');
        return rows;
    } catch (error) {
        console.error('Database Error:', error);
        return [];
    }
}

export default async function CursosPage() {
    const cursos = await getCursos();

    return (
        <div className="space-y-8">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Cursos</h1>
                    <p className="text-muted-foreground mt-2">Configuración de programas educativos y formación.</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 Curso</span>
                </button>
            </div>

            <div className="flex items-center space-x-4 bg-card p-4 rounded-xl border border-border">
                <div className="relative flex-1">
                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
                    <input
                        type="text"
                        placeholder="Buscar por nombre de curso..."
                        className="w-full bg-background border border-border rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/50"
                    />
                </div>
            </div>

            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {cursos.length > 0 ? cursos.map((curso: any) => (
                    <div key={curso.id} className="rounded-xl border border-border bg-card p-6 shadow-sm hover:shadow-md transition-shadow">
                        <div className="flex justify-between items-start mb-4">
                            <div className="rounded-lg bg-primary/10 p-2">
                                <BookOpen className="h-6 w-6 text-primary" />
                            </div>
                            <span className={`px-2 py-1 rounded-full text-xs font-semibold ${curso.activo ? 'bg-emerald-500/10 text-emerald-600' : 'bg-destructive/10 text-destructive-foreground'}`}>
                                {curso.activo ? 'Activo' : 'Inactivo'}
                            </span>
                        </div>
                        <h3 className="text-lg font-bold mb-1">{curso.nombre}</h3>
                        <p className="text-sm text-muted-foreground mb-4">Año Escolar: {curso.anyo_escolar}</p>

                        <div className="space-y-2 mb-6">
                            <div className="flex justify-between text-sm">
                                <span className="text-muted-foreground">Inicio:</span>
                                <span className="font-medium">{new Date(curso.fechainicio).toLocaleDateString()}</span>
                            </div>
                            <div className="flex justify-between text-sm">
                                <span className="text-muted-foreground">Fin:</span>
                                <span className="font-medium">{new Date(curso.fechafin).toLocaleDateString()}</span>
                            </div>
                            <div className="flex justify-between text-sm">
                                <span className="text-muted-foreground">Precio Material:</span>
                                <span className="font-medium">€{curso.precio_material}</span>
                            </div>
                        </div>

                        <div className="pt-4 border-t border-border flex justify-end">
                            <button className="text-primary text-sm font-semibold hover:underline">Gestionar Grupos</button>
                        </div>
                    </div>
                )) : (
                    <div className="col-span-full py-10 text-center text-muted-foreground">
                        No se encontraron cursos registrados.
                    </div>
                )}
            </div>
        </div>
    );
}