/* global React, window */
// =================== RETUR PÅ LAGER (slutoptælling) ===================
// Viser KUN det der er optalt i slutoptællingen: hvor meget der fysisk er på lager lige nu.
// Ingen modregning mod "modtaget" (start_qty/fakturaer er upålidelige pt.).
// Det eneste vi bruger fra fakturaerne er prisen pr. vare (products.price).
const { useState: useStateRC, useMemo: useMemoRC } = React;
const DRC = window.LAGER_DATA;
const UIRC = window.LagerUI;

function ReconOverview({ go, countState, dayProps }) {
  const [sup, setSup] = useStateRC("alle");
  const [q, setQ] = useStateRC("");

  // Saml slutoptællinger på tværs af barer: total = hele + anbrud, pr. vare.
  const { rows, manual, barsWithFinal, barsTotal } = useMemoRC(() => {
    const agg = {};
    const manualLines = [];
    let withFinal = 0;
    const bars = DRC.bars || [];
    bars.forEach(b => {
      const final = countState?.[b.id]?.final;
      if (!final?.data) return;
      withFinal += 1;
      Object.entries(final.data).forEach(([pid, e]) => {
        if (pid === "__manual") {
          (Array.isArray(e) ? e : []).forEach(it => manualLines.push({ ...it, barName: b.name }));
          return;
        }
        if (!e || e.na) return;   // "ikke haft her" tæller ikke med
        if (!agg[pid]) agg[pid] = { total: 0, anbrud: 0 };
        agg[pid].total += (e.full || 0) + (e.open || 0);
        agg[pid].anbrud += e.open || 0;
      });
    });
    const list = Object.entries(agg).map(([pid, a]) => {
      const p = UIRC.product(pid);
      const price = p?.price || 0;
      return { pid, p, total: a.total, anbrud: a.anbrud, price, value: a.total * price };
    }).filter(x => x.p).sort((a, b) => b.value - a.value);
    return { rows: list, manual: manualLines, barsWithFinal: withFinal, barsTotal: bars.length };
  }, [countState]);

  const suppliers = useMemoRC(() => Array.from(new Set(rows.map(r => r.p.supplier).filter(Boolean))).sort(), [rows]);

  const shown = rows.filter(r => {
    if (sup !== "alle" && r.p.supplier !== sup) return false;
    if (q.trim() && !r.p.name.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  const totalValue = rows.reduce((s, r) => s + r.value, 0);
  const withStock = rows.filter(r => r.total > 0).length;
  const withAnbrud = rows.filter(r => r.anbrud > 0).length;
  const fmt = UIRC.fmtKr;
  const kr = (n) => fmt(Math.round(n));
  const missingFinal = barsWithFinal < barsTotal;
  // Enheds-tekst pr. vare: tal og pris er i varens faktura-enhed (kasser for KS-varer, ellers stk/flasker).
  const unitTxt = (p) => UIRC.baseUnitLabel(p);

  const stat = (label, value, sub, tone) => (
    <div className={"stat " + (tone || "")}>
      <div className="stat-label">{label}</div>
      <div className="stat-value">{value}</div>
      {sub && <div className={"stat-delta " + (tone || "")}>{sub}</div>}
    </div>
  );

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Retur på lager</h1>
          <p className="page-sub">Det der er optalt i slutoptællingen — hvad der fysisk er på lager lige nu. Priser fra fakturaerne.</p>
        </div>
        {dayProps && <UIRC.DaySelector dayProps={dayProps}/>}
      </div>

      <div className="page-body">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 14 }}>
          {stat("Retur-værdi", kr(totalValue), "antal × fakturapris", "ok")}
          {stat("Varer med retur", withStock, `af ${rows.length} optalte varer`)}
          {stat("Varer med anbrud", withAnbrud, "åbnede, typisk ingen kredit", withAnbrud > 0 ? "warn" : "ok")}
          {stat("Slutoptællinger", `${barsWithFinal} / ${barsTotal}`, missingFinal ? "Mangler barer" : "Alle indleveret", missingFinal ? "warn" : "ok")}
        </div>

        {missingFinal && (
          <div className="card" style={{ padding: "10px 14px", marginBottom: 12, border: "1px solid var(--warn)", display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
            <UIRC.Ico.warn style={{ width: 15, height: 15, color: "var(--warn)", flexShrink: 0 }} />
            <span>{barsTotal - barsWithFinal} af {barsTotal} {DRC.labels?.units?.toLowerCase() || "barer"} har ikke indleveret slutoptælling for den valgte dag. Tallene her er kun for de {barsWithFinal} der har.</span>
          </div>
        )}

        <div className="card" style={{ overflow: "hidden" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderBottom: "1px solid var(--border)", flexWrap: "wrap" }}>
            <b style={{ fontSize: 13 }}>Optalt retur pr. vare</b>
            <span style={{ marginLeft: "auto", display: "flex", gap: 8, alignItems: "center" }}>
              <select className="input" value={sup} onChange={e => setSup(e.target.value)} style={{ padding: "6px 8px", fontSize: 13 }}>
                <option value="alle">Alle leverandører</option>
                {suppliers.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
              <input className="input" placeholder="Søg vare…" value={q} onChange={e => setQ(e.target.value)} style={{ width: 160 }} />
            </span>
          </div>

          <table className="tbl">
            <thead>
              <tr>
                <th>Vare</th>
                <th className="mob-hide">Leverandør</th>
                <th className="num">På lager</th>
                <th className="num mob-hide">Heraf anbrud</th>
                <th className="num mob-hide">Fakturapris</th>
                <th className="num">Værdi</th>
              </tr>
            </thead>
            <tbody>
              {shown.map(r => (
                <tr key={r.pid}>
                  <td style={{ fontWeight: 500 }}>{r.p.name}</td>
                  <td className="muted mob-hide">{r.p.supplier || "—"}</td>
                  <td className="num" style={{ fontWeight: 600 }}>{r.total.toLocaleString("da-DK")} <span className="muted" style={{ fontSize: 11 }}>{unitTxt(r.p)}</span></td>
                  <td className="num muted mob-hide">{r.anbrud > 0 ? r.anbrud.toLocaleString("da-DK") : "—"}</td>
                  <td className="num muted mob-hide">{fmt(r.price)} <span className="muted" style={{ fontSize: 11 }}>pr. {unitTxt(r.p) === "kasser" ? "kasse" : "stk"}</span></td>
                  <td className="num">{kr(r.value)}</td>
                </tr>
              ))}
              {shown.length === 0 && (
                <tr><td colSpan={6} style={{ textAlign: "center", padding: 32, color: "var(--text-muted)" }}>
                  {rows.length === 0 ? "Ingen slutoptællinger indleveret for den valgte dag endnu." : "Ingen varer matcher filteret."}
                </td></tr>
              )}
            </tbody>
          </table>

          <div style={{ padding: "10px 16px", borderTop: "1px solid var(--border)", background: "var(--bg-sunken)", fontSize: 12, color: "var(--text-muted)", display: "flex", gap: 18, flexWrap: "wrap" }}>
            <span><b style={{ color: "var(--text)" }}>På lager</b> = hele + anbrud fra slutoptællingen (ingen modregning mod modtaget)</span>
            <span><b style={{ color: "var(--text)" }}>Værdi</b> = antal × pris fra faktura</span>
            <span><b style={{ color: "var(--text)" }}>Enheder</b>: KS/kasse-varer tælles og prissættes i kasser, resten i stk/flasker</span>
          </div>
        </div>

        {manual.length > 0 && (
          <div className="card" style={{ overflow: "hidden", marginTop: 12 }}>
            <div style={{ padding: "10px 14px", borderBottom: "1px solid var(--border)", fontSize: 13 }}>
              <b>Manuelt tilføjede varer</b> <span className="muted">(talt under optælling, ikke på den faste vareliste — ingen pris)</span>
            </div>
            <table className="tbl">
              <thead>
                <tr><th>Vare</th><th className="mob-hide">Bar</th><th className="num">Antal</th><th className="mob-hide">Note</th></tr>
              </thead>
              <tbody>
                {manual.map((m, i) => (
                  <tr key={i}>
                    <td style={{ fontWeight: 500 }}>{m.name}</td>
                    <td className="muted mob-hide">{m.barName}</td>
                    <td className="num">{(m.qty || 0).toLocaleString("da-DK")}</td>
                    <td className="muted mob-hide">{m.note || "—"}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </>
  );
}

window.LagerScreensRecon = { ReconOverview };