import { useEffect, useMemo, useState } from "react";
import {
  Box,
  Button,
  Chip,
  CircularProgress,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  IconButton,
  MenuItem,
  Paper,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
} from "@mui/material";
import { Icon } from "@iconify/react";
import { toast } from "sonner";
import {
  EmptyState,
  ScreenGuia,
} from "../../components/_standards";
import {
  COB_REFI_ESTADO,
  COB_REFI_ESTADO_META,
  getCobRefiEstadoChip,
} from "../../components/_standards/enums/estados";
import { fmtFechaCalendario, fmtFechaHoraSoloFecha } from "../../utils/fecha";
import {
  anularRefinanciacion,
  ejecutarRefinanciacion,
  getRefinanciacion,
  getRefinanciaciones,
  getRefinanciacionPdfUrl,
} from "../../api/cobranzas.service";
import { useConfirmDialog } from "../../hooks/useConfirmDialog";
import { usePermission } from "../../hooks/usePermission";
import { RefinanciacionWizard } from "../../components/cobranzas/RefinanciacionWizard";

const fmtGs = (n) =>
  new Intl.NumberFormat("es-PY").format(Math.round(Number(n) || 0));

const guiaPasos = [
  {
    icon: "mdi:file-restore-outline",
    color: "#1d4ed8",
    titulo: "Borrador → Ejecutada",
    desc: "El borrador no impacta saldos. Cuando se ejecuta, las cuotas originales pasan a refinanciadas y se generan las nuevas cuotas del plan.",
  },
  {
    icon: "mdi:scale-balance",
    color: "#7c3aed",
    titulo: "Política de intereses",
    desc: "Capitalizar (suma intereses al capital nuevo), Exonerar (condona intereses moratorios) o Mantener (deuda separada).",
  },
  {
    icon: "mdi:file-document-edit-outline",
    color: "#059669",
    titulo: "Acuerdo firmado",
    desc: "Recomendado adjuntar URL del PDF firmado con el cliente para trazabilidad.",
  },
];

const renderCliente = (r) => {
  const c = r.cliente;
  if (!c) return "—";
  const p = c.personas;
  return (
    c.nombre_fantasia ||
    [p?.nombres, p?.apellidos].filter(Boolean).join(" ") ||
    p?.razon_social ||
    "—"
  );
};

