// Customer Update — second-stage flow.
//
// After a PO is registered (status: "awaiting_customer"), the customer sends
// their information later. Sales/User opens this screen, looks up the PO,
// and fills in: User Company, Address, Province, Post Code, Contact, Tel,
// Email, Model, Serial Number, Purchase date — per item — then submits to
// Manager for approval. A PDF preview is generated on success.

function CustomerUpdateScreen({ ctx }) {
  const Field = window.Field;
  const { registrations, setRegistrations, go } = ctx;

  const [stage, setStage] = React.useState("lookup"); // lookup | form | success
  const [poNo, setPoNo] = React.useState("");
  const [error, setError] = React.useState(null);
  const [foundItems, setFoundItems] = React.useState([]);
  const [shared, setShared] = React.useState({
    company: "", address: "", province: "", postCode: "",
    contact: "", tel: "", email: "",
    purchaseDate: new Date().toISOString().slice(0, 10),
  });
  const [perItem, setPerItem] = React.useState({}); // id -> { serial }
  const [submitted, setSubmitted] = React.useState(null);

  // Suggest a couple of PO numbers from existing data so this is easy to demo.
  const demoPOs = React.useMemo(() => {
    const set = new Set();
    registrations.forEach(r => set.add(r.poNo));
    return [...set].slice(0, 4);
  }, [registrations]);

  const lookup = () => {
    setError(null);
    const items = registrations.filter(r => r.poNo.trim().toLowerCase() === poNo.trim().toLowerCase());
    if (items.length === 0) {
      setError(`ไม่พบรายการสำหรับ PO "${poNo}" — ตรวจสอบเลข PO อีกครั้ง`);
      return;
    }
    setFoundItems(items);

    // Pre-fill shared from existing values where reasonable
    const seed = items.find(r => r.customer && r.customer.company && r.customer.company !== "—");
    if (seed) {
      setShared(s => ({
        ...s,
        company:  s.company  || seed.customer.company  || "",
        address:  s.address  || seed.customer.address  || "",
        province: s.province || seed.customer.province || "",
        postCode: s.postCode || seed.customer.zip      || "",
        contact:  s.contact  || seed.customer.contact  || "",
        tel:      s.tel      || seed.customer.tel1     || "",
        email:    s.email    || seed.customer.email1   || "",
      }));
    }

    // Init per-item state — keep existing serials when present
    const init = {};
    items.forEach(r => { init[r.id] = { serial: (r.product?.serial && r.product.serial !== "—") ? r.product.serial : "" }; });
    setPerItem(init);

    setStage("form");
  };

  const validEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());

  const allComplete = () => {
    if (!shared.company || !shared.address || !shared.province || !shared.postCode
        || !shared.contact || !shared.tel || !shared.email || !shared.purchaseDate) return false;
    if (!validEmail(shared.email)) return false;
    return foundItems.every(r => (perItem[r.id]?.serial || "").trim().length > 0);
  };

  const submit = () => {
    // Generate real ARS numbers now, based on the customer's purchase date.
    // Format: ARSQ-BKK-{purchaseDateYYYYMMDD}-{seq 0001…}
    const purchaseDateStr = (shared.purchaseDate || new Date().toISOString().slice(0,10)).replace(/-/g,"");
    const baseArsNo = `ARSQ-BKK-${purchaseDateStr}`;
    // Count how many real ARS nos with this base already exist in loaded state
    const existingCount = registrations.filter(r => r.arsNo && r.arsNo.startsWith(baseArsNo)).length;
    let arsSeq = existingCount + 1;

    const ts = new Date().toISOString().slice(0,16).replace("T"," ");
    const updated = registrations.map(r => {
      if (!foundItems.find(f => f.id === r.id)) return r;
      const pi = perItem[r.id] || {};
      // Re-derive warranty end from purchase date + years
      const start = shared.purchaseDate;
      const years = r.warranty?.years || 0;
      let end = "—";
      if (start && years) {
        const d = new Date(start);
        d.setFullYear(d.getFullYear() + Number(years));
        d.setDate(d.getDate() - 1);
        end = d.toISOString().slice(0, 10);
      }
      // Assign next sequential ARS number
      const newArsNo = `${baseArsNo}-${String(arsSeq).padStart(4,"0")}`;
      arsSeq++;
      return {
        ...r,
        arsNo: newArsNo,
        status: "pending_approval",
        customer: {
          company:  shared.company,
          address:  shared.address,
          province: shared.province,
          zip:      shared.postCode,
          contact:  shared.contact,
          tel1:     shared.tel,
          email1:   shared.email,
        },
        product: { ...r.product, serial: pi.serial || r.product?.serial },
        warranty: { ...r.warranty, start, end },
        installationLocation: shared.province,
        remark: "Customer info submitted — pending manager approval",
        submittedAt: ts,
      };
    });
    setRegistrations(updated);
    // Persist to Supabase
    if (window.sb && window.regToRow) {
      const toSave = updated.filter(r => foundItems.find(f => f.id === r.id));
      toSave.forEach(r => {
        window.sb.from('ars_registrations')
          .update(window.regToRow(r))
          .eq('id', r.id)
          .then(({ error }) => { if (error) console.error('Customer update error:', error); });
      });
    }
    setSubmitted({ poNo, items: foundItems.length, ts, arsNos: updated.filter(r => foundItems.find(f => f.id === r.id)).map(r => r.arsNo) });
    setStage("success");
  };

  // -------- Stages --------

  if (stage === "lookup") {
    return (
      <div className="page" style={{ maxWidth: 760 }}>
        <div className="page__header">
          <div>
            <h1 className="page__title">Customer Update</h1>
            <p className="page__sub">กรอกข้อมูลผู้ใช้สำหรับ PO ที่เคย Register ไว้ แล้วส่งให้ Manager อนุมัติ</p>
          </div>
        </div>

        <div className="card">
          <div className="card__body" style={{ padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 22 }}>
              <div style={{ width: 56, height: 56, borderRadius: 12, background: "var(--surface-2)", display: "grid", placeItems: "center", color: "var(--jt-red)" }}>
                <Icon name="search" size={28} />
              </div>
              <div>
                <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 22 }}>ค้นหา PO ที่ลงทะเบียนไว้</h2>
                <div className="muted small">ระบบจะดึงรายการ items ที่ผูกกับ PO เลขนี้มาให้กรอกข้อมูล</div>
              </div>
            </div>

            <Field label="PO Number">
              <input className="input mono" value={poNo}
                     onChange={e => { setPoNo(e.target.value); setError(null); }}
                     onKeyDown={e => { if (e.key === "Enter") lookup(); }}
                     placeholder="PO 1110XXXXXX" style={{ fontSize: 16, padding: "12px 14px" }} />
            </Field>

            {error && (
              <div className="note note--warn" style={{ marginTop: 12 }}>
                <Icon name="bell" size={14}/>
                <div>{error}</div>
              </div>
            )}

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16 }}>
              <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                <span className="muted small" style={{ alignSelf: "center", marginRight: 4 }}>ตัวอย่าง:</span>
                {demoPOs.map(p => (
                  <button key={p} className="chip mono" onClick={() => setPoNo(p)}>{p}</button>
                ))}
              </div>
              <button className="btn btn--primary" onClick={lookup} disabled={!poNo.trim()}>
                <Icon name="search" size={14}/> ค้นหา
              </button>
            </div>
          </div>
        </div>

        <div className="note" style={{ marginTop: 14 }}>
          <Icon name="clock" size={14}/>
          <div>
            หลังกรอกข้อมูลและกด Submit ระบบจะส่งคำขอไปที่ <strong>Approvals</strong> ของ Manager —
            เมื่ออนุมัติ ระบบจะ Generate <strong>Certificate PDF</strong> ให้อัตโนมัติ
          </div>
        </div>
      </div>
    );
  }

  if (stage === "success") {
    return <SuccessScreen submitted={submitted} go={go} reset={() => {
      setStage("lookup"); setPoNo(""); setError(null); setFoundItems([]); setSubmitted(null);
      setShared({ company: "", address: "", province: "", postCode: "", contact: "", tel: "", email: "", purchaseDate: new Date().toISOString().slice(0, 10) });
      setPerItem({});
    }} />;
  }

  // stage === "form"
  return (
    <div className="page" style={{ maxWidth: 1080 }}>
      <div className="page__header">
        <div>
          <h1 className="page__title">Customer Update — <span className="mono" style={{ fontSize: 20, color: "var(--jt-red)" }}>{poNo}</span></h1>
          <p className="page__sub">กรอกข้อมูลผู้ใช้ตามที่ลูกค้าส่งมา — {foundItems.length} item ใน PO นี้</p>
        </div>
        <div className="page__actions">
          <button className="btn btn--ghost" onClick={() => setStage("lookup")}>
            <Icon name="chevron-left" size={14}/> เปลี่ยน PO
          </button>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <div>
          <UserInformationForm shared={shared} setShared={setShared} />

          <div className="card" style={{ marginTop: 16 }}>
            <div className="card__header">
              <h3 className="card__title">Items in PO</h3>
              <span className="muted small">กรอก Serial Number ของแต่ละ item</span>
            </div>
            <div style={{ padding: 14, display: "grid", gap: 10 }}>
              {foundItems.map((r, i) => (
                <div key={r.id} style={{ display: "grid", gridTemplateColumns: "28px 1.4fr 1fr 1fr", gap: 12, alignItems: "center", padding: "10px 12px", border: "1px solid var(--border)", borderRadius: 8, background: "var(--surface-2)" }}>
                  <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--surface)", border: "1px solid var(--border)", display: "grid", placeItems: "center", fontWeight: 600, fontSize: 12, color: "var(--text-muted)" }}>{i + 1}</div>
                  <div>
                    <div className="mono" style={{ fontWeight: 600, fontSize: 13 }}>{r.warranty.package}</div>
                    <div className="muted small">{r.product.model} • {r.warranty.years}Y • {r.warranty.zone}</div>
                  </div>
                  <div className="mono small muted" style={{ fontSize: 11 }}>{r.id}</div>
                  <input className="input mono" value={perItem[r.id]?.serial || ""}
                         onChange={e => setPerItem({ ...perItem, [r.id]: { ...perItem[r.id], serial: e.target.value } })}
                         placeholder="Serial Number" />
                </div>
              ))}
            </div>
          </div>
        </div>

        <div>
          <PreviewCard shared={shared} foundItems={foundItems} perItem={perItem} poNo={poNo} />
          <div style={{ display: "flex", gap: 8, marginTop: 14 }}>
            <button className="btn btn--ghost" style={{ flex: 1 }} onClick={() => setStage("lookup")}>ยกเลิก</button>
            <button className="btn btn--primary" style={{ flex: 2 }} disabled={!allComplete()} onClick={submit}>
              <Icon name="send" size={14}/> Submit for Manager approval
            </button>
          </div>
          {!allComplete() && (
            <div className="muted small" style={{ marginTop: 8, textAlign: "right" }}>กรอกข้อมูลทุกช่อง + Serial ของทุก item ก่อนส่ง</div>
          )}
        </div>
      </div>
    </div>
  );
}

