// src/pages/Ventas.jsx
import { useState, useEffect, useMemo } from "react";
import { api } from "../lib/api";
import { Loader, ErrorBox, Filters, Select } from "../components/UI";
import Modal from "../components/Modal";
import { useColumnasAjustables } from "../lib/useColumnasAjustables";
import { setVistaActual, onRefrescar } from "../lib/vistaActual";

const MESES = ["ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO","JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"];
const ANOS = [2024, 2025, 2026];
const SEDES = ["TODOS", "LIMA", "AREQUIPA", "PIURA", "TRUJILLO"];
const PROGRAMAS = ["TODOS", "SEMINARIOS", "OTROS", "TEAC", "TERC"];
const COLS = ["VENDEDOR","INSCRITOS","VENTA TOTAL","INSCRITOS P.C DEL MES","VENTA P.C DEL MES","INSCRITOS MES ANTERIOR","VENTA MES ANTERIOR","AVANCE P.C TOTAL","OPC."];
const TIPOS = ["Venta Inscritos", "Venta P.C", "Venta Pendientes"];
const HEADERS_DETALLE = ["VENDEDOR","ALUMNO","F. MATRÍCULA","F. CANCELACIÓN","TIPO","CUOTA PROM.","DESC. ESPECIAL","INV. NETA"];

// ── Ordenamiento de tablas (detecta número/soles, fecha dd-mm-yyyy o texto) ──
function _valorOrden(v) {
  const s = String(v ?? "").trim();
  if (s === "" || s === "—" || s === "-") return { t: "vacio", n: 0, s: "" };
  // Fecha dd-mm-yyyy o dd/mm/yyyy
  const mf = s.match(/^(\d{1,2})[-/](\d{1,2})[-/](\d{4})$/);
  if (mf) {
    const [, d, m, y] = mf;
    return { t: "fecha", n: new Date(+y, +m - 1, +d).getTime(), s };
  }
  // Número / soles / porcentaje (quita S/, comas, %, espacios)
  const limpio = s.replace(/S\/|%|,/g, "").replace(/\s/g, "").trim();
  if (limpio !== "" && !isNaN(Number(limpio))) {
    return { t: "num", n: Number(limpio), s };
  }
  return { t: "texto", n: 0, s: s.toLowerCase() };
}

// Ordena filas (arrays) por la columna idx. dir: "asc" | "desc". Vacíos al final.
function _ordenarFilas(filas, idx, dir) {
  if (idx == null || !dir) return filas;
  const mult = dir === "asc" ? 1 : -1;
  return [...filas].sort((a, b) => {
    const va = _valorOrden(a[idx]);
    const vb = _valorOrden(b[idx]);
    if (va.t === "vacio" && vb.t === "vacio") return 0;
    if (va.t === "vacio") return 1;   // vacíos siempre al final
    if (vb.t === "vacio") return -1;
    if (va.t === "texto" || vb.t === "texto") {
      return mult * va.s.localeCompare(vb.s, "es");
    }
    return mult * (va.n - vb.n);
  });
}

// Flecha del encabezado según el estado de orden de esa columna.
function _flecha(activo, dir) {
  if (!activo) return <span style={{ opacity: 0.3, marginLeft: 4 }}>⇅</span>;
  return <span style={{ marginLeft: 4 }}>{dir === "asc" ? "▲" : "▼"}</span>;
}

