import { Icon } from "@iconify/react";
import { Box, Button, Chip, Paper, Stack, Tab, Tabs, Typography } from "@mui/material";
import { useNavigate, useSearchParams } from "react-router-dom";
import { EmptyState, ScreenGuia } from "../../components/_standards";
import { CertificadosTab } from "../../components/organismos/inmobiliario/obra/CertificadosTab";
import { CostosTab } from "../../components/organismos/inmobiliario/obra/CostosTab";
import { CostoUnidadesTab } from "../../components/organismos/inmobiliario/obra/CostoUnidadesTab";
import { PresupuestoTab } from "../../components/organismos/inmobiliario/obra/PresupuestoTab";
import { useProyectoObra } from "../../components/organismos/inmobiliario/obra/useObra";
import { ProyectoFiltro } from "../../components/organismos/inmobiliario/operaciones/ProyectoFiltro";
import { usePermission } from "../../hooks/usePermission";

const GUIA_PASOS = [
  {
    icon: "mdi:clipboard-list-outline",
    color: "#60a5fa",
    titulo: "1. Cargá el presupuesto",
    desc: "Por partidas agrupadas en rubros (código, nombre y monto sin IVA). Podés pegarlas desde una planilla de Excel.",
  },
  {
    icon: "mdi:file-certificate-outline",
    color: "#fbbf24",
    titulo: "2. Certificá el avance",
    desc: "Cada medición de un contratista es un certificado: al aprobarlo se imputa a la partida, sube su avance y se retiene el fondo de reparo.",
  },
  {
    icon: "mdi:tray-arrow-down",
    color: "#f472b6",
    titulo: "3. Imputá compras y gastos",
    desc: "Repartí entre las partidas las compras y gastos de la obra (todo o una parte) o cargá costos a mano, como jornales.",
  },
  {
    icon: "mdi:chart-box-outline",
    color: "#34d399",
    titulo: "4. Controlá",
    desc: "Presupuesto contra ejecutado y desvío por partida y rubro, y el costo de cada unidad prorrateado por superficie.",
  },
];

const GUIA_NOTAS = [
  { icon: "mdi:cash-remove", text: "Todo va sin IVA (el IVA es crédito fiscal) y en la moneda del proyecto. Lo que está en otra moneda se convierte con la cotización del comprobante." },
  { icon: "mdi:scale-unbalanced", text: "Desvío = ejecutado − presupuesto × avance. Positivo (en rojo): se gastó más de lo que justifica la obra hecha." },
  { icon: "mdi:information-outline", text: "Compras y gastos no se modifican: acá sólo se reparten entre las partidas." },
];

const PESTANAS = [
  { value: "presupuesto", label: "Presupuesto", icon: "mdi:clipboard-list-outline", permiso: "INM_OBR_PRESUPUESTO_VER" },
  { value: "certificados", label: "Certificados", icon: "mdi:file-certificate-outline", permiso: "INM_OBR_CERTIFICADO_VER" },
  { value: "costos", label: "Costos", icon: "mdi:cash-register", permiso: "INM_OBR_COSTO_VER" },
  { value: "unidades", label: "Costo por unidad", icon: "mdi:home-city-outline", permiso: "INM_OBR_COSTO_VER" },
];

