// Layar QC: scan barcode tiap produk untuk match dengan pesanan.
// Controller memegang state scan; merender salah satu dari 3 layout (list/split/focus).

function QCDetail({ order, onBack, onSave, onDownloadOne, push, t }) {
  const [scanned, setScanned] = React.useState(() => {
    if (order.status === 'done' && Array.isArray(order.scanned_items) && order.scanned_items.length) {
      return Object.fromEntries(order.scanned_items.map((i) => [i.sku, i.qty_scanned || 0]));
    }
    return Object.fromEntries(order.items.map((i) => [i.sku, 0]));
  });
  const [flash, setFlash] = React.useState(null);       // {sku|null, status, id}
  const [completed, setCompleted] = React.useState(false);
  const inputRef = React.useRef(null);

  const requiredPcs = order.items.reduce((a, i) => a + i.qty, 0);
  const scannedPcs = order.items.reduce((a, i) => a + (scanned[i.sku] || 0), 0);
  const itemDone = (it) => (scanned[it.sku] || 0) >= it.qty;
  const skusDone = order.items.filter(itemDone).length;
  const nextTarget = order.items.find((it) => !itemDone(it)) || null;

  const refocus = () => setTimeout(() => inputRef.current && inputRef.current.focus(), 10);

  function doFlash(sku, status) { setFlash({ sku, status, id: Date.now() + Math.random() }); }

  function handleScan(raw) {
    const code = String(raw || "").trim();
    if (!code || completed) { refocus(); return; }
    const item = order.items.find((i) => i.barcode === code || i.sku.toLowerCase() === code.toLowerCase());
    if (!item) {
      doFlash(null, "wrong"); beep("error", t.beep);
      push({ kind: "error", msg: "Barang tidak ada di pesanan ini", sub: code });
      refocus(); return;
    }
    const cur = scanned[item.sku] || 0;
    if (cur >= item.qty) {
      doFlash(item.sku, "over"); beep("error", t.beep);
      push({ kind: "warn", msg: `Qty "${shortName(item.name)}" sudah lengkap`, sub: `${item.qty}/${item.qty}` });
      refocus(); return;
    }
    const next = { ...scanned, [item.sku]: cur + 1 };
    setScanned(next);
    doFlash(item.sku, "ok");
    const nowDone = order.items.every((i) => (next[i.sku] || 0) >= i.qty);
    if (nowDone) {
      beep("done", t.beep);
      setTimeout(() => { setCompleted(true); }, 420);
      setTimeout(() => {
        const scannedItems = order.items.map((it) => ({
          sku: it.sku, name: it.name, barcode: it.barcode,
          qty_required: it.qty, qty_scanned: next[it.sku] || 0,
        }));
        onSave(order.resi, { scanned_items: scannedItems });
      }, 5000);
    } else {
      beep("ok", t.beep);
      push({ kind: "ok", msg: shortName(item.name), sub: `${cur + 1}/${item.qty} ✓`, duration: 1500 });
    }
    refocus();
  }

  React.useEffect(() => { refocus(); }, []);

  const ctx = { order, scanned, flash, t, itemDone, nextTarget, requiredPcs, scannedPcs, skusDone };
  const scanInput = <ScanInput inputRef={inputRef} onScan={handleScan} disabled={completed} />;
  const sim = <ScannerSim order={order} scanned={scanned} onScan={handleScan} disabled={completed} show={t.simulator} />;

  const Layout = { list: LayoutList, split: LayoutSplit, focus: LayoutFocus }[t.qcLayout] || LayoutList;

  return (
    <div className="qc-page qc-detail">
      <DetailHeader order={order} onBack={onBack} scannedPcs={scannedPcs} requiredPcs={requiredPcs} skusDone={skusDone} />
      <Layout ctx={ctx} scanInput={scanInput} sim={sim} />
      {flash && flash.sku === null && <ScreenFlash key={flash.id} />}
      {completed && (
        <CompleteOverlay order={order} onDownload={() => onDownloadOne(order)} />
      )}
    </div>
  );
}

function shortName(n) { return n.split("—")[0].trim(); }

