// Tiga variasi layout layar QC: List, Split, Fokus. + komponen produk + overlay selesai.

function QtyMeter({ scanned, qty, done }) {
  return (
    <div className={`qc-qty ${done ? "is-done" : ""}`}>
      <span className="qc-qty-now">{scanned}</span>
      <span className="qc-qty-sep">/</span>
      <span className="qc-qty-req">{qty}</span>
    </div>
  );
}

function FlashLayer({ flash, sku }) {
  if (!flash || flash.sku !== sku) return null;
  return <div key={flash.id} className={`qc-flash qc-flash-${flash.status}`} />;
}

// ---------- ROW (untuk list layout) ----------
function ProductRow({ it, ctx }) {
  const s = ctx.scanned[it.sku] || 0; const done = ctx.itemDone(it);
  return (
    <div className={`qc-prow ${done ? "is-done" : ""}`}>
      <FlashLayer flash={ctx.flash} sku={it.sku} />
      <ProductPhoto cat={it.cat} size={56} />
      <div className="qc-prow-info">
        <div className="qc-prow-name">{it.name}</div>
        <div className="qc-prow-codes">
          <span className="qc-codechip"><span className="qc-codechip-k">SKU</span><Mono>{it.sku}</Mono></span>
          <span className="qc-codechip"><Icon.barcode size={13} stroke="var(--ink-3)" /><Mono>{it.barcode}</Mono></span>
        </div>
      </div>
      <QtyMeter scanned={s} qty={it.qty} done={done} />
      <div className={`qc-prow-status ${done ? "is-done" : ""}`}>
        {done ? <Icon.checkCircle size={26} stroke="var(--ok)" /> : <span className="qc-prow-wait">menunggu</span>}
      </div>
    </div>
  );
}

// ---------- CARD (untuk split layout) ----------
function ProductCard({ it, ctx }) {
  const s = ctx.scanned[it.sku] || 0; const done = ctx.itemDone(it);
  return (
    <div className={`qc-pcard ${done ? "is-done" : ""}`}>
      <FlashLayer flash={ctx.flash} sku={it.sku} />
      <div className="qc-pcard-top">
        <ProductPhoto cat={it.cat} size={48} />
        {done ? <Icon.checkCircle size={22} stroke="var(--ok)" /> : <QtyMeter scanned={s} qty={it.qty} done={done} />}
      </div>
      <div className="qc-pcard-name">{it.name}</div>
      <div className="qc-pcard-codes">
        <Mono style={{ fontSize: 11.5, color: "var(--ink-2)" }}>{it.sku}</Mono>
        <Mono style={{ fontSize: 11, color: "var(--ink-3)" }}>{it.barcode}</Mono>
      </div>
    </div>
  );
}

// ============ LAYOUT A: LIST ============
function LayoutList({ ctx, scanInput, sim }) {
  return (
    <div className="qc-lay-list">
      <div className="qc-sticky">{scanInput}</div>
      <div className="qc-prow-list">
        {ctx.order.items.map((it) => <ProductRow key={it.sku} it={it} ctx={ctx} />)}
      </div>
      {sim}
    </div>
  );
}

// ============ LAYOUT B: SPLIT ============
function LayoutSplit({ ctx, scanInput, sim }) {
  const last = ctx.flash && ctx.flash.sku ? ctx.order.items.find((i) => i.sku === ctx.flash.sku) : null;
  const pct = ctx.requiredPcs ? (ctx.scannedPcs / ctx.requiredPcs) * 100 : 0;
  return (
    <div className="qc-lay-split">
      <aside className="qc-split-left">
        {scanInput}
        <div className="qc-ring-wrap">
          <ProgressRing pct={pct} />
          <div className="qc-ring-cap">{ctx.scannedPcs} dari {ctx.requiredPcs} pcs ter-scan</div>
        </div>
        <div className={`qc-lastscan ${last ? (ctx.flash.status === "ok" ? "is-ok" : "is-warn") : "is-idle"}`}>
          {last ? (
            <React.Fragment>
              <ProductPhoto cat={last.cat} size={44} />
              <div style={{ minWidth: 0 }}>
                <div className="qc-lastscan-name">{shortName(last.name)}</div>
                <Mono style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{last.sku}</Mono>
              </div>
              <Icon.check size={20} stroke="var(--ok)" />
            </React.Fragment>
          ) : <span className="qc-lastscan-idle">Menunggu scan produk…</span>}
        </div>
        {sim}
      </aside>
      <div className="qc-split-right">
        <div className="qc-pcard-grid">
          {ctx.order.items.map((it) => <ProductCard key={it.sku} it={it} ctx={ctx} />)}
        </div>
      </div>
    </div>
  );
}

