"use client";

import { useEffect, useState } from "react";
import axios from "axios";
import Cookies from "js-cookie";

import {
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
    ResponsiveContainer,
    Line,
    LineChart,
} from "recharts";
import PeriodoPicker from "@/app/Components/PeriodoPicker/periodoPicker";
import * as XLSX from "xlsx";

interface Periodo {
    id_periodo: number;
    semestre: string;
    fecha_inicio_servicio: string;
    fecha_fin_servicio: string;
}


export default function PorServicio() {
    const [data, setData] = useState<any[]>([]);
    const [periodos, setPeriodos] = useState<Periodo[]>([]);
    const [loading, setLoading] = useState(false);
    const [serviciosSeleccionados, setServiciosSeleccionados] = useState<string[]>([]);

    const [periodo1, setPeriodo1] = useState<Periodo | null>(null);
    const [periodo2, setPeriodo2] = useState<Periodo | null>(null);

    useEffect(() => {
        if (!periodo1 || !periodo2) return;

        const fetchServicios = async () => {
            setLoading(true);

            try {
                const token = Cookies.get("token");
                const headers = { Authorization: `Bearer ${token}` };

                // 🔥 1. traer TODOS los periodos en rango
                const resPeriodos = await axios.get(
                    `${process.env.NEXT_PUBLIC_API_URL}/periodo/range?p1=${periodo1.id_periodo}&p2=${periodo2.id_periodo}`,
                    { headers }
                );

                const periodosRango = resPeriodos.data;
                setPeriodos(periodosRango);

                // 🔥 2. hacer requests por cada periodo
                const resultados = await Promise.all(
                    periodosRango.map((p: Periodo) =>
                        axios.post(
                            `${process.env.NEXT_PUBLIC_API_URL}/detalle-servicio/rango`,
                            {
                                desde: p.fecha_inicio_servicio,
                                hasta: p.fecha_fin_servicio,
                            },
                            { headers }
                        )
                    )
                );

                // 🔥 3. merge dinámico
                const map = new Map();

                periodosRango.forEach((p: Periodo, index: number) => {
                    resultados[index].data.forEach((item: any) => {
                        if (!map.has(item.servicio)) {
                            map.set(item.servicio, {
                                servicio: item.servicio,
                            });
                        }

                        map.get(item.servicio)[p.semestre] = Number(item.total);
                    });
                });

                const finalData = Array.from(map.values());
                setData(finalData);
                setServiciosSeleccionados(finalData.map((item: any) => item.servicio));
            } catch (error) {
                console.error("Error comparando servicios", error);
            } finally {
                setLoading(false);
            }
        };

        fetchServicios();
    }, [periodo1, periodo2]);

    // 🔥 TRANSFORMAR DATA PARA GRAFICA
    const transformDataForChart = () => {
        if (!data.length || !periodos.length) return [];

        return periodos.map((p) => {
            const row: any = { periodo: p.semestre };

            data.forEach((servicio) => {
                row[servicio.servicio] = servicio[p.semestre] || 0;
            });

            return row;
        });
    };

    // EXPORTAR A EXCEL
    const exportToExcel = () => {
        if (!data || data.length === 0) return;

        const exportData = data.map((row) => {
            const newRow: any = { Servicio: row.servicio };
            periodos.forEach((p) => {
                newRow[p.semestre] = row[p.semestre] || 0;
            });
            return newRow;
        });

        const worksheet = XLSX.utils.json_to_sheet(exportData);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Ingresos");

        XLSX.writeFile(workbook, "Reporte_Ingresos_Servicio.xlsx");
    };

    // FORMATO DE NUMEROS
    const formatNumber = (value: number) => {
        return value.toLocaleString("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        });
    };

    // TOOLTIP ORDENADO
    const CustomTooltip = ({ active, payload, label }: any) => {
        if (active && payload && payload.length) {
            const sorted = [...payload]
                .filter((item) => item.value > 0)
                .sort((a, b) => b.value - a.value);

            return (
                <div
                    style={{
                        background: "white",
                        padding: "10px",
                        border: "1px solid #ccc",
                        borderRadius: "8px",
                    }}
                >
                    <p style={{ fontWeight: "bold" }}>
                        Periodo: {label}
                    </p>

                    {sorted.map((entry: any, index: number) => (
                        <div key={index} style={{ color: entry.color }}>
                            {entry.name}: ${formatNumber(entry.value)}
                        </div>
                    ))}
                </div>
            );
        }

        return null;
    };


    const chartData = transformDataForChart();

    const colors = ["black", "red", "blue", "orange", "purple", "green"];

    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>

            <PeriodoPicker
                onChange={(p1, p2) => {
                    setPeriodo1(p1);
                    setPeriodo2(p2);
                }}
            />

            {!periodo1 || !periodo2 ? (
                <p>Seleccione un rango de periodos</p>
            ) : (
                <>
                    {/* CONTROLES SUPERIORES */}
                    <div
                        style={{
                            display: "flex",
                            alignItems: "center",
                            gap: "20px",
                            flexWrap: "wrap",
                            padding: "10px 0",
                        }}
                    >
                        <button
                            onClick={exportToExcel}
                            disabled={data.length === 0}
                            style={{
                                padding: "8px 16px",
                                backgroundColor:
                                    data.length === 0 ? "#ccc" : "#10b981",
                                color: "white",
                                border: "none",
                                borderRadius: "4px",
                                cursor:
                                    data.length === 0
                                        ? "not-allowed"
                                        : "pointer",
                                fontWeight: "bold",
                            }}
                        >
                            Exportar a Excel
                        </button>

                        {data.map((servicio) => (
                            <label
                                key={servicio.servicio}
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: "5px",
                                    whiteSpace: "nowrap",
                                }}
                            >
                                <input
                                    type="checkbox"
                                    checked={serviciosSeleccionados.includes(
                                        servicio.servicio
                                    )}
                                    onChange={(e) => {
                                        if (e.target.checked) {
                                            setServiciosSeleccionados((prev) => [
                                                ...prev,
                                                servicio.servicio,
                                            ]);
                                        } else {
                                            setServiciosSeleccionados((prev) =>
                                                prev.filter(
                                                    (s) =>
                                                        s !==
                                                        servicio.servicio
                                                )
                                            );
                                        }
                                    }}
                                />
                                {servicio.servicio}
                            </label>
                        ))}
                    </div>

                    {/* TABLA Y GRÁFICA */}
                    <div
                        style={{
                            display: "flex",
                            gap: "30px",
                            alignItems: "flex-start",
                            flexWrap: "wrap",
                        }}
                    >
                        {/* COLUMNA IZQUIERDA: TABLA */}
                        <div
                            style={{
                                flex: "1 1 300px",
                                display: "flex",
                                flexDirection: "column",
                                gap: "20px",
                            }}
                        >
                            <div
                                style={{
                                    overflow: "auto",
                                    maxHeight: "400px",
                                }}
                            >
                                {loading && <p>Cargando...</p>}

                                <table style={{ width: "100%" }}>
                                    <thead>
                                        <tr>
                                            <th>Servicio</th>

                                            {periodos.map((p) => (
                                                <th key={p.id_periodo}>
                                                    {p.semestre}
                                                </th>
                                            ))}
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {!loading && data.length === 0 && (
                                            <tr>
                                                <td
                                                    colSpan={
                                                        periodos.length + 1
                                                    }
                                                >
                                                    No hay datos en este rango
                                                </td>
                                            </tr>
                                        )}

                                        {data.map((row) => (
                                            <tr key={row.servicio}>
                                                <td>{row.servicio}</td>

                                                {periodos.map((p) => (
                                                    <td
                                                        key={p.id_periodo}
                                                    >
                                                        $
                                                        {formatNumber(
                                                            row[
                                                            p.semestre
                                                            ] || 0
                                                        )}
                                                    </td>
                                                ))}
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {/* COLUMNA DERECHA: GRÁFICA */}
                        <div
                            style={{
                                flex: "2 1 500px",
                                minWidth: "500px",
                                background: "white",
                            }}
                        >
                            {chartData.length > 0 && (
                                <ResponsiveContainer
                                    width="100%"
                                    height={400}
                                >
                                    <LineChart data={chartData}>
                                        <CartesianGrid strokeDasharray="3 3" />

                                        <XAxis dataKey="periodo" />

                                        <YAxis
                                            tickFormatter={(value) =>
                                                value.toLocaleString()
                                            }
                                        />

                                        <Tooltip
                                            content={<CustomTooltip />}
                                        />

                                        <Legend />

                                        {data
                                            .filter((servicio) =>
                                                serviciosSeleccionados.includes(
                                                    servicio.servicio
                                                )
                                            )
                                            .map((servicio, i) => (
                                                <Line
                                                    key={
                                                        servicio.servicio
                                                    }
                                                    dataKey={
                                                        servicio.servicio
                                                    }
                                                    stroke={
                                                        colors[
                                                        i %
                                                        colors.length
                                                        ]
                                                    }
                                                    type="monotone"
                                                />
                                            ))}
                                    </LineChart>
                                </ResponsiveContainer>
                            )}
                        </div>
                    </div>
                </>
            )}
        </div>
    );
}