// ChairShare — reschedule (5) + cancel (6)

const CustomerReschedule = ({ mobile = false, onConfirm = () => {} }) => {
  const [slot, setSlot] = useState("14:00");
  const [date, setDate] = useState(1);

  const dates = [
    { d: "Tue", n: 5 }, { d: "Wed", n: 6 }, { d: "Thu", n: 7 },
    { d: "Fri", n: 8 }, { d: "Sat", n: 9 }, { d: "Tue", n: 12 }, { d: "Wed", n: 13 },
  ];
  const slots = [
    { t: "10:00", a: true }, { t: "11:30", a: false },
    { t: "13:00", a: true }, { t: "14:00", a: true },
    { t: "15:30", a: true }, { t: "17:00", a: false },
  ];

  const Body = () => (
    <>
      <div style={{ padding: mobile ? "16px 18px" : "32px 56px 0" }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Your current booking</div>
        <div className="card" style={{ padding: mobile ? 16 : 22, opacity: 0.6, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
          <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
            <Avatar name="Amelia M" size={40} tone="rose" />
            <div>
              <div className="serif" style={{ fontSize: 16, textDecoration: "line-through", textDecorationColor: "var(--cs-ink-3)" }}>
                Balayage & toner · Thu May 7, 11:00
              </div>
              <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>3 hrs · with Amelia</div>
            </div>
          </div>
          <span className="pill">Rescheduling</span>
        </div>
      </div>
      <div style={{ padding: mobile ? "20px 18px 30px" : "32px 56px 60px" }}>
        <h2 className="serif" style={{ fontSize: mobile ? 28 : 40, fontWeight: 400, margin: "0 0 8px" }}>
          Pick a <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>new time.</span>
        </h2>
        <p style={{ fontSize: 13, color: "var(--cs-ink-3)", margin: "0 0 24px" }}>No reschedule fee · this far out from your booking.</p>

        <div style={{ display: "flex", gap: 8, overflow: "auto", marginBottom: 24, paddingBottom: 4 }}>
          {dates.map((d, i) => {
            const active = i === date;
            return (
              <button key={i} onClick={() => setDate(i)} style={{
                minWidth: 64, padding: "12px 0", borderRadius: 12,
                border: `1px solid ${active ? "var(--cs-ink)" : "var(--cs-line)"}`,
                background: active ? "var(--cs-ink)" : "var(--cs-bone)",
                color: active ? "var(--cs-cream)" : "var(--cs-ink)",
                display: "flex", flexDirection: "column", alignItems: "center", gap: 2, cursor: "pointer",
              }}>
                <span style={{ fontSize: 11, opacity: 0.7 }}>{d.d}</span>
                <span className="serif" style={{ fontSize: 22 }}>{d.n}</span>
              </button>
            );
          })}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 10, marginBottom: 28 }}>
          {slots.map(s => {
            const active = s.t === slot;
            return (
              <button key={s.t} disabled={!s.a} onClick={() => setSlot(s.t)} style={{
                padding: "14px 14px", borderRadius: 12,
                border: `1px solid ${active ? "var(--cs-gold-deep)" : "var(--cs-line-2)"}`,
                background: !s.a ? "transparent" : active ? "var(--cs-gold)" : "var(--cs-bone)",
                color: !s.a ? "var(--cs-ink-4)" : active ? "var(--cs-bone)" : "var(--cs-ink)",
                textDecoration: !s.a ? "line-through" : "none",
                cursor: s.a ? "pointer" : "not-allowed",
              }}>
                <span className="serif" style={{ fontSize: 18 }}>{s.t}</span>
              </button>
            );
          })}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12, padding: "20px 0", borderTop: "1px solid var(--cs-line)" }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>New time</div>
            <div className="serif" style={{ fontSize: 18 }}>Wed May 6 · {slot}</div>
          </div>
          <div style={{ display: "flex", gap: 10 }}>
            <a className="btn btn-link" style={{ color: "var(--cs-err)", borderColor: "transparent" }}>Cancel instead</a>
            <button onClick={onConfirm} className="btn btn-primary">Confirm new time</button>
          </div>
        </div>
      </div>
    </>
  );

  if (mobile) {
    return (
      <PhoneFrame>
        <MobileTopBar title="Reschedule" left={<button style={{background:"none",border:0,cursor:"pointer"}}><Icon name="arrow_left" size={20}/></button>} />
        <div style={{ height: "calc(100% - 88px)", overflow: "auto" }}><Body /></div>
      </PhoneFrame>
    );
  }
  return (
    <div className="cs" style={{ width: 1440, minHeight: 900, background: "var(--cs-cream)" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "22px 56px", borderBottom: "1px solid var(--cs-line)" }}>
        <Wordmark size={18} />
        <div className="eyebrow">Manage booking · Reschedule</div>
        <button className="btn btn-ghost btn-sm">Close</button>
      </header>
      <Body />
    </div>
  );
};

