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 { AsignacionTurnosPresentismoTab } from "./presentismo/AsignacionTurnosPresentismoTab";
import { LogCorreccionesPresentismoTab } from "./presentismo/LogCorreccionesPresentismoTab";
import { MarcacionesPresentismoTab } from "./presentismo/MarcacionesPresentismoTab";
import { PermisosPresentismoTab } from "./presentismo/PermisosPresentismoTab";
import { RelojesPresentismoTab } from "./presentismo/RelojesPresentismoTab";
import { ToleranciasEspecialesPresentismoTab } from "./presentismo/ToleranciasEspecialesPresentismoTab";
import { TurnosPresentismoTab } from "./presentismo/TurnosPresentismoTab";

const SUB_TABS = [
  { key: "relojes", label: "Relojes", icon: "lucide:clock-3" },
  { key: "turnos", label: "Turnos", icon: "lucide:calendar-range" },
  { key: "asignacion-turnos", label: "Asignación turnos", icon: "lucide:users-round" },
  { key: "marcaciones", label: "Marcaciones", icon: "lucide:scan-line" },
  { key: "permisos", label: "Permisos", icon: "lucide:badge-check" },
  { key: "tolerancias", label: "Tolerancias", icon: "lucide:sliders-horizontal" },
  { key: "log-correcciones", label: "Log de correcciones", icon: "lucide:shield-check" },
];

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

export function PresentismoTab() {
  const [searchParams, setSearchParams] = useSearchParams();
  const rawSub = searchParams.get("subtab") ?? "relojes";
  const activeSubTab = VALID_SUB_TABS.has(rawSub) ? rawSub : "relojes";
  const setActiveSubTab = (value) =>
    setSearchParams((prev) => {
      prev.set("subtab", value);
      return prev;
    }, { replace: true });

  return (
    <Box>
      <RRHHGuia seccion="presentismo" defaultOpen />
      <RRHHPrereqChecklist tabKey="presentismo" />
      <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-presentismo-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 === "relojes" && <RelojesPresentismoTab />}
      {activeSubTab === "turnos" && <TurnosPresentismoTab />}
      {activeSubTab === "asignacion-turnos" && <AsignacionTurnosPresentismoTab />}
      {activeSubTab === "marcaciones" && <MarcacionesPresentismoTab />}
      {activeSubTab === "permisos" && <PermisosPresentismoTab />}
      {activeSubTab === "tolerancias" && <ToleranciasEspecialesPresentismoTab />}
      {activeSubTab === "log-correcciones" && <LogCorreccionesPresentismoTab />}
    </Box>
  );
}