import { Icon } from "@iconify/react";
import { Autocomplete, Box, Button, Chip, MenuItem, Paper, Stack, TextField, Typography } from "@mui/material";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { getCotizacionesInm, getProyectosInm } from "../../api/inmobiliario.service";
import { EmptyState, ScreenGuia, StandardTable } from "../../components/_standards";
import { chipDe, INM_COTIZACION_ESTADOS } from "../../components/_standards/enums/inmobiliario";
import { fmtMoneda } from "../../components/_standards/enums/monedas";
import { monedaDe, nombreInteresado } from "../../components/organismos/inmobiliario/cotizaciones/cotizacionUtils";
import { comoLista } from "../../components/organismos/inmobiliario/inmUtils";
import { useDebouncedValue } from "../../hooks/useDebouncedValue";
import { usePermission } from "../../hooks/usePermission";
import { fmtFechaCalendario, fmtFechaHoraSoloFecha } from "../../utils/fecha";

const GUIA_PASOS = [
  {
    icon: "mdi:file-document-plus-outline",
    color: "#60a5fa",
    titulo: "1. Cotizá una unidad",
    desc: "Elegí una unidad disponible y compará hasta tres planes de pago, con descuento si corresponde.",
  },
  {
    icon: "mdi:printer-outline",
    color: "#fbbf24",
    titulo: "2. Entregásela al interesado",
    desc: "Imprimila o guardala en PDF desde el detalle. Vale hasta la fecha de validez que fijan los parámetros.",
  },
  {
    icon: "mdi:handshake-outline",
    color: "#34d399",
    titulo: "3. Reservá",
    desc: "Cuando el interesado elige un plan, reservá desde el detalle: la unidad queda reservada y se genera la seña.",
  },
];