function ProgressRing({ pct }) {
  const r = 52, c = 2 * Math.PI * r, off = c - (pct / 100) * c;
  return (
    <svg width="132" height="132" viewBox="0 0 132 132" className="qc-ring">
      <circle cx="66" cy="66" r={r} fill="none" stroke="var(--line)" strokeWidth="11" />
      <circle cx="66" cy="66" r={r} fill="none" stroke="var(--pri)" strokeWidth="11" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 66 66)" style={{ transition: "stroke-dashoffset .45s cubic-bezier(.2,.8,.2,1)" }} />
      <text x="66" y="62" textAnchor="middle" className="qc-ring-pct">{Math.round(pct)}%</text>
      <text x="66" y="82" textAnchor="middle" className="qc-ring-lbl">cocok</text>
    </svg>
  );
}

// ============ LAYOUT C: FOKUS (guided) ============
function LayoutFocus({ ctx, scanInput, sim }) {
  const target = ctx.nextTarget;
  const remaining = ctx.order.items.filter((it) => !ctx.itemDone(it));
  const done = ctx.order.items.filter((it) => ctx.itemDone(it));
  return (
    <div className="qc-lay-focus">
      <div className="qc-sticky">{scanInput}</div>
      <div className="qc-focus-grid">
        <div className="qc-focus-main">
          {target ? (
            <div className="qc-target">
              <FlashLayer flash={ctx.flash} sku={target.sku} />
              <div className="qc-target-badge"><Icon.target size={15} /> Scan produk ini</div>
              <ProductPhoto cat={target.cat} size={132} radius={14} />
              <div className="qc-target-name">{target.name}</div>
              <div className="qc-target-codes">
                <span className="qc-codechip lg"><span className="qc-codechip-k">SKU</span><Mono>{target.sku}</Mono></span>
                <span className="qc-codechip lg"><Icon.barcode size={15} stroke="var(--ink-3)" /><Mono>{target.barcode}</Mono></span>
              </div>
              <div className="qc-target-need">
                Butuh <b>{target.qty - (ctx.scanned[target.sku] || 0)}</b> lagi
                <span className="qc-target-need-sub">({ctx.scanned[target.sku] || 0}/{target.qty} ter-scan)</span>
              </div>
            </div>
          ) : (
            <div className="qc-target is-empty"><Icon.pkgCheck size={48} stroke="var(--ok)" /><div>Semua produk cocok</div></div>
          )}
        </div>
        <aside className="qc-focus-side">
          <div className="qc-focus-side-h">Antrian ({remaining.length})</div>
          {remaining.map((it) => (
            <div key={it.sku} className={`qc-qrow ${target && it.sku === target.sku ? "is-active" : ""}`}>
              <ProductPhoto cat={it.cat} size={34} radius={6} />
              <div className="qc-qrow-name">{shortName(it.name)}</div>
              <QtyMeter scanned={ctx.scanned[it.sku] || 0} qty={it.qty} />
            </div>
          ))}
          {done.length > 0 && <div className="qc-focus-side-h" style={{ marginTop: 14 }}>Selesai ({done.length})</div>}
          {done.map((it) => (
            <div key={it.sku} className="qc-qrow is-done">
              <ProductPhoto cat={it.cat} size={34} radius={6} />
              <div className="qc-qrow-name">{shortName(it.name)}</div>
              <Icon.checkCircle size={18} stroke="var(--ok)" />
            </div>
          ))}
          {sim}
        </aside>
      </div>
    </div>
  );
}

// ============ OVERLAY SELESAI ============
function CompleteOverlay({ order, onDownload }) {
  const pcs = order.items.reduce((a, i) => a + i.qty, 0);
  const [sec, setSec] = React.useState(5);
  React.useEffect(() => {
    const id = setInterval(() => setSec((s) => s > 0 ? s - 1 : 0), 1000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="qc-overlay">
      <div className="qc-complete">
        <div className="qc-complete-check"><Icon.check size={44} stroke="#fff" sw={2.4} /></div>
        <div className="qc-complete-title">QC Selesai</div>
        <div className="qc-complete-sub">Semua produk cocok — tersimpan otomatis dalam <b>{sec}d</b>.</div>
        <div className="qc-complete-card">
          <div className="qc-cc-row"><span>No. Resi</span><Mono style={{ fontWeight: 600 }}>{order.resi}</Mono></div>
          <div className="qc-cc-row"><span>Pesanan</span><span>{order.customer} · <Mono>{order.order}</Mono></span></div>
          <div className="qc-cc-row"><span>Total item</span><span><b>{order.items.length}</b> SKU · <b>{pcs}</b> pcs</span></div>
        </div>
        <div className="qc-complete-actions">
          <button className="qc-btn qc-btn-ghost" onClick={onDownload}><Icon.download size={17} /> Download CSV</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LayoutList, LayoutSplit, LayoutFocus, ProductRow, ProductCard, ProgressRing, CompleteOverlay, QtyMeter });