function UserInformationForm({ shared, setShared }) {
  const u = (k, v) => setShared({ ...shared, [k]: v });
  const [touched, setTouched] = React.useState({});
  const touch = (k) => setTouched(t => ({ ...t, [k]: true }));
  const validEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || "").trim());

  const err = (k) => {
    if (!touched[k]) return null;
    if (!shared[k]) return "จำเป็นต้องกรอก";
    if (k === "email" && !validEmail(shared[k])) return "รูปแบบอีเมลไม่ถูกต้อง (ต้องมี @domain)";
    return null;
  };

  const Req = () => <span style={{ color: "var(--jt-red)", marginLeft: 2 }}>*</span>;

  return (
    <div className="card">
      <div style={{ background: "#8bbf3f", color: "#1f2a16", padding: "10px 16px", borderRadius: "var(--radius) var(--radius) 0 0", fontWeight: 700, letterSpacing: 0.3, textAlign: "center", fontSize: 15, borderBottom: "1px solid rgba(0,0,0,0.1)" }}>
        User Information
      </div>
      <div style={{ padding: 18, display: "grid", gap: 12 }}>
        <UIRow label={<>User Company <Req/></>} error={err("company")}>
          <input className="input" value={shared.company} onChange={e => u("company", e.target.value)}
                 onBlur={() => touch("company")} placeholder="ชื่อบริษัท / องค์กร"
                 style={{ borderColor: err("company") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>Address <Req/></>} error={err("address")}>
          <input className="input" value={shared.address} onChange={e => u("address", e.target.value)}
                 onBlur={() => touch("address")} placeholder="เลขที่, ถนน, ตำบล/แขวง, อำเภอ/เขต"
                 style={{ borderColor: err("address") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>Province <Req/></>} error={err("province")}>
          <input className="input" value={shared.province} onChange={e => u("province", e.target.value)}
                 onBlur={() => touch("province")} placeholder="จังหวัด"
                 style={{ borderColor: err("province") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>Post Code <Req/></>} error={err("postCode")}>
          <input className="input mono" value={shared.postCode} onChange={e => u("postCode", e.target.value)}
                 onBlur={() => touch("postCode")} placeholder="รหัสไปรษณีย์ 5 หลัก"
                 style={{ borderColor: err("postCode") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>User Contact person <Req/></>} error={err("contact")}>
          <input className="input" value={shared.contact} onChange={e => u("contact", e.target.value)}
                 onBlur={() => touch("contact")} placeholder="ชื่อ-สกุล ผู้ติดต่อ"
                 style={{ borderColor: err("contact") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>Tel. <Req/></>} error={err("tel")}>
          <input className="input mono" value={shared.tel} onChange={e => u("tel", e.target.value)}
                 onBlur={() => touch("tel")} placeholder="เบอร์ติดต่อ"
                 style={{ borderColor: err("tel") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>Email <Req/></>} error={err("email")}>
          <input className="input" type="email" value={shared.email} onChange={e => u("email", e.target.value)}
                 onBlur={() => touch("email")} placeholder="example@domain.com"
                 style={{ borderColor: err("email") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <UIRow label={<>User Purchase date <Req/></>} error={err("purchaseDate")}>
          <input className="input" type="date" value={shared.purchaseDate} onChange={e => u("purchaseDate", e.target.value)}
                 onBlur={() => touch("purchaseDate")}
                 style={{ borderColor: err("purchaseDate") ? "var(--jt-red)" : "" }} />
        </UIRow>
        <div className="muted small" style={{ paddingTop: 4, borderTop: "1px dashed var(--border)" }}>
          <Icon name="shield" size={12}/> Model และ Serial Number จะถูกบันทึกต่อ Item ในตารางด้านล่าง
        </div>
      </div>
    </div>
  );
}

function UIRow({ label, children, error }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", alignItems: "flex-start", gap: 12, borderBottom: "1px solid var(--border)", paddingBottom: 8 }}>
      <label style={{ fontSize: 13, color: "var(--text)", fontWeight: 500, paddingTop: 8 }}>{label} :</label>
      <div>
        {children}
        {error && <div style={{ fontSize: 11, color: "var(--jt-red)", marginTop: 3 }}>{error}</div>}
      </div>
    </div>
  );
}

function PreviewCard({ shared, foundItems, perItem, poNo }) {
  const sample = foundItems[0];
  return (
    <div className="card" style={{ position: "sticky", top: 16 }}>
      <div className="card__header">
        <h3 className="card__title">PDF Preview</h3>
        <span className="muted small">ตัวอย่างก่อน Generate</span>
      </div>
      <div style={{ padding: 14 }}>
        <div style={{ background: "#fff", border: "1px solid var(--border-strong)", borderRadius: 6, padding: 14, fontFamily: "var(--font-mono)", fontSize: 11, lineHeight: 1.5 }}>
          <div style={{ background: "#8bbf3f", color: "#1f2a16", textAlign: "center", padding: "5px 8px", margin: "-14px -14px 10px", fontWeight: 700, letterSpacing: 0.4 }}>
            User Information
          </div>
          <PreviewRow k="User Company"        v={shared.company} />
          <PreviewRow k="Address"             v={shared.address} />
          <PreviewRow k="Province"            v={shared.province} />
          <PreviewRow k="Post Code"           v={shared.postCode} />
          <PreviewRow k="User Contact person" v={shared.contact} />
          <PreviewRow k="Tel."                v={shared.tel} />
          <PreviewRow k="Email"               v={shared.email} highlight />
          <PreviewRow k="model"               v={sample ? sample.product.model : ""} />
          <PreviewRow k="Serial Number"       v={sample ? (perItem[sample.id]?.serial || "") : ""} />
          <PreviewRow k="User Purchase date"  v={shared.purchaseDate ? window.fmtDate(shared.purchaseDate) : ""} />
        </div>
        {foundItems.length > 1 && (
          <div className="muted small" style={{ marginTop: 8, textAlign: "center" }}>
            แสดงเพียง item แรก — ระบบจะออก PDF ทั้งหมด {foundItems.length} ใบ
          </div>
        )}
        <div className="spread" style={{ marginTop: 12, padding: "8px 10px", background: "var(--surface-2)", borderRadius: 6 }}>
          <span className="muted small">PO No.</span>
          <span className="mono small" style={{ fontWeight: 600 }}>{poNo}</span>
        </div>
      </div>
    </div>
  );
}

function PreviewRow({ k, v, highlight }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "44% 56%", borderBottom: "1px solid #e5e5e5", padding: "3px 0" }}>
      <span style={{ color: "#222" }}>{k} :</span>
      <span style={{ color: highlight ? "#ea580c" : "#111", textDecoration: highlight ? "underline" : "none", wordBreak: "break-word" }}>
        {v || <span style={{ color: "#bbb" }}>—</span>}
      </span>
    </div>
  );
}

function SuccessScreen({ submitted, go, reset }) {
  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="send" size={36} />
        </div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 24, margin: 0 }}>ส่งข้อมูลให้ Manager แล้ว</h1>
        <p className="muted" style={{ marginTop: 8 }}>
          ส่งข้อมูล {submitted.items} item ของ PO <span className="mono">{submitted.poNo}</span> เข้าคิวอนุมัติเมื่อ {submitted.ts}
        </p>
        {submitted.arsNos && submitted.arsNos.length > 0 && (
          <div style={{ marginTop: 10, padding: "10px 16px", background: "var(--surface-2)", borderRadius: 8, border: "1px solid var(--border)" }}>
            <div className="muted small" style={{ marginBottom: 6 }}>ARS No. ที่ได้รับ:</div>
            {submitted.arsNos.map(no => (
              <div key={no} className="mono" style={{ fontWeight: 600, fontSize: 14, color: "var(--jt-navy-800)" }}>{no}</div>
            ))}
          </div>
        )}

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 22 }}>
          <div style={{ padding: "12px 14px", border: "1px solid var(--border)", borderRadius: 10, textAlign: "left" }}>
            <div className="muted small" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5 }}>Step 1 — Done</div>
            <div style={{ fontWeight: 600, marginTop: 2 }}>Submit to Approvals</div>
            <div className="muted small">ระบบส่งให้ Service Manager</div>
          </div>
          <div style={{ padding: "12px 14px", border: "1px solid var(--border-strong)", borderRadius: 10, textAlign: "left", background: "var(--surface-2)" }}>
            <div className="muted small" style={{ fontSize: 11, textTransform: "uppercase", letterSpacing: 0.5 }}>Step 2 — Pending</div>
            <div style={{ fontWeight: 600, marginTop: 2 }}>Approve & Generate PDF</div>
            <div className="muted small">Manager อนุมัติ → ออก Certificate</div>
          </div>
        </div>

        <div className="note" style={{ marginTop: 20, textAlign: "left" }}>
          <Icon name="bell" size={14}/>
          <div>คุณจะได้รับอีเมลเมื่อ Certificate PDF ถูกออกให้แล้ว — ดูสถานะได้ที่หน้า <strong>Registrations</strong></div>
        </div>

        <div style={{ display: "flex", gap: 8, marginTop: 24, justifyContent: "center" }}>
          <button className="btn" onClick={() => go("registrations")}>ดูรายการทั้งหมด</button>
          <button className="btn btn--primary" onClick={reset}>
            <Icon name="plus" size={14}/> อัปเดต PO อื่น
          </button>
        </div>
      </div>
    </div>
  );
}

window.CustomerUpdateScreen = CustomerUpdateScreen;