import { Icon } from "@iconify/react";
import { Box, Tab, Tabs } from "@mui/material";
import { useSearchParams } from "react-router-dom";
import { RRHHGuia } from "./_shared/RRHHGuia";
import { RRHHPrereqChecklist } from "./_shared/RRHHPrereqChecklist";
import { LegajoFuncionarioTab } from "./legajos/LegajoFuncionarioTab";
import { LegajosConsultaTab } from "./legajos/LegajosConsultaTab";
import { LegajosDashboardTab } from "./legajos/LegajosDashboardTab";
import { LegajosTiposTab } from "./legajos/LegajosTiposTab";

const SUB_TABS = [
  { key: "funcionario", label: "Legajo por funcionario", icon: "lucide:user-search" },
  { key: "vencimientos", label: "Vencimientos", icon: "lucide:alarm-clock" },
  { key: "consulta", label: "Consulta avanzada", icon: "lucide:search" },
  { key: "tipos", label: "Catálogo de tipos", icon: "lucide:tags" },
];

const VALID = new Set(SUB_TABS.map((t) => t.key));

export function LegajosTab() {
  const [searchParams, setSearchParams] = useSearchParams();
  const raw = searchParams.get("subtab") ?? "funcionario";
  const activeSubTab = VALID.has(raw) ? raw : "funcionario";

  const setActiveSubTab = (value) =>
    setSearchParams(
      (prev) => {
        const params = new URLSearchParams(prev);
        params.set("subtab", value);
        return params;
      },
      { replace: true },
    );

  return (
    <Box>
      <RRHHGuia seccion="legajos" />
      <RRHHPrereqChecklist tabKey="legajos" />

      <Box sx={{ borderBottom: 1, borderColor: "divider", mb: 1.5 }}>
        <Tabs
          value={activeSubTab}
          onChange={(_, value) => setActiveSubTab(value)}
          variant="scrollable"
          scrollButtons="auto"
          textColor="secondary"
          indicatorColor="secondary"
        >
          {SUB_TABS.map((tab) => (
            <Tab
              key={tab.key}
              value={tab.key}
              id={`rrhh-legajos-subtab-${tab.key}`}
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 0.75 }}>
                  <Icon icon={tab.icon} width={16} />
                  <span>{tab.label}</span>
                </Box>
              }
            />
          ))}
        </Tabs>
      </Box>

      {activeSubTab === "funcionario" && <LegajoFuncionarioTab />}
      {activeSubTab === "vencimientos" && <LegajosDashboardTab />}
      {activeSubTab === "consulta" && <LegajosConsultaTab />}
      {activeSubTab === "tipos" && <LegajosTiposTab />}
    </Box>
  );
}