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

// =================== ORDERS — aggregated for day 2 ===================
function OrdersScreen({ go, countState }) {
  const hasAnyCounts = D.bars.some(b => countState?.[b.id]?.evening);
  const [removedPids, setRemovedPids] = useState(() => new Set());

  const orders = useMemo(() => {
    if (!hasAnyCounts) return D.orderRequests;
    const lines = [];
    D.bars.forEach(b => {
      const evening = countState?.[b.id]?.evening?.data;
      (D.stock[b.id] || []).forEach(row => {
        const counted = evening ? (evening[row.pid]?.full ?? row.current) : row.current;
        const needed = Math.max(0, row.target - counted);
        if (needed > 0) lines.push({ bar: b.id, pid: row.pid, qty: needed, note: "", by: "System", at: countState?.[b.id]?.evening?.at ?? "—" });
      });
    });
    return lines;
  }, [countState, hasAnyCounts]);

  const agg = useMemo(() => {
    const map = {};
    orders.forEach(o => {
      const p = product(o.pid);
      if (!map[p.supplier]) map[p.supplier] = {};
      if (!map[p.supplier][o.pid]) map[p.supplier][o.pid] = { product: p, qty: 0, bars: [] };
      map[p.supplier][o.pid].qty += o.qty;
      map[p.supplier][o.pid].bars.push({ bar: bar(o.bar), qty: o.qty, note: o.note, by: o.by, at: o.at });
    });
    return map;
  }, [orders]);

  const totalValue = Object.values(agg).reduce((s, sup) =>
    s + Object.values(sup).reduce((ss, line) => ss + line.qty * line.product.price, 0), 0);
  const lineCount = Object.values(agg).reduce((s, sup) => s + Object.keys(sup).length, 0);

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Bestillinger · dag 2</h1>
          <p className="page-sub">{hasAnyCounts ? "Beregnet fra aftenoptælling og standardbeholdning. Justér og godkend inden afsendelse." : "Ingen aftenoptælling indleveret endnu — viser manuelle ønsker fra bar-ansvarlige."}</p>
        </div>
        <div className="page-actions">
          <button className="btn"><Ico.upload style={{width:14,height:14}}/> Eksport CSV</button>
          <button className="btn" data-variant="primary"><Ico.check style={{width:14,height:14}}/> Godkend & afsend alle</button>
        </div>
      </div>
      <div className="page-body">
        <div className="grid grid-4">
          <Stat label="Leverandører" value={Object.keys(agg).length} delta="Afsendes parallelt"/>
          <Stat label="Varelinjer" value={lineCount} delta={`${D.orderRequests.length} ønsker fra ${D.bars.length} barer`}/>
          <Stat label="Estimeret beløb" value={fmtKr(totalValue)} delta="Ekskl. moms, fragt udeladt"/>
          <Stat label="Deadline" value={D.festival.orderDeadline} tone="warn" delta={(() => {
            const day2 = new Date(D.festival.startDate + "T00:00:00");
            day2.setDate(day2.getDate() + 1);
            const [h, m] = D.festival.orderDeadline.split(":").map(Number);
            day2.setHours(h, m, 0, 0);
            const diff = day2 - new Date();
            if (diff <= 0) return "Deadline overskredet";
            const hrs = Math.floor(diff / 3600000);
            const mins = Math.floor((diff % 3600000) / 60000);
            return `${hrs}t ${mins}m tilbage`;
          })()}/>
        </div>

        {Object.entries(agg).map(([supplier, lines]) => {
          const visibleLines = Object.fromEntries(Object.entries(lines).filter(([pid]) => !removedPids.has(pid)));
          if (!Object.keys(visibleLines).length) return null;
          const supTotal = Object.values(visibleLines).reduce((s, l) => s + l.qty * l.product.price, 0);
          return (
            <div key={supplier} className="card" style={{marginTop:18, overflow:"hidden"}}>
              <div className="card-head">
                <Ico.order style={{width:14,height:14}}/>
                <h3 className="card-title">{supplier}</h3>
                <Pill tone="info">{Object.keys(visibleLines).length} linjer</Pill>
                <span style={{marginLeft:"auto", fontFamily:"var(--mono)", fontSize:13}}>{fmtKr(supTotal)}</span>
                <button className="btn" data-size="sm" data-variant="ghost">Forhåndsvis ordre</button>
              </div>
              <table className="tbl">
                <thead>
                  <tr>
                    <th>Vare</th>
                    <th className="mob-hide">Fordeling pr. bar</th>
                    <th className="mob-hide num">Pris/stk</th>
                    <th className="num">Antal</th>
                    <th className="num">Subtotal</th>
                    <th style={{width:60}}></th>
                  </tr>
                </thead>
                <tbody>
                  {Object.values(visibleLines).map(line => (
                    <tr key={line.product.id}>
                      <td>
                        <div style={{fontWeight:500}}>{line.product.name}</div>
                        <div className="muted" style={{fontSize:12}}>{line.product.cat} · {line.product.unit}</div>
                      </td>
                      <td className="mob-hide">
                        <div style={{display:"flex", gap:6, flexWrap:"wrap"}}>
                          {line.bars.map((bl, i) => (
                            <Pill key={i} tone="accent">{bl.bar.name}: {bl.qty}</Pill>
                          ))}
                        </div>
                        {line.bars.some(b => b.note) && (
                          <div className="muted" style={{fontSize:12, marginTop:4}}>
                            💬 {line.bars.filter(b=>b.note).map(b=>`${b.bar.name}: ${b.note}`).join(" · ")}
                          </div>
                        )}
                      </td>
                      <td className="num muted mob-hide">{fmtKr(line.product.price)}</td>
                      <td className="num"><Stepper value={line.qty} onChange={()=>{}}/></td>
                      <td className="num" style={{fontWeight:600}}>{fmtKr(line.qty * line.product.price)}</td>
                      <td><button className="btn" data-size="sm" data-variant="ghost"
                                  onClick={() => setRemovedPids(s => { const n = new Set(s); n.add(line.product.id); return n; })}>✕</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          );
        })}
      </div>
    </>
  );
}

// =================== RETURN — final count ===================
function ReturnScreen({ go, barId, countState }) {
  const openBar = barId || D.bars[0].id;
  const b = bar(openBar);
  const rows = D.stock[openBar] || [];
  const [locked, setLocked] = useState(false);
  const [finals, setFinals] = useState(() => {
    const m = {};
    D.bars.forEach(bb => {
      m[bb.id] = Object.fromEntries((D.stock[bb.id]||[]).map(r => [r.pid, { full: Math.max(0, r.current - 1), open: r.current > 2 ? 1 : 0 }]));
    });
    return m;
  });

  const setFinal = (pid, k, v) => setFinals(f => ({ ...f, [openBar]: { ...f[openBar], [pid]: { ...f[openBar][pid], [k]: v }}}));

  const totalReturnValue = useMemo(() => {
    let v = 0;
    D.bars.forEach(bb => {
      (D.stock[bb.id]||[]).forEach(r => {
        v += (finals[bb.id]?.[r.pid]?.full || 0) * (product(r.pid)?.price || 0);
      });
    });
    return v;
  }, [finals]);

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">Endelig optælling & retur</h1>
          <p className="page-sub">Indtast slut-tal for hver bar. Disse danner grundlag for retur til leverandører og krydstjek af kreditnotaer.</p>
        </div>
        <div className="page-actions">
          <button className="btn" data-variant="ghost">Gem kladde</button>
          {locked
            ? <button className="btn" data-variant="ghost" onClick={() => setLocked(false)}>Lås op</button>
            : <button className="btn" data-variant="primary" onClick={() => setLocked(true)}><Ico.check style={{width:14,height:14}}/> Lås opgørelse</button>
          }
        </div>
      </div>

      <div className="page-body">
        <div className="grid grid-4">
          <Stat label="Barer talt op" value={`${D.bars.filter(b => countState?.[b.id]?.final).length} / ${D.bars.length}`} delta={`${D.bars.length - D.bars.filter(b => countState?.[b.id]?.final).length} mangler endelig opgørelse`}/>
          <Stat label="Retur-værdi (estimat)" value={fmtKr(totalReturnValue)} delta="Forventes refunderet via kreditnota"/>
          <Stat label="Forventet svind" value="≈ 2,4%" delta="Inden for normal afvigelse"/>
          <Stat label="Kreditnotaer modtaget" value={`${D.creditNotes.filter(c => c.status === "matched").length} / ${D.creditNotes.length}`} delta="Tjek under Kreditnotaer"/>
        </div>

        <div className="card" style={{overflow:"hidden", marginTop:18}}>
          <div className="card-head">
            <h3 className="card-title">{b.name} — retur</h3>
            <span className="muted" style={{fontSize:12}}>Skeln hele enheder (retur til leverandør) fra anbrud (intet kredit)</span>
          </div>
          <table className="tbl">
            <thead>
              <tr>
                <th>Vare</th>
                <th className="mob-hide">Leverandør</th>
                <th className="mob-hide num">Modtaget</th>
                <th className="mob-hide num">Forbrug</th>
                <th style={{width:140}}>Hele (retur)</th>
                <th style={{width:140}}>Anbrud</th>
                <th className="num">Differens</th>
                <th className="num">Refusion</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(row => {
                const p = product(row.pid);
                const v = finals[openBar]?.[row.pid] ?? { full: 0, open: 0 };
                const sold = row.in - v.full - v.open;
                const diff = (v.full + v.open) - row.current;
                return (
                  <tr key={row.pid}>
                    <td style={{fontWeight:500}}>{p.name}</td>
                    <td className="muted mob-hide">{p.supplier}</td>
                    <td className="num muted mob-hide">{row.in}</td>
                    <td className="num mob-hide">{sold}</td>
                    <td style={locked ? {pointerEvents:"none", opacity:0.45} : {}}><Stepper value={v.full} onChange={(n)=>setFinal(row.pid, "full", n)}/></td>
                    <td style={locked ? {pointerEvents:"none", opacity:0.45} : {}}><Stepper value={v.open} onChange={(n)=>setFinal(row.pid, "open", n)}/></td>
                    <td className="num" style={{color: diff !== 0 ? "var(--warn)" : "var(--text-muted)"}}>{diff === 0 ? "—" : diff}</td>
                    <td className="num" style={{fontWeight:600}}>{fmtKr(v.full * p.price)}</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)"}}>Hele</b> tælles som retur — krydstjekkes mod kreditnota</span>
            <span><b style={{color:"var(--text)"}}>Anbrud</b> tælles som forbrug (ingen refusion)</span>
            <span><b style={{color:"var(--text)"}}>Differens</b> ≠ 0 → muligt svind, tjek optællingen igen</span>
          </div>
        </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>
);

window.LagerScreens2 = { OrdersScreen, ReturnScreen };