// ---------- Sub-header ----------
function DetailHeader({ order, onBack, scannedPcs, requiredPcs, skusDone }) {
  const pct = requiredPcs ? Math.round((scannedPcs / requiredPcs) * 100) : 0;
  return (
    <div className="qc-dhead">
      <button className="qc-iconbtn" onClick={onBack} aria-label="Kembali"><Icon.back size={20} /></button>
      <div className="qc-dhead-main">
        <div className="qc-dhead-top">
          <Mono style={{ fontSize: 15, fontWeight: 700 }}>{order.resi}</Mono>
          <CourierTag courier={order.courier} />
          <StatusBadge status="progress" size="sm" />
        </div>
        <div className="qc-dhead-sub">
          <span style={{ fontWeight: 600, color: "var(--ink)" }}>{order.customer}</span>
          <span className="qc-dot" />
          <Mono style={{ color: "var(--ink-3)" }}>{order.order}</Mono>
          <span className="qc-dot" />
          <span style={{ color: "var(--ink-3)" }}>{order.address}</span>
        </div>
        {order.doneTime && (
          <div className="qc-dhead-qcinfo">
            <Icon.check size={13} stroke="var(--ok)" />
            <span>QC: <b>{order.doneTime} WIB</b></span>
            {order.doneDate && <span style={{ color: "var(--ink-3)" }}>{order.doneDate}</span>}
            {order.operator && (
              <React.Fragment>
                <span className="qc-dot" />
                <span>Oleh: <b>{order.operator}</b>{order.operatorInitial ? ` (${order.operatorInitial})` : ""}</span>
              </React.Fragment>
            )}
          </div>
        )}
      </div>
      <div className="qc-dhead-prog">
        <div className="qc-dhead-pcs"><b>{scannedPcs}</b><span>/ {requiredPcs} pcs</span></div>
        <div className="qc-progbar"><div className="qc-progbar-fill" style={{ width: pct + "%" }} /></div>
        <div className="qc-dhead-sku">{skusDone}/{order.items.length} SKU cocok</div>
      </div>
    </div>
  );
}

// ---------- Scan input ----------
function ScanInput({ inputRef, onScan, disabled, big }) {
  const [v, setV] = React.useState("");
  const submit = (e) => { e.preventDefault(); if (!v.trim()) return; onScan(v); setV(""); };
  return (
    <form onSubmit={submit} className={`qc-scaninput ${big ? "is-big" : ""} ${disabled ? "is-disabled" : ""}`}>
      <span className="qc-scaninput-ic"><Icon.barcode size={big ? 26 : 22} stroke="var(--pri)" /></span>
      <input
        ref={inputRef} value={v} onChange={(e) => setV(e.target.value)} disabled={disabled}
        placeholder={disabled ? "QC selesai" : "Scan barcode produk…"} autoComplete="off" spellCheck="false"
        className="qc-scaninput-field"
      />
      <span className="qc-scaninput-hint"><span className="qc-livedot" /> Siap scan</span>
    </form>
  );
}

// ---------- Scanner simulator (demo) ----------
function ScannerSim({ order, scanned, onScan, disabled, show }) {
  if (!show) return null;
  const FAKE = "8990000000000";
  return (
    <div className="qc-sim">
      <div className="qc-sim-head">
        <Icon.bolt size={14} stroke="var(--ink-3)" /> Simulator Scanner
        <span className="qc-sim-tag">demo — klik untuk meniru scan barcode</span>
      </div>
      <div className="qc-sim-btns">
        {order.items.map((it) => {
          const done = (scanned[it.sku] || 0) >= it.qty;
          return (
            <button key={it.sku} className="qc-sim-btn" disabled={disabled || done} onClick={() => onScan(it.barcode)}>
              <ProductPhoto cat={it.cat} size={26} radius={5} />
              <Mono style={{ fontSize: 11.5 }}>{it.barcode}</Mono>
              {done && <Icon.check size={14} stroke="var(--ok)" />}
            </button>
          );
        })}
        <button className="qc-sim-btn qc-sim-bad" disabled={disabled} onClick={() => onScan(FAKE)}>
          <Icon.alert size={15} stroke="var(--err)" /> Scan barang asing
        </button>
      </div>
    </div>
  );
}

// ---------- Flash overlay untuk scan salah ----------
function ScreenFlash() {
  return <div className="qc-screenflash" />;
}

Object.assign(window, { QCDetail, ScanInput, ScannerSim, DetailHeader, shortName });