import { Icon } from "@iconify/react";
import { Box, Button, Chip, MenuItem, Paper, Stack, TextField, Typography } from "@mui/material";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { getOperacionesInm } from "../../api/inmobiliario.service";
import { EmptyState, ScreenGuia, StandardTable } from "../../components/_standards";
import { chipDe, fmtMoneda, INM_OPERACION_ESTADOS, INM_UNIDAD_TIPOS } from "../../components/_standards/enums";
import { comoLista } from "../../components/organismos/inmobiliario/inmUtils";
import { BarraPagado } from "../../components/organismos/inmobiliario/operaciones/OperacionUi";
import { num } from "../../components/organismos/inmobiliario/operaciones/operacionUtils";
import { ProyectoFiltro } from "../../components/organismos/inmobiliario/operaciones/ProyectoFiltro";
import { useDebouncedValue } from "../../hooks/useDebouncedValue";
import { usePermission } from "../../hooks/usePermission";
import { fmtFechaCalendario } from "../../utils/fecha";

const GUIA_PASOS = [
  {
    icon: "mdi:bookmark-check-outline",
    color: "#60a5fa",
    titulo: "1. Reserva",
    desc: "La venta nace al reservar una unidad desde una cotización. Sólo existe la cuota de seña hasta que se firma el boleto.",
  },
  {
    icon: "mdi:clipboard-check-outline",
    color: "#fbbf24",
    titulo: "2. Seña, legajo y titulares",
    desc: "Cobrá la seña, aprobá el legajo del comprador y dejá los titulares sumando 100 %. Con eso se puede firmar el boleto.",
  },
  {
    icon: "mdi:file-sign",
    color: "#34d399",
    titulo: "3. Boleto y cuotas",
    desc: "Al firmar el boleto se genera el cronograma completo. Cada cobro de cuotas emite su factura de contado.",
  },
];

