'use client';

import { useState, useEffect } from 'react';
import useSWR from 'swr';
import { Play, Pause, Square, Loader2, Clock, Download } from 'lucide-react';

const fetcher = (url: string) => fetch(url).then(res => res.json());

export default function ControlHorarioWidget() {
    const { data, error, mutate } = useSWR('/api/control-horario', fetcher, {
        refreshInterval: 60000 // Refresh gracefully every minute to keep things softly in sync
    });
    const [loadingAction, setLoadingAction] = useState<string | null>(null);
    const [timerDisplay, setTimerDisplay] = useState('00:00:00');

    const estado = data?.estado || 'NO_INICIADA'; // NO_INICIADA, ACTIVO, EN_PAUSA, FINALIZADO
    const jornada = data?.jornada;

    useEffect(() => {
        if (!jornada) {
            setTimerDisplay('00:00:00');
            return;
        }

        if (estado === 'FINALIZADO') {
            const ms = calculateTotalTime(jornada);
            setTimerDisplay(formatMs(ms));
            return;
        }

        const intervalId = setInterval(() => {
            const ms = calculateTotalTime(jornada);
            setTimerDisplay(formatMs(ms));
        }, 1000);

        return () => clearInterval(intervalId);
    }, [jornada, estado]);

    // Helper to calculate time on the fly
    function calculateTotalTime(jor: any): number {
        if (!jor || !jor.horaEntrada) return 0;

        // Si finalizó, usamos su horaSalida real en vez del offset actual (Date.now)
        const endCursor = jor.horaSalida ? new Date(jor.horaSalida).getTime() : Date.now();
        let totalMs = endCursor - new Date(jor.horaEntrada).getTime();

        // Restar pausas
        if (jor.pausas && jor.pausas.length > 0) {
            for (const pausa of jor.pausas) {
                const startPausa = new Date(pausa.inicio).getTime();
                const endPausa = pausa.fin ? new Date(pausa.fin).getTime() : endCursor; // Si sigue en pausa, descuenta hasta el momento actual
                totalMs -= (endPausa - startPausa);
            }
        }
        return Math.max(totalMs, 0); // No negatives
    }

    function formatMs(ms: number) {
        const totalSeconds = Math.floor(ms / 1000);
        const h = Math.floor(totalSeconds / 3600);
        const m = Math.floor((totalSeconds % 3600) / 60);
        const s = totalSeconds % 60;
        return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
    }

    async function handleAction(action: string) {
        setLoadingAction(action);
        try {
            const res = await fetch('/api/control-horario', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ action })
            });
            if (res.ok) {
                mutate();
            } else {
                const errData = await res.json();
                console.error("Error del servidor:", errData.error);
                alert("Error: " + errData.error);
            }
        } catch (err: any) {
            console.error(err);
            alert("Excepción: " + err.message);
        } finally {
            setLoadingAction(null);
        }
    }

    const handleDownloadReport = () => {
        const d = new Date();
        const m = d.getMonth() + 1;
        const y = d.getFullYear();
        window.open(`/api/control-horario/informe?month=${m}&year=${y}`, '_blank');
    };

    if (error) return null;
    if (!data) return (
        <div className="flex flex-col md:flex-row items-center gap-2 bg-white/50 backdrop-blur border border-gray-200 px-3 py-1.5 rounded-xl shadow-sm text-sm text-gray-400">
            <Loader2 className="w-4 h-4 animate-spin" /> Cargando reloj...
        </div>
    );

    return (
        <div className="flex flex-col md:flex-row items-center gap-2 md:gap-4 bg-white border border-gray-200 px-4 py-2 rounded-xl shadow-[0_2px_10px_rgba(0,0,0,0.06)] scale-95 origin-right">

            <div className="flex items-center gap-2 min-w-[110px]">
                <Clock className={`w-4 h-4 ${estado === 'ACTIVO' ? 'text-green-500 animate-pulse' : estado === 'EN_PAUSA' ? 'text-amber-500' : 'text-gray-400'}`} />
                <span className={`font-mono font-bold text-lg tracking-wider ${estado === 'ACTIVO' ? 'text-gray-900' : estado === 'EN_PAUSA' ? 'text-amber-700' : 'text-gray-500'}`}>
                    {timerDisplay}
                </span>

                <button
                    onClick={handleDownloadReport}
                    className="ml-2 p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors flex items-center justify-center group relative"
                    title="Descargar PDF del Mes Actual"
                >
                    <Download className="w-4 h-4" />
                    <span className="absolute -bottom-8 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 whitespace-nowrap z-50 pointer-events-none transition-opacity">
                        PDF del Mes
                    </span>
                </button>
            </div>

            {/* Buttons Array */}
            <div className="flex items-center gap-1.5">

                {estado === 'NO_INICIADA' && (
                    <button
                        onClick={() => handleAction('ENTRADA')} disabled={loadingAction !== null}
                        className="flex items-center gap-1.5 bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1.5 rounded-lg text-sm font-bold shadow-sm transition-colors disabled:opacity-50"
                    >
                        {loadingAction === 'ENTRADA' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4 fill-current pt-0.5" />}
                        Entrada
                    </button>
                )}

                {estado === 'ACTIVO' && (
                    <>
                        <button
                            onClick={() => handleAction('PAUSA')} disabled={loadingAction !== null}
                            className="flex items-center gap-1.5 bg-amber-400 hover:bg-amber-500 text-amber-900 px-3 py-1.5 rounded-lg text-sm font-bold shadow-sm transition-colors disabled:opacity-50"
                        >
                            {loadingAction === 'PAUSA' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Pause className="w-4 h-4 fill-current" />}
                            Pausar / Comer
                        </button>
                        <button
                            onClick={() => handleAction('SALIDA')} disabled={loadingAction !== null}
                            className="flex items-center gap-1.5 bg-rose-500 hover:bg-rose-600 text-white px-3 py-1.5 rounded-lg text-sm font-bold shadow-sm transition-colors disabled:opacity-50"
                        >
                            {loadingAction === 'SALIDA' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Square className="w-4 h-4 fill-current" />}
                            Finalizar
                        </button>
                    </>
                )}

                {estado === 'EN_PAUSA' && (
                    <>
                        <button
                            onClick={() => handleAction('REANUDACION')} disabled={loadingAction !== null}
                            className="flex items-center gap-1.5 bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1.5 rounded-lg text-sm font-bold shadow-sm transition-colors disabled:opacity-50"
                        >
                            {loadingAction === 'REANUDACION' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4 fill-current pt-0.5" />}
                            Reanudar
                        </button>
                        <button
                            onClick={() => handleAction('SALIDA')} disabled={loadingAction !== null}
                            className="flex items-center gap-1.5 bg-rose-500 hover:bg-rose-600 text-white px-3 py-1.5 rounded-lg text-sm font-bold shadow-sm transition-colors disabled:opacity-50"
                        >
                            {loadingAction === 'SALIDA' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Square className="w-4 h-4 fill-current" />}
                            Finalizar
                        </button>
                    </>
                )}

                {estado === 'FINALIZADO' && (
                    <div className="flex items-center gap-1.5 bg-gray-100 text-gray-500 px-3 py-1.5 rounded-lg text-sm font-bold shadow-inner cursor-not-allowed">
                        <Square className="w-4 h-4 fill-current" />
                        Jornada Finalizada
                    </div>
                )}

            </div>
        </div>
    );
}