import { Icon } from "@iconify/react";
import { Alert, Box, Tab, Tabs } from "@mui/material";
import { useSearchParams } from "react-router-dom";
import { RRHHGuia } from "./_shared/RRHHGuia";
import { CargosTab } from "./CargosTab";
import { CentrosCostoTab } from "./CentrosCostoTab";
import { ConceptosTab } from "./ConceptosTab";
import { ConsumoFuncionarioTab } from "./ConsumoFuncionarioTab";
import { DepartamentosTab } from "./DepartamentosTab";
import { FormatosBancariosTab } from "./FormatosBancariosTab";
import { ParametrosTab } from "./ParametrosTab";
import { TiposEmpleadoTab } from "./TiposEmpleadoTab";

const SUB_TABS = [
  { key: "cargos", label: "Cargos", icon: "lucide:badge-check" },
  { key: "departamentos", label: "Departamentos", icon: "lucide:building-2" },
  { key: "tipos", label: "Tipos de empleado", icon: "lucide:file-badge" },
  { key: "centros-costo", label: "Centros de costo", icon: "lucide:wallet" },
  { key: "conceptos", label: "Conceptos de liquidación", icon: "lucide:scroll-text" },
  { key: "parametros", label: "Parámetros del sistema", icon: "lucide:settings-2" },
  { key: "formatos-bancarios", label: "Formatos bancarios", icon: "lucide:landmark" },
  { key: "consumo-funcionarios", label: "Consumo de funcionarios", icon: "lucide:shopping-bag" },
];

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

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

  return (
    <Box>
      <RRHHGuia seccion="configuracion" defaultOpen />
      <Alert severity="warning" icon={<Icon icon="mdi:alert-circle-outline" width={20} />} sx={{ mb: 2 }}>
        <strong>Primer paso obligatorio.</strong> Sin completar Parámetros, Conceptos, Cargos y Departamentos, las pestañas operativas (Empleados, Liquidaciones, IPS, Acreditaciones) no funcionarán correctamente.
      </Alert>
      <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}
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 0.75 }}>
                  <Icon icon={tab.icon} width={16} />
                  <span>{tab.label}</span>
                </Box>
              }
            />
          ))}
        </Tabs>
      </Box>

      {activeSubTab === "cargos" && <CargosTab />}
      {activeSubTab === "departamentos" && <DepartamentosTab />}
      {activeSubTab === "tipos" && <TiposEmpleadoTab />}
      {activeSubTab === "centros-costo" && <CentrosCostoTab />}
      {activeSubTab === "conceptos" && <ConceptosTab />}
      {activeSubTab === "parametros" && <ParametrosTab />}
      {activeSubTab === "formatos-bancarios" && <FormatosBancariosTab />}
      {activeSubTab === "consumo-funcionarios" && <ConsumoFuncionarioTab />}
    </Box>
  );
}