export function InmOperaciones() {
  const { can } = usePermission("INMOBILIARIO");
  const canRead = can("INM_OPE_OPERACION_VER");
  const canCotizar = can("INM_COT_COTIZACION_VER");
  const navigate = useNavigate();

  const [q, setQ] = useState("");
  const [estado, setEstado] = useState("");
  const [proyectoId, setProyectoId] = useState("");
  const qDebounced = useDebouncedValue(q.trim(), 350);

  const { data, isLoading } = useQuery({
    queryKey: ["inmobiliario", "operaciones", { q: qDebounced, estado, proyectoId }],
    queryFn: () =>
      getOperacionesInm({
        q: qDebounced || undefined,
        estado: estado || undefined,
        proyecto_id: proyectoId || undefined,
      }),
    enabled: canRead,
    placeholderData: keepPreviousData,
    refetchOnWindowFocus: false,
  });
  const filas = comoLista(data);
  const hayFiltros = Boolean(qDebounced || estado || proyectoId);

  if (!canRead) return null;

  return (
    <Box sx={{ p: { xs: 2, md: 3 } }}>
      <Stack spacing={2}>
        <ScreenGuia
          moduloPadre="Inmobiliario"
          intro="Cada venta (OPI-) sigue a la unidad desde la reserva hasta que termina de pagarse. Abrila para cobrar, firmar el boleto o ver su estado de cuenta."
          pasos={GUIA_PASOS}
        />

        <Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
          <Typography variant="h6" sx={{ flex: 1 }}>
            Ventas
          </Typography>
          {canCotizar && (
            <Button variant="outlined" startIcon={<Icon icon="mdi:calculator-variant-outline" />} onClick={() => navigate("/inmobiliario/cotizaciones")}>
              Ir a cotizaciones
            </Button>
          )}
        </Stack>

        <Paper variant="outlined" sx={{ p: 1.5 }}>
          <Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap" useFlexGap>
            <TextField
              size="small"
              label="Buscar"
              placeholder="Número (OPI-000012) o unidad (A-0302)"
              value={q}
              onChange={(ev) => setQ(ev.target.value)}
              sx={{ flex: "1 1 240px", minWidth: 220 }}
            />
            <TextField
              select
              size="small"
              label="Estado"
              value={estado}
              onChange={(ev) => setEstado(ev.target.value)}
              sx={{ flex: "0 0 180px", minWidth: 160 }}
            >
              <MenuItem value="">Todos</MenuItem>
              {Object.entries(INM_OPERACION_ESTADOS).map(([k, v]) => (
                <MenuItem key={k} value={k}>
                  {v.label}
                </MenuItem>
              ))}
            </TextField>
            <ProyectoFiltro value={proyectoId} onChange={setProyectoId} sx={{ flex: "1 1 220px" }} />
          </Stack>
        </Paper>

        <StandardTable
          tableId="inm-operaciones"
          data={filas}
          loading={isLoading}
          density="compact"
          onRowClick={(r) => navigate(`/inmobiliario/operaciones/${r.id}`)}
          columns={[
            { key: "numero", label: "Operación", minWidth: 130, primary: true, render: (r) => r.numero },
            {
              key: "estado",
              label: "Estado",
              minWidth: 120,
              chip: true,
              render: (r) => {
                const c = chipDe(INM_OPERACION_ESTADOS, r.estado);
                return <Chip size="small" color={c.color} label={c.label} />;
              },
            },
            {
              key: "proyecto",
              label: "Proyecto",
              minWidth: 170,
              wrap: true,
              render: (r) => r.inm_proyectos?.nombre ?? "—",
            },
            {
              key: "unidad",
              label: "Unidad",
              minWidth: 120,
              render: (r) => (
                <Stack direction="row" spacing={0.5} alignItems="center">
                  <Icon icon={INM_UNIDAD_TIPOS[r.inm_unidades?.tipo]?.icon ?? "mdi:home-outline"} width={16} />
                  <span>{r.inm_unidades?.codigo ?? "—"}</span>
                </Stack>
              ),
            },
            {
              key: "comprador",
              label: "Comprador",
              minWidth: 200,
              wrap: true,
              caption: true,
              render: (r) => (
                <Box>
                  <Typography variant="body2">{r.cliente?.nombre ?? "—"}</Typography>
                  {r.cliente?.documento && (
                    <Typography variant="caption" color="text.secondary">
                      {r.cliente.documento}
                    </Typography>
                  )}
                </Box>
              ),
            },
            {
              key: "precio",
              label: "Precio final",
              minWidth: 130,
              align: "right",
              highlight: true,
              render: (r) => fmtMoneda(num(r.precio_final), r.moneda?.codigo ?? "PYG"),
            },
            {
              key: "pagado",
              label: "% pagado",
              minWidth: 150,
              render: (r) => <BarraPagado pct={r.pct_pagado} ancho={80} />,
            },
            {
              key: "fecha",
              label: "Reserva / boleto",
              minWidth: 120,
              render: (r) => (
                <Box>
                  <Typography variant="body2">{fmtFechaCalendario(r.fecha_reserva)}</Typography>
                  {r.fecha_boleto && (
                    <Typography variant="caption" color="text.secondary">
                      Boleto {fmtFechaCalendario(r.fecha_boleto)}
                    </Typography>
                  )}
                </Box>
              ),
            },
          ]}
          emptyState={
            <EmptyState
              icon="mdi:handshake-outline"
              title={hayFiltros ? "Ninguna venta coincide con el filtro" : "Todavía no hay ventas"}
              description={
                hayFiltros
                  ? "Probá con otro estado, proyecto o número."
                  : "Las ventas nacen cuando reservás una unidad desde una cotización aceptada por el cliente."
              }
              ctaLabel={!hayFiltros && canCotizar ? "Ir a cotizaciones" : undefined}
              ctaIcon="mdi:calculator-variant-outline"
              onCta={() => navigate("/inmobiliario/cotizaciones")}
            />
          }
        />
      </Stack>
    </Box>
  );
}

export default InmOperaciones;