// Dashboard: bar scan No. Resi + statistik + filter + daftar pesanan (server-side pagination).

function Dashboard({ orders, counts, pagination, filter, onFilterChange, onPageChange, onOpen, onSearchFound, t, loading, lastUpdated, onSyncJubelio, syncing }) {
  const resiRef = React.useRef(null);
  const [resi, setResi]       = React.useState("");
  const [resiErr, setResiErr] = React.useState(false);

  React.useEffect(() => { resiRef.current && resiRef.current.focus(); }, []);

  const pending       = parseInt(counts?.pending)       || 0;
  const proses        = parseInt(counts?.proses)        || 0;
  const done          = parseInt(counts?.done)          || 0;
  const doneYesterday = parseInt(counts?.done_yesterday)|| 0;
  const doneMonth     = parseInt(counts?.done_month)    || 0;
  const canceled      = parseInt(counts?.canceled)      || 0;
  const returned      = parseInt(counts?.returned)      || 0;

  const { page = 1, totalPages = 1, total = 0 } = pagination || {};

  const [resiSearching, setResiSearching] = React.useState(false);

  const submitResi = async (e) => {
    e.preventDefault();
    const code = resi.trim();
    if (!code || resiSearching) return;
    const c = code.toLowerCase();
    // Cari dulu di data lokal (cepat)
    const found = orders.find((o) =>
      o.resi.toLowerCase() === c
      || (o.order || "").toLowerCase() === c
      || (o.salesorder_no || "").toLowerCase() === c
      || o.resi.toLowerCase().endsWith(c)
      || o.resi.toLowerCase().includes(c)
      || (o.ref_no || "").toLowerCase() === c
    );
    if (found) { setResi(""); setResiErr(false); onOpen(found.resi); return; }
    // Fallback: cari ke server (lintas semua tab & halaman)
    setResiSearching(true);
    try {
      const d = await QC_API.searchOrder(code);
      if (d.order) {
        setResi(""); setResiErr(false);
        onSearchFound(d.order);
      } else {
        setResiErr(true); beep("error", t.beep);
        setTimeout(() => setResiErr(false), 1400);
      }
    } catch {
      setResiErr(true); beep("error", t.beep);
      setTimeout(() => setResiErr(false), 1400);
    } finally {
      setResiSearching(false);
    }
  };

  const fmtTime = (d) => {
    if (!d) return "";
    return new Date(d).toLocaleTimeString("id-ID", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
  };

  return (
    <div className="qc-page">
      {/* Scan resi hero */}
      <section className="qc-scanbar">
        <div className="qc-scanbar-label">
          <Icon.scan size={22} stroke="var(--pri)" />
          <div>
            <div className="qc-scanbar-title">Scan No. Resi</div>
            <div className="qc-scanbar-sub">Arahkan scanner ke label kurir untuk membuka pesanan</div>
          </div>
        </div>
        <form onSubmit={submitResi} className={`qc-resi-field ${resiErr ? "is-err" : ""}`}>
          <Icon.barcode size={22} stroke={resiErr ? "var(--err)" : "var(--ink-3)"} />
          <input
            ref={resiRef} value={resi}
            onChange={(e) => { setResi(e.target.value); setResiErr(false); }}
            placeholder="Tunggu scan atau ketik no resi lalu Enter…"
            autoComplete="off" spellCheck="false" className="qc-resi-input"
          />
          {resiSearching && (
            <span style={{ display: "flex", alignItems: "center", padding: "0 10px", fontSize: 13, color: "var(--ink-3)" }}>
              Mencari…
            </span>
          )}
        </form>
        {resiErr && (
          <div className="qc-resi-errmsg">
            <Icon.alert size={15} stroke="var(--err)" /> Resi tidak ditemukan di antrian QC
          </div>
        )}
      </section>

      {/* Stats */}
      <section className="qc-stats">
        <JubCard label="Selesai hari ini"  value={done}      sub={`Kemarin: ${doneYesterday}`}
          delta={doneYesterday ? ((done - doneYesterday) / doneYesterday * 100).toFixed(1) : null}
          icon={Icon.pkgCheck} tone="ok" />
        <JubCard label="Selesai bulan ini" value={doneMonth} sub={`Hari ini: ${done}`}
          icon={Icon.list} tone="pri" />
        <JubCard label="Menunggu QC"       value={pending}   sub="Pesanan pending/masalah"
          icon={Icon.box} tone="warn" />
        <JubCard label="Proses (Pick)"     value={proses}    sub="Sudah dipick, belum QC"
          icon={Icon.bolt} tone="neutral" />
      </section>

      {/* List header */}
      <section className="qc-list-head">
        <div className="qc-tabs">
          {[
            ["pending",  "Menunggu QC", pending],
            ["proses",   "Proses",      proses],
            ["done",     "Selesai",     done],
            ["canceled", "Batal",       canceled],
            ["returned", "Retur",       returned],
          ].map(([k, lbl, cnt]) => (
            <button key={k} onClick={() => onFilterChange(k)} className={`qc-tab ${filter === k ? "is-on" : ""}`}>
              {lbl}<span className="qc-tab-count">{cnt}</span>
            </button>
          ))}
        </div>

        <div className="qc-list-hint">
          {onSyncJubelio && (
            <button className="qc-btn qc-btn-ghost" onClick={onSyncJubelio} disabled={syncing}
              style={{ fontSize: 12, height: 32, padding: "0 12px", gap: 6 }}>
              {syncing
                ? <><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{animation:"spin 1s linear infinite"}}><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg> Sinkronisasi…</>
                : <><Icon.bolt size={14} /> Sync Jubelio</>
              }
            </button>
          )}
          {lastUpdated && !loading && (
            <span style={{ fontSize: 12, color: "var(--ink-3)" }}>
              Update {fmtTime(lastUpdated)}
            </span>
          )}
          {loading && (
            <React.Fragment>
              <span className="qc-livedot" style={{ background: "var(--pri)" }} /> Memuat…
            </React.Fragment>
          )}
        </div>
      </section>

      {/* Order list */}
      <section className="qc-table" style={{ position: "relative" }}>
        <div className="qc-tr qc-th">
          <div>No. Resi</div>
          <div>Pesanan</div>
          <div className="hide-sm">Kurir</div>
          <div className="hide-sm">Item</div>
          <div>Status</div>
          <div></div>
        </div>

        {loading && (
          <div style={{
            position: "absolute", inset: 0, top: 48, borderRadius: "0 0 12px 12px",
            background: "rgba(255,255,255,0.82)", backdropFilter: "blur(3px)",
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: 10, fontSize: 14, fontWeight: 500, color: "var(--ink-2)", zIndex: 5,
            minHeight: 80,
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
              style={{ animation: "spin 1s linear infinite", flexShrink: 0 }}>
              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/>
            </svg>
            Memuat data…
          </div>
        )}

        {orders.map((o, idx) => {
          const pcs = o.items.reduce((a, i) => a + i.qty, 0);
          return (
            <button key={o.resi + '_' + idx} className="qc-tr qc-row" onClick={() => onOpen(o.resi)}>
              <div className="qc-cell-resi">
                <Mono style={{ fontWeight: 600, fontSize: 14 }}>{o.resi}</Mono>
                <span className="qc-cell-time"><Icon.clock size={12} stroke="var(--ink-3)" /> {o.time}</span>
              </div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{o.customer}</div>
                <Mono style={{ fontSize: 12, color: "var(--ink-3)" }}>{o.order}</Mono>
              </div>
              <div className="hide-sm"><CourierTag courier={o.courier} /></div>
              <div className="hide-sm">
                <span className="qc-itempill">{o.items.length} SKU · {pcs} pcs</span>
              </div>
              <div><StatusBadge status={o.status} /></div>
              <div className="qc-row-go"><Icon.chevR size={18} stroke="var(--ink-3)" /></div>
            </button>
          );
        })}

        {!loading && orders.length === 0 && (
          <div className="qc-empty">Tidak ada pesanan pada filter ini.</div>
        )}
      </section>

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="qc-pagination">
          <span className="qc-page-info">
            Halaman {page} dari {totalPages} · {total} pesanan
          </span>
          <div className="qc-page-btns">
            <button className="qc-page-btn" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>
              <Icon.back size={16} /> Sebelumnya
            </button>
            {Array.from({ length: totalPages }, (_, i) => i + 1)
              .filter((p) => p === 1 || p === totalPages || Math.abs(p - page) <= 1)
              .reduce((acc, p, idx, arr) => {
                if (idx > 0 && p - arr[idx - 1] > 1) acc.push("…");
                acc.push(p);
                return acc;
              }, [])
              .map((p, idx) => p === "…"
                ? <span key={`e${idx}`} className="qc-page-ellipsis">…</span>
                : <button key={p} className={`qc-page-num ${p === page ? "is-on" : ""}`} onClick={() => onPageChange(p)}>{p}</button>
              )
            }
            <button className="qc-page-btn" disabled={page >= totalPages} onClick={() => onPageChange(page + 1)}>
              Berikutnya <Icon.chevR size={16} />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

function StatCard({ icon, label, value, tone }) {
  const Ic = icon;
  return (
    <div className={`qc-stat qc-stat-${tone}`}>
      <div className="qc-stat-ic"><Ic size={20} /></div>
      <div className="qc-stat-body">
        <div className="qc-stat-val">{value}</div>
        <div className="qc-stat-lbl">{label}</div>
      </div>
    </div>
  );
}

function JubCard({ label, value, sub, delta, icon, tone }) {
  const Ic = icon;
  const up = delta !== null && delta !== undefined ? parseFloat(delta) >= 0 : null;
  return (
    <div className={`qc-jcard qc-jcard-${tone}`}>
      <div className="qc-jcard-top">
        <div className="qc-jcard-label">{label}</div>
        <div className={`qc-jcard-ic qc-jcard-ic-${tone}`}><Ic size={18} /></div>
      </div>
      <div className="qc-jcard-val">{value.toLocaleString("id-ID")}</div>
      <div className="qc-jcard-bottom">
        {delta !== null && delta !== undefined && (
          <span className={`qc-jcard-delta ${up ? "is-up" : "is-dn"}`}>
            {up ? "▲" : "▼"} {Math.abs(delta)}%
          </span>
        )}
        <span className="qc-jcard-sub">{sub}</span>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });