// Winner / congratulations page + next steps flow

function WinnerPage({ onNav, win }) {
  const [step, setStep] = React.useState(0); // 0 = congrats, 1 = logistics, 2 = payment, 3 = done

  if (!win) {
    return (
      <div className="container" style={{ padding: 80, textAlign: "center" }}>
        <div style={{ color: "var(--ink-3)", marginBottom: 20 }}>No recent wins to display.</div>
        <button className="btn btn-primary" onClick={() => onNav("inventory")}>Browse inventory</button>
      </div>
    );
  }

  return (
    <div style={{ minHeight: "calc(100vh - 64px)", background: "var(--bg)" }}>
      {step === 0 && <WinnerCongrats win={win} onNext={() => setStep(1)} onNav={onNav} />}
      {step === 1 && <WinnerLogistics win={win} onNext={() => setStep(2)} onBack={() => setStep(0)} />}
      {step === 2 && <WinnerPayment win={win} onNext={() => setStep(3)} onBack={() => setStep(1)} />}
      {step === 3 && <WinnerDone win={win} onNav={onNav} />}
    </div>
  );
}

function StepBar({ step }) {
  const steps = ["Confirmation", "Logistics", "Payment", "Done"];
  return (
    <div className="container" style={{ paddingTop: 32 }}>
      <div className="row gap-8" style={{ marginBottom: 40 }}>
        {steps.map((s, i) => (
          <div key={s} style={{ flex: 1 }}>
            <div style={{
              height: 4, borderRadius: 2,
              background: i <= step ? "var(--ink)" : "var(--line)",
              marginBottom: 8,
            }} />
            <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: i <= step ? "var(--ink)" : "var(--ink-3)" }}>
              {String(i + 1).padStart(2, "0")} · {s}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function WinnerCongrats({ win, onNext, onNav }) {
  return (
    <>
      <StepBar step={0} />
      <div className="container" style={{ textAlign: "center", padding: "40px 32px 80px" }}>
        <div style={{
          width: 72, height: 72, borderRadius: "50%",
          background: "var(--emerald-soft)", border: "1px solid color-mix(in oklab, var(--emerald) 30%, transparent)",
          display: "grid", placeItems: "center", color: "var(--emerald)",
          margin: "0 auto 24px",
        }}>
          <IcCheck size={30} />
        </div>
        <div className="eyebrow" style={{ marginBottom: 12 }}>Auction closed · You won</div>
        <h1 className="display" style={{ fontSize: 54, margin: 0, marginBottom: 16, maxWidth: "18ch", marginLeft: "auto", marginRight: "auto" }}>
          Congratulations, {window.CLEARSPACE_BUYER.name.split(" ")[0]}.
        </h1>
        <p style={{ fontSize: 17, color: "var(--ink-2)", lineHeight: 1.55, maxWidth: "56ch", margin: "0 auto 40px" }}>
          You won <strong>{win.title}</strong> for <span className="mono"><strong>{fmt$(win.price)}</strong></span>. Inventory is now locked and related listings have been updated. Complete the next steps below within 48 hours to finalize the transaction.
        </p>

        {/* Receipt card */}
        <div style={{
          maxWidth: 640, margin: "0 auto 40px",
          background: "var(--bg-elev)", border: "1px solid var(--line)",
          borderRadius: 14, overflow: "hidden", textAlign: "left",
        }}>
          <div style={{ display: "flex", gap: 20, padding: 20, alignItems: "center" }}>
            <img src={win.photo} style={{ width: 120, height: 90, borderRadius: 8, objectFit: "cover" }} />
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 4 }}>{win.lotId || win.id}</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{win.title}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{win.quantity} units · {win.location}</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderTop: "1px solid var(--line)" }}>
            {[
              { k: "Final price", v: fmt$(win.price) },
              { k: "Method", v: win.method === "buynow" ? "Buy now" : "Top bid" },
              { k: "Closed at", v: new Date().toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) },
            ].map((r, i) => (
              <div key={r.k} style={{ padding: "14px 20px", borderRight: i < 2 ? "1px solid var(--line)" : "none" }}>
                <div className="stat-kicker">{r.k}</div>
                <div className="mono" style={{ fontSize: 15, fontWeight: 600, marginTop: 4 }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="row gap-12 center" style={{ justifyContent: "center" }}>
          <button className="btn btn-primary btn-lg" onClick={onNext}>
            Next steps <IcArrow size={16} />
          </button>
          <button className="btn btn-secondary btn-lg" onClick={() => onNav("dashboard")}>
            Return to dashboard
          </button>
        </div>

        <div style={{ marginTop: 40, fontSize: 13, color: "var(--ink-3)" }}>
          A confirmation email has been sent to <span className="mono">andressa@northfieldinteriors.com</span>. Questions? <span className="mono">clearspace.sols@gmail.com</span>
        </div>
      </div>
    </>
  );
}

function WinnerLogistics({ win, onNext, onBack }) {
  const [choice, setChoice] = React.useState("delivery");
  const [date, setDate] = React.useState("2026-04-24");
  const [contact, setContact] = React.useState("Andressa Lima · (415) 555-0140");
  const [address, setAddress] = React.useState("1240 Bryant St, San Francisco, CA 94103");

  return (
    <>
      <StepBar step={1} />
      <div className="container" style={{ maxWidth: 840, padding: "0 32px 80px" }}>
        <h1 className="display" style={{ fontSize: 38, margin: 0, marginBottom: 8 }}>Logistics</h1>
        <p style={{ color: "var(--ink-2)", margin: 0, marginBottom: 32 }}>How would you like to receive {win.title}?</p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 32 }}>
          {[
            { id: "pickup", ic: <IcBox size={22} />, t: "Buyer pickup", d: `Pick up from ${win.location}. Mon–Fri, 8am–4pm.`, price: "Included" },
            { id: "delivery", ic: <IcTruck size={22} />, t: "Clearspace delivery", d: "White-glove delivery. Quoted within Bay Area.", price: "~$1,850 est." },
          ].map((o) => (
            <button key={o.id} onClick={() => setChoice(o.id)}
              style={{
                textAlign: "left", padding: 20,
                background: "var(--bg-elev)",
                border: `2px solid ${choice === o.id ? "var(--ink)" : "var(--line)"}`,
                borderRadius: 12, cursor: "pointer",
                font: "inherit", color: "inherit",
              }}>
              <div className="row between center" style={{ marginBottom: 12 }}>
                <div style={{ color: "var(--ink)" }}>{o.ic}</div>
                <div style={{
                  width: 18, height: 18, borderRadius: "50%",
                  border: `2px solid ${choice === o.id ? "var(--ink)" : "var(--line-strong)"}`,
                  display: "grid", placeItems: "center",
                }}>
                  {choice === o.id && <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ink)" }} />}
                </div>
              </div>
              <div style={{ fontSize: 16, fontWeight: 600, marginBottom: 4 }}>{o.t}</div>
              <div style={{ fontSize: 13, color: "var(--ink-3)", marginBottom: 10 }}>{o.d}</div>
              <div className="mono" style={{ fontSize: 13, color: "var(--ink-2)" }}>{o.price}</div>
            </button>
          ))}
        </div>

        <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: 12, padding: 24 }}>
          <div className="col gap-16">
            <div className="col gap-6">
              <label className="tweak-label">Contact on site</label>
              <input className="input" value={contact} onChange={(e) => setContact(e.target.value)} />
            </div>
            <div className="col gap-6">
              <label className="tweak-label">{choice === "pickup" ? "Preferred pickup date" : "Preferred delivery date"}</label>
              <input className="input" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
            </div>
            {choice === "delivery" && (
              <div className="col gap-6">
                <label className="tweak-label">Delivery address</label>
                <input className="input" value={address} onChange={(e) => setAddress(e.target.value)} />
              </div>
            )}
            <div className="col gap-6">
              <label className="tweak-label">Notes (loading dock, gate codes, etc.)</label>
              <textarea className="input" style={{ height: 80, paddingTop: 10, resize: "vertical" }}
                placeholder="Optional. Any access details the Clearspace team should know." />
            </div>
          </div>
        </div>

        <div className="row between" style={{ marginTop: 32 }}>
          <button className="btn btn-secondary" onClick={onBack}>Back</button>
          <button className="btn btn-primary btn-lg" onClick={onNext}>Continue to payment <IcArrow size={16} /></button>
        </div>
      </div>
    </>
  );
}

