'use client';

import { useState, useEffect } from 'react';
import { Download, Loader2, Calendar, User } from 'lucide-react';
import { Tecnico } from '../../agenda/_components/agenda-content';

export default function InformesFichajeTab() {
    const [tecnicos, setTecnicos] = useState<Tecnico[]>([]);
    const [loading, setLoading] = useState(true);

    const [selectedUser, setSelectedUser] = useState('');

    const currentMonth = new Date().getMonth() + 1;
    const currentYear = new Date().getFullYear();

    const [selectedMonth, setSelectedMonth] = useState(currentMonth.toString());
    const [selectedYear, setSelectedYear] = useState(currentYear.toString());

    useEffect(() => {
        fetch('/api/users?role=operario')
            .then(res => res.json())
            .then(data => {
                if (data.success && data.users) {
                    setTecnicos(data.users);
                    if (data.users.length > 0) setSelectedUser(data.users[0].id);
                } else if (Array.isArray(data)) { // Fallback if API changes
                    setTecnicos(data);
                    if (data.length > 0) setSelectedUser(data[0].id);
                }
            })
            .catch(err => console.error(err))
            .finally(() => setLoading(false));
    }, []);

    const handleDownload = () => {
        if (!selectedUser) return;
        window.open(`/api/control-horario/informe?userId=${selectedUser}&month=${selectedMonth}&year=${selectedYear}`, '_blank');
    };

    const meses = [
        { v: '1', l: 'Enero' }, { v: '2', l: 'Febrero' }, { v: '3', l: 'Marzo' },
        { v: '4', l: 'Abril' }, { v: '5', l: 'Mayo' }, { v: '6', l: 'Junio' },
        { v: '7', l: 'Julio' }, { v: '8', l: 'Agosto' }, { v: '9', l: 'Septiembre' },
        { v: '10', l: 'Octubre' }, { v: '11', l: 'Noviembre' }, { v: '12', l: 'Diciembre' }
    ];

    const años = [currentYear - 2, currentYear - 1, currentYear, currentYear + 1];

    return (
        <div className="space-y-6">
            <div className="flex items-center gap-3 border-b border-gray-100 pb-4">
                <div className="bg-[#1a365d]/10 p-2 rounded-lg">
                    <Download className="w-5 h-5 text-[#1a365d]" />
                </div>
                <div>
                    <h2 className="text-lg font-semibold text-gray-900">Extracción de Informes de Fichaje</h2>
                    <p className="text-sm text-gray-500">Descarga el registro horario mensual en formato PDF para adjuntar o inspecciones.</p>
                </div>
            </div>

            <div className="bg-white border text-sm border-gray-200 rounded-xl shadow-sm p-6 w-full max-w-2xl">
                {loading ? (
                    <div className="flex items-center justify-center p-8">
                        <Loader2 className="w-6 h-6 animate-spin text-[#1a365d]" />
                        <span className="ml-2 text-gray-500">Cargando trabajadores...</span>
                    </div>
                ) : (
                    <div className="space-y-5">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                            {/* Trabajador */}
                            <div className="space-y-1">
                                <label className="text-xs font-semibold text-gray-700 flex items-center gap-1.5 uppercase tracking-wide">
                                    <User className="w-3.5 h-3.5" />
                                    Trabajador
                                </label>
                                <select
                                    value={selectedUser}
                                    onChange={(e) => setSelectedUser(e.target.value)}
                                    className="w-full border-gray-200 rounded-lg text-sm focus:ring-[#1a365d] focus:border-[#1a365d] bg-gray-50 py-2.5 px-3"
                                >
                                    {tecnicos.map(t => (
                                        <option key={t.id} value={t.id}>{t.name} ({t.email})</option>
                                    ))}
                                </select>
                            </div>

                            {/* Mes y Año */}
                            <div className="space-y-1">
                                <label className="text-xs font-semibold text-gray-700 flex items-center gap-1.5 uppercase tracking-wide">
                                    <Calendar className="w-3.5 h-3.5" />
                                    Período Mensual
                                </label>
                                <div className="flex gap-2">
                                    <select
                                        value={selectedMonth}
                                        onChange={(e) => setSelectedMonth(e.target.value)}
                                        className="flex-1 border-gray-200 rounded-lg text-sm focus:ring-[#1a365d] focus:border-[#1a365d] bg-gray-50 py-2.5 px-3"
                                    >
                                        {meses.map(m => (
                                            <option key={m.v} value={m.v}>{m.l}</option>
                                        ))}
                                    </select>
                                    <select
                                        value={selectedYear}
                                        onChange={(e) => setSelectedYear(e.target.value)}
                                        className="w-24 border-gray-200 rounded-lg text-sm focus:ring-[#1a365d] focus:border-[#1a365d] bg-gray-50 py-2.5 px-3"
                                    >
                                        {años.map(a => (
                                            <option key={a} value={a}>{a}</option>
                                        ))}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div className="pt-4 border-t border-gray-100 flex justify-end">
                            <button
                                onClick={handleDownload}
                                disabled={!selectedUser}
                                className="flex items-center gap-2 px-5 py-2.5 bg-[#1a365d] text-white rounded-lg hover:bg-[#2c4f82] transition-colors focus:ring-2 focus:ring-offset-2 focus:ring-[#1a365d] font-medium disabled:opacity-50"
                            >
                                <Download className="w-4 h-4" />
                                Generar PDF
                            </button>
                        </div>
                    </div>
                )}
            </div>
        </div>
    );
}