"use client";

import { useState, useEffect } from "react";
import { envConfig } from "@/app/lib/config";
import axios from "axios";
import Cookies from "js-cookie";
import * as XLSX from "xlsx";
import { saveAs } from "file-saver";

import {
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
  Line,
  LineChart,
} from "recharts";

interface TotalServicioPeriodo {
  nombre_servicio: string;
  periodo: string;
  monto_total: number;
}

interface Servicio {
  id_servicio: number;
  servicio: string;
}

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

export default function ReporteTotalesPage() {
  const [totales, setTotales] = useState<TotalServicioPeriodo[]>([]);
  const [servicios, setServicios] = useState<Servicio[]>([]);
  const [periodos, setPeriodos] = useState<Periodo[]>([]);
  const [cargando, setCargando] = useState(true);
  const [periodoInicio, setPeriodoInicio] = useState<string>("");
  const [periodoFin, setPeriodoFin] = useState<string>("");
  const [servicioId, setServicioId] = useState<string>("");

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

  // 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}: ${entry.value.toFixed(2)}
            </div>
          ))}
        </div>
      );
    }
    return null;
  };

  // EXPORTAR EXCEL PIVOT
  const exportarExcelPivot = () => {
    if (!totales.length) return;

    const periodosUnicos = Array.from(new Set(totales.map((t) => t.periodo))).sort();
    const serviciosUnicos = Array.from(new Set(totales.map((t) => t.nombre_servicio)));

    const dataExcel = serviciosUnicos.map((servicio) => {
      const fila: any = { Servicio: servicio };

      periodosUnicos.forEach((periodo) => {
        const item = totales.find(
          (t) => t.nombre_servicio === servicio && t.periodo === periodo
        );
        fila[periodo] = item ? item.monto_total : 0;
      });

      // total por fila
      fila["Total"] = periodosUnicos.reduce(
        (acc, periodo) => acc + (fila[periodo] || 0),
        0
      );

      return fila;
    });

    const worksheet = XLSX.utils.json_to_sheet(dataExcel);

    worksheet["!cols"] = [
      { wch: 30 },
      ...periodosUnicos.map(() => ({ wch: 15 })),
      { wch: 15 },
    ];

    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Pivot");

    const excelBuffer = XLSX.write(workbook, {
      bookType: "xlsx",
      type: "array",
    });

    const data = new Blob([excelBuffer], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
    });

    saveAs(data, "reporte_pivot.xlsx");
  };

  // FETCH
  useEffect(() => {
    const fetchData = async () => {
      try {
        const [serviciosRes, periodosRes] = await Promise.all([
          axios.get(`${envConfig.apiUrl}/servicio`, { headers }),
          axios.get(`${envConfig.apiUrl}/periodo`, { headers }),
        ]);
        setServicios(serviciosRes.data);
        setPeriodos(periodosRes.data);
      } catch (error) {
        console.error("Error al cargar datos", error);
      }
    };
    fetchData();
  }, []);

  const obtenerTotales = async () => {
    setCargando(true);
    try {
      const params = new URLSearchParams();
      if (periodoInicio) params.append("periodoInicio", periodoInicio);
      if (periodoFin) params.append("periodoFin", periodoFin);
      if (servicioId) params.append("servicioId", servicioId);

      const url = `${envConfig.apiUrl}/detalle-servicio/totales-por-periodo?${params.toString()}`;
      const res = await axios.get(url, { headers });
      setTotales(res.data);
    } catch (error) {
      console.error("Error al obtener totales", error);
    } finally {
      setCargando(false);
    }
  };

  const aplicarFiltros = () => {
    obtenerTotales();
  };

  // DATA PARA GRAFICA
  const transformDataForChart = () => {
    const periodosUnicos = Array.from(new Set(totales.map((t) => t.periodo))).sort();
    const serviciosUnicos = Array.from(new Set(totales.map((t) => t.nombre_servicio)));

    const data = periodosUnicos.map((periodo) => {
      const row: any = { periodo };
      serviciosUnicos.forEach((servicio) => {
        const item = totales.find(
          (t) => t.periodo === periodo && t.nombre_servicio === servicio
        );
        row[servicio] = item ? item.monto_total : 0;
      });
      return row;
    });

    return { data, serviciosUnicos };
  };

  const { data: chartData, serviciosUnicos } = transformDataForChart();

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

  return (
    <div>
      <h1 style={{ color: "rgb(3, 1, 72)", marginBottom: "20px" }}>
        REPORTE DE TOTALES POR SERVICIO Y PERIODO
      </h1>

      <div style={{ marginBottom: "20px", display: "flex", gap: "10px", flexWrap: "wrap" }}>
        <select value={periodoInicio} onChange={(e) => setPeriodoInicio(e.target.value)}>
          <option value="">Periodo inicio</option>
          {periodos.map((p) => (
            <option key={p.id_periodo} value={p.id_periodo}>
              {p.semestre}
            </option>
          ))}
        </select>

        <select value={periodoFin} onChange={(e) => setPeriodoFin(e.target.value)}>
          <option value="">Periodo fin</option>
          {periodos.map((p) => (
            <option key={p.id_periodo} value={p.id_periodo}>
              {p.semestre}
            </option>
          ))}
        </select>

        <select value={servicioId} onChange={(e) => setServicioId(e.target.value)}>
          <option value="">Todos los servicios</option>
          {servicios.map((s) => (
            <option key={s.id_servicio} value={s.id_servicio}>
              {s.servicio}
            </option>
          ))}
        </select>

        <button onClick={aplicarFiltros}>Filtrar</button>
        <button onClick={exportarExcelPivot}>Exportar Excel</button>
      </div>

      {cargando ? (
        <p>Cargando...</p>
      ) : (
        <div style={{ display: "flex", gap: "50px", flexWrap: "wrap" }}>
          
          {/* TABLA */}
          <div style={{ flex: 1, minWidth: "500px", maxHeight: "500px", overflow: "auto" }}>
            <table style={{ width: "100%" }}>
              <thead>
                <tr>
                  <th>Servicio</th>
                  <th>Periodo</th>
                  <th>Monto</th>
                </tr>
              </thead>
              <tbody>
                {totales.map((item, i) => (
                  <tr key={i}>
                    <td>{item.nombre_servicio}</td>
                    <td>{item.periodo}</td>
                    <td>${item.monto_total.toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* GRAFICA */}
          <div style={{ flex: 1, minWidth: "700px", background: "white" }}>
            <ResponsiveContainer width="100%" height={400}>
              <LineChart data={chartData}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="periodo" />
                <YAxis />
                <Tooltip content={<CustomTooltip />} />
                <Legend />
                
                {serviciosUnicos.map((servicio, i) => (
                  <Line
                    key={servicio}
                    dataKey={servicio}
                    stroke={colors[i % colors.length]}
                    type="monotone"
                  />
                ))}
              </LineChart>
            </ResponsiveContainer>
          </div>

        </div>
      )}
    </div>
  );
}