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 { chipDe, INM_TITULAR_TIPOS } from "../../components/_standards/enums/inmobiliario";
import { DistribucionesTab } from "../../components/organismos/inmobiliario/inversores/DistribucionesTab";
import { FideicomisoTab } from "../../components/organismos/inmobiliario/inversores/FideicomisoTab";
import { InversoresTab } from "../../components/organismos/inmobiliario/inversores/InversoresTab";
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:account-cash-outline",
    color: "#60a5fa",
    titulo: "1. Inversores y participación",
    desc: "Quiénes ponen dinero, el terreno o servicios, y qué % de lo que se distribuya les toca. Entre todos, hasta 100 %.",
  },
  {
    icon: "mdi:tray-arrow-down",
    color: "#fbbf24",
    titulo: "2. Aportes y canjes",
    desc: "Registrá cada aporte (dinero, terreno, servicios) y, si se le paga con unidades, entregáselas en canje: quedan bloqueadas a su nombre.",
  },
  {
    icon: "mdi:cash-multiple",
    color: "#34d399",
    titulo: "3. Distribuciones",
    desc: "Cargá el monto a repartir: se calcula lo de cada inversor por su %. Aprobala y registrá cada pago.",
  },
  {
    icon: "mdi:file-chart-outline",
    color: "#f472b6",
    titulo: "4. Informe del período",
    desc: "Ventas, cobros, aportes, costos de obra, avance, cartera e inversores, para la fiduciaria o los inversores. Se emite y queda congelado.",
  },
];

const GUIA_NOTAS = [
  { icon: "mdi:bank-transfer", text: "Los aportes en dinero y los pagos a inversores se mueven por Tesorería: acá se lleva la cuenta de cada inversor." },
  { icon: "mdi:scale-balance", text: "Saldo = recibido (distribuciones + unidades en canje) − aportado. El múltiplo es recibido ÷ aportado, sin considerar el tiempo." },
  { icon: "mdi:calendar-sync", text: "En proyectos en fideicomiso, el día 1 de cada mes se arma solo el borrador del informe del mes anterior." },
];

const PESTANAS = [
  { value: "inversores", label: "Inversores", icon: "mdi:account-cash-outline", permiso: "INM_INV_INVERSOR_VER" },
  { value: "distribuciones", label: "Distribuciones", icon: "mdi:cash-multiple", permiso: "INM_INV_INVERSOR_VER" },
  { value: "fideicomiso", label: "Fideicomiso", icon: "mdi:file-chart-outline", permiso: "INM_INV_FIDEICOMISO_VER" },
];

export function InmInversores() {
  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="Los inversores de cada proyecto (aportes, canjes por unidades y distribuciones) y el informe periódico para la fiduciaria o los inversores."
          pasos={GUIA_PASOS}
          notas={GUIA_NOTAS}
        />

        <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
          <Icon icon="mdi:account-cash-outline" width={24} />
          <Typography variant="h6" fontWeight={700} sx={{ flex: "1 1 auto" }}>
            Inversores y fideicomiso
          </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"
                  variant="outlined"
                  color={proyecto.titular_tipo === "FIDEICOMISO" ? "secondary" : "default"}
                  label={chipDe(INM_TITULAR_TIPOS, proyecto.titular_tipo).label}
                />
                <Chip size="small" color="info" variant="outlined" label={`Montos en ${proyecto.moneda?.codigo ?? "PYG"}`} />
              </Stack>
            )}
          </Stack>
        </Paper>

        {!proyectoId ? (
          <Paper variant="outlined">
            <EmptyState
              icon="mdi:account-cash-outline"
              title="Elegí un proyecto"
              description="Los inversores, las distribuciones y los informes 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 inversores"
              >
                {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 === "inversores" && (
              <InversoresTab
                proyectoId={proyectoId}
                perms={{
                  crear: can("INM_INV_INVERSOR_CREAR"),
                  editar: can("INM_INV_INVERSOR_EDITAR"),
                  aportar: can("INM_INV_APORTE_CREAR"),
                  anularAporte: can("INM_INV_APORTE_ANULAR"),
                  // El canje pide INM_INV_APORTE_CREAR y elegir la unidad usa el listado de unidades.
                  canjear: can("INM_INV_APORTE_CREAR") && can("INM_UNI_UNIDAD_VER"),
                }}
              />
            )}
            {tab === "distribuciones" && (
              <DistribucionesTab
                proyectoId={proyectoId}
                perms={{
                  crear: can("INM_INV_DISTRIBUCION_CREAR"),
                  aprobar: can("INM_INV_DISTRIBUCION_APROBAR"),
                  pagar: can("INM_INV_DISTRIBUCION_PAGAR"),
                }}
              />
            )}
            {tab === "fideicomiso" && (
              <FideicomisoTab
                proyectoId={proyectoId}
                perms={{ generar: can("INM_INV_FIDEICOMISO_GENERAR"), emitir: can("INM_INV_FIDEICOMISO_EMITIR") }}
              />
            )}
          </>
        )}
      </Stack>
    </Box>
  );
}

export default InmInversores;