function WinnerPayment({ win, onNext, onBack }) {
  const [method, setMethod] = React.useState("ach");
  return (
    <>
      <StepBar step={2} />
      <div className="container" style={{ maxWidth: 840, padding: "0 32px 80px" }}>
        <h1 className="display" style={{ fontSize: 38, margin: 0, marginBottom: 8 }}>Payment</h1>
        <p style={{ color: "var(--ink-2)", margin: 0, marginBottom: 32 }}>Clearspace handles payment offline. Select a method and we'll send the instructions.</p>

        <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden", marginBottom: 32 }}>
          {[
            { id: "ach", t: "ACH transfer", d: "Net 7 terms. Instructions sent within 1 hour.", rec: true },
            { id: "wire", t: "Wire transfer", d: "Same-day settlement. $25 wire fee applies." },
            { id: "check", t: "Company check", d: "Mail to Clearspace HQ. Allow 5 business days." },
            { id: "invoice", t: "Invoice · net 15", d: "Requires approved credit terms. On file for Northfield Interiors." },
          ].map((o, i, arr) => (
            <button key={o.id} onClick={() => setMethod(o.id)}
              style={{
                display: "grid", gridTemplateColumns: "24px 1fr auto",
                alignItems: "center", gap: 16,
                width: "100%", padding: "18px 22px",
                background: "transparent", border: "none",
                borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                textAlign: "left", cursor: "pointer",
                font: "inherit", color: "inherit",
              }}>
              <div style={{
                width: 18, height: 18, borderRadius: "50%",
                border: `2px solid ${method === o.id ? "var(--ink)" : "var(--line-strong)"}`,
                display: "grid", placeItems: "center",
              }}>
                {method === o.id && <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ink)" }} />}
              </div>
              <div>
                <div className="row center gap-8" style={{ marginBottom: 2 }}>
                  <span style={{ fontSize: 15, fontWeight: 600 }}>{o.t}</span>
                  {o.rec && <span className="pill pill-emerald" style={{ padding: "2px 8px", fontSize: 10 }}>Recommended</span>}
                </div>
                <div style={{ fontSize: 13, color: "var(--ink-3)" }}>{o.d}</div>
              </div>
              <IcChev size={16} style={{ color: "var(--ink-3)" }} />
            </button>
          ))}
        </div>

        {/* Summary */}
        <div style={{ background: "var(--bg-sunken)", border: "1px solid var(--line)", borderRadius: 12, padding: "18px 22px", marginBottom: 32 }}>
          <div style={{ fontWeight: 600, marginBottom: 12 }}>Order summary</div>
          {[
            ["Winning price", fmt$(win.price)],
            ["Delivery (est.)", "$1,850"],
            ["Platform fee", "Included"],
          ].map(([k, v]) => (
            <div key={k} className="row between" style={{ padding: "6px 0", fontSize: 13 }}>
              <span style={{ color: "var(--ink-3)" }}>{k}</span>
              <span className="mono">{v}</span>
            </div>
          ))}
          <div className="row between" style={{ paddingTop: 10, marginTop: 6, borderTop: "1px solid var(--line)" }}>
            <span style={{ fontWeight: 600 }}>Total due</span>
            <span className="mono" style={{ fontWeight: 600, fontSize: 18 }}>{fmt$(win.price + 1850)}</span>
          </div>
        </div>

        <div className="row between">
          <button className="btn btn-secondary" onClick={onBack}>Back</button>
          <button className="btn btn-primary btn-lg" onClick={onNext}>Confirm order <IcCheck size={16} /></button>
        </div>
      </div>
    </>
  );
}

