// ==============================================
// Checkout page: customer info form -> PDF preview/download
// ==============================================

function CheckoutPage({ session, cart, navigate, customer, setCustomer, generatedQuote, setGeneratedQuote, apiStatus }) {
  const isDealer = session?.role === "dealer";
  const [step, setStep] = useState(generatedQuote ? "preview" : "form");
  const [errors, setErrors] = useState({});
  const [saving, setSaving] = useState(false);
  const toast = useToast();

  const subtotal = cart.reduce((s, i) => s + (isDealer ? i.dealerPrice : i.price) * i.qty, 0);
  const dealerDiscount = isDealer ? cart.reduce((s, i) => s + (i.price - i.dealerPrice) * i.qty, 0) : 0;
  const vat = subtotal * 0.07;
  const total = subtotal + vat;

  const validate = () => {
    const e = {};
    if (!customer.name.trim()) e.name = "กรุณากรอกชื่อ";
    if (!customer.phone.trim()) e.phone = "กรุณากรอกเบอร์โทร";
    else if (!/^[0-9\-\s+()]{8,}$/.test(customer.phone)) e.phone = "เบอร์โทรไม่ถูกต้อง";
    if (!customer.email.trim()) e.email = "กรุณากรอกอีเมล";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(customer.email)) e.email = "อีเมลไม่ถูกต้อง";
    if (!customer.address.trim()) e.address = "กรุณากรอกที่อยู่";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async () => {
    if (!validate()) {
      toast("กรุณากรอกข้อมูลให้ครบถ้วน", "err");
      return;
    }
    setSaving(true);
    let quoteNo = newQuoteNo(); // optimistic local number
    let savedToDb = false;

    // Try to save to Cloudflare D1
    if (apiStatus === "live" && window.ISP_API) {
      try {
        const result = await window.ISP_API.createQuotation({
          customer, items: cart,
          subtotal, dealerDiscount, vat, total, isDealer,
        });
        if (result?.quotation_no) {
          quoteNo = result.quotation_no; // use server-generated number
          savedToDb = true;
        }
      } catch (e) {
        console.warn("DB save failed, using local:", e.message);
      }
    }
    setSaving(false);

    setGeneratedQuote({
      no: quoteNo,
      date: todayStr(),
      dateEn: todayEn(),
      customer: { ...customer },
      items: cart.map(c => ({ ...c })),
      isDealer,
      subtotal, dealerDiscount, vat, total,
      savedToDb,
    });
    setStep("preview");
    toast(savedToDb ? `บันทึกใบเสนอราคา ${quoteNo} ลงฐานข้อมูลแล้ว ✓` : "สร้างใบเสนอราคาเรียบร้อย");
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  if (cart.length === 0 && !generatedQuote) {
    navigate("cart");
    return null;
  }

  return (
    <div className="container-narrow">
      <div className="page-head">
        <div>
          <div className="crumb">
            <a onClick={() => navigate("catalog")}>หน้าแรก</a>
            <Icon name="chevron-right" size={12}/>
            <a onClick={() => navigate("cart")}>ใบเสนอราคา</a>
            <Icon name="chevron-right" size={12}/>
            <span>{step === "form" ? "ข้อมูลลูกค้า" : "ใบเสนอราคา PDF"}</span>
          </div>
          <h1>{step === "form" ? "ข้อมูลลูกค้าสำหรับออกใบเสนอราคา" : `ใบเสนอราคา · ${generatedQuote?.no}`}</h1>
        </div>
        {step === "preview" && (
          <button className="btn btn-ghost" onClick={() => { setStep("form"); }}>
            <Icon name="edit" size={14}/> แก้ไขข้อมูลลูกค้า
          </button>
        )}
      </div>

      {/* Stepper */}
      <div className="card mb-24" style={{ padding: 16 }}>
        <div className="flex gap-16 center">
          {[
            { id: "cart", label: "1. เลือกสินค้า", done: true },
            { id: "form", label: "2. ข้อมูลลูกค้า", done: step === "preview" },
            { id: "preview", label: "3. ดาวน์โหลด PDF", done: false, active: step === "preview" },
          ].map((s, i, arr) => (
            <React.Fragment key={s.id}>
              <div className="flex gap-8 center" style={{ color: s.done ? "var(--green)" : s.active || (s.id === "form" && step === "form") ? "var(--navy-700)" : "var(--ink-400)" }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 13,
                  background: s.done ? "var(--green)" : (s.id === "form" && step === "form") || s.active ? "var(--navy-700)" : "var(--ink-200)",
                  color: "white", display: "grid", placeItems: "center", fontWeight: 600, fontSize: 12, fontFamily: "var(--font-en)"
                }}>
                  {s.done ? <Icon name="check" size={14}/> : (i + 1)}
                </div>
                <span style={{ fontSize: 13.5, fontWeight: 500 }}>{s.label}</span>
              </div>
              {i < arr.length - 1 && <div style={{ flex: 1, height: 2, background: "var(--ink-200)" }}></div>}
            </React.Fragment>
          ))}
        </div>
      </div>

      {step === "form" && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24, alignItems: "flex-start" }}>
          <div className="card">
            <div className="card-head"><h3>ข้อมูลลูกค้า / Customer Information</h3></div>
            <div className="card-body">
              <div className="form-grid">
                <div className="form-field col-2">
                  <label>ชื่อ-นามสกุล / ผู้ติดต่อ <span className="req">*</span></label>
                  <input value={customer.name} onChange={e => setCustomer({ ...customer, name: e.target.value })} placeholder="เช่น คุณสมชาย ใจดี" />
                  {errors.name && <span className="err">{errors.name}</span>}
                </div>
                <div className="form-field col-2">
                  <label>บริษัท / หน่วยงาน</label>
                  <input value={customer.company} onChange={e => setCustomer({ ...customer, company: e.target.value })} placeholder="เช่น บริษัท สมชายการก่อสร้าง จำกัด" />
                  <span className="hint">หากซื้อในนามบริษัท โปรดระบุชื่อบริษัทเต็มเพื่อออกใบกำกับภาษี</span>
                </div>
                <div className="form-field">
                  <label>เบอร์โทรศัพท์ <span className="req">*</span></label>
                  <input value={customer.phone} onChange={e => setCustomer({ ...customer, phone: e.target.value })} placeholder="081-234-5678" />
                  {errors.phone && <span className="err">{errors.phone}</span>}
                </div>
                <div className="form-field">
                  <label>อีเมล <span className="req">*</span></label>
                  <input value={customer.email} onChange={e => setCustomer({ ...customer, email: e.target.value })} placeholder="customer@email.com" />
                  {errors.email && <span className="err">{errors.email}</span>}
                </div>
                <div className="form-field col-2">
                  <label>ที่อยู่จัดส่ง / ที่อยู่ออกใบกำกับภาษี <span className="req">*</span></label>
                  <textarea rows="3" value={customer.address} onChange={e => setCustomer({ ...customer, address: e.target.value })} placeholder="บ้านเลขที่ ถนน แขวง/ตำบล เขต/อำเภอ จังหวัด รหัสไปรษณีย์" />
                  {errors.address && <span className="err">{errors.address}</span>}
                </div>
                <div className="form-field">
                  <label>เลขประจำตัวผู้เสียภาษี (ถ้ามี)</label>
                  <input value={customer.taxId} onChange={e => setCustomer({ ...customer, taxId: e.target.value })} placeholder="13 หลัก" maxLength="13" />
                </div>
                <div className="form-field">
                  <label>โครงการ / Project (ถ้ามี)</label>
                  <input value={customer.project || ""} onChange={e => setCustomer({ ...customer, project: e.target.value })} placeholder="เช่น โครงการอาคาร A" />
                </div>
                <div className="form-field col-2">
                  <label>หมายเหตุเพิ่มเติม</label>
                  <textarea rows="2" value={customer.note || ""} onChange={e => setCustomer({ ...customer, note: e.target.value })} placeholder="เช่น ขอใบเสนอราคาด่วน, ต้องการสินค้าภายในวันที่..." />
                </div>
              </div>

              <div className="divider"></div>

              <div className="flex gap-8 center between">
                <label className="filter-item" style={{cursor:"pointer"}}>
                  <input type="checkbox" defaultChecked />
                  <span className="small">ฉันยอมรับ <a style={{color:"var(--navy-700)", textDecoration:"underline"}}>เงื่อนไขการสั่งซื้อ</a> และ <a style={{color:"var(--navy-700)", textDecoration:"underline"}}>นโยบายความเป็นส่วนตัว</a></span>
                </label>
              </div>
            </div>
          </div>

          <aside>
            <div className="card" style={{ position: "sticky", top: 16 }}>
              <div className="card-head"><h3>สรุปใบเสนอราคา</h3></div>
              <div className="card-body">
                <div className="small muted mb-8">รายการสินค้า ({cart.length})</div>
                <div style={{ maxHeight: 240, overflow: "auto", marginBottom: 12 }}>
                  {cart.map(item => (
                    <div key={item.id} className="flex between" style={{ padding: "8px 0", borderBottom: "1px dashed var(--ink-200)", fontSize: 12.5 }}>
                      <div style={{ flex: 1, paddingRight: 8 }}>
                        <div className="bold" style={{ fontSize: 13 }}>{item.th}</div>
                        <div className="muted tiny mono">{item.sku} × {item.qty}</div>
                      </div>
                      <div className="en bold" style={{ whiteSpace: "nowrap" }}>฿{fmtMoney((isDealer ? item.dealerPrice : item.price) * item.qty)}</div>
                    </div>
                  ))}
                </div>
                <div className="summary-row">
                  <span className="label">ยอดสินค้า</span>
                  <span className="value">฿{fmtMoney(subtotal)}</span>
                </div>
                {dealerDiscount > 0 && (
                  <div className="summary-row discount">
                    <span className="label">ส่วนลด Dealer</span>
                    <span className="value">- ฿{fmtMoney(dealerDiscount)}</span>
                  </div>
                )}
                <div className="summary-row">
                  <span className="label">VAT 7%</span>
                  <span className="value">฿{fmtMoney(vat)}</span>
                </div>
                <div className="summary-row total">
                  <span className="label">รวมทั้งสิ้น</span>
                  <span className="value">฿{fmtMoney(total)}</span>
                </div>
                <button className="btn btn-primary btn-block btn-lg mt-16" onClick={submit}>
                  <Icon name="file-text" size={16}/> สร้างใบเสนอราคา PDF
                </button>
                <div className="small muted text-right mt-8">
                  ใบเสนอราคามีผล 30 วัน
                </div>
              </div>
            </div>
          </aside>
        </div>
      )}

      {step === "preview" && generatedQuote && (
        <QuotationPreview
          quote={generatedQuote}
          navigate={navigate}
          onNewQuote={() => {
            setGeneratedQuote(null);
            setStep("form");
            navigate("catalog");
          }}
          apiStatus={apiStatus}
        />
      )}
    </div>
  );
}

Object.assign(window, { CheckoutPage });