import { useEffect, useRef, useState } from "react";
import {
  Autocomplete,
  Box,
  Button,
  Chip,
  CircularProgress,
  IconButton,
  MenuItem,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { searchClientes } from "../../../api/clientes.service";
import { Icon } from "@iconify/react";
import { toast } from "sonner";
import {
  EmptyState,
  ScreenGuia,
} from "../../_standards";
import {
  COB_MORA_ESTADO_META,
  getCobMoraEstadoChip,
} from "../../_standards/enums/estados";
import { fmtFechaHoraSoloFecha, hoyISO } from "../../../utils/fecha";
import {
  exportGestionesMoraCsv,
  getGestionesMora,
} from "../../../api/cobranzas.service";
import { TransicionEstadoModal } from "./TransicionEstadoModal";
import { NuevaGestionMoraModal } from "./NuevaGestionMoraModal";
import { GestionMoraDetalleDrawer } from "./GestionMoraDetalleDrawer";

const guiaPasos = [
  {
    icon: "mdi:gavel",
    color: "#dc2626",
    titulo: "Estado actual del cliente",
    desc: "Cada cliente con mora avanzada tiene un estado en la máquina: Gestión Interna → Informconf → Demanda → Incobrable, o transiciones a Recuperada / Refinanciada.",
  },
  {
    icon: "mdi:file-document-check",
    color: "#1d4ed8",
    titulo: "Documento obligatorio",
    desc: "Pasar a DEMANDA requiere carátula judicial. Pasar a INCOBRABLE requiere acta de directorio. Sin URL del documento el sistema no acepta la transición.",
  },
  {
    icon: "mdi:shield-account",
    color: "#7c3aed",
    titulo: "Doble autorización",
    desc: "DEMANDA e INCOBRABLE necesitan autorización de un segundo usuario con permiso. Se registra quién autorizó cada transición.",
  },
];

export function GestionMoraTab({ canRegistrar = true, canExportar = true }) {
  const [loading, setLoading] = useState(false);
  const [rows, setRows] = useState([]);
  const [total, setTotal] = useState(0);
  const [filtroEstado, setFiltroEstado] = useState("");
  const [clienteSel, setClienteSel] = useState(null);
  const [clienteOpts, setClienteOpts] = useState([]);
  const [desde, setDesde] = useState("");
  const [hasta, setHasta] = useState("");
  const [exportando, setExportando] = useState(false);
  const [page, setPage] = useState(1);
  const searchTimerRef = useRef(null);
  const [seleccion, setSeleccion] = useState(null);
  const [modalAbierto, setModalAbierto] = useState(false);
  const [modalNuevaAbierto, setModalNuevaAbierto] = useState(false);
  const [drawerId, setDrawerId] = useState(null);

  const limit = 25;

  const fetchData = async () => {
    setLoading(true);
    try {
      const data = await getGestionesMora({
        page,
        limit,
        ...(filtroEstado ? { estado: filtroEstado } : {}),
        ...(clienteSel?.id ? { cliente_id: clienteSel.id } : {}),
        ...(desde ? { desde } : {}),
        ...(hasta ? { hasta } : {}),
      });
      setRows(data.rows ?? []);
      setTotal(data.total ?? 0);
    } catch (e) {
      toast.error(
        e?.response?.data?.message || "No se pudieron cargar las gestiones de mora",
      );
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, filtroEstado, clienteSel?.id, desde, hasta]);

  const handleClienteInputChange = (v) => {
    clearTimeout(searchTimerRef.current);
    searchTimerRef.current = setTimeout(() => {
      if (!v) return;
      searchClientes(v, 20)
        .then((r) => setClienteOpts(r?.data ?? r ?? []))
        .catch(() => {});
    }, 300);
  };

  const exportar = async () => {
    setExportando(true);
    try {
      const blob = await exportGestionesMoraCsv({
        ...(filtroEstado ? { estado: filtroEstado } : {}),
        ...(clienteSel?.id ? { cliente_id: clienteSel.id } : {}),
        ...(desde ? { desde } : {}),
        ...(hasta ? { hasta } : {}),
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = `gestion-mora-${hoyISO()}.csv`;
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
    } catch (e) {
      toast.error(
        e?.response?.data?.message || "No se pudo exportar el listado",
      );
    } finally {
      setExportando(false);
    }
  };

  const totalPages = Math.max(1, Math.ceil(total / limit));

  const abrirTransicion = (gestion) => {
    setSeleccion(gestion);
    setModalAbierto(true);
  };

  const renderClienteNombre = (g) => {
    const p = g.cliente?.personas;
    return (
      g.cliente?.nombre_fantasia ||
      [p?.nombres, p?.apellidos].filter(Boolean).join(" ") ||
      p?.razon_social ||
      "—"
    );
  };

  return (
    <Box>
      <ScreenGuia
        titulo="Gestión de Mora Avanzada"
        intro="Trazabilidad de clientes morosos a través de la máquina de estados (Gestión Interna → Informconf → Demanda → Incobrable, con caminos a Recuperada/Refinanciada)."
        pasos={guiaPasos}
      />

      <Paper sx={{ p: 2, mt: 2 }}>
        <Stack direction={{ xs: "column", md: "row" }} spacing={2} alignItems={{ md: "center" }} mb={2} flexWrap="wrap" useFlexGap>
          <Autocomplete
            options={clienteOpts}
            value={clienteSel}
            getOptionLabel={(o) => {
              const p = o?.personas ?? {};
              const nombre = p.razon_social ?? o?.nombre_fantasia ?? o?.razon_social ?? "";
              const ruc = p.ruc ? (p.dv ? `${p.ruc}-${p.dv}` : `${p.ruc}`) : null;
              const doc = !ruc && p.nro_documento ? p.nro_documento : null;
              const id = ruc ? `RUC ${ruc}` : doc ? `CI ${doc}` : null;
              return id ? `${nombre} — ${id}` : nombre;
            }}
            renderOption={(props, o) => {
              const p = o?.personas ?? {};
              const nombre = p.razon_social ?? o?.nombre_fantasia ?? o?.razon_social ?? "—";
              const ruc = p.ruc ? (p.dv ? `${p.ruc}-${p.dv}` : `${p.ruc}`) : null;
              const doc = p.nro_documento;
              return (
                <li {...props} key={o.id}>
                  <Box sx={{ display: "flex", flexDirection: "column", py: 0.25 }}>
                    <Typography variant="body2" fontWeight={600}>{nombre}</Typography>
                    <Typography variant="caption" color="text.secondary">
                      {ruc ? `RUC ${ruc}` : doc ? `CI ${doc}` : "Sin identificación"}
                    </Typography>
                  </Box>
                </li>
              );
            }}
            isOptionEqualToValue={(o, v) => String(o.id) === String(v?.id ?? v)}
            onChange={(_, opt) => { setClienteSel(opt ?? null); setPage(1); }}
            onInputChange={(_, v, reason) => { if (reason === "input") handleClienteInputChange(v); }}
            filterOptions={(x) => x}
            size="small"
            sx={{ minWidth: 280 }}
            renderInput={(params) => (
              <TextField
                {...params}
                label="Cliente"
                placeholder="Buscar por razón social, RUC o documento…"
                helperText="Podés escribir parte del nombre, RUC o CI"
              />
            )}
          />

          <TextField
            select
            label="Estado"
            value={filtroEstado}
            onChange={(e) => {
              setFiltroEstado(e.target.value);
              setPage(1);
            }}
            size="small"
            sx={{ minWidth: 200 }}
          >
            <MenuItem value="">Todos</MenuItem>
            {Object.keys(COB_MORA_ESTADO_META).map((k) => (
              <MenuItem key={k} value={k}>
                {COB_MORA_ESTADO_META[k].label}
              </MenuItem>
            ))}
          </TextField>

          <TextField
            type="date"
            label="Desde"
            value={desde}
            onChange={(e) => { setDesde(e.target.value); setPage(1); }}
            size="small"
            InputLabelProps={{ shrink: true }}
            sx={{ minWidth: 150 }}
          />
          <TextField
            type="date"
            label="Hasta"
            value={hasta}
            onChange={(e) => { setHasta(e.target.value); setPage(1); }}
            size="small"
            InputLabelProps={{ shrink: true }}
            sx={{ minWidth: 150 }}
          />

          <Box flex={1} />

          {canExportar && (
            <Button
              variant="outlined"
              size="small"
              startIcon={<Icon icon="mdi:file-excel" />}
              onClick={exportar}
              disabled={exportando || loading}
            >
              {exportando ? "Exportando…" : "Exportar Excel"}
            </Button>
          )}

          {canRegistrar && (
            <Button
              variant="contained"
              size="small"
              startIcon={<Icon icon="mdi:plus" />}
              onClick={() => setModalNuevaAbierto(true)}
            >
              Nueva gestión
            </Button>
          )}

          <Tooltip title="Recargar">
            <IconButton onClick={fetchData} disabled={loading}>
              <Icon icon="mdi:refresh" />
            </IconButton>
          </Tooltip>
        </Stack>

        {loading ? (
          <Box display="flex" justifyContent="center" py={6}>
            <CircularProgress />
          </Box>
        ) : rows.length === 0 ? (
          <EmptyState
            icon="mdi:gavel"
            title="Sin gestiones de mora"
            description="Cuando un cliente entre en cobranza avanzada aparecerá acá. Podés crear una gestión manualmente o esperar al job nocturno que detecta morosos por umbral configurado."
            ctaLabel={canRegistrar ? "Nueva gestión" : undefined}
            ctaIcon="mdi:plus"
            onCta={canRegistrar ? () => setModalNuevaAbierto(true) : undefined}
          />
        ) : (
          <>
            <TableContainer>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Cliente</TableCell>
                    <TableCell>Estado</TableCell>
                    <TableCell align="right">Monto involucrado</TableCell>
                    <TableCell align="center">Facturas</TableCell>
                    <TableCell>Ingreso al estado</TableCell>
                    <TableCell align="center">Acciones</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map((g) => {
                    const meta = getCobMoraEstadoChip(g.estado_actual);
                    return (
                      <TableRow
                        key={g.id}
                        hover
                        sx={{ cursor: "pointer" }}
                        onClick={() => setDrawerId(g.id)}
                      >
                        <TableCell>
                          <Typography variant="body2">{renderClienteNombre(g)}</Typography>
                        </TableCell>
                        <TableCell>
                          <Chip size="small" label={meta.label} color={meta.color} />
                        </TableCell>
                        <TableCell align="right">
                          {new Intl.NumberFormat("es-PY").format(
                            Math.round(Number(g.monto_involucrado) || 0),
                          )}
                        </TableCell>
                        <TableCell align="center">
                          {g._count?.facturas ?? 0}
                        </TableCell>
                        <TableCell>{fmtFechaHoraSoloFecha(g.fecha_ingreso)}</TableCell>
                        <TableCell align="center" onClick={(e) => e.stopPropagation()}>
                          <Tooltip title="Ver detalle">
                            <IconButton
                              size="small"
                              onClick={() => setDrawerId(g.id)}
                            >
                              <Icon icon="mdi:eye-outline" />
                            </IconButton>
                          </Tooltip>
                          {canRegistrar && (
                            <Tooltip title="Transicionar estado">
                              <IconButton
                                size="small"
                                onClick={() => abrirTransicion(g)}
                              >
                                <Icon icon="mdi:swap-horizontal" />
                              </IconButton>
                            </Tooltip>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>

            <Box
              sx={{
                display: "grid",
                gridTemplateColumns: { xs: "1fr", sm: "1fr auto 1fr" },
                alignItems: "center",
                mt: 2,
                gap: 1,
              }}
            >
              <Typography variant="caption" color="text.secondary" sx={{ justifySelf: { xs: "center", sm: "start" } }}>
                {total} resultado(s)
              </Typography>
              <Stack direction="row" spacing={1} sx={{ justifySelf: "center" }}>
                <Button size="small" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
                  Anterior
                </Button>
                <Typography variant="body2" sx={{ alignSelf: "center" }}>
                  {page} / {totalPages}
                </Typography>
                <Button size="small" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
                  Siguiente
                </Button>
              </Stack>
              <Box />
            </Box>
          </>
        )}
      </Paper>

      <TransicionEstadoModal
        open={modalAbierto}
        onClose={() => setModalAbierto(false)}
        gestion={seleccion}
        onSuccess={fetchData}
      />

      <NuevaGestionMoraModal
        open={modalNuevaAbierto}
        onClose={() => setModalNuevaAbierto(false)}
        onSuccess={fetchData}
      />

      <GestionMoraDetalleDrawer
        open={!!drawerId}
        gestionId={drawerId}
        onClose={() => setDrawerId(null)}
        onChanged={fetchData}
        canRegistrar={canRegistrar}
      />
    </Box>
  );
}

export default GestionMoraTab;