import { Icon } from "@iconify/react";
import {
  Box,
  Chip,
  Collapse,
  FormControlLabel,
  IconButton,
  Paper,
  Skeleton,
  Switch,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Typography,
} from "@mui/material";
import { Fragment, useMemo, useRef, useState } from "react";
import { useSaldosFavorAllQuery } from "../../../tanstack/RecibosMultiStack";
import {
  EmptyState,
  ScreenGuia,
  fmtMoneda,
} from "../../_standards";

const fmtFecha = (str) => {
  if (!str) return "—";
  try {
    return new Date(str).toLocaleDateString("es-PY", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    });
  } catch {
    return str;
  }
};

const GUIA_SALDOS_FAVOR = {
  intro:
    "Esta pantalla lista todos los saldos a favor de los clientes (anticipos). Un saldo a favor nace cuando un cobro supera el monto imputado, y se consume al usarse como medio de pago en futuros recibos multi-factura.",
  pasos: [
    {
      icon: "mdi:cash-plus",
      color: "#22c55e",
      titulo: "1. ¿Cómo se generan?",
      desc: "Al crear un Recibo Multi y marcar diferencia tipo «SALDO_FAVOR», el excedente queda como anticipo del cliente, disponible para futuros cobros.",
    },
    {
      icon: "mdi:cash-minus",
      color: "#f59e0b",
      titulo: "2. ¿Cómo se consumen?",
      desc: "En un nuevo recibo, agregá medio de pago tipo «Saldo a Favor» y elegí el saldo disponible del cliente. El sistema descuenta el monto consumido.",
    },
    {
      icon: "mdi:format-list-bulleted",
      color: "#4f8ef7",
      titulo: "3. Movimientos",
      desc: "Cada saldo tiene un historial: CARGA (origen), CONSUMO (consumido por otro recibo) y REVERSA (al anular un recibo). Expandí cada fila para ver el detalle.",
    },
  ],
  notas: [
    { icon: "mdi:lock-outline", text: "Anular el recibo que generó el saldo solo es posible si aún no fue consumido por otro recibo." },
    { icon: "mdi:cancel", text: "Saldos anulados quedan en gris para auditoría; no se pueden volver a usar." },
    { icon: "mdi:translate", text: "Cada saldo está en su moneda original; no se convierten automáticamente entre monedas." },
  ],
};