export default function Ventas() {
  const hoy = new Date();
  const [ano, setAno] = useState(hoy.getFullYear());
  const [mes, setMes] = useState(hoy.getMonth() + 1);
  const [sede, setSede] = useState("TODOS");
  const [programa, setPrograma] = useState("TODOS");
  const [filas, setFilas] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [modal, setModal] = useState(null); // { vendedor }
  const [ordCol, setOrdCol] = useState(null);   // índice de columna ordenada
  const [ordDir, setOrdDir] = useState(null);   // "asc" | "desc"
  const cols = useColumnasAjustables([200, 100, 130, 120, 130, 120, 130, 140, 100]);

  // Click en encabezado: alterna asc -> desc -> sin orden.
  const clickOrden = (i) => {
    if (i === COLS.length - 1) return;   // columna OPC. no se ordena
    if (ordCol !== i) { setOrdCol(i); setOrdDir("asc"); }
    else if (ordDir === "asc") setOrdDir("desc");
    else { setOrdCol(null); setOrdDir(null); }
  };

  useEffect(() => {
    let activo = true;
    setVistaActual(`ventas:${ano}|${mes}|${sede}|${programa}|False`);
    const cargar = () => {
      setLoading(true); setError(null);
      api.ventas(ano, mes, sede, programa)
        .then((res) => { if (activo) { setFilas(res.filas || []); setLoading(false); } })
        .catch((e) => { if (activo) { setError(e.message); setLoading(false); } });
    };
    cargar();
    const off = onRefrescar(cargar);
    return () => { activo = false; off(); };
  }, [ano, mes, sede, programa]);

  const total = useMemo(() => filas.find((f) => f[0] === "TOTAL GENERAL"), [filas]);
  const datos = useMemo(() => {
    const base = filas.filter((f) => f[0] !== "TOTAL GENERAL");
    return _ordenarFilas(base, ordCol, ordDir);
  }, [filas, ordCol, ordDir]);

  const KPIS = total ? [
    ["👤","Vendedores", datos.length, "activos este mes"],
    ["🎓","Total Inscritos", total[1], "matriculados"],
    ["💵","Venta Total", total[2], "inversión neta"],
    ["✅","Venta P.C del Mes", total[4], "pagos completos"],
    ["🚀","Avance P.C Total", total[7], "P.C + Pendientes"],
  ] : [];

  // Exportar saldos por cuota — Excel con formato (anchos, encabezado de color,
  // fechas reales, montos numéricos en soles y fila TOTAL GENERAL).
  async function exportarCuota(tipoCuota) {
    const toNum = (v) => { const n = parseFloat(String(v).replace("S/","").replace(/,/g,"").trim()); return isNaN(n)?0:n; };
    // Convierte "dd-mm-yyyy" o "dd/mm/yyyy" a Date; si no puede, devuelve el texto original
    const toDate = (v) => {
      if (!v) return "";
      const s = String(v).trim().replace(/\//g,"-");
      const p = s.split("-");
      if (p.length === 3) {
        let [d,m,y] = p;
        if (y.length === 4) return new Date(+y, +m-1, +d);
      }
      return String(v);
    };

    let res;
    try {
      res = await api.saldoPendiente(tipoCuota);
    } catch (e) {
      alert("No se pudo obtener los datos de saldos: " + e.message);
      return;
    }
    const datosS = res.datos || [];
    const colSaldo = `SALDO ${tipoCuota.toUpperCase()}`;
    const filtrados = datosS.filter((d) => toNum(d[colSaldo]) > 0.01);
    if (filtrados.length === 0) { alert(`No hay saldos pendientes para ${tipoCuota}.`); return; }

    const COLS = ["MATRÍCULA","VENDEDOR","ALUMNO","PROGRAMA","F. INICIO","F. MATR.","SALDO MAT.",colSaldo,"VENCIMIENTO","INV. NETA"];
    const KEYS = ["MATRICULA","VENDEDOR","ALUMNO","PROGRAMA","FECHA INICIO","FECHA MATR.","SALDO MAT.",colSaldo,"VENCIMIENTO","INV. NETA"];
    const COL_MONTO = ["SALDO MAT.", colSaldo, "INV. NETA"];
    const COL_FECHA = ["F. INICIO","F. MATR.","VENCIMIENTO"];

    const XLSX = await import("xlsx-js-style");

    // Construir matriz de celdas (AOA) con tipos correctos
    const headerStyle = {
      font: { bold: true, color: { rgb: "FFFFFF" }, sz: 11 },
      fill: { fgColor: { rgb: "1E40AF" } },
      alignment: { horizontal: "center", vertical: "center" },
    };
    const moneyFmt = '"S/" #,##0';
    const dateFmt = "dd/mm/yyyy";

    const ws = {};
    const range = { s: { r: 0, c: 0 }, e: { r: filtrados.length + 1, c: COLS.length - 1 } };

    // Encabezado
    COLS.forEach((h, c) => {
      const ref = XLSX.utils.encode_cell({ r: 0, c });
      ws[ref] = { v: h, t: "s", s: headerStyle };
    });

    // Filas de datos
    filtrados.forEach((d, ri) => {
      KEYS.forEach((k, c) => {
        const ref = XLSX.utils.encode_cell({ r: ri + 1, c });
        const col = COLS[c];
        if (COL_MONTO.includes(col)) {
          ws[ref] = { v: toNum(d[k]), t: "n", z: moneyFmt };
        } else if (COL_FECHA.includes(col)) {
          const dt = toDate(d[k]);
          if (dt instanceof Date) ws[ref] = { v: dt, t: "d", z: dateFmt };
          else ws[ref] = { v: dt, t: "s" };
        } else {
          ws[ref] = { v: d[k] ?? "", t: "s" };
        }
      });
    });

    // Fila TOTAL GENERAL: promedio en SALDO MAT. y SALDO CUOTA, suma en INV. NETA
    const rTot = filtrados.length + 1;
    const sum = (k) => filtrados.reduce((s,d)=>s+toNum(d[k]),0);
    const prom = (k) => filtrados.length ? sum(k)/filtrados.length : 0;
    const totalStyle = { font: { bold: true }, fill: { fgColor: { rgb: "EFF6FF" } } };
    COLS.forEach((col, c) => {
      const ref = XLSX.utils.encode_cell({ r: rTot, c });
      if (c === 0) ws[ref] = { v: "TOTAL GENERAL", t: "s", s: totalStyle };
      else if (col === "SALDO MAT.") ws[ref] = { v: prom("SALDO MAT."), t: "n", z: moneyFmt, s: totalStyle };
      else if (col === colSaldo) ws[ref] = { v: prom(colSaldo), t: "n", z: moneyFmt, s: totalStyle };
      else if (col === "INV. NETA") ws[ref] = { v: sum("INV. NETA"), t: "n", z: moneyFmt, s: totalStyle };
      else ws[ref] = { v: "", t: "s", s: totalStyle };
    });

    ws["!ref"] = XLSX.utils.encode_range(range);
    ws["!cols"] = [
      { wch: 12 }, // MATRÍCULA
      { wch: 22 }, // VENDEDOR
      { wch: 28 }, // ALUMNO
      { wch: 32 }, // PROGRAMA
      { wch: 12 }, // F. INICIO
      { wch: 12 }, // F. MATR.
      { wch: 13 }, // SALDO MAT.
      { wch: 15 }, // SALDO CUOTA
      { wch: 13 }, // VENCIMIENTO
      { wch: 13 }, // INV. NETA
    ];

    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "Saldos");
    const nombre = tipoCuota.replace("°","").replace(/\s/g,"_");
    XLSX.writeFile(wb, `saldos_${nombre}.xlsx`);
  }

  return (
    <div>
      <h1 className="page-title">🛒 Ventas</h1>

      <Filters>
        <Select label="Año" value={ano} options={ANOS} onChange={(v) => setAno(+v)} />
        <Select label="Mes" value={mes} options={MESES.map((m,i)=>({value:i+1,label:m}))} onChange={(v) => setMes(+v)} />
        <Select label="Sede" value={sede} options={SEDES} onChange={setSede} />
        <Select label="Programa" value={programa} options={PROGRAMAS} onChange={setPrograma} />
        <div style={{display:"flex",gap:8,alignItems:"flex-end",marginLeft:"auto"}}>
          <button className="btn btn-primary" style={{height:38}} onClick={() => exportarCuota("1° Cuota")}>
            ⬇️ Exportar 1° Cuota
          </button>
          <button className="btn btn-primary" style={{height:38}} onClick={() => exportarCuota("2° Cuota")}>
            ⬇️ Exportar 2° Cuota
          </button>
        </div>
      </Filters>

      {loading ? <Loader text="Calculando ventas..." /> :
       error ? <ErrorBox msg={error} /> :
       <>
         <div className="kpis" style={{ gridTemplateColumns: "repeat(5,1fr)" }}>
           {KPIS.map(([ico,label,val,sub]) => (
             <div className="kpi" key={label}>
               <div className="ico">{ico}</div>
               <div className="label" style={{fontSize:12}}>{label}</div>
               <div className="value" style={{fontSize:20}}>{val}</div>
               <div className="sub">{sub}</div>
             </div>
           ))}
         </div>

         <div className="table-wrap" style={{overflowX:"auto"}}>
           <table {...cols.tableProps}>
             <cols.ColGroup />
             <thead><tr>{COLS.map((c, i) => {
               const ordenable = i !== COLS.length - 1;
               return (
                 <th key={c} style={{position:"relative", cursor: ordenable ? "pointer" : "default", userSelect:"none"}}
                     onClick={() => clickOrden(i)}>
                   {c}{ordenable && _flecha(ordCol === i, ordDir)}<cols.Resizer index={i} />
                 </th>
               );
             })}</tr></thead>
             <tbody>
               {datos.map((f, i) => (
                 <tr key={i}>
                   <td className="col-name">{f[0]}</td>
                   <td>{f[1]}</td><td>{f[2]}</td>
                   <td>{f[3]}</td><td>{f[4]}</td>
                   <td>{f[5]}</td><td>{f[6]}</td>
                   <td style={{fontWeight:600}}>{f[7]}</td>
                   <td>
                     <button className="btn btn-ghost" style={{padding:"4px 10px",fontSize:11}}
                       onClick={() => setModal({ vendedor: f[0] })}>👁️ Ver</button>
                   </td>
                 </tr>
               ))}
               {total && (
                 <tr className="total-row">
                   <td className="col-name">TOTAL GENERAL</td>
                   <td>{total[1]}</td><td>{total[2]}</td>
                   <td>{total[3]}</td><td>{total[4]}</td>
                   <td>{total[5]}</td><td>{total[6]}</td>
                   <td>{total[7]}</td><td>—</td>
                 </tr>
               )}
             </tbody>
           </table>
         </div>
       </>}

      {modal && (
        <ModalDetalle vendedor={modal.vendedor} ano={ano} mes={mes} onClose={() => setModal(null)} />
      )}
    </div>
  );
}

