import { Icon } from "@iconify/react";
import { Box, Stack, Tab, Tabs, Typography } from "@mui/material";
import { useSearchParams } from "react-router-dom";
import { ScreenGuia } from "../../components/_standards";
import { ComisionesTab } from "../../components/organismos/inmobiliario/comisiones/ComisionesTab";
import { EsquemasTab } from "../../components/organismos/inmobiliario/comisiones/EsquemasTab";
import { usePermission } from "../../hooks/usePermission";

const GUIA_PASOS = [
  {
    icon: "mdi:file-percent-outline",
    color: "#60a5fa",
    titulo: "1. Definí los esquemas",
    desc: "Qué % del precio se paga al vendedor o a la inmobiliaria externa, y en qué hitos: reserva, boleto, un % cobrado, escritura o entrega.",
  },
  {
    icon: "mdi:timer-sand-complete",
    color: "#fbbf24",
    titulo: "2. Se devengan solas",
    desc: "Cada vez que una venta alcanza un hito, se devenga su parte. Si la venta se rescinde, lo no liquidado se revierte (si el esquema lo pide).",
  },
  {
    icon: "mdi:cash-check",
    color: "#34d399",
    titulo: "3. Liquidá",
    desc: "Elegí las devengadas (por ejemplo, las de un beneficiario) y registrá con qué se pagaron: planilla de RRHH u orden de pago.",
  },
];

const GUIA_NOTAS = [
  { icon: "mdi:information-outline", text: "Liquidar acá sólo registra el pago: la planilla o la orden de pago se hacen en su módulo." },
  { icon: "mdi:domain", text: "La comisión de la inmobiliaria externa necesita que la venta la tenga asignada (en el detalle de la venta)." },
];

const TABS = { comisiones: "comisiones", esquemas: "esquemas" };

export function InmComisiones() {
  const { can } = usePermission("INMOBILIARIO");
  const verComisiones = can("INM_COM_COMISION_VER");
  const verEsquemas = can("INM_COM_ESQUEMA_VER");

  // La pestaña vive en la URL: el enlace se puede compartir y "Volver" la conserva.
  const [params, setParams] = useSearchParams();
  const pedida = params.get("tab") === TABS.esquemas ? TABS.esquemas : TABS.comisiones;
  const tab = pedida === TABS.esquemas && !verEsquemas ? TABS.comisiones : pedida === TABS.comisiones && !verComisiones ? TABS.esquemas : pedida;
  const irA = (t) =>
    setParams(
      (prev) => {
        const p = new URLSearchParams(prev);
        if (t === TABS.comisiones) p.delete("tab");
        else p.set("tab", t);
        return p;
      },
      { replace: true },
    );

  if (!verComisiones && !verEsquemas) return null;

  return (
    <Box sx={{ p: { xs: 2, md: 3 } }}>
      <Stack spacing={2}>
        <ScreenGuia
          moduloPadre="Inmobiliario"
          intro="Las comisiones de las ventas inmobiliarias: se configuran por esquema, se devengan solas en cada hito de la venta y acá se registra su liquidación."
          pasos={GUIA_PASOS}
          notas={GUIA_NOTAS}
        />

        <Typography variant="h6" fontWeight={700}>
          Comisiones inmobiliarias
        </Typography>

        <Tabs value={tab} onChange={(_, v) => irA(v)} variant="scrollable" allowScrollButtonsMobile>
          <Tab
            value={TABS.comisiones}
            label="Comisiones"
            icon={<Icon icon="mdi:account-cash-outline" width={18} />}
            iconPosition="start"
            disabled={!verComisiones}
            sx={{ minHeight: 48 }}
          />
          <Tab
            value={TABS.esquemas}
            label="Esquemas"
            icon={<Icon icon="mdi:file-percent-outline" width={18} />}
            iconPosition="start"
            disabled={!verEsquemas}
            sx={{ minHeight: 48 }}
          />
        </Tabs>

        {tab === TABS.comisiones && verComisiones && (
          <ComisionesTab
            canLiquidar={can("INM_COM_COMISION_LIQUIDAR")}
            canVerOperacion={can("INM_OPE_OPERACION_VER")}
            onVerEsquemas={verEsquemas ? () => irA(TABS.esquemas) : undefined}
          />
        )}
        {tab === TABS.esquemas && verEsquemas && (
          <EsquemasTab
            canCrear={can("INM_COM_ESQUEMA_CREAR")}
            canEditar={can("INM_COM_ESQUEMA_EDITAR")}
            canEliminar={can("INM_COM_ESQUEMA_ELIMINAR")}
          />
        )}
      </Stack>
    </Box>
  );
}

export default InmComisiones;