// ── CANCEL (out of policy → fee preview) ────────────
const CustomerCancel = ({ mobile = false, policy = "out" }) => {
  // policy: "in" (free) | "out" (fee) | "noshow" (full charge)
  const [reason, setReason] = useState("");

  const policies = {
    in:    { eyebrow: "Free cancel window", title: "You're cancelling early.", color: "var(--cs-ok)", refund: "Full refund · $288.00", note: "Funds return to your card in 5–10 business days. No fees." },
    out:   { eyebrow: "Cancellation fee applies", title: "You're cancelling within 24 hrs.", color: "var(--cs-warn)", refund: "Refund $144.00 · 50% fee $144.00", note: "Per Amelia's policy, half of the booking is non-refundable when cancelled this close to the time." },
    noshow:{ eyebrow: "No-show window", title: "This is within 2 hrs of your booking.", color: "var(--cs-err)", refund: "No refund · full charge $288.00", note: "At this point Amelia has set up for you and turned other clients away. The full amount is charged." },
  };
  const cur = policies[policy];

  const Body = () => (
    <div style={{ padding: mobile ? "16px 18px 30px" : "32px 56px 56px", maxWidth: mobile ? "none" : 720, margin: "0 auto" }}>
      <div className="eyebrow" style={{ marginBottom: 10 }}>Your booking</div>
      <div className="card" style={{ padding: 18, opacity: 0.6, marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
        <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
          <Avatar name="Amelia M" size={36} tone="rose" />
          <div>
            <div className="serif" style={{ fontSize: 16 }}>Balayage & toner</div>
            <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>Thu May 7, 11:00 · with Amelia</div>
          </div>
        </div>
      </div>

      <h2 className="serif" style={{ fontSize: mobile ? 30 : 42, fontWeight: 400, margin: "0 0 8px", lineHeight: 1.05 }}>
        {cur.title}
      </h2>
      <p style={{ fontSize: 14, color: "var(--cs-ink-3)", margin: "0 0 28px" }}>Read the details before you confirm — refunds aren't reversible.</p>

      {/* Big policy notice */}
      <div style={{
        padding: 24, borderRadius: "var(--cs-r-lg)",
        border: `1px solid ${cur.color}`,
        background: `color-mix(in oklab, ${cur.color} 10%, var(--cs-cream))`,
        marginBottom: 28,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
          <span className="dot" style={{ background: cur.color, width: 8, height: 8 }}></span>
          <div className="eyebrow" style={{ color: cur.color }}>{cur.eyebrow}</div>
        </div>
        <div className="serif" style={{ fontSize: mobile ? 24 : 32, marginBottom: 8, fontWeight: 400 }}>
          {cur.refund}
        </div>
        <div style={{ fontSize: 13, color: "var(--cs-ink-2)", lineHeight: 1.55 }}>
          {cur.note}
        </div>
      </div>

      <div className="field" style={{ marginBottom: 28 }}>
        <label>Care to share why? <span style={{ fontWeight: 400, color: "var(--cs-ink-3)" }}>· optional, helps Amelia improve</span></label>
        <select value={reason} onChange={e => setReason(e.target.value)}>
          <option value="">— pick a reason —</option>
          <option>Schedule conflict</option>
          <option>Not feeling well</option>
          <option>Found a different time</option>
          <option>Changed my mind</option>
          <option>Other</option>
        </select>
      </div>

      <div style={{ display: "flex", flexDirection: mobile ? "column-reverse" : "row", gap: 12, justifyContent: "flex-end" }}>
        <button className="btn btn-primary" style={{ flex: mobile ? 1 : "none" }}>Keep my booking</button>
        <button className="btn btn-danger" style={{ flex: mobile ? 1 : "none" }}>
          Confirm cancel{policy === "out" ? " · pay $144 fee" : policy === "noshow" ? " · forfeit $288" : ""}
        </button>
      </div>
    </div>
  );

  if (mobile) {
    return (
      <PhoneFrame>
        <MobileTopBar title="Cancel booking" left={<button style={{background:"none",border:0,cursor:"pointer"}}><Icon name="close" size={20}/></button>} />
        <div style={{ height: "calc(100% - 88px)", overflow: "auto" }}><Body /></div>
      </PhoneFrame>
    );
  }
  return (
    <div className="cs" style={{ width: 1440, minHeight: 900, background: "var(--cs-cream)" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "22px 56px", borderBottom: "1px solid var(--cs-line)" }}>
        <Wordmark size={18} />
        <div className="eyebrow">Manage booking · Cancel</div>
        <button className="btn btn-ghost btn-sm">Close</button>
      </header>
      <Body />
    </div>
  );
};

window.CustomerReschedule = CustomerReschedule;
window.CustomerCancel = CustomerCancel;