/* global React, useRoute, useCart, useToast, Placeholder, I */
const { useState } = React;

function Checkout() {
  const { goto } = useRoute();
  const { items, subtotal } = useCart();
  const [step, setStep] = useState("info"); // info | pay | done

  if (items.length === 0 && step !== "done") {
    return (
      <main className="fade" style={{ padding: "120px 0", textAlign: "center" }}>
        <div className="container" style={{ maxWidth: 540 }}>
          <span className="eyebrow eyebrow-gold">Checkout · empty</span>
          <h1 className="serif" style={{ fontSize: 48, margin: "16px 0 12px" }}>No bag, no checkout.</h1>
          <p style={{ color: "var(--text-2)", marginBottom: 32 }}>Pick up something from the studio first.</p>
          <button className="btn btn-gold btn-lg" onClick={() => goto("store")}>Open the store</button>
        </div>
      </main>
    );
  }

  const shipping = subtotal > 200 ? 0 : 14;
  const tax = +(subtotal * 0.0875).toFixed(2);
  const total = subtotal + shipping + tax;

  return (
    <main className="fade">
      <section style={{ padding: "48px 0 24px", borderBottom: "1px solid var(--border-1)" }}>
        <div className="container">
          <span className="eyebrow eyebrow-gold">§ Checkout</span>
          <h1 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", margin: "12px 0 0", lineHeight: 1 }}>Almost yours.</h1>
        </div>
      </section>

      <section style={{ padding: "48px 0 96px" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56 }}>
          <div>
            <div className="steps" style={{ marginBottom: 36 }}>
              <div className="step" data-state={step === "info" ? "active" : "done"}><span className="dot">{step === "info" ? "1" : <I name="check" size={12} />}</span> Shipping</div>
              <div className="step" data-state={step === "pay" ? "active" : step === "done" ? "done" : ""}><span className="dot">{step === "done" ? <I name="check" size={12} /> : "2"}</span> Payment</div>
              <div className="step" data-state={step === "done" ? "active" : ""}><span className="dot">3</span> Confirm</div>
            </div>

            {step === "info" && (
              <div style={{ display: "grid", gap: 20 }}>
                <h2 className="serif" style={{ fontSize: 26, margin: 0 }}>Where should we send this?</h2>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                  <div className="field-row"><label className="label">First name</label><input className="input" defaultValue="Avery" /></div>
                  <div className="field-row"><label className="label">Last name</label><input className="input" defaultValue="Park" /></div>
                </div>
                <div className="field-row"><label className="label">Email</label><input className="input" defaultValue="avery@studio.example" /></div>
                <div className="field-row"><label className="label">Address</label><input className="input" defaultValue="142 Wythe Avenue" /></div>
                <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 14 }}>
                  <div className="field-row"><label className="label">City</label><input className="input" defaultValue="" /></div>
                  <div className="field-row"><label className="label">State</label><input className="input" defaultValue="NY" /></div>
                  <div className="field-row"><label className="label">ZIP</label><input className="input" defaultValue="11211" /></div>
                </div>
                <div className="field-row" style={{ marginTop: 4 }}>
                  <label className="label">Shipping method</label>
                  <div style={{ display: "grid", gap: 8 }}>
                    {[
                      ["std", "Standard", "5–7 days", shipping === 0 ? "Free" : "$14"],
                      ["exp", "Express", "2 days", "$28"],
                      ["pickup", "Studio pickup · By appointment", "By appointment", "Free"],
                    ].map(([k, name, eta, p]) => (
                      <label key={k} style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 16px", border: "1px solid var(--border)", borderRadius: 8, cursor: "pointer" }}>
                        <input type="radio" name="ship" defaultChecked={k === "std"} style={{ accentColor: "var(--gold)" }} />
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: 14 }}>{name}</div>
                          <div className="mono" style={{ fontSize: 11, color: "var(--text-3)", marginTop: 2 }}>{eta}</div>
                        </div>
                        <span className="mono" style={{ fontSize: 13 }}>{p}</span>
                      </label>
                    ))}
                  </div>
                </div>
                <button className="btn btn-gold btn-lg" style={{ width: "100%", marginTop: 12 }} onClick={() => setStep("pay")}>
                  Continue to payment <I name="arrow" size={16} />
                </button>
              </div>
            )}

            {step === "pay" && (
              <div style={{ display: "grid", gap: 20 }}>
                <h2 className="serif" style={{ fontSize: 26, margin: 0 }}>How are we doing this?</h2>
                <div className="field-row"><label className="label">Card number</label><input className="input" placeholder="4242 4242 4242 4242" /></div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
                  <div className="field-row"><label className="label">Expires</label><input className="input" placeholder="MM / YY" /></div>
                  <div className="field-row"><label className="label">CVC</label><input className="input" placeholder="123" /></div>
                  <div className="field-row"><label className="label">ZIP</label><input className="input" placeholder="11211" /></div>
                </div>
                <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
                  <button className="btn btn-ghost" style={{ flex: 1 }} onClick={() => setStep("info")}><I name="arrowL" size={14} /> Back</button>
                  <button className="btn btn-gold" style={{ flex: 2 }} onClick={() => setStep("done")}>Place order · ${total.toFixed(2)}</button>
                </div>
                <p className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--text-3)", textTransform: "uppercase", textAlign: "center", marginTop: 4 }}>
                  Secure checkout · Stripe · 256-bit TLS
                </p>
              </div>
            )}

            {step === "done" && (
              <div style={{ padding: "32px 0" }}>
                <div style={{ width: 64, height: 64, border: "1px solid var(--gold)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 28 }}>
                  <I name="check" size={28} stroke="var(--gold)" />
                </div>
                <span className="eyebrow eyebrow-gold">Order EV-{Math.floor(Math.random() * 9000 + 1000)}</span>
                <h2 className="serif" style={{ fontSize: 44, margin: "12px 0 16px", lineHeight: 1.05 }}>Thank you. The studio has it from here.</h2>
                <p className="pretty" style={{ color: "var(--text-1)", maxWidth: 480, fontSize: 15 }}>
                  We'll email a confirmation in a moment, and a tracking number once your order is on the road.
                  Studio pieces are inspected by hand before they leave the room.
                </p>
                <div style={{ display: "flex", gap: 10, marginTop: 32 }}>
                  <button className="btn btn-line" onClick={() => goto("home")}>Back to studio</button>
                  <button className="btn btn-ghost" onClick={() => goto("store")}>Keep browsing</button>
                </div>
              </div>
            )}
          </div>

          {/* SUMMARY */}
          <aside style={{ position: "sticky", top: "calc(var(--hdr) + 24px)", height: "fit-content", border: "1px solid var(--border)", borderRadius: 12, padding: 24, background: "linear-gradient(180deg, #0d0d0d, #0a0a0a)" }}>
            <span className="eyebrow">Order summary</span>
            <div style={{ marginTop: 18, marginBottom: 18, borderBottom: "1px solid var(--border-1)" }}>
              {(step === "done" ? [{ id: "demo", name: "Studio Tee · Ivory", variant: "Ivory", qty: 1, price: 78, kind: "apparel" }] : items).map((it) => (
                <div key={`${it.id}-${it.variant}`} style={{ display: "flex", gap: 12, padding: "12px 0", borderBottom: "1px solid var(--border-1)" }}>
                  <div style={{ width: 60, height: 72 }}>
                    <Placeholder label="" variant={it.kind === "music" ? "deep" : "warm"} />
                  </div>
                  <div style={{ flex: 1 }}>
                    <div className="serif" style={{ fontSize: 15 }}>{it.name}</div>
                    <div className="mono" style={{ fontSize: 10, color: "var(--text-3)", textTransform: "uppercase", letterSpacing: "0.1em", marginTop: 2 }}>
                      {it.variant} · ×{it.qty}
                    </div>
                  </div>
                  <span className="mono" style={{ fontSize: 13 }}>${(it.price * it.qty).toFixed(0)}</span>
                </div>
              ))}
            </div>
            {[
              ["Subtotal", `$${subtotal.toFixed(2)}`],
              ["Shipping", shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`],
              ["Tax", `$${tax.toFixed(2)}`],
            ].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: 13, color: "var(--text-1)" }}>
                <span>{k}</span><span className="mono">{v}</span>
              </div>
            ))}
            <hr className="rule" style={{ margin: "16px 0" }} />
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span className="serif" style={{ fontSize: 20 }}>Total</span>
              <span className="serif" style={{ fontSize: 26, color: "var(--gold)" }}>${total.toFixed(2)}</span>
            </div>
            <p className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--text-3)", textTransform: "uppercase", marginTop: 18 }}>
              Free shipping on orders over $200 · 30-day returns
            </p>
          </aside>
        </div>
      </section>
    </main>
  );
}

window.Checkout = Checkout;