export function InmCotizaciones() {
  const { can } = usePermission("INMOBILIARIO");
  const canRead = can("INM_COT_COTIZACION_VER");
  const canCreate = can("INM_COT_COTIZACION_CREAR");
  const navigate = useNavigate();

  // Los filtros viven en la URL: el enlace se puede compartir y "Volver" los conserva.
  const [params, setParams] = useSearchParams();
  const estado = params.get("estado") ?? "";
  const proyectoId = params.get("proyecto_id") ?? "";
  const [q, setQ] = useState(params.get("q") ?? "");
  const qDebounced = useDebouncedValue(q.trim(), 400);

  const setFiltro = (clave, valor) =>
    setParams(
      (prev) => {
        const p = new URLSearchParams(prev);
        if (valor) p.set(clave, valor);
        else p.delete(clave);
        return p;
      },
      { replace: true },
    );

  const { data: proyectosResp } = useQuery({
    queryKey: ["inmobiliario", "proyectos", {}],
    queryFn: () => getProyectosInm(),
    enabled: canRead,
    refetchOnWindowFocus: false,
    staleTime: 5 * 60_000,
  });
  const proyectos = comoLista(proyectosResp);
  const proyecto = proyectos.find((p) => p.id === proyectoId) ?? null;

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

  if (!canRead) return null;

  const hayFiltros = Boolean(estado || proyectoId || qDebounced);

  return (
    <Box sx={{ p: { xs: 2, md: 3 } }}>
      <Stack spacing={2}>
        <ScreenGuia
          moduloPadre="Inmobiliario"
          intro="Las propuestas que se hicieron sobre cada unidad, con los planes que se compararon. Desde una cotización vigente se hace la reserva."
          pasos={GUIA_PASOS}
        />

        <Stack direction="row" alignItems="center" justifyContent="space-between" flexWrap="wrap" useFlexGap spacing={1}>
          <Typography variant="h6" fontWeight={700}>
            Cotizaciones
          </Typography>
          {canCreate && (
            <Button variant="contained" startIcon={<Icon icon="mdi:plus" />} onClick={() => navigate("/inmobiliario/cotizaciones/nueva")}>
              Nueva cotización
            </Button>
          )}
        </Stack>

        <Paper variant="outlined" sx={{ p: 1.5 }}>
          <Box
            sx={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, 220px), 1fr))",
              gap: 1.5,
              alignItems: "center",
            }}
          >
            <TextField
              size="small"
              label="Buscar"
              placeholder="Ej: COT-0012, A-1203 o María Benítez"
              value={q}
              onChange={(ev) => {
                setQ(ev.target.value);
                setFiltro("q", ev.target.value.trim());
              }}
            />
            <Autocomplete
              fullWidth
              options={proyectos}
              value={proyecto}
              onChange={(_, p) => setFiltro("proyecto_id", p?.id ?? "")}
              getOptionLabel={(p) => p?.nombre ?? ""}
              isOptionEqualToValue={(o, v) => o.id === v?.id}
              renderInput={(p) => <TextField {...p} size="small" label="Proyecto" placeholder="Todos" />}
            />
            <TextField select size="small" label="Estado" value={estado} onChange={(ev) => setFiltro("estado", ev.target.value)}>
              <MenuItem value="">Todos</MenuItem>
              {Object.entries(INM_COTIZACION_ESTADOS).map(([k, v]) => (
                <MenuItem key={k} value={k}>
                  {v.label}
                </MenuItem>
              ))}
            </TextField>
          </Box>
        </Paper>

        <StandardTable
          tableId="inm-cotizaciones"
          data={filas}
          loading={isLoading}
          density="compact"
          onRowClick={(r) => navigate(`/inmobiliario/cotizaciones/${r.id}`)}
          columns={[
            { key: "numero", label: "Número", minWidth: 110, primary: true, render: (r) => r.numero },
            { key: "fecha", label: "Fecha", minWidth: 90, width: 100, render: (r) => fmtFechaHoraSoloFecha(r.created_at) },
            {
              key: "proyecto",
              label: "Proyecto / unidad",
              minWidth: 180,
              wrap: true,
              render: (r) => (
                <Box>
                  <Typography variant="body2">{r.inm_proyectos?.nombre ?? "—"}</Typography>
                  <Typography variant="caption" color="text.secondary">
                    Unidad {r.inm_unidades?.codigo ?? "—"}
                  </Typography>
                </Box>
              ),
            },
            {
              key: "interesado",
              label: "Interesado",
              minWidth: 200,
              wrap: true,
              render: (r) => (
                <Box>
                  <Typography variant="body2">{nombreInteresado(r)}</Typography>
                  <Typography variant="caption" color="text.secondary">
                    {r.cliente ? r.cliente.documento || "Cliente" : "Todavía no es cliente"}
                  </Typography>
                </Box>
              ),
            },
            {
              key: "opciones",
              label: "Planes",
              minWidth: 220,
              wrap: true,
              render: (r) => (
                <Stack spacing={0.25}>
                  {(r.inm_cotizacion_opciones ?? []).map((o, i) => (
                    <Typography key={i} variant="caption" component="div">
                      {o.nombre}: <strong>{fmtMoneda(o.precio_final, monedaDe(r))}</strong>
                    </Typography>
                  ))}
                </Stack>
              ),
            },
            { key: "valida", label: "Válida hasta", minWidth: 100, width: 110, render: (r) => fmtFechaCalendario(r.valida_hasta) },
            {
              key: "estado",
              label: "Estado",
              minWidth: 100,
              width: 110,
              align: "center",
              render: (r) => {
                const e = chipDe(INM_COTIZACION_ESTADOS, r.estado);
                return <Chip size="small" color={e.color} label={e.label} />;
              },
            },
          ]}
          emptyState={
            <EmptyState
              icon="mdi:file-document-multiple-outline"
              title={hayFiltros ? "Ninguna cotización coincide con el filtro" : "Todavía no hay cotizaciones"}
              description={
                hayFiltros
                  ? "Probá con otro estado o proyecto, o borrá la búsqueda."
                  : "Una cotización le muestra al interesado el precio de una unidad con hasta tres planes de pago. Empezá con la primera."
              }
              ctaLabel={canCreate && !hayFiltros ? "Nueva cotización" : undefined}
              onCta={() => navigate("/inmobiliario/cotizaciones/nueva")}
            />
          }
        />
      </Stack>
    </Box>
  );
}

export default InmCotizaciones;