"use client";

import { useState } from "react";
import DownloadReporteXLSX from "@/components/Dowload/Reporte";
import Reporte from "@/components/reporteGraficas/reporte";
import Antiguedad from "@/components/AntiguedadEquipo/Antiguedad";

import "../../styles/layout/reporte.scss";

type PreguntaKey = "antiguedad" | "adscripcion";

const LABELS: Record<PreguntaKey, string> = {
  antiguedad: "Antigüedad",
  adscripcion: "Antigüedad por Adscripcion"
};

export default function Page() {
  const [activeTab, setActiveTab] = useState<PreguntaKey>("antiguedad");

  const renderPregunta = () => {
    switch (activeTab) {
      case "antiguedad":
        return (
          <Antiguedad />
        );
      case "adscripcion":
        return (
          <Reporte />
        );
      default:
        return (
          <div className="p-6 text-center text-gray-500">
            Contenido no disponible aún.
          </div>
        );
    }
  };

  return (
    <div className="scanView_reporte">
      <div className="container_reporte">
        <div className="main-content_reporte">
          <div className="tabs_reporte">
            {Object.entries(LABELS).map(([key, label]) => (
              <button
                key={key}
                className={`tab_reporte ${activeTab === key ? "active" : ""}`}
                onClick={() => setActiveTab(key as PreguntaKey)}
                aria-selected={activeTab === key}
                role="tab"
              >
                {label}
              </button>
            ))}
          </div>
          <div className={`data-table_reporte`}>{renderPregunta()}</div>
        </div>
      </div>
    </div>
  );
}
