/* global React */
const { Ico, Pill, Stepper, Level, product, bar, fmtKr, stockStatus, barRollup, festivalDay } = window.LagerUI;
const D = window.LAGER_DATA;
const { useState, useMemo } = React;

// =================== DASHBOARD ===================
function Dashboard({ go, empty, countState }) {
  if (empty) return <EmptyState
    title="Ingen data endnu"
    body="Importer startbeholdning via Indstillinger for at komme i gang."
    cta="Gå til indstillinger"
  />;

  const totals = useMemo(() => {
    let value = 0, low = 0, empty = 0, items = 0;
    D.bars.forEach(b => {
      const r = barRollup(b.id);
      value += r.value; low += r.low; empty += r.empty; items += r.total;
    });
    return { value, low, empty, items };
  }, []);

  const orderCount = D.orderRequests.length;
  const ordersByBar = D.bars.map(b => D.orderRequests.filter(o => o.bar === b.id).length);
  const allEveningDone = D.bars.every(b => countState?.[b.id]?.evening);

  const activityEvents = useMemo(() => {
    const events = [];
    D.bars.forEach(b => {
      const cs = countState?.[b.id];
      if (cs?.final)   events.push({ at: cs.final.at,   barName: b.name, event: "Slutoptælling indleveret",  qty: "—", by: cs.final.by });
      if (cs?.evening) events.push({ at: cs.evening.at, barName: b.name, event: "Aftenoptælling indleveret", qty: "—", by: cs.evening.by });
    });
    D.orderRequests.forEach(o => {
      const p = product(o.pid);
      const b = bar(o.bar);
      if (p && b) events.push({ at: o.at, barName: b.name, event: `Bestillingsønske: ${p.name}`, qty: o.qty, by: o.by });
    });
    events.sort((a, b) => (b.at || "").localeCompare(a.at || ""));
    return events.slice(0, 10);
  }, [countState]);
  const nextCountType = allEveningDone ? "final" : "evening";
  const countBtnLabel = allEveningDone ? "Start slutoptælling" : "Start aftenoptælling";

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">{D.labels.orgName} — overblik</h1>
          {D.labels.isRestaurant
            ? <p className="page-sub">{D.bars.length} {D.labels.units.toLowerCase()}</p>
            : (() => { const fd = festivalDay(); return <p className="page-sub">Dag {fd.num} af {fd.total} · {fd.name} · {D.bars.length} {D.labels.units.toLowerCase()}</p>; })()
          }
        </div>
        <div className="page-actions">
          <button className="btn" data-variant="ghost"><Ico.filter style={{width:14,height:14}}/> Filter</button>
          <button className="btn"><Ico.upload style={{width:14,height:14}}/> Eksportér</button>
          <button className="btn" data-variant="primary" onClick={() => go("count", undefined, nextCountType)}><Ico.count style={{width:14,height:14}}/> {countBtnLabel}</button>
        </div>
      </div>

      <div className="page-body">
        <div className="grid grid-4">
          <Stat label="Lagerværdi nu" value={fmtKr(totals.value)} delta={`Værdi pr. bar gns. ${fmtKr(Math.round(totals.value / D.bars.length))}`}/>
          <Stat label="Varelinjer i drift" value={totals.items} delta={`${D.products.length} produkter aktive`}/>
          <Stat label="Under min-lager" value={totals.low} tone={totals.low ? "warn" : "ok"} delta="Bør indgå i dag 2-bestilling"/>
          <Stat label="Udsolgte" value={totals.empty} tone={totals.empty ? "danger" : "ok"} delta="Akut — påvirker omsætning"/>
        </div>

        <div className="section-bar">
          <h3>{D.labels.units}</h3>
          <div className="line"/>
          <div className="legend-row">
            <span><span className="swatch" style={{background:"var(--ok)"}}/>OK</span>
            <span><span className="swatch" style={{background:"var(--warn)"}}/>Under min</span>
            <span><span className="swatch" style={{background:"var(--danger)"}}/>Udsolgt</span>
          </div>
        </div>

        <div className="grid grid-3">
          {D.bars.map((b, i) => {
            const r = barRollup(b.id);
            const tone = r.empty ? "danger" : r.low ? "warn" : "ok";
            return (
              <button key={b.id} className={"bar-card " + tone} onClick={() => go("bar", b.id)}>
                <div className="bar-head">
                  <span className={"bar-status " + (tone === "ok" ? "" : tone)}/>
                  <div style={{flex:1, minWidth:0}}>
                    <div className="bar-name">{b.name}</div>
                    <div className="bar-loc">{b.location} · Ansv.: {b.responsible}</div>
                  </div>
                  <Pill tone={tone}>{tone === "ok" ? "OK" : tone === "warn" ? "Lav" : "Akut"}</Pill>
                </div>
                <div className="bar-metrics">
                  <div className="bm"><div className="bm-label">Linjer</div><div className="bm-value">{r.total}</div></div>
                  <div className="bm"><div className="bm-label">Under min</div><div className={"bm-value " + (r.low ? "warn" : "")}>{r.low}</div></div>
                  <div className="bm"><div className="bm-label">Udsolgt</div><div className={"bm-value " + (r.empty ? "danger" : "")}>{r.empty}</div></div>
                </div>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", fontSize:12, color:"var(--text-muted)"}}>
                  <span>Værdi · <span style={{fontFamily:"var(--mono)", color:"var(--text)"}}>{fmtKr(r.value)}</span></span>
                  <span>{ordersByBar[i]} ønsker</span>
                </div>
              </button>
            );
          })}
        </div>

        <div className="section-bar"><h3>Aktivitet i dag</h3><div className="line"/></div>
        <div className="card">
          <table className="tbl">
            <thead><tr><th>Tid</th><th>{D.labels.unit}</th><th>Hændelse</th><th className="num">Antal</th><th>Af</th></tr></thead>
            <tbody>
              {activityEvents.length === 0 && (
                <tr><td colSpan={5} style={{textAlign:"center", padding:32, color:"var(--text-muted)"}}>Ingen aktivitet endnu i dag</td></tr>
              )}
              {activityEvents.map((e, i) => (
                <tr key={i}>
                  <td className="num muted" style={{textAlign:"left"}}>{e.at}</td>
                  <td>{e.barName}</td>
                  <td className="muted">{e.event}</td>
                  <td className="num">{e.qty}</td>
                  <td className="muted">{e.by}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

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

const EmptyState = ({ title, body, cta }) => (
  <div className="page-body">
    <div className="empty">
      <div className="empty-icon"><Ico.dash style={{width:22,height:22}}/></div>
      <h3>{title}</h3>
      <p>{body}</p>
      {cta && <div style={{marginTop:16}}><button className="btn" data-variant="primary">{cta}</button></div>}
    </div>
  </div>
);

// =================== BAR DETAIL ===================
function BarDetail({ barId, go, countState }) {
  const b = bar(barId) || D.bars[0];
  const rows = D.stock[b.id] || [];
  const r = barRollup(b.id);
  const [q, setQ] = useState("");

  const filtered = rows.filter(row => {
    const p = product(row.pid);
    return !q || p.name.toLowerCase().includes(q.toLowerCase()) || p.cat.toLowerCase().includes(q.toLowerCase());
  });

  return (
    <>
      <div className="page-header">
        <div>
          <div style={{fontSize:12, color:"var(--text-muted)", marginBottom:4}}>
            <a onClick={() => go("dashboard")} style={{cursor:"pointer"}}>Overblik</a> / <b>{b.name}</b>
          </div>
          <h1 className="page-title">{b.name}</h1>
          <p className="page-sub">{b.location} · Ansvarlig: {b.responsible} · {b.lastCount ? `Sidst optalt ${b.lastCount}` : "Ikke optalt endnu"}</p>
        </div>
        <div className="page-actions">
          <button className="btn"><Ico.order style={{width:14,height:14}}/> Send ønsker</button>
          <button className="btn" data-variant="primary" onClick={() => go("count", b.id, countState?.[b.id]?.evening ? "final" : "evening")}>
            <Ico.count style={{width:14,height:14}}/> {countState?.[b.id]?.evening ? "Slutoptælling" : "Aftenoptælling"}
          </button>
        </div>
      </div>

      <div className="page-body">
        <div className="grid grid-4">
          <Stat label="Linjer på lager" value={r.total} delta={`${r.empty} udsolgte · ${r.low} under min`}/>
          <Stat label="Lagerværdi" value={fmtKr(r.value)} delta="Indkøbspris ekskl. moms"/>
          <Stat label="Solgt i dag" value={rows.reduce((s, x) => s - x.trend, 0)} delta="Estimeret fra optællinger"/>
          <Stat label="Ønsker til dag 2" value={D.orderRequests.filter(o => o.bar === b.id).length} delta="Afventer godkendelse"/>
        </div>

        <div className="section-bar">
          <h3>Varelinjer</h3>
          <div className="line"/>
          <div className="row" style={{position:"relative"}}>
            <Ico.search style={{width:14,height:14, position:"absolute", left:9, top:8, color:"var(--text-faint)"}}/>
            <input className="input" placeholder="Søg vare eller kategori…" value={q} onChange={e=>setQ(e.target.value)} style={{paddingLeft:28, width:240}}/>
          </div>
        </div>

        <div className="card" style={{overflow:"hidden"}}>
          <table className="tbl">
            <thead>
              <tr>
                <th>Vare</th>
                <th className="mob-hide">Kategori</th>
                <th className="mob-hide">Leverandør</th>
                <th className="mob-hide" style={{width:160}}>Niveau</th>
                <th className="mob-hide num">Modtaget</th>
                <th className="num">Aktuelt</th>
                <th className="num">Min</th>
                <th className="mob-hide num">Δ i dag</th>
                <th className="mob-hide num">Værdi</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(row => {
                const p = product(row.pid);
                const tone = stockStatus(row);
                return (
                  <tr key={row.pid} className={tone !== "ok" ? tone : ""}>
                    <td style={{fontWeight:500}}>{p.name}</td>
                    <td className="muted mob-hide">{p.cat}</td>
                    <td className="muted mob-hide">{p.supplier}</td>
                    <td className="mob-hide"><Level current={row.current} max={row.in} par={row.par}/></td>
                    <td className="num muted mob-hide">{row.in}</td>
                    <td className="num" style={{fontWeight:600}}>{row.current}</td>
                    <td className="num muted">{row.par}</td>
                    <td className="num mob-hide" style={{color: row.trend < 0 ? "var(--text-muted)" : ""}}>{row.trend}</td>
                    <td className="num muted mob-hide">{fmtKr(row.current * p.price)}</td>
                    <td><Pill tone={tone} dot>{tone === "ok" ? "OK" : tone === "warn" ? "Under min" : "Udsolgt"}</Pill></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
}

// =================== DAILY COUNT ===================
function CountScreen({ barId, countType, go, role, countState, setCountState }) {
  const b = bar(barId) || D.bars[0];
  const rows = D.stock[b.id] || [];
  const submission = countState?.[b.id]?.[countType];
  const isLocked = !!submission;

  const [counts, setCounts] = useState(() =>
    isLocked && submission?.data
      ? submission.data
      : Object.fromEntries(rows.map(r => [r.pid, { full: r.current, open: 0 }]))
  );
  const [confirming, setConfirming] = useState(false);

  const update = (pid, k, v) => setCounts(c => ({ ...c, [pid]: { ...c[pid], [k]: v } }));

  const submit = () => {
    const at = new Date().toLocaleTimeString("da-DK", { hour: "2-digit", minute: "2-digit" });
    setCountState(cs => ({
      ...cs,
      [b.id]: { ...cs[b.id], [countType]: { by: D.currentUser.name, at, data: counts } },
    }));
    setConfirming(false);
  };

  const unlock = () => setCountState(cs => ({
    ...cs,
    [b.id]: { ...cs[b.id], [countType]: null },
  }));

  const typeLabel = countType === "evening" ? "Aftenoptælling" : "Slutoptælling";
  const typeSub = countType === "evening"
    ? "Tæl beholdningen kl. 21:00 — bruges til bestillingsforslag til dag 2."
    : "Endeligt sluttal ved lukketid — verificerer solgt og kan justere dag 2-bestillingen.";

  return (
    <>
      <div className="page-header">
        <div>
          <div style={{fontSize:12, color:"var(--text-muted)", marginBottom:4}}>
            <a onClick={() => go("dashboard")} style={{cursor:"pointer"}}>Overblik</a> / <a onClick={() => go("bar", b.id)} style={{cursor:"pointer"}}>{b.name}</a> / <b>{typeLabel}</b>
          </div>
          <h1 className="page-title">{typeLabel} · {b.name}</h1>
          <p className="page-sub">{typeSub}</p>
        </div>
        <div className="page-actions">
          {!isLocked && (
            <>
              <button className="btn" data-variant="ghost">Gem som kladde</button>
              <button className="btn" data-variant="primary" onClick={() => setConfirming(true)}>
                <Ico.check style={{width:14,height:14}}/> Indlevér optælling
              </button>
            </>
          )}
          {isLocked && role === "admin" && (
            <button className="btn" data-variant="ghost" onClick={unlock}>Lås op</button>
          )}
        </div>
      </div>

      {isLocked && (
        <div className="count-locked-banner">
          <Ico.check style={{width:13,height:13}}/>
          Indleveret af {submission.by} kl. {submission.at} — optællingen er låst
          {role === "admin" && <span style={{marginLeft:8, opacity:0.7, fontSize:12}}>Admin kan låse op via knappen øverst til højre</span>}
        </div>
      )}

      {confirming && (
        <div className="confirm-overlay">
          <div className="confirm-box">
            <h3 style={{margin:"0 0 8px"}}>Indlevér {typeLabel.toLowerCase()}?</h3>
            <p style={{color:"var(--text-muted)", fontSize:13, margin:"0 0 4px"}}>Optællingen låses og kan ikke ændres bagefter.</p>
            <p style={{color:"var(--text-muted)", fontSize:13, margin:0}}>Kun admin kan overskride den.</p>
            <div style={{display:"flex", gap:8, justifyContent:"flex-end", marginTop:20}}>
              <button className="btn" data-variant="ghost" onClick={() => setConfirming(false)}>Annuller</button>
              <button className="btn" data-variant="primary" onClick={submit}>
                <Ico.check style={{width:13,height:13}}/> Ja, indlevér og lås
              </button>
            </div>
          </div>
        </div>
      )}

      <div className="page-body">
        <div className="card" style={{padding:"10px 16px", marginBottom:12, display:"flex", gap:14, alignItems:"center", fontSize:13, color:"var(--text-muted)", flexWrap:"wrap"}}>
          {(() => { const fd = festivalDay(); return <span className="day-chip"><span className="day-num">{fd.num}</span> {fd.name} {countType === "evening" ? "aften" : "nat"}</span>; })()}
          <span>Tæl <b style={{color:"var(--text)"}}>hele enheder</b> (kan returneres) og <b style={{color:"var(--text)"}}>anbrud</b> (åbnede/påbegyndte) hver for sig.</span>
          {!isLocked && <span style={{marginLeft:"auto"}}><span className="kbd">Tab</span> for næste felt</span>}
        </div>

        <div className="card" style={{overflow:"hidden", opacity: isLocked ? 0.75 : 1}}>
          <table className="tbl" style={{pointerEvents: isLocked ? "none" : "auto"}}>
            <thead>
              <tr>
                <th>Vare</th>
                <th className="mob-hide">Kat.</th>
                <th className="mob-hide num">Modtaget</th>
                <th className="mob-hide num">Forrige</th>
                <th style={{width:140}}>Hele</th>
                <th style={{width:140}}>Anbrud</th>
                <th className="num">Forbrug</th>
                <th className="mob-hide">Note</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(row => {
                const p = product(row.pid);
                const v = counts[row.pid];
                const sold = row.in - v.full;
                return (
                  <tr key={row.pid}>
                    <td style={{fontWeight:500}}>{p.name}</td>
                    <td className="muted mob-hide">{p.cat}</td>
                    <td className="num muted mob-hide">{row.in}</td>
                    <td className="num muted mob-hide">{row.current}</td>
                    <td><Stepper value={v.full} onChange={(n) => update(row.pid, "full", n)}/></td>
                    <td><Stepper value={v.open} onChange={(n) => update(row.pid, "open", n)}/></td>
                    <td className="num" style={{color: sold > 0 ? "var(--accent-text)" : "var(--text-muted)"}}>{sold}{v.open > 0 ? <span className="muted" style={{fontSize:11}}> +{v.open}å</span> : null}</td>
                    <td className="mob-hide"><input className="input" placeholder="fx. spild, utæt fustage…" disabled={isLocked}/></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}}>
            <span><b style={{color:"var(--text)"}}>Hele</b> = ubrudte enheder der kan returneres til leverandør</span>
            <span><b style={{color:"var(--text)"}}>Anbrud</b> = påbegyndte fustager/flasker — tæller som forbrug, kan ikke retur</span>
          </div>
        </div>
      </div>
    </>
  );
}

window.LagerScreens1 = { Dashboard, BarDetail, CountScreen };