// OLLYMEN Store OS — Menu & Inventory Check
const { useState: useStateInv } = React;

function InventoryCheck() {
  const D = window.DATA;
  const [tab, setTab] = useStateInv("inv");
  const [cart, setCart] = useStateInv([]);

  const addOrder = (id) => setCart(c => c.includes(id) ? c.filter(x => x !== id) : [...c, id]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--muted)", letterSpacing: ".08em", textTransform: "uppercase" }}>강남 빗썸금융타워점</span>
            <StatusBadge kind="live" />
          </div>
          <div className="page-h1">메뉴 · 재고 체크</div>
          <div className="page-sub">5/25 (월) 14:30 점심 마감 직후 기준 · 14개 항목 · 발주 필요 <strong style={{ color: "var(--ramen-ink)" }}>1건</strong></div>
        </div>
        <div className="page-right">
          <button className="tb-btn">{I.refresh()} POS 재동기화</button>
          <button className="tb-btn">{I.copy()} 어제 발주 복제</button>
          <button className="btn primary" disabled={cart.length === 0}>
            {cart.length > 0 ? `${cart.length}건 발주 요청` : "발주 카트 비어 있음"}
          </button>
        </div>
      </div>

      {/* Health strip */}
      <div className="card rise d1" style={{ marginBottom: 16 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)" }}>
          <HealthCell label="판매 가능 메뉴" value="7" total="8" tone="ok" sub="스테미나동: 차슈 부족" />
          <HealthCell label="충분" value="7" total="13" tone="ok" />
          <HealthCell label="확인 필요" value="4" total="13" tone="warn" />
          <HealthCell label="부족" value="1" total="13" tone="low" />
          <HealthCell label="발주 필요" value="1" total="13" tone="order" last />
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "1.5fr 1fr", gap: 16 }}>
        {/* LEFT — Inventory table */}
        <div className="card rise d2">
          <CardHead
            title="핵심 재고"
            sub="자가생산 · 발주 항목 통합 · 일평균 사용량 기준 자동 임계"
            right={
              <div style={{ display: "flex", gap: 8 }}>
                <button className="tb-btn">{I.filter()} 상태</button>
                <button className="tb-btn">{I.filter()} 카테고리</button>
              </div>
            }
          />
          <div style={{ padding: "0 6px" }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th style={{ width: "26%" }}>품목</th>
                  <th>재고 · 임계</th>
                  <th>일평균</th>
                  <th>리드타임</th>
                  <th>상태</th>
                  <th style={{ width: 80 }}></th>
                </tr>
              </thead>
              <tbody>
                {D.inventory.map(it => {
                  const pct = Math.min(100, (it.onHand / it.par) * 100);
                  const bcolor = it.status === "low" ? "ramen" : it.status === "order" ? "ramen" : it.status === "warn" ? "burnt" : "olive";
                  return (
                    <tr key={it.id}>
                      <td>
                        <div style={{ fontWeight: 600 }}>{it.name}</div>
                        <div className="muted" style={{ fontSize: 11.5, marginTop: 1 }}>{it.vendor || "자가생산"}</div>
                      </td>
                      <td style={{ width: "32%" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                          <span className="mono tnum" style={{ minWidth: 70, fontWeight: 600 }}>
                            {it.onHand}<span style={{ color: "var(--muted)" }}>{it.unit}</span>
                          </span>
                          <div style={{ flex: 1 }}><Bar value={pct} color={bcolor} /></div>
                          <span className="mono" style={{ fontSize: 11, color: "var(--muted)", minWidth: 50, textAlign: "right" }}>{it.par}{it.unit}</span>
                        </div>
                      </td>
                      <td><span className="mono tnum">{it.daily}{it.unit}</span></td>
                      <td><span className="mono" style={{ fontSize: 12, color: "var(--muted)" }}>{it.lead}</span></td>
                      <td><StatusPill s={it.status} /></td>
                      <td>
                        {(it.status === "order" || it.status === "low" || it.status === "warn") ? (
                          <button
                            className={`btn sm ${cart.includes(it.id) ? "primary" : ""}`}
                            onClick={() => addOrder(it.id)}
                          >{cart.includes(it.id) ? <>{I.check()} 담김</> : "발주"}</button>
                        ) : <button className="iconbtn">{I.dots()}</button>}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <div className="card-f">
            <span className="mono">13 품목</span> · 마지막 동기화 14:28
            <div className="spacer"></div>
            <span className="mono" style={{ color: "var(--ramen-ink)", fontWeight: 600 }}>발주 카트 {cart.length}건</span>
          </div>
        </div>

        {/* RIGHT */}
        <div className="col" style={{ gap: 16 }}>
          {/* Menu availability */}
          <div className="card rise d3">
            <CardHead title="메뉴별 판매 가능" sub="재고 ↔ 메뉴 자동 연동" />
            <div className="card-b" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {D.menu.map(m => (
                <div key={m.id} style={{
                  display: "grid", gridTemplateColumns: "auto 1fr auto auto",
                  gap: 10, alignItems: "center",
                  padding: "8px 10px",
                  borderRadius: 8,
                  border: "1px solid var(--line-soft)",
                  background: m.status === "low" ? "var(--danger-wash)" : "var(--surface)",
                }}>
                  <div className="avatar olive sm" style={{
                    width: 28, height: 28, fontSize: 11,
                    background: m.id === "olimen" ? "var(--olive-wash)" : "var(--surface-3)",
                    color: m.id === "olimen" ? "var(--olive-ink)" : "var(--ink-2)",
                  }}>{m.name.slice(0, 2)}</div>
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                      <span style={{ fontWeight: 600, fontSize: 13 }}>{m.name}</span>
                      {m.id === "olimen" && <span className="chip olive">시그니처</span>}
                    </div>
                    <div className="muted" style={{ fontSize: 11.5 }}>{m.subtitle} · {m.price.toLocaleString()}원</div>
                  </div>
                  <span className="mono tnum" style={{ color: "var(--muted)", fontSize: 12 }}>{m.sales}판매</span>
                  <StatusPill s={m.status} compact />
                </div>
              ))}
            </div>
          </div>

          {/* Order summary */}
          <div className="card rise d4">
            <CardHead title="발주 카트" sub="확정 시 본사 발주 시스템에 자동 등록" right={<span className="mono" style={{ fontSize: 11, color: "var(--muted)" }}>{cart.length}건</span>} />
            <div className="card-b">
              {cart.length === 0 ? (
                <div style={{ padding: "14px 4px", color: "var(--muted)", fontSize: 13 }}>
                  좌측 표에서 발주 버튼을 눌러 항목을 담아주세요. 임계 미달 항목이 자동 추천됩니다.
                </div>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  {cart.map(id => {
                    const it = D.inventory.find(x => x.id === id);
                    const needed = Math.max(1, Math.ceil((it.par - it.onHand) + it.daily * 2));
                    return (
                      <div key={id} style={{ display: "grid", gridTemplateColumns: "1fr auto auto", gap: 8, alignItems: "center", fontSize: 12.5, padding: "6px 0", borderBottom: "1px dashed var(--line-soft)" }}>
                        <div>
                          <div style={{ fontWeight: 600 }}>{it.name}</div>
                          <div className="muted" style={{ fontSize: 11 }}>{it.vendor || "자가생산"} · {it.lead}</div>
                        </div>
                        <span className="mono tnum">{needed}{it.unit}</span>
                        <button className="iconbtn" onClick={() => setCart(c => c.filter(x => x !== id))}>×</button>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
            <div className="card-f">
              <span className="muted">예상 입고 D+1 ~ D+3</span>
              <div className="spacer"></div>
              <button className="btn sm primary" disabled={cart.length === 0}>발주 확정 {I.arrow()}</button>
            </div>
          </div>

          {/* Store comparison */}
          <div className="card rise d5">
            <CardHead title="지점별 재고 비교" sub="공유 SKU 기준" />
            <div className="card-b" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {[
                { k: "올리브오일", g: 4.2, s: "—", trend: "강남 부족" },
                { k: "조개육수",   g: 22,  s: "—", trend: "오픈 전" },
                { k: "닭육수",     g: 28,  s: "—", trend: "오픈 전" },
                { k: "타마고면",   g: 86,  s: "—", trend: "강남 확인" },
              ].map((r, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 70px 70px 120px", gap: 8, alignItems: "center", fontSize: 12.5, padding: "6px 0", borderBottom: i < 3 ? "1px dashed var(--line-soft)" : 0 }}>
                  <div style={{ fontWeight: 600 }}>{r.k}</div>
                  <div className="mono tnum">강남 {r.g}</div>
                  <div className="mono tnum muted">서역 {r.s}</div>
                  <span className="chip" style={{ marginLeft: "auto" }}>{r.trend}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function HealthCell({ label, value, total, tone, sub, last }) {
  const colorMap = { ok: "var(--olive-ink)", warn: "oklch(0.45 0.10 70)", low: "var(--danger)", order: "var(--ramen)" };
  return (
    <div style={{ padding: "14px 18px", borderRight: last ? 0 : "1px solid var(--line-soft)" }}>
      <div className="mono" style={{ fontSize: 10.5, color: "var(--muted)", letterSpacing: ".07em", textTransform: "uppercase" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 3 }}>
        <span className="tnum" style={{ fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 600, color: colorMap[tone] || "var(--ink)" }}>{value}</span>
        {total && <span className="mono" style={{ color: "var(--muted)", fontSize: 12 }}>/ {total}</span>}
      </div>
      {sub && <div className="muted" style={{ fontSize: 11.5, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function StatusPill({ s, compact }) {
  const map = {
    ok:    { cls: "ok",    label: "충분" },
    warn:  { cls: "warn",  label: "확인 필요" },
    low:   { cls: "low",   label: "부족" },
    order: { cls: "order", label: "발주 필요" },
  };
  const m = map[s] || map.ok;
  return <span className={`pill ${m.cls}`} style={{ fontSize: compact ? 10.5 : 11.5 }}>{m.label}</span>;
}

window.InventoryCheck = InventoryCheck;