import { Icon } from "@iconify/react";
import { Box, Container, Tab, Tabs, Typography } from "@mui/material";
import styled from "styled-components";
import { useSearchParams } from "react-router-dom";
import { RecibosPanel } from "../../components/organismos/RecibosPanel";
import { ConfiguracionRecibosTab } from "../../components/cobranzas/ConfiguracionRecibosTab";
import { usePermission } from "../../hooks/usePermission";

const TABS = [
  { key: "listado", label: "Listado", icon: "lucide:list" },
  { key: "config", label: "Configuración", icon: "lucide:settings-2" },
];

function TabPanel({ children, value, index }) {
  return (
    <div role="tabpanel" hidden={value !== index}>
      {value === index && <Box sx={{ pt: 2 }}>{children}</Box>}
    </div>
  );
}

export function RecibosPage() {
  const { can: canCobranzas } = usePermission("COBRANZAS");
  const [searchParams, setSearchParams] = useSearchParams();
  const tabIdx = Math.max(
    0,
    TABS.findIndex((t) => t.key === (searchParams.get("tab") ?? "listado")),
  );
  const setTab = (idx) =>
    setSearchParams({ tab: TABS[idx]?.key ?? "listado" }, { replace: true });

  if (!canCobranzas("COB_REC_RECIBO_VER")) {
    return (
      <Container maxWidth="xl" sx={{ py: 3 }}>
        <Typography variant="body2" color="text.secondary">
          No tenés permisos para ver esta sección.
        </Typography>
      </Container>
    );
  }

  return (
    <Container maxWidth="xl" sx={{ py: 3 }}>
      <Box mb={2}>
        <Typography variant="h5" fontWeight={700}>
          Recibos de Cobro
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Listado y consulta de recibos emitidos. Para emitir nuevos cobros,
          usá el wizard de Cobros.
        </Typography>
      </Box>

      <TabsBar>
        <Tabs
          value={tabIdx}
          onChange={(_, v) => setTab(v)}
          variant="scrollable"
          scrollButtons="auto"
          sx={{
            "& .MuiTabs-indicator": { background: "#f88533" },
            "& .Mui-selected": { color: "#f88533 !important" },
            minHeight: 44,
          }}
        >
          {TABS.map(({ label, icon }) => (
            <Tab
              key={label}
              label={
                <TabLabel>
                  <Icon icon={icon} />
                  {label}
                </TabLabel>
              }
              sx={{
                minHeight: 44,
                fontSize: 13,
                textTransform: "none",
                fontWeight: 600,
                color: "inherit",
              }}
            />
          ))}
        </Tabs>
      </TabsBar>

      <TabContent>
        <TabPanel value={tabIdx} index={0}>
          <RecibosPanel />
        </TabPanel>
        <TabPanel value={tabIdx} index={1}>
          <ConfiguracionRecibosTab />
        </TabPanel>
      </TabContent>
    </Container>
  );
}

export default RecibosPage;

const TabsBar = styled.div`
  background: ${({ theme }) => theme.bg2};
  border-radius: 10px 10px 0 0;
  border: 1px solid ${({ theme }) => theme.color2};
  border-bottom: none;
  padding: 0 8px;
`;
const TabContent = styled.div`
  background: ${({ theme }) => theme.bg1};
  border-radius: 0 0 12px 12px;
  border: 1px solid ${({ theme }) => theme.color2};
  border-top: none;
  padding: 20px;
  min-height: 400px;
`;
const TabLabel = styled.span`
  display: flex;
  align-items: center;
  gap: 7px;
  svg {
    width: 16px;
    height: 16px;
  }
`;