export function RefinanciacionesPage() {
  const { can: canCobranzas } = usePermission("COBRANZAS");
  const canVer = canCobranzas("COB_REF_REFINANCIACION_VER");
  const canCrear = canCobranzas("COB_REF_REFINANCIACION_CREAR");
  const canAprobar = canCobranzas("COB_REF_REFINANCIACION_APROBAR");
  const canAnular = canCobranzas("COB_REF_REFINANCIACION_ANULAR");

  const [rows, setRows] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  const [filtroCliente, setFiltroCliente] = useState("");
  const [filtroEstado, setFiltroEstado] = useState("");

  const [wizardOpen, setWizardOpen] = useState(false);
  const [wizardClienteId, setWizardClienteId] = useState(null);
  const [detalleId, setDetalleId] = useState(null);

  const { confirm, prompt, dialogs } = useConfirmDialog();

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

  const fetchData = async () => {
    setLoading(true);
    try {
      const params = { page, limit };
      if (filtroCliente.trim()) params.cliente_id = filtroCliente.trim();
      if (filtroEstado) params.estado = filtroEstado;
      const data = await getRefinanciaciones(params);
      setRows(data?.data ?? data?.rows ?? []);
      setTotal(data?.total ?? 0);
    } catch (e) {
      toast.error(
        e?.response?.data?.message ||
          "No se pudieron cargar las refinanciaciones",
      );
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!canVer) return;
    fetchData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, filtroEstado, filtroCliente, canVer]);

  const handleEjecutar = async (r) => {
    const ok = await confirm({
      title: "Ejecutar refinanciación",
      message: `Al ejecutar, las cuotas originales pasarán a REFINANCIADA y se generarán las ${r.cantidad_cuotas} cuotas del nuevo plan. ¿Continuar?`,
      confirmText: "Ejecutar",
      confirmColor: "primary",
    });
    if (!ok) return;
    try {
      await ejecutarRefinanciacion(r.id, {});
      toast.success("Refinanciación ejecutada");
      fetchData();
      if (detalleId === r.id) setDetalleId(null);
    } catch (e) {
      toast.error(
        e?.response?.data?.message || "No se pudo ejecutar la refinanciación",
      );
    }
  };

  const handleAnular = async (r) => {
    const motivo = await prompt({
      title: "Anular refinanciación",
      label: "Motivo de anulación",
      required: true,
      multiline: true,
    });
    if (!motivo) return;
    try {
      await anularRefinanciacion(r.id, { motivo_anulacion: motivo });
      toast.success("Refinanciación anulada");
      fetchData();
      if (detalleId === r.id) setDetalleId(null);
    } catch (e) {
      toast.error(
        e?.response?.data?.message || "No se pudo anular la refinanciación",
      );
    }
  };

  const handleOpenWizard = async () => {
    if (!filtroCliente.trim()) {
      const id = await prompt({
        title: "Cliente para la refinanciación",
        label: "ID del cliente",
        required: true,
      });
      if (!id) return;
      setWizardClienteId(id);
    } else {
      setWizardClienteId(filtroCliente.trim());
    }
    setWizardOpen(true);
  };

  if (!canVer) {
    return (
      <Container maxWidth="xl" sx={{ py: 3 }}>
        <Typography variant="body2" color="text.secondary">
          No tenés permisos para ver esta sección.
        </Typography>
      </Container>
    );
  }

  return (
    <Container maxWidth="xl" sx={{ py: 3 }}>
      <Box mb={2}>
        <Typography variant="h5" fontWeight={700}>
          Refinanciaciones
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Consolidación de cuotas vencidas en nuevos planes de pago.
        </Typography>
      </Box>

      <ScreenGuia
        titulo="Refinanciación de deuda"
        intro="Cuando un cliente entra en mora, se puede acordar un nuevo plan de pago. El borrador no impacta saldos hasta que se ejecuta."
        pasos={guiaPasos}
      />

      <Paper sx={{ p: 2, mt: 2 }}>
        <Stack
          direction={{ xs: "column", sm: "row" }}
          spacing={2}
          alignItems="center"
          mb={2}
        >
          <TextField
            label="Cliente ID"
            value={filtroCliente}
            onChange={(e) => {
              setFiltroCliente(e.target.value);
              setPage(1);
            }}
            size="small"
            sx={{ minWidth: 180 }}
            helperText="Filtra por ID exacto del cliente"
          />
          <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_REFI_ESTADO_META).map((k) => (
              <MenuItem key={k} value={k}>
                {COB_REFI_ESTADO_META[k].label}
              </MenuItem>
            ))}
          </TextField>

          <Box flex={1} />

          {canCrear && (
            <Button
              variant="contained"
              size="small"
              startIcon={<Icon icon="mdi:plus" />}
              onClick={handleOpenWizard}
            >
              Nueva refinanciació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:file-restore-outline"
            title="Sin refinanciaciones"
            description="Las refinanciaciones aparecerán acá una vez creadas como borrador."
            ctaLabel={canCrear ? "Nueva refinanciación" : undefined}
            ctaIcon="mdi:plus"
            onCta={canCrear ? handleOpenWizard : undefined}
          />
        ) : (
          <>
            <TableContainer>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Fecha</TableCell>
                    <TableCell>Cliente</TableCell>
                    <TableCell align="right">Capital nuevo</TableCell>
                    <TableCell align="center">Cuotas</TableCell>
                    <TableCell>Estado</TableCell>
                    <TableCell align="center">Acciones</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {rows.map((r) => {
                    const meta = getCobRefiEstadoChip(r.estado);
                    const esBorrador = r.estado === COB_REFI_ESTADO.BORRADOR;
                    const esAceptada = r.estado === COB_REFI_ESTADO.ACEPTADA;
                    return (
                      <TableRow
                        key={r.id}
                        hover
                        sx={{ cursor: "pointer" }}
                        onClick={() => setDetalleId(r.id)}
                      >
                        <TableCell>
                          {fmtFechaHoraSoloFecha(r.created_at ?? r.fecha)}
                        </TableCell>
                        <TableCell>{renderCliente(r)}</TableCell>
                        <TableCell align="right">
                          {fmtGs(r.monto_capital_nuevo)} Gs.
                        </TableCell>
                        <TableCell align="center">{r.cantidad_cuotas}</TableCell>
                        <TableCell>
                          <Chip
                            size="small"
                            label={meta.label}
                            color={meta.color}
                          />
                        </TableCell>
                        <TableCell
                          align="center"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <Tooltip title="Ver detalle">
                            <IconButton
                              size="small"
                              onClick={() => setDetalleId(r.id)}
                            >
                              <Icon icon="mdi:eye-outline" />
                            </IconButton>
                          </Tooltip>
                          <Tooltip title="Ver PDF">
                            <IconButton
                              size="small"
                              onClick={() =>
                                window.open(
                                  getRefinanciacionPdfUrl(r.id),
                                  "_blank",
                                )
                              }
                            >
                              <Icon icon="mdi:file-pdf-box" />
                            </IconButton>
                          </Tooltip>
                          {esBorrador && canAprobar && (
                            <Tooltip title="Ejecutar">
                              <IconButton
                                size="small"
                                color="primary"
                                onClick={() => handleEjecutar(r)}
                              >
                                <Icon icon="mdi:play-circle-outline" />
                              </IconButton>
                            </Tooltip>
                          )}
                          {(esBorrador || esAceptada) && canAnular && (
                            <Tooltip title="Anular">
                              <IconButton
                                size="small"
                                color="error"
                                onClick={() => handleAnular(r)}
                              >
                                <Icon icon="mdi:cancel" />
                              </IconButton>
                            </Tooltip>
                          )}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>

            <Stack
              direction="row"
              justifyContent="space-between"
              alignItems="center"
              mt={2}
            >
              <Typography variant="caption" color="text.secondary">
                {total} resultado(s)
              </Typography>
              <Stack direction="row" spacing={1}>
                <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>
            </Stack>
          </>
        )}
      </Paper>

      <RefinanciacionWizard
        open={wizardOpen}
        onClose={() => setWizardOpen(false)}
        clienteId={wizardClienteId}
        onSuccess={() => fetchData()}
      />

      <DetalleDialog
        id={detalleId}
        onClose={() => setDetalleId(null)}
        onEjecutar={handleEjecutar}
        onAnular={handleAnular}
        canAprobar={canAprobar}
        canAnular={canAnular}
      />

      {dialogs}
    </Container>
  );
}

function DetalleDialog({
  id,
  onClose,
  onEjecutar,
  onAnular,
  canAprobar,
  canAnular,
}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!id) {
      setData(null);
      return;
    }
    let cancel = false;
    setLoading(true);
    (async () => {
      try {
        const r = await getRefinanciacion(id);
        if (!cancel) setData(r);
      } catch (e) {
        if (!cancel)
          toast.error(
            e?.response?.data?.message || "No se pudo cargar el detalle",
          );
      } finally {
        if (!cancel) setLoading(false);
      }
    })();
    return () => {
      cancel = true;
    };
  }, [id]);

  const cuotasOriginales = useMemo(
    () => data?.cuotas_originales ?? [],
    [data],
  );
  const cuotasPropuestas = useMemo(
    () => data?.cuotas_propuestas ?? data?.cuotas_nuevas ?? [],
    [data],
  );

  const esBorrador = data?.estado === COB_REFI_ESTADO.BORRADOR;
  const esAceptada = data?.estado === COB_REFI_ESTADO.ACEPTADA;
  const meta = data ? getCobRefiEstadoChip(data.estado) : null;

  return (
    <Dialog open={!!id} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle sx={{ display: "flex", alignItems: "center", gap: 1 }}>
        <Icon icon="mdi:file-restore-outline" width={22} />
        <Typography variant="h6" fontWeight={700} sx={{ flex: 1 }}>
          Detalle de refinanciación
        </Typography>
        {meta && <Chip size="small" label={meta.label} color={meta.color} />}
      </DialogTitle>
      <DialogContent dividers>
        {loading || !data ? (
          <Box display="flex" justifyContent="center" py={4}>
            <CircularProgress />
          </Box>
        ) : (
          <Stack spacing={2}>
            <Paper variant="outlined" sx={{ p: 2 }}>
              <Stack
                direction="row"
                spacing={2}
                flexWrap="wrap"
                sx={{ rowGap: 1 }}
              >
                <Info label="Cliente" value={renderCliente(data)} />
                <Info
                  label="Capital nuevo"
                  value={`${fmtGs(data.monto_capital_nuevo)} Gs.`}
                />
                <Info label="Cuotas" value={data.cantidad_cuotas} />
                <Info
                  label="Tasa"
                  value={`${data.tasa_interes ?? 0}%`}
                />
                <Info label="Política" value={data.politica_interes} />
              </Stack>
              {data.motivo && (
                <>
                  <Divider sx={{ my: 1.5 }} />
                  <Typography variant="caption" color="text.secondary">
                    Motivo
                  </Typography>
                  <Typography variant="body2">{data.motivo}</Typography>
                </>
              )}
            </Paper>

            <Typography variant="subtitle2" fontWeight={700}>
              Cuotas originales
            </Typography>
            <TableContainer component={Paper} variant="outlined">
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Factura</TableCell>
                    <TableCell>Cuota</TableCell>
                    <TableCell>Vencimiento</TableCell>
                    <TableCell align="right">Capital</TableCell>
                    <TableCell align="right">Interés</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {cuotasOriginales.map((c) => {
                    const fc = c.factura_cuota || {};
                    const fact = fc.factura_cab || {};
                    const nroFactura = fact.id
                      ? `${fact.dest ?? ""}-${fact.dpunexp ?? ""}-${fact.dnumdoc ?? ""}`
                      : c.factura_cab_id ?? "—";
                    return (
                      <TableRow key={c.factura_cuota_id ?? c.id}>
                        <TableCell
                          sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}
                        >
                          {nroFactura}
                        </TableCell>
                        <TableCell>{c.nro_cuota ?? fc.nro_cuota ?? "—"}</TableCell>
                        <TableCell>
                          {fmtFechaCalendario(c.fecha_venc ?? fc.dvenccuo)}
                        </TableCell>
                        <TableCell align="right">
                          {fmtGs(c.saldo_capital)} Gs.
                        </TableCell>
                        <TableCell align="right">
                          {fmtGs(c.saldo_interes)} Gs.
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            </TableContainer>

            <Typography variant="subtitle2" fontWeight={700}>
              Nuevo plan
            </Typography>
            <TableContainer component={Paper} variant="outlined">
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Cuota</TableCell>
                    <TableCell>Vencimiento</TableCell>
                    <TableCell align="right">Monto</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {cuotasPropuestas.map((c) => (
                    <TableRow key={c.nro_cuota}>
                      <TableCell>{c.nro_cuota}</TableCell>
                      <TableCell>
                        {fmtFechaCalendario(c.fecha_vencimiento)}
                      </TableCell>
                      <TableCell align="right">
                        {fmtGs(c.monto_cuota)} Gs.
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </TableContainer>
          </Stack>
        )}
      </DialogContent>
      <DialogActions sx={{ px: 3, py: 1.5 }}>
        <Button
          startIcon={<Icon icon="mdi:file-pdf-box" />}
          onClick={() =>
            data && window.open(getRefinanciacionPdfUrl(data.id), "_blank")
          }
          disabled={!data}
        >
          Ver PDF
        </Button>
        <Box flex={1} />
        {data && esBorrador && canAprobar && (
          <Button
            variant="contained"
            startIcon={<Icon icon="mdi:play-circle-outline" />}
            onClick={() => onEjecutar(data)}
          >
            Ejecutar
          </Button>
        )}
        {data && (esBorrador || esAceptada) && canAnular && (
          <Button
            variant="outlined"
            color="error"
            startIcon={<Icon icon="mdi:cancel" />}
            onClick={() => onAnular(data)}
          >
            Anular
          </Button>
        )}
        <Button onClick={onClose}>Cerrar</Button>
      </DialogActions>
    </Dialog>
  );
}

function Info({ label, value }) {
  return (
    <Box>
      <Typography variant="caption" color="text.secondary" display="block">
        {label}
      </Typography>
      <Typography variant="body2" fontWeight={600}>
        {value ?? "—"}
      </Typography>
    </Box>
  );
}

export default RefinanciacionesPage;