/* ============================================================
   Vista: Dashboard
   ============================================================ */
function StatCard({ icon, tint, label, value, delta, deltaDir, onClick }) {
  return (
    <div className={"stat" + (onClick ? " clickable" : "")} onClick={onClick}
      role={onClick ? "button" : undefined} tabIndex={onClick ? 0 : undefined}
      onKeyDown={onClick ? (e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } } : undefined}>
      {onClick && <Icon name="chevron" className="stat-more" size={16} />}
      <div className="stat-ico" style={{ background: tint.bg, color: tint.fg }}>
        <Icon name={icon} />
      </div>
      <div className="stat-label">{label}</div>
      <div className="stat-value">{value}</div>
      {delta && (
        <div className={"stat-delta " + (deltaDir === "down" ? "delta-down" : "delta-up")}>
          <Icon name={deltaDir === "down" ? "arrowDown" : "arrowUp"} size={14} />{delta}
        </div>
      )}
    </div>
  );
}

function Dashboard({ products, suppliers, go }) {
  const [detail, setDetail] = useState(null);
  const invValue = products.reduce((s, p) => s + p.buyPrice * p.stock, 0);
  const retailValue = products.reduce((s, p) => s + p.sellPrice * p.stock, 0);
  const crit = products.filter((p) => RB.stockState(p) === "crit");
  const warn = products.filter((p) => RB.stockState(p) === "warn");
  const avgMargin = products.reduce((s, p) => s + RB.margin(p), 0) / (products.length || 1);
  const toReorder = [...crit, ...warn];

  // ---- Desgloses (qué compone cada indicador) ----
  const fmt = RB.fmtARS;
  const withStock = products.filter((p) => p.stock > 0);
  const DET = {
    inv: () => ({
      title: "Valor de inventario (costo)",
      intro: "Cuánto te costó comprar el stock que tenés hoy (precio de compra × unidades). Detalle por producto:",
      rows: withStock.map((p) => ({ n: p.name, v: p.buyPrice * p.stock, sub: p.stock + " u × " + fmt(p.buyPrice) }))
        .sort((a, b) => b.v - a.v).map((r) => ({ name: r.n, sub: r.sub, value: fmt(r.v) })),
      empty: "Todavía no cargaron stock (todo está en 0). Cuando cuenten las unidades en la sección Stock, acá vas a ver cuánto vale tu inventario y qué productos lo componen.",
      foot: { label: "Total inventario (costo)", value: fmt(invValue) },
    }),
    retail: () => ({
      title: "Valor a precio de venta",
      intro: "Cuánto facturarías si vendieras todo el stock actual a tu precio de venta. Detalle por producto:",
      rows: withStock.map((p) => ({ n: p.name, v: p.sellPrice * p.stock, sub: p.stock + " u × " + fmt(p.sellPrice) }))
        .sort((a, b) => b.v - a.v).map((r) => ({ name: r.n, sub: r.sub, value: fmt(r.v) })),
      empty: "Todavía no cargaron stock. Cuando cuenten las unidades, acá vas a ver el valor de venta de tu inventario.",
      foot: { label: "Total a precio de venta", value: fmt(retailValue) },
    }),
    prods: () => {
      const c = {}; products.forEach((p) => { c[p.cat] = (c[p.cat] || 0) + 1; });
      return {
        title: "Productos activos",
        intro: "Tenés " + products.length + " productos cargados, de " + suppliers.length + " proveedores. Repartidos por categoría:",
        rows: Object.entries(c).sort((a, b) => b[1] - a[1]).map(([cat, n]) => ({ name: cat, value: n + " productos" })),
        foot: { label: "Total productos", value: products.length },
      };
    },
    alerts: () => {
      const list = products.filter((p) => RB.stockState(p) !== "ok")
        .sort((a, b) => (RB.stockState(a) === "crit" ? 0 : 1) - (RB.stockState(b) === "crit" ? 0 : 1));
      return {
        title: "Alertas de stock",
        intro: "Productos por debajo de lo recomendado. Conviene reponerlos. (Stock actual / mínimo)",
        rows: list.map((p) => ({ name: p.name, sub: RB.stockState(p) === "crit" ? "Crítico" : "Bajo", value: p.stock + " / " + p.stockMin, color: RB.stockState(p) === "crit" ? "var(--crit)" : "var(--warn)" })),
        empty: "¡Todo el stock está en orden! No hay alertas. 🌿",
        foot: { label: "Total alertas", value: crit.length + warn.length },
      };
    },
  };

  // ventas simuladas (últimos 6 meses) — datos de muestra
  const sales = [
    { m: "Ene", v: 1240000 }, { m: "Feb", v: 1180000 }, { m: "Mar", v: 1520000 },
    { m: "Abr", v: 1690000 }, { m: "May", v: 1980000 }, { m: "Jun", v: 2240000 },
  ];
  const maxSale = Math.max(...sales.map((s) => s.v));

  // inventario por categoría
  const byCat = {};
  products.forEach((p) => { byCat[p.cat] = (byCat[p.cat] || 0) + p.buyPrice * p.stock; });
  const catRows = Object.entries(byCat).sort((a, b) => b[1] - a[1]).slice(0, 6);
  const catColors = ["#2F6249", "#3C7657", "#7E9A82", "#C2734A", "#D7A24A", "#5B7A60"];
  const catTotal = catRows.reduce((s, [, v]) => s + v, 0);

  return (
    <div>
      <div className="stat-grid">
        <StatCard icon="wallet" tint={{ bg: "#E7F0E6", fg: "#2F6249" }}
          label="Valor de inventario (costo)" value={RB.fmtARS(invValue)} delta="12,4% vs. mes ant." deltaDir="up"
          onClick={() => setDetail(DET.inv())} />
        <StatCard icon="coins" tint={{ bg: "#F6EDD4", fg: "#A9801C" }}
          label="Valor a precio de venta" value={RB.fmtARS(retailValue)} delta="9,1%" deltaDir="up"
          onClick={() => setDetail(DET.retail())} />
        <StatCard icon="box" tint={{ bg: "#E2ECF1", fg: "#3E6E8E" }}
          label="Productos activos" value={RB.fmtNum(products.length)} delta={suppliers.length + " proveedores"} deltaDir="up"
          onClick={() => setDetail(DET.prods())} />
        <StatCard icon="alert" tint={{ bg: "#F6E2DB", fg: "#BD5239" }}
          label="Alertas de stock" value={RB.fmtNum(crit.length + warn.length)}
          delta={crit.length + " críticos"} deltaDir="down"
          onClick={() => setDetail(DET.alerts())} />
      </div>

      {detail && <DetailModal {...detail} onClose={() => setDetail(null)} />}

      <div className="grid-2 mt24">
        {/* Ventas */}
        <div className="card card-pad">
          <div className="flex between" style={{ alignItems: "flex-start" }}>
            <div className="card-head" style={{ marginBottom: 0 }}>
              <h2>Ventas mensuales <InfoTip title="Ventas mensuales" text="Lo vendido mes a mes en los últimos 6 meses, para ver la tendencia. Por ahora son datos de muestra (no reales) hasta conectar las ventas." /></h2>
              <div className="ch-sub">Últimos 6 meses · datos de muestra</div>
            </div>
            <span className="badge badge-ok"><span className="dot"></span>+18% semestre</span>
          </div>
          <div className="bars mt16">
            {sales.map((s) => (
              <div className="col" key={s.m}>
                <div className="b" style={{ height: (s.v / maxSale * 100) + "%" }} title={RB.fmtARS(s.v)}></div>
                <div className="lbl">{s.m}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Inventario por categoría */}
        <div className="card card-pad">
          <div className="card-head">
            <h2>Inventario por categoría <InfoTip title="Inventario por categoría" text="Qué porcentaje del costo total de tu stock representa cada categoría de producto. Sirve para ver en qué tenés más plata invertida." /></h2>
            <div className="ch-sub">Participación sobre el costo total</div>
          </div>
          <div className="legend">
            {catRows.map(([cat, v], i) => (
              <div className="li" key={cat}>
                <span className="sw" style={{ background: catColors[i % catColors.length] }}></span>
                <span className="nm">{cat}</span>
                <span className="vl">{Math.round(v / catTotal * 100)}%</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Productos a reponer */}
      <div className="section-head">
        <h2>Requiere atención</h2>
        <span className="sh-sub">· {toReorder.length} productos por debajo del ideal</span>
        <span className="spacer"></span>
        <button className="btn btn-ghost btn-sm" onClick={() => go("compras")}>
          Ver lista de compras<Icon name="cart" size={15} />
        </button>
      </div>
      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Producto</th><th>Categoría</th><th className="center">Stock</th>
              <th className="center">Mín / Ideal</th><th>Estado</th><th className="right">Reponer</th>
            </tr>
          </thead>
          <tbody>
            {toReorder.length === 0 && (
              <tr><td colSpan="6"><div className="empty"><Icon name="check" size={40} /><div>Todo el stock está en orden 🌿</div></div></td></tr>
            )}
            {toReorder.sort((a, b) => RB.stockState(a) === "crit" ? -1 : 1).map((p) => (
              <tr key={p.id}>
                <td><div className="prod-cell"><ProdThumb product={p} /><span className="td-strong">{p.name}</span></div></td>
                <td data-label="Categoría"><span className="tag">{p.cat}</span></td>
                <td className="center num td-strong" data-label="Stock">{p.stock}</td>
                <td className="center num muted" data-label="Mín / Ideal">{p.stockMin} / {RB.stockIdeal(p)}</td>
                <td data-label="Estado"><StockBadge product={p} /></td>
                <td className="right num td-strong" data-label="Reponer">+{RB.reorderQty(p)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });