// 彤冠茶莊 website — Checkout
const { Button: CkButton, Input: CkInput, Select: CkSelect, Price: CkPrice } = window.TongguanTeaDesignSystem_a1a7a1;

function CheckoutPage({ t, lang, products, items, setQty, removeItem, go, clearCart }) {
  const [placed, setPlaced] = React.useState(false);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
  const lines = items.map((it) => ({ ...it, p: products.find((p) => p.id === it.id) })).filter((x) => x.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);
  const freeShip = subtotal >= 1500;
  const ship = freeShip || subtotal === 0 ? 0 : 120;
  const total = subtotal + ship;

  if (placed) {
    return (
      <main lang={lang} className="tg-container" style={{ minHeight: "60vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "var(--space-10) 0" }}>
        <span style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--tea)", color: "var(--paper-0)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 26 }}>
          <i data-lucide="check" style={{ width: 32, height: 32 }}></i>
        </span>
        <h1 className="tg-display" style={{ fontSize: "clamp(1.9rem, 4vw, 2.8rem)", margin: "0 0 14px" }}>{t.checkout.placed}</h1>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, color: "var(--text-secondary)", maxWidth: "40ch", margin: "0 0 30px" }}>{t.checkout.placedBody}</p>
        <CkButton variant="secondary" size="lg" onClick={() => go("home")}>{t.product.back === "返回選購" ? "回首頁" : "Home"}</CkButton>
      </main>
    );
  }

  if (lines.length === 0) {
    return (
      <main lang={lang} className="tg-container" style={{ minHeight: "55vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 18, textAlign: "center" }}>
        <i data-lucide="package" style={{ width: 36, height: 36, color: "var(--ink-4)" }}></i>
        <p style={{ fontFamily: "var(--font-sans)", color: "var(--text-secondary)" }}>{t.cart.empty}</p>
        <CkButton variant="primary" onClick={() => go("shop")}>{t.cart.emptyCta}</CkButton>
      </main>
    );
  }

  const fieldRow = { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 };

  return (
    <main lang={lang}>
      <div className="tg-container tg-container--wide" style={{ paddingTop: "var(--space-7)", paddingBottom: "var(--space-10)" }}>
        <h1 className="tg-display" style={{ fontSize: "clamp(2rem, 4vw, 3rem)", marginBottom: 40 }}>{t.checkout.title}</h1>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: "clamp(28px, 5vw, 70px)", alignItems: "start" }} className="tg-checkout-grid">
          {/* form */}
          <form onSubmit={(e) => { e.preventDefault(); setPlaced(true); clearCart(); window.scrollTo(0, 0); }}>
            <section style={{ marginBottom: 34 }}>
              <div className="tg-eyebrow" style={{ marginBottom: 18 }}>{t.checkout.contact}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <CkInput label={t.checkout.email} type="email" required placeholder="you@example.com" />
                <div style={fieldRow}>
                  <CkInput label={t.checkout.name} required />
                  <CkInput label={t.checkout.phone} type="tel" />
                </div>
              </div>
            </section>
            <section style={{ marginBottom: 34 }}>
              <div className="tg-eyebrow" style={{ marginBottom: 18 }}>{t.checkout.shippingInfo}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <CkSelect label={t.checkout.region} options={t.checkout.regions} />
                <CkInput label={t.checkout.address} required />
                <div style={fieldRow}>
                  <CkInput label={t.checkout.city} />
                  <CkInput label={t.checkout.postal} />
                </div>
              </div>
            </section>
            <section style={{ marginBottom: 30 }}>
              <div className="tg-eyebrow" style={{ marginBottom: 18 }}>{t.checkout.payment}</div>
              <div style={{ border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", padding: "16px 18px", background: "var(--paper-0)", display: "flex", alignItems: "center", gap: 12 }}>
                <i data-lucide="credit-card" style={{ width: 20, height: 20, color: "var(--ink-3)" }}></i>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)" }}>{t.checkout.payNote}</span>
              </div>
            </section>
            <CkButton variant="seal" size="lg" fullWidth type="submit" iconRight="arrow-right">{t.checkout.placeOrder} · NT$ {total.toLocaleString("en-US")}</CkButton>
          </form>

          {/* summary */}
          <aside style={{ background: "var(--surface-sunken)", borderRadius: "var(--radius-lg)", padding: 26, position: "sticky", top: 110 }}>
            <div className="tg-eyebrow" style={{ marginBottom: 18 }}>{t.checkout.summary}</div>
            <div style={{ display: "flex", flexDirection: "column" }}>
              {lines.map((l) => (
                <div key={l.id} style={{ display: "flex", gap: 12, padding: "12px 0", borderBottom: "1px solid var(--border-soft)" }}>
                  <div style={{ width: 54, height: 66, borderRadius: "var(--radius-sm)", overflow: "hidden", flex: "none", background: "var(--paper-2)", position: "relative" }}>
                    <img src={l.p.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                    <span style={{ position: "absolute", top: -6, right: -6, width: 20, height: 20, borderRadius: "50%", background: "var(--ink)", color: "var(--paper-0)", fontFamily: "var(--font-mono)", fontSize: 11, display: "flex", alignItems: "center", justifyContent: "center" }}>{l.qty}</span>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, fontWeight: 500, lineHeight: 1.3 }}>{l.p.name[lang]}</div>
                    <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--text-muted)", marginTop: 3 }}>{l.p.variant[lang]}</div>
                  </div>
                  <CkPrice amount={l.p.price * l.qty} size="sm" />
                </div>
              ))}
            </div>
            <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 9 }}>
              <Row label={t.cart.subtotal}><CkPrice amount={subtotal} size="sm" /></Row>
              <Row label={t.cart.shipping}><span style={{ fontFamily: "var(--font-mono)", fontSize: 14, color: freeShip ? "var(--tea)" : "var(--ink)" }}>{ship === 0 ? t.cart.shippingFree : "NT$ 120"}</span></Row>
            </div>
            <div style={{ marginTop: 16, paddingTop: 16, borderTop: "1px solid var(--border-strong)", display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600 }}>Total</span>
              <CkPrice amount={total} size="lg" />
            </div>
          </aside>
        </div>
      </div>
    </main>
  );
}

function Row({ label, children }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)" }}>{label}</span>
      {children}
    </div>
  );
}
window.CheckoutPage = CheckoutPage;