// New ARS Registration — simplified flow:
//   1) PO info  →  2) Add items (by Package Code, multi-item)  →  3) Review & Submit
//
// Customer data (company / address / contact / serial / purchase date)
// is collected later via the "Customer Update" screen — sales just locks
// in the PO + items here.

function NewRegistrationWizard({ ctx }) {
  const { go, setRegistrations, registrations, role, packages: ctxPackages, currentUser } = ctx;
  const showPrice = role !== "User";

  // Restore prior wizard state from sessionStorage (survives any unintended remount)
  const saved = (() => {
    try { return JSON.parse(sessionStorage.getItem('ars_wizard') || 'null'); }
    catch (e) { return null; }
  })();

  const today = new Date().toISOString().slice(0, 10);
  const [step, setStep]             = React.useState(saved?.step ?? 0);
  const [triedStep0, setTriedStep0] = React.useState(false);
  const [poNo, setPoNo]             = React.useState(saved?.poNo ?? "");
  const [poDate, setPoDate]         = React.useState(saved?.poDate ?? today);
  // poFile is a File object (can't be persisted) — restore name-only stub so the UI shows "attached"
  const [poFile, setPoFile]         = React.useState(saved?.poFileMeta ?? null);
  const [items, setItems]           = React.useState(saved?.items ?? [{ id: 1, packageCode: "", quantity: 1, note: "" }]);
  const [submitted, setSubmitted]   = React.useState(false);

  // Persist whenever any form field changes
  React.useEffect(() => {
    if (submitted) return;
    try {
      const poFileMeta = poFile ? { name: poFile.name, size: poFile.size } : null;
      sessionStorage.setItem('ars_wizard', JSON.stringify({ step, poNo, poDate, poFileMeta, items }));
    } catch (e) {}
  }, [step, poNo, poDate, poFile, items, submitted]);

  // Clear persisted state after a successful submit
  React.useEffect(() => {
    if (submitted) {
      try { sessionStorage.removeItem('ars_wizard'); } catch (e) {}
    }
  }, [submitted]);

  const steps = [
    { label: "Purchase Order",  desc: "ระบุเลข PO และวันที่ออกใบสั่งซื้อ" },
    { label: "Items (Package)", desc: "เพิ่ม Item ใน PO ด้วย Package Code — รองรับหลายรายการต่อ 1 PO" },
    { label: "Review & Submit", desc: "ตรวจสอบและบันทึก — ข้อมูลลูกค้าจะถูกอัปเดตในขั้นถัดไป" },
  ];

  // Single source of truth: ctx.packages (loaded from Supabase, also written by MasterData)
  const packages = Array.isArray(ctxPackages) ? ctxPackages : [];
  // pkgByCode keyed by lowercase-trimmed code → match is case-insensitive and tolerant of whitespace
  const pkgByCode = React.useMemo(() => {
    const map = {};
    packages.forEach(p => { if (p && p.code) map[String(p.code).trim().toLowerCase()] = p; });
    return map;
  }, [packages]);
  const lookup = (code) => pkgByCode[String(code || '').trim().toLowerCase()];

  const validItems = items.filter(i => i.packageCode && lookup(i.packageCode));

  const canNext = () => {
    if (step === 0) return poNo.trim() !== "" && poDate && !!poFile;
    if (step === 1) return validItems.length > 0;
    return true;
  };

  const [uploading, setUploading] = React.useState(false);

  const submit = async () => {
    setUploading(true);
    const ts = new Date();
    const dateStr = ts.toISOString().slice(0,10).replace(/-/g,"");
    const baseId = `DRAFT-BKK-${dateStr}`;
    const existing = registrations.filter(r => r.id.startsWith(baseId)).length;

    // Upload PO file to Supabase Storage first
    let poFileUrl = null;
    if (window.sb && poFile && poFile instanceof File) {
      const ext = poFile.name.split('.').pop() || 'pdf';
      const safePo = poNo.replace(/[^a-zA-Z0-9_-]/g, '_');
      const path = `${safePo}/${dateStr}-${ts.getTime()}.${ext}`;
      const { data: upData, error: upErr } = await window.sb.storage
        .from('po-files')
        .upload(path, poFile, { contentType: poFile.type || 'application/pdf', upsert: true });
      if (upErr) {
        console.error('PO upload error:', upErr);
      } else {
        const { data: urlData } = window.sb.storage.from('po-files').getPublicUrl(path);
        poFileUrl = urlData?.publicUrl || null;
      }
    }

    const newEntries = [];
    let i = existing + 1;
    validItems.forEach(it => {
      const pkg = lookup(it.packageCode);
      for (let q = 0; q < (it.quantity || 1); q++) {
        newEntries.push({
          id: `${baseId}-${String(i).padStart(4,"0")}`,
          arsNo: null,
          registerDate: ts.toISOString().slice(0,10),
          status: "awaiting_customer",
          poNo, poDate,
          poFileUrl,   // ← URL จาก Supabase Storage
          customer: { company: "—", address: "—", province: "—", zip: "—", contact: "—", tel1: "—", email1: "—" },
          product: { brand: "QNAP", model: pkg.model, serial: "—" },
          warranty: { package: pkg.code, start: "—", end: "—", years: pkg.years, zone: pkg.zone },
          installationLocation: "—",
          remark: it.note || "Awaiting customer information",
          payment: "Pending",
          createdBy: currentUser ? currentUser.name : "Sales",
          submittedAt: ts.toISOString().slice(0,16).replace("T"," "),
          certificateIssued: false,
        });
        i++;
      }
    });
    setRegistrations([...newEntries, ...registrations]);
    if (window.sb && window.regToRow) {
      window.sb.from('ars_registrations')
        .insert(newEntries.map(window.regToRow))
        .then(({ error }) => { if (error) console.error('Save registrations error:', error); });
    }
    setUploading(false);
    setSubmitted(true);
  };

  if (submitted) {
    const total = validItems.reduce((a, i) => a + (i.quantity || 1), 0);
    return (
      <div className="page" style={{ maxWidth: 640 }}>
        <div className="card" style={{ padding: 40, textAlign: "center" }}>
          <div style={{ width: 72, height: 72, margin: "0 auto 18px", borderRadius: "50%", background: "var(--green-50)", color: "var(--green-600)", display: "grid", placeItems: "center" }}>
            <Icon name="check" size={42} />
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 24, margin: 0 }}>บันทึก PO เรียบร้อย</h1>
          <p className="muted" style={{ marginTop: 8 }}>
            ระบบสร้างรายการ ARS ทั้งหมด <strong>{total}</strong> รายการภายใต้ PO <span className="mono">{poNo}</span>
          </p>
          <div className="note" style={{ marginTop: 20, textAlign: "left" }}>
            <Icon name="clock" size={14}/>
            <div>
              สถานะรายการ: <strong>Awaiting customer information</strong> — เมื่อลูกค้าพร้อมแจ้งข้อมูล
              ให้ใช้เมนู <strong>Customer Update</strong> เพื่อกรอกข้อมูลผู้ใช้, Serial และวันที่ซื้อ ก่อนส่งให้ Manager อนุมัติ
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 24, justifyContent: "center" }}>
            <button className="btn" onClick={() => go("registrations")}>ดูรายการทั้งหมด</button>
            <button className="btn" onClick={() => go("customer-update")}>
              <Icon name="edit" size={14}/> ไปกรอก Customer Info
            </button>
            <button className="btn btn--primary" onClick={() => {
              setSubmitted(false); setStep(0); setPoNo(""); setPoDate(today); setPoFile(null);
              setItems([{ id: 1, packageCode: "", quantity: 1, note: "" }]);
            }}>
              <Icon name="plus" size={16}/> สร้าง PO ใหม่
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="page" style={{ maxWidth: 1080 }}>
      <div className="page__header">
        <div>
          <h1 className="page__title">New ARS Registration</h1>
          <p className="page__sub">{steps[step].desc}</p>
        </div>
        <div className="page__actions">
          <button className="btn btn--ghost" onClick={() => {
            try { sessionStorage.removeItem('ars_wizard'); } catch (e) {}
            go("registrations");
          }}>ยกเลิก</button>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 16 }}>
        <div style={{ padding: "16px 18px" }}>
          <div className="steps">
            {steps.map((s, i) => (
              <React.Fragment key={i}>
                <div className={"step " + (i < step ? "is-done " : i === step ? "is-active " : "")}>
                  <div className="step__num">{i < step ? <Icon name="check" size={14}/> : i+1}</div>
                  <div className="step__label">{s.label}</div>
                </div>
                {i < steps.length - 1 && <div className={"step__bar " + (i < step ? "done" : "")}></div>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card__body" style={{ padding: 24 }}>
          {step === 0 && (
            <StepPO poNo={poNo} setPoNo={setPoNo} poDate={poDate} setPoDate={setPoDate}
                    poFile={poFile} setPoFile={setPoFile} triedNext={triedStep0} />
          )}
          {step === 1 && (
            <StepItems items={items} setItems={setItems} packages={packages} lookup={lookup} showPrice={showPrice} />
          )}
          {step === 2 && (
            <StepReview poNo={poNo} poDate={poDate} items={validItems} lookup={lookup} showPrice={showPrice} />
          )}
        </div>
        <div style={{ padding: "14px 18px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <button className="btn btn--ghost" disabled={step === 0} onClick={() => setStep(step - 1)}><Icon name="chevron-left" size={14}/> Back</button>
          <span className="muted small">Step {step + 1} of {steps.length}</span>
          {step < steps.length - 1 ? (
            <button className="btn btn--primary" onClick={() => { if (step === 0) setTriedStep0(true); if (canNext()) setStep(step + 1); }}>
              Continue <Icon name="chevron-right" size={14}/>
            </button>
          ) : (
            <button className="btn btn--primary" onClick={submit} disabled={uploading}>
              {uploading
                ? <><Icon name="clock" size={14}/> กำลัง Upload…</>
                : <><Icon name="send" size={14}/> Submit PO</>}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function StepPO({ poNo, setPoNo, poDate, setPoDate, poFile, setPoFile, triedNext }) {
  const onDrop = (e) => {
    e.preventDefault();
    const file = e.dataTransfer.files[0];
    if (file) setPoFile(file);
  };
  const Req = () => <span style={{ color: "var(--jt-red)", marginLeft: 2 }}>*</span>;
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }}>
      <div>
        <h3 className="section-h">ข้อมูล Purchase Order</h3>
        <div className="field" style={{ marginBottom: 14 }}>
          <label>PO Number <Req/></label>
          <input className="input mono"
                 value={poNo} onChange={e => setPoNo(e.target.value)} placeholder="PO 1110XXXXXX"
                 style={{ borderColor: triedNext && !poNo.trim() ? "var(--jt-red)" : "" }} />
          {triedNext && !poNo.trim() && <span className="hint" style={{ color: "var(--jt-red)" }}>กรุณากรอก PO Number</span>}
          {(!triedNext || poNo.trim()) && <span className="hint">เลข PO นี้จะถูกใช้อ้างอิงในขั้น Customer Update</span>}
        </div>
        <div className="field" style={{ marginBottom: 14 }}>
          <label>PO Date <Req/></label>
          <input className="input" type="date" value={poDate} onChange={e => setPoDate(e.target.value)}
                 style={{ borderColor: triedNext && !poDate ? "var(--jt-red)" : "" }} />
          {triedNext && !poDate && <span className="hint" style={{ color: "var(--jt-red)" }}>กรุณาเลือก PO Date</span>}
        </div>
        <div className="note">
          <Icon name="shield" size={14}/>
          <div>
            ระบบกำหนดให้ <strong>Attach PO</strong> ก่อนเสมอ — รายการที่ไม่มี PO จะไม่สามารถออก Certificate ได้
          </div>
        </div>
      </div>
      <div>
        <h3 className="section-h">เอกสาร PO (ไฟล์แนบ) <Req/></h3>
        {triedNext && !poFile && (
          <div className="hint" style={{ color: "var(--jt-red)", marginBottom: 6 }}>กรุณาแนบไฟล์ PO ก่อนดำเนินการต่อ</div>
        )}
        <div onDragOver={e => e.preventDefault()} onDrop={onDrop}
             style={{ border: `2px dashed ${triedNext && !poFile ? "var(--jt-red)" : "var(--border-strong)"}`, borderRadius: 12, padding: 28, textAlign: "center", background: poFile ? "var(--green-50)" : "var(--surface-2)", transition: "background 0.15s" }}>
          {!poFile ? (
            <>
              <Icon name="upload" size={36} color="var(--text-muted)" />
              <div style={{ fontWeight: 600, marginTop: 10 }}>ลากไฟล์ PO มาวางที่นี่</div>
              <div className="muted small" style={{ marginTop: 4 }}>รองรับ PDF, JPG, PNG ขนาดไม่เกิน 10MB</div>
              <label className="btn" style={{ marginTop: 14, cursor: "pointer" }}>
                <Icon name="upload" size={14}/> เลือกไฟล์
                <input type="file" style={{ display: "none" }} onChange={e => setPoFile(e.target.files[0])} />
              </label>
              <div style={{ marginTop: 14 }}>
                <button className="btn btn--ghost btn--sm" onClick={() => setPoFile({ name: "PO_demo.pdf", size: 184320 })}>
                  หรือใช้ไฟล์ตัวอย่าง (demo)
                </button>
              </div>
            </>
          ) : (
            <>
              <div style={{ width: 56, height: 70, margin: "0 auto", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 8, display: "grid", placeItems: "center", color: "var(--jt-red)" }}>
                <Icon name="file" size={28} />
              </div>
              <div style={{ fontWeight: 600, marginTop: 12 }}>{poFile.name}</div>
              <div className="muted small">{((poFile.size||0)/1024).toFixed(1)} KB • อัปโหลดเรียบร้อย</div>
              <button className="btn btn--ghost btn--sm" style={{ marginTop: 8 }} onClick={() => setPoFile(null)}>
                <Icon name="x" size={12}/> ลบไฟล์
              </button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

function StepItems({ items, setItems, packages, lookup, showPrice }) {
  const nextId = React.useRef(items.length + 1);
  const addRow = () => setItems([...items, { id: nextId.current++, packageCode: "", quantity: 1, note: "" }]);
  const removeRow = (id) => setItems(items.length > 1 ? items.filter(i => i.id !== id) : items);
  const updateRow = (id, patch) => setItems(items.map(i => i.id === id ? { ...i, ...patch } : i));

  return (
    <div>
      <div className="spread" style={{ marginBottom: 14 }}>
        <div>
          <h3 className="section-h" style={{ marginBottom: 2 }}>Items in this PO</h3>
          <div className="muted small">
            เพิ่มสินค้าทีละบรรทัด — เมื่อกรอก <strong>Package Code</strong> ระบบจะดึงข้อมูลจาก Master Data อัตโนมัติ
            &nbsp;•&nbsp; มี <strong>{packages.length}</strong> packages ใน Master Data
          </div>
        </div>
        <button className="btn btn--primary btn--sm" onClick={addRow}>
          <Icon name="plus" size={14}/> เพิ่ม Item
        </button>
      </div>

      {packages.length === 0 && (
        <div className="note" style={{ background: '#fef2f2', borderColor: '#fecaca', color: '#dc2626', marginBottom: 12 }}>
          <Icon name="bell" size={14}/>
          <div>ยังไม่มี Package ใน Master Data — ให้ Admin เพิ่ม Package ก่อนที่หน้า <strong>Master Data → Warranty Packages</strong></div>
        </div>
      )}

      <div style={{ display: "grid", gap: 10 }}>
        {items.map((row, idx) => (
          <ItemRow key={row.id} row={row} idx={idx} packages={packages} lookup={lookup}
                   onChange={(patch) => updateRow(row.id, patch)}
                   onRemove={() => removeRow(row.id)} canRemove={items.length > 1}
                   showPrice={showPrice} />
        ))}
      </div>

      <div className="note" style={{ marginTop: 14 }}>
        <Icon name="database" size={14}/>
        <div>
          คลิกที่ช่อง Package Code เพื่อดู list ทั้งหมด — หรือพิมพ์เพื่อ filter (เช่น <span className="mono">TS-1273</span> หรือ <span className="mono">832</span>)
          ระบบ match แบบ <strong>ไม่สนใจตัวพิมพ์เล็ก-ใหญ่</strong> และเว้นวรรค
        </div>
      </div>
    </div>
  );
}

function ItemRow({ row, idx, packages, lookup, onChange, onRemove, canRemove, showPrice }) {
  const [open, setOpen] = React.useState(false);
  const pkg = lookup(row.packageCode);

  // Suggestions:
  //  • no input yet → show first 8 packages so user can browse without typing
  //  • input present, no exact match → filter by substring (code OR model)
  //  • exact match → no suggestions (we show the chosen package instead)
  const q = (row.packageCode || '').toLowerCase().trim();
  const suggestions = pkg
    ? []
    : q
      ? packages.filter(p => (p.code || '').toLowerCase().includes(q) || (p.model || '').toLowerCase().includes(q)).slice(0, 8)
      : packages.slice(0, 8);

  return (
    <div className="card" style={{ boxShadow: "none", background: pkg ? "var(--surface)" : "var(--surface-2)" }}>
      <div style={{ padding: 14, display: "grid", gridTemplateColumns: "32px 1fr 100px 36px", gap: 12, alignItems: "flex-start" }}>
        <div style={{ width: 28, height: 28, borderRadius: 6, background: "var(--surface-2)", border: "1px solid var(--border)", display: "grid", placeItems: "center", fontWeight: 600, fontSize: 13, color: "var(--text-muted)" }}>{idx + 1}</div>

        <div style={{ position: "relative" }}>
          <label style={{ display: "block", fontSize: 11, color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 4 }}>Package Code</label>
          <input className="input mono" value={row.packageCode}
                 onChange={e => { onChange({ packageCode: e.target.value }); setOpen(true); }}
                 onFocus={() => setOpen(true)}
                 onBlur={() => setTimeout(() => setOpen(false), 150)}
                 placeholder="พิมพ์ package code…" />
          {open && suggestions.length > 0 && (
            <div style={{ position: "absolute", top: "100%", left: 0, right: 0, marginTop: 4, background: "var(--surface)", border: "1px solid var(--border-strong)", borderRadius: 8, boxShadow: "0 8px 24px rgba(0,0,0,0.08)", zIndex: 10, maxHeight: 220, overflowY: "auto" }}>
              {suggestions.map(p => (
                <div key={p.code} onMouseDown={() => { onChange({ packageCode: p.code }); setOpen(false); }}
                     style={{ padding: "8px 12px", cursor: "pointer", borderBottom: "1px solid var(--border)" }}
                     onMouseEnter={e => e.currentTarget.style.background = "var(--surface-2)"}
                     onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 600 }}>{p.code}</div>
                  <div className="muted small">{p.model} • {p.years}Y • {p.zone}</div>
                </div>
              ))}
            </div>
          )}

          {pkg && (
            <div style={{ marginTop: 10, padding: "10px 12px", borderRadius: 8, background: "var(--surface-2)", border: "1px solid var(--border)" }}>
              <div style={{ display: "grid", gridTemplateColumns: showPrice ? "repeat(4, 1fr)" : "repeat(3, 1fr)", gap: 12 }}>
                <KV label="Model" mono>{pkg.model}</KV>
                <KV label="Warranty">{pkg.years} ปี</KV>
                <KV label="Service Zone">{pkg.zone}</KV>
                {showPrice && <KV label="List price" mono>฿{pkg.price.toLocaleString()}</KV>}
              </div>
              <div style={{ marginTop: 8 }}>
                <input className="input" value={row.note} onChange={e => onChange({ note: e.target.value })}
                       placeholder="หมายเหตุ (ไม่บังคับ) — เช่น Express install, Spare parts ฯลฯ"
                       style={{ fontSize: 13 }} />
              </div>
            </div>
          )}

          {!pkg && row.packageCode && suggestions.length === 0 && (
            <div className="muted small" style={{ marginTop: 6 }}>
              <Icon name="bell" size={12}/> ไม่พบ Package Code นี้ใน Master Data
            </div>
          )}
        </div>

        <div>
          <label style={{ display: "block", fontSize: 11, color: "var(--text-muted)", fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.4, marginBottom: 4 }}>Quantity</label>
          <input className="input mono" type="number" min={1} value={row.quantity}
                 onChange={e => onChange({ quantity: Math.max(1, Number(e.target.value) || 1) })} />
        </div>

        <button className="btn btn--ghost btn--sm" disabled={!canRemove} onClick={onRemove}
                title="ลบรายการนี้"
                style={{ marginTop: 22, padding: 8, color: "var(--text-muted)" }}>
          <Icon name="trash" size={16}/>
        </button>
      </div>
    </div>
  );
}

function KV({ label, mono, children }) {
  return (
    <div>
      <div className="muted small" style={{ fontSize: 11 }}>{label}</div>
      <div className={mono ? "mono" : ""} style={{ fontWeight: 600, fontSize: 13 }}>{children}</div>
    </div>
  );
}

function StepReview({ poNo, poDate, items, lookup, showPrice }) {
  const totalQty = items.reduce((a, i) => a + (i.quantity || 1), 0);
  const totalPrice = items.reduce((a, i) => a + ((lookup(i.packageCode)?.price || 0) * (i.quantity || 1)), 0);

  return (
    <div>
      <div className="note note--ok" style={{ marginBottom: 18 }}>
        <Icon name="check" size={14}/>
        <div>
          ตรวจสอบข้อมูลก่อนกด <strong>Submit PO</strong> — ระบบจะสร้าง <strong>{totalQty}</strong> รายการ ARS
          ภายใต้ PO <span className="mono">{poNo}</span> ในสถานะ <strong>Awaiting customer information</strong>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 16 }}>
        <Stat label="PO Number" mono>{poNo}</Stat>
        <Stat label="PO Date">{window.fmtDate(poDate)}</Stat>
        <Stat label="Items / Units"><span className="mono">{items.length}</span> / <span className="mono">{totalQty}</span></Stat>
      </div>

      <div className="card" style={{ boxShadow: "none" }}>
        <div className="card__header"><h3 className="card__title">Items ({items.length})</h3><span className="mono small muted">{poNo}</span></div>
        <table className="table">
          <thead><tr><th>#</th><th>Package Code</th><th>Model</th><th>Warranty</th><th>Service Zone</th><th style={{textAlign:"right"}}>Qty</th>{showPrice && <th style={{textAlign:"right"}}>List price</th>}</tr></thead>
          <tbody>
            {items.map((it, i) => {
              const p = lookup(it.packageCode);
              return (
                <tr key={it.id}>
                  <td>{i + 1}</td>
                  <td className="mono">{p?.code}</td>
                  <td>{p?.model}</td>
                  <td>{p?.years} ปี</td>
                  <td>{p?.zone}</td>
                  <td style={{ textAlign: "right" }} className="mono">{it.quantity}</td>
                  {showPrice && <td style={{ textAlign: "right" }} className="mono">฿{((p?.price||0) * (it.quantity||1)).toLocaleString()}</td>}
                </tr>
              );
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={5} style={{ textAlign: "right", fontWeight: 600 }}>Total</td>
              <td style={{ textAlign: "right", fontWeight: 600 }} className="mono">{totalQty}</td>
              {showPrice && <td style={{ textAlign: "right", fontWeight: 600 }} className="mono">฿{totalPrice.toLocaleString()}</td>}
            </tr>
          </tfoot>
        </table>
      </div>

      <div className="note" style={{ marginTop: 14 }}>
        <Icon name="clock" size={14}/>
        <div>
          ขั้นถัดไป: ลูกค้าจะส่งข้อมูลผู้ใช้ — ทีมขายเข้าไปที่ <strong>Customer Update</strong>,
          กรอกเลข PO นี้ แล้วบันทึก Company / Address / Serial / Purchase date เพื่อส่งให้ Manager อนุมัติและออก Certificate (PDF)
        </div>
      </div>
    </div>
  );
}

function Stat({ label, mono, children }) {
  return (
    <div style={{ background: "var(--surface-2)", border: "1px solid var(--border)", padding: "12px 14px", borderRadius: 8 }}>
      <div className="muted small">{label}</div>
      <div className={mono ? "mono" : ""} style={{ fontWeight: 600, fontSize: 14 }}>{children}</div>
    </div>
  );
}

// Keep the Field helper exported for other screens that depend on it.
function Field({ label, hint, children }) {
  return (
    <div className="field">
      <label>{label}</label>
      {children}
      {hint && <span className="hint">{hint}</span>}
    </div>
  );
}
window.Field = Field;

window.NewRegistrationWizard = NewRegistrationWizard;