import { Icon } from "@iconify/react";
import { Box, Button, CircularProgress, Paper, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
import * as XLSX from "xlsx";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { useTesReportePosicionCajaQuery } from "../tanstack/TesoreriaStack";
import { usePermission } from "../hooks/usePermission";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { sanitizeRecords } from "../components/_standards";

const fmtMonto = (n, moneda = "PYG") => {
  const val = Number(n || 0);
  if (moneda === "PYG") return `Gs. ${val.toLocaleString("es-PY", { maximumFractionDigits: 0 })}`;
  return `${moneda} ${val.toLocaleString("es-PY", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
};

const TIPO_LABEL = {
  BANCO_CC: "Banco C/C", BANCO_CA: "Banco C/A", CAJA_CHICA: "Caja Chica",
  FONDO_FIJO: "Fondo Fijo", BILLETERA: "Billetera", MONEDA_EXT: "Moneda Ext.",
};

export function ReportePosicionCaja() {
  const navigate = useNavigate();
  const { can } = usePermission("TESORERIA");
  const { data, isLoading, refetch } = useTesReportePosicionCajaQuery();

  if (!can("TES_REP_LIBRO_CAJA_VER")) return <AccesoRestringido modulo="TESORERIA" />;

  const exportarExcel = () => {
    if (!data) return;
    const rows = data.resumen.flatMap(grupo =>
      grupo.cuentas.map(c => ({
        Moneda: c.moneda,
        Cuenta: c.nombre,
        Tipo: TIPO_LABEL[c.tipo] || c.tipo,
        Banco: c.banco?.nombre || "—",
        "N° Cuenta": c.numero_cuenta || "—",
        "Saldo Actual": Number(c.saldo_actual),
      }))
    );
    const ws = XLSX.utils.json_to_sheet(sanitizeRecords(rows));
    ws["!cols"] = [8, 25, 14, 20, 16, 18].map(w => ({ wch: w }));
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Posición de Caja");
    XLSX.writeFile(wb, `posicion-caja-${data?.fecha || "hoy"}.xlsx`);
  };

  return (
    <Container>
      <Header>
        <Button startIcon={<Icon icon="lucide:arrow-left" />} onClick={() => navigate("/reportes")} size="small">
          Volver
        </Button>
        <TitleRow>
          <Icon icon="lucide:wallet" style={{ fontSize: 28, color: "#f88533" }} />
          <div>
            <Typography variant="h5" fontWeight={700}>Posición de Caja</Typography>
            <Typography variant="body2" color="text.secondary">
              Saldo actual de todas las cuentas — {data?.fecha ? new Date(data.fecha + "T12:00:00").toLocaleDateString("es-PY") : ""}
            </Typography>
          </div>
        </TitleRow>
        <Button variant="outlined" startIcon={<Icon icon="lucide:download" />} onClick={exportarExcel} disabled={!data}>
          Excel
        </Button>
      </Header>

      {isLoading ? (
        <Box sx={{ display: "flex", justifyContent: "center", p: 6 }}>
          <CircularProgress />
        </Box>
      ) : (
        <>
          {/* Resumen por moneda */}
          <MonedaGrid>
            {(data?.resumen || []).map(grupo => (
              <MonedaCard key={grupo.moneda}>
                <MonedaLabel>{grupo.moneda}</MonedaLabel>
                <MonedaTotal>{fmtMonto(grupo.total, grupo.moneda)}</MonedaTotal>
                <MonedaCuentas>{grupo.cuentas.length} cuenta{grupo.cuentas.length !== 1 ? "s" : ""}</MonedaCuentas>
              </MonedaCard>
            ))}
          </MonedaGrid>

          {/* Detalle por moneda */}
          {(data?.resumen || []).map(grupo => (
            <Paper key={grupo.moneda} sx={{ mb: 3, overflow: "hidden" }}>
              <Box sx={{ px: 2.5, py: 1.5, borderBottom: "1px solid", borderColor: "divider", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <Typography variant="subtitle1" fontWeight={700}>
                  Cuentas en {grupo.moneda}
                </Typography>
                <Typography variant="body2" color="text.secondary" fontWeight={600}>
                  Total: {fmtMonto(grupo.total, grupo.moneda)}
                </Typography>
              </Box>
              <Table size="small">
                <TableHead>
                  <TableRow>
                    <TableCell>Cuenta</TableCell>
                    <TableCell>Tipo</TableCell>
                    <TableCell>Banco</TableCell>
                    <TableCell>N° Cuenta</TableCell>
                    <TableCell align="right">Saldo Actual</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {grupo.cuentas.map(c => (
                    <TableRow key={c.id} hover>
                      <TableCell><strong>{c.nombre}</strong></TableCell>
                      <TableCell>{TIPO_LABEL[c.tipo] || c.tipo}</TableCell>
                      <TableCell>{c.banco?.nombre || "—"}</TableCell>
                      <TableCell sx={{ fontSize: 12, color: "text.secondary" }}>{c.numero_cuenta || "—"}</TableCell>
                      <TableCell align="right">
                        <strong style={{ color: Number(c.saldo_actual) < 0 ? "#ef4444" : "#22c55e" }}>
                          {fmtMonto(c.saldo_actual, c.moneda)}
                        </strong>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Paper>
          ))}
        </>
      )}
    </Container>
  );
}

const Container = styled.div`
  max-width: 900px;
  margin: 60px auto 0;
  padding: 24px 16px;
`;
const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
`;
const TitleRow = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
`;
const MonedaGrid = styled.div`
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
`;
const MonedaCard = styled.div`
  background: ${p => p.theme.bg2 || "#1e293b"};
  border: 1px solid ${p => p.theme.bg3 || "#334155"};
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 160px;
  flex: 1;
`;
const MonedaLabel = styled.div`
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f88533;
  letter-spacing: 1px;
  margin-bottom: 6px;
`;
const MonedaTotal = styled.div`
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
`;
const MonedaCuentas = styled.div`
  font-size: 12px;
  opacity: 0.6;
`;