export function SaldosFavorPanel() {
  const guiaRef = useRef(null);
  const scrollToGuia = () => guiaRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });

  const [filtroCliente, setFiltroCliente] = useState("");
  const [soloDisponibles, setSoloDisponibles] = useState(true);
  const [expandido, setExpandido] = useState({});

  const { data = [], isLoading } = useSaldosFavorAllQuery({
    solo_disponibles: soloDisponibles ? "true" : undefined,
  });

  const filtrado = useMemo(() => {
    const q = filtroCliente.trim().toLowerCase();
    if (!q) return data;
    return data.filter((s) =>
      [s.cliente_razon_social, s.cliente_ruc, s.cliente_nro_documento, s.recibo_origen_numero]
        .filter(Boolean)
        .some((v) => String(v).toLowerCase().includes(q))
    );
  }, [data, filtroCliente]);

  const totales = useMemo(() => {
    const porMoneda = {};
    for (const s of filtrado) {
      if (s.anulado) continue;
      porMoneda[s.moneda] = (porMoneda[s.moneda] ?? 0) + Number(s.monto_disponible);
    }
    return porMoneda;
  }, [filtrado]);

  const toggle = (id) => setExpandido((p) => ({ ...p, [id]: !p[id] }));

  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
      <ScreenGuia ref={guiaRef} titulo="¿Cómo funcionan los saldos a favor?" {...GUIA_SALDOS_FAVOR} />

      {/* Toolbar */}
      <Box sx={{ display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
        <TextField
          size="small"
          placeholder="Buscar por cliente, RUC o recibo"
          value={filtroCliente}
          onChange={(e) => setFiltroCliente(e.target.value)}
          sx={{ width: 320 }}
          InputProps={{
            startAdornment: <Icon icon="mdi:magnify" style={{ marginRight: 8, opacity: 0.6 }} />,
          }}
        />
        <FormControlLabel
          control={<Switch checked={soloDisponibles} onChange={(e) => setSoloDisponibles(e.target.checked)} />}
          label="Solo con saldo disponible"
        />
      </Box>

      {/* Resumen */}
      {!isLoading && Object.keys(totales).length > 0 && (
        <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
          {Object.entries(totales).map(([moneda, total]) => (
            <Paper key={moneda} variant="outlined" sx={{ p: 1.5, minWidth: 180 }}>
              <Typography variant="caption" color="text.secondary">Total disponible ({moneda})</Typography>
              <Typography fontWeight={600} color="success.main">{fmtMoneda(total, moneda)}</Typography>
            </Paper>
          ))}
          <Paper variant="outlined" sx={{ p: 1.5, minWidth: 180 }}>
            <Typography variant="caption" color="text.secondary">Saldos listados</Typography>
            <Typography fontWeight={600}>{filtrado.length}</Typography>
          </Paper>
        </Box>
      )}

      {/* Tabla */}
      <TableContainer component={Paper} variant="outlined">
        <Table size="small">
          <TableHead>
            <TableRow sx={{ "& th": { fontWeight: 600, bgcolor: "action.hover" } }}>
              <TableCell width={40} />
              <TableCell>Cliente</TableCell>
              <TableCell>Origen</TableCell>
              <TableCell>Recibo origen</TableCell>
              <TableCell>Fecha alta</TableCell>
              <TableCell align="right">Monto original</TableCell>
              <TableCell align="right">Consumido</TableCell>
              <TableCell align="right">Disponible</TableCell>
              <TableCell>Estado</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {isLoading &&
              [...Array(5)].map((_, i) => (
                <TableRow key={i}>
                  {[...Array(9)].map((__, j) => (
                    <TableCell key={j}><Skeleton /></TableCell>
                  ))}
                </TableRow>
              ))}

            {!isLoading && filtrado.length === 0 && (
              <TableRow>
                <TableCell colSpan={9} sx={{ borderBottom: "none", py: 0 }}>
                  <EmptyState
                    icon="mdi:wallet-outline"
                    title="No hay saldos a favor"
                    description="Los saldos a favor se generan automáticamente cuando un cliente paga más de lo que debe en un recibo multi-factura, o quedan al aplicar NC modo flexible que sobrepasa el saldo."
                    onHelp={scrollToGuia}
                  />
                </TableCell>
              </TableRow>
            )}

            {!isLoading && filtrado.map((s) => {
              const isOpen = !!expandido[s.id];
              const consumido = Number(s.monto_consumido ?? 0);
              const disponible = Number(s.monto_disponible);
              const estado = s.anulado ? "ANULADO" : disponible > 0 ? "DISPONIBLE" : "AGOTADO";
              return (
                <Fragment key={s.id}>
                  <TableRow sx={{ opacity: s.anulado ? 0.4 : 1, "& > *": { borderBottom: isOpen ? "unset" : undefined } }}>
                    <TableCell>
                      <IconButton size="small" onClick={() => toggle(s.id)}>
                        <Icon icon={isOpen ? "mdi:chevron-up" : "mdi:chevron-down"} />
                      </IconButton>
                    </TableCell>
                    <TableCell>
                      <Typography variant="body2">{s.cliente_razon_social ?? "—"}</Typography>
                      <Typography variant="caption" color="text.secondary">
                        {s.cliente_ruc ?? s.cliente_nro_documento ?? ""}
                      </Typography>
                    </TableCell>
                    <TableCell>
                      <Chip size="small" label={s.origen} variant="outlined" />
                    </TableCell>
                    <TableCell sx={{ fontFamily: "monospace" }}>{s.recibo_origen_numero ?? "—"}</TableCell>
                    <TableCell>{fmtFecha(s.created_at)}</TableCell>
                    <TableCell align="right">{fmtMoneda(s.monto_original, s.moneda)}</TableCell>
                    <TableCell align="right" sx={{ color: consumido > 0 ? "warning.main" : "text.secondary" }}>
                      {fmtMoneda(consumido, s.moneda)}
                    </TableCell>
                    <TableCell align="right" sx={{ fontWeight: 600, color: disponible > 0 ? "success.main" : "text.secondary" }}>
                      {fmtMoneda(disponible, s.moneda)}
                    </TableCell>
                    <TableCell>
                      <Chip
                        size="small"
                        label={estado}
                        color={estado === "DISPONIBLE" ? "success" : estado === "AGOTADO" ? "default" : "error"}
                        variant="outlined"
                      />
                    </TableCell>
                  </TableRow>
                  <TableRow>
                    <TableCell colSpan={9} sx={{ py: 0, borderBottom: isOpen ? undefined : "none" }}>
                      <Collapse in={isOpen} unmountOnExit>
                        <Box sx={{ p: 2, bgcolor: "action.hover" }}>
                          <Typography variant="subtitle2" gutterBottom>
                            Movimientos del saldo
                          </Typography>
                          {(!s.movimientos || s.movimientos.length === 0) ? (
                            <Typography variant="body2" color="text.secondary">
                              Sin movimientos registrados.
                            </Typography>
                          ) : (
                            <Table size="small">
                              <TableHead>
                                <TableRow>
                                  <TableCell>Fecha</TableCell>
                                  <TableCell>Tipo</TableCell>
                                  <TableCell>Recibo</TableCell>
                                  <TableCell align="right">Monto</TableCell>
                                </TableRow>
                              </TableHead>
                              <TableBody>
                                {s.movimientos.map((mov) => (
                                  <TableRow key={mov.id}>
                                    <TableCell>{fmtFecha(mov.created_at)}</TableCell>
                                    <TableCell>
                                      <Chip
                                        size="small"
                                        label={mov.tipo}
                                        color={mov.tipo === "CARGA" ? "success" : mov.tipo === "CONSUMO" ? "warning" : "error"}
                                        variant="outlined"
                                      />
                                    </TableCell>
                                    <TableCell sx={{ fontFamily: "monospace" }}>{mov.recibo_numero ?? "—"}</TableCell>
                                    <TableCell align="right" sx={{ fontWeight: 600 }}>
                                      {fmtMoneda(mov.monto, s.moneda)}
                                    </TableCell>
                                  </TableRow>
                                ))}
                              </TableBody>
                            </Table>
                          )}
                        </Box>
                      </Collapse>
                    </TableCell>
                  </TableRow>
                </Fragment>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </Box>
  );
}