export function InmObra() {
  const navigate = useNavigate();
  const { can } = usePermission("INMOBILIARIO");
  const pestanas = PESTANAS.filter((t) => can(t.permiso));

  // Proyecto y pestaña viven en la URL: el enlace se puede compartir y "Volver" los conserva.
  const [params, setParams] = useSearchParams();
  const proyectoId = params.get("proyecto") ?? "";
  const pedida = params.get("tab");
  const tab = pestanas.some((t) => t.value === pedida) ? pedida : (pestanas[0]?.value ?? "");
  const actualizar = (cambios) =>
    setParams(
      (prev) => {
        const p = new URLSearchParams(prev);
        Object.entries(cambios).forEach(([k, v]) => (v ? p.set(k, v) : p.delete(k)));
        return p;
      },
      { replace: true },
    );

  const { data: proyecto } = useProyectoObra(proyectoId);

  if (!pestanas.length) return null;

  return (
    <Box sx={{ p: { xs: 2, md: 3 } }}>
      <Stack spacing={2}>
        <ScreenGuia
          moduloPadre="Inmobiliario"
          intro="El control de la obra de cada proyecto: presupuesto por partidas, certificados de los contratistas, costos imputados y costo por unidad."
          pasos={GUIA_PASOS}
          notas={GUIA_NOTAS}
        />

        <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
          <Icon icon="mdi:crane" width={24} />
          <Typography variant="h6" fontWeight={700} sx={{ flex: "1 1 auto" }}>
            Obra
          </Typography>
          {proyectoId && can("INM_PRO_PROYECTO_VER") && (
            <Button size="small" startIcon={<Icon icon="mdi:office-building-outline" />} onClick={() => navigate(`/inmobiliario/proyectos/${proyectoId}`)}>
              Ver el proyecto
            </Button>
          )}
        </Stack>

        <Paper variant="outlined" sx={{ p: 1.5 }}>
          <Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap" useFlexGap>
            <ProyectoFiltro value={proyectoId} onChange={(id) => actualizar({ proyecto: id })} sx={{ flex: "1 1 320px", maxWidth: 520 }} />
            {proyecto && (
              <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
                <Chip size="small" variant="outlined" label={proyecto.codigo} />
                <Chip size="small" color="info" variant="outlined" label={`Montos sin IVA en ${proyecto.moneda?.codigo ?? "PYG"}`} />
              </Stack>
            )}
          </Stack>
        </Paper>

        {!proyectoId ? (
          <Paper variant="outlined">
            <EmptyState
              icon="mdi:crane"
              title="Elegí un proyecto"
              description="El presupuesto, los certificados y los costos de obra son por proyecto. Buscalo arriba por nombre o código."
              ctaLabel={can("INM_PRO_PROYECTO_VER") ? "Ver proyectos" : undefined}
              ctaIcon="mdi:office-building-outline"
              onCta={() => navigate("/inmobiliario/proyectos")}
            />
          </Paper>
        ) : (
          <>
            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
              <Tabs
                value={tab}
                onChange={(_, v) => actualizar({ tab: v === pestanas[0]?.value ? "" : v })}
                variant="scrollable"
                allowScrollButtonsMobile
                aria-label="Secciones de la obra"
              >
                {pestanas.map((t) => (
                  <Tab
                    key={t.value}
                    value={t.value}
                    label={t.label}
                    icon={<Icon icon={t.icon} width={18} />}
                    iconPosition="start"
                    sx={{ minHeight: 48 }}
                  />
                ))}
              </Tabs>
            </Box>

            {tab === "presupuesto" && (
              <PresupuestoTab
                proyectoId={proyectoId}
                canCrear={can("INM_OBR_PRESUPUESTO_CREAR")}
                canEditar={can("INM_OBR_PRESUPUESTO_EDITAR")}
                canEliminar={can("INM_OBR_PRESUPUESTO_ELIMINAR")}
              />
            )}
            {tab === "certificados" && (
              <CertificadosTab
                proyectoId={proyectoId}
                perms={{
                  crear: can("INM_OBR_CERTIFICADO_CREAR"),
                  aprobar: can("INM_OBR_CERTIFICADO_APROBAR"),
                  anular: can("INM_OBR_CERTIFICADO_ANULAR"),
                  // Elegir la factura usa el listado de imputables, que pide INM_OBR_COSTO_IMPUTAR.
                  vincular: can("INM_OBR_CERTIFICADO_CREAR"),
                }}
              />
            )}
            {tab === "costos" && (
              <CostosTab
                proyectoId={proyectoId}
                canImputar={can("INM_OBR_COSTO_IMPUTAR")}
                canEliminar={can("INM_OBR_COSTO_ELIMINAR")}
              />
            )}
            {tab === "unidades" && (
              <CostoUnidadesTab
                proyectoId={proyectoId}
                onVerUnidades={
                  can("INM_PRO_PROYECTO_VER") ? () => navigate(`/inmobiliario/proyectos/${proyectoId}?tab=unidades`) : undefined
                }
              />
            )}
          </>
        )}
      </Stack>
    </Box>
  );
}

export default InmObra;