function WinnerDone({ win, onNav }) {
  return (
    <>
      <StepBar step={3} />
      <div className="container" style={{ maxWidth: 640, textAlign: "center", padding: "0 32px 80px" }}>
        <div style={{
          width: 56, height: 56, borderRadius: "50%",
          background: "var(--ink)", color: "var(--bg-elev)",
          display: "grid", placeItems: "center", margin: "0 auto 24px",
        }}>
          <IcCheck size={24} />
        </div>
        <h1 className="display" style={{ fontSize: 38, margin: 0, marginBottom: 12 }}>Order confirmed</h1>
        <p style={{ color: "var(--ink-2)", fontSize: 16, lineHeight: 1.55, margin: 0, marginBottom: 32 }}>
          Your Clearspace account manager, <strong>R. Tanaka</strong>, will reach out within one business hour with payment instructions and delivery scheduling.
        </p>
        <div style={{ background: "var(--bg-elev)", border: "1px solid var(--line)", borderRadius: 12, padding: 20, marginBottom: 32, textAlign: "left" }}>
          <div className="row between" style={{ marginBottom: 8 }}>
            <span className="stat-kicker">Order reference</span>
            <span className="mono" style={{ fontSize: 13 }}>ORD-4829-{(win.lotId || win.id).split("-")[1]}</span>
          </div>
          <div className="row between">
            <span className="stat-kicker">Status</span>
            <span className="pill pill-amber" style={{ padding: "2px 8px", fontSize: 11 }}>Awaiting payment</span>
          </div>
        </div>
        <div className="row gap-12" style={{ justifyContent: "center" }}>
          <button className="btn btn-primary btn-lg" onClick={() => onNav("dashboard")}>
            Go to dashboard
          </button>
          <button className="btn btn-secondary btn-lg" onClick={() => onNav("inventory")}>
            Keep browsing
          </button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { WinnerPage });