function ModalDetalle({ vendedor, ano, mes, onClose }) {
  const [tipo, setTipo] = useState(TIPOS[0]);
  const [filas, setFilas] = useState([]);
  const [loading, setLoading] = useState(true);
  const [ordCol, setOrdCol] = useState(null);
  const [ordDir, setOrdDir] = useState(null);

  const clickOrden = (i) => {
    if (ordCol !== i) { setOrdCol(i); setOrdDir("asc"); }
    else if (ordDir === "asc") setOrdDir("desc");
    else { setOrdCol(null); setOrdDir(null); }
  };

  useEffect(() => {
    let activo = true;
    setLoading(true);
    api.ventasDetalle(vendedor, ano, mes, tipo, "TODOS", "TODOS", true)
      .then((res) => { if (activo) { setFilas(res.filas || []); setLoading(false); } })
      .catch(() => { if (activo) { setFilas([]); setLoading(false); } });
    return () => { activo = false; };
  }, [vendedor, ano, mes, tipo]);

  // Columnas redimensionables (igual que las tablas principales)
  const colsDet = useColumnasAjustables([200, 260, 120, 130, 120, 120, 130, 120]);
  const filasOrd = useMemo(() => _ordenarFilas(filas, ordCol, ordDir), [filas, ordCol, ordDir]);

  return (
    <Modal title={`👤 ${vendedor}`} onClose={onClose} width={1500}>
      <div style={{ marginBottom: 14 }}>
        <Select label="Tipo de venta" value={tipo} options={TIPOS} onChange={setTipo} />
      </div>
      {loading ? <Loader text="Cargando detalle..." /> :
       filas.length === 0 ? <div style={{color:"#94a3b8",padding:20,textAlign:"center"}}>Sin registros para esta categoría.</div> :
       <div className="table-wrap" style={{overflowX:"auto"}}>
         <table {...colsDet.tableProps}>
           <colsDet.ColGroup />
           <thead><tr>{HEADERS_DETALLE.map((h, i) => (
             <th key={h} style={{position:"relative", whiteSpace:"nowrap", cursor:"pointer", userSelect:"none"}}
                 onClick={() => clickOrden(i)}>
               {h}{_flecha(ordCol === i, ordDir)}<colsDet.Resizer index={i} />
             </th>
           ))}</tr></thead>
           <tbody>
             {filasOrd.map((f, i) => (
               <tr key={i}>
                 {f.slice(0, HEADERS_DETALLE.length).map((v, j) => (
                   <td key={j} className={j === 1 ? "col-name" : ""}
                       style={{textAlign:"center", whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>{v}</td>
                 ))}
               </tr>
             ))}
           </tbody>
         </table>
       </div>}
    </Modal>
  );
}