// ChairShare — service + time picker (2)

const CustomerTimePicker = ({ onConfirm = () => {}, mobile = false }) => {
  const [serviceId, setServiceId] = useState("balayage");
  const [date, setDate] = useState(2);
  const [slot, setSlot] = useState("11:00");

  const service = SERVICES.find(s => s.id === serviceId);
  const dates = [
    { d: "Tue", n: 5, m: "May", soonest: false },
    { d: "Wed", n: 6, m: "May", soonest: false },
    { d: "Thu", n: 7, m: "May", soonest: true },
    { d: "Fri", n: 8, m: "May", soonest: false },
    { d: "Sat", n: 9, m: "May", soonest: false },
    { d: "Tue", n: 12, m: "May", soonest: false },
    { d: "Wed", n: 13, m: "May", soonest: false },
  ];
  const slots = [
    { t: "10:00", available: true, badge: null },
    { t: "11:00", available: true, badge: "early-bird –10%" },
    { t: "12:30", available: false },
    { t: "14:00", available: true },
    { t: "15:30", available: true, badge: "last 1" },
    { t: "17:00", available: true },
  ];

  const Body = ({ scale = 1 }) => (
    <div className="cs" style={{ background: "var(--cs-cream)", padding: 0 }}>
      {/* Booking strip */}
      <div style={{ padding: mobile ? "0 18px 16px" : "28px 56px 22px", display: "flex", alignItems: "center", gap: 14, borderBottom: "1px solid var(--cs-line)" }}>
        <Avatar name="Amelia M" size={mobile ? 36 : 44} tone="rose" />
        <div style={{ flex: 1 }}>
          <div className="serif" style={{ fontSize: mobile ? 17 : 19 }}>Book with Amelia</div>
          <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>The Atelier · Yarraville</div>
        </div>
        {!mobile && <button className="btn btn-ghost btn-sm">← back</button>}
      </div>

      <div style={{ padding: mobile ? "20px 18px" : "32px 56px 56px", display: mobile ? "block" : "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1.4fr", gap: 48 }}>
        {/* SERVICES */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Step 01 · Choose a service</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {SERVICES.map(s => {
              const active = s.id === serviceId;
              return (
                <button key={s.id} onClick={() => setServiceId(s.id)} style={{
                  textAlign: "left", padding: 16, borderRadius: "var(--cs-r-lg)",
                  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)",
                  cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 12,
                  transition: "all .15s",
                }}>
                  <div style={{ flex: 1 }}>
                    <div className="serif" style={{ fontSize: 17, marginBottom: 4 }}>{s.name}</div>
                    <div style={{ fontSize: 12, opacity: 0.7 }}>{s.duration} min</div>
                  </div>
                  <div className="serif" style={{ fontSize: 18 }}>${s.price}</div>
                </button>
              );
            })}
          </div>
        </div>

        {/* DATE + TIME */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Step 02 · Pick a time</div>
          <div className="serif" style={{ fontSize: mobile ? 22 : 28, marginBottom: 18, fontWeight: 400 }}>
            <span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>{service.name}</span> · {service.duration} min
          </div>

          {/* Date strip */}
          <div style={{ marginBottom: 24 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
              <span className="serif" style={{ fontSize: 16 }}>May 2026</span>
              <div style={{ display: "flex", gap: 6 }}>
                <button className="btn btn-ghost btn-sm" style={{ padding: 8 }}><Icon name="arrow_left" size={14} /></button>
                <button className="btn btn-ghost btn-sm" style={{ padding: 8 }}><Icon name="arrow_right" size={14} /></button>
              </div>
            </div>
            <div style={{ display: "flex", gap: 8, overflow: "auto", 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", position: "relative",
                  }}>
                    <span style={{ fontSize: 11, opacity: 0.7 }}>{d.d}</span>
                    <span className="serif" style={{ fontSize: 22 }}>{d.n}</span>
                    {d.soonest && !active && <span style={{ position: "absolute", top: -6, right: -6, background: "var(--cs-gold)", color: "var(--cs-bone)", fontSize: 9, padding: "2px 6px", borderRadius: 999, fontWeight: 600 }}>soonest</span>}
                  </button>
                );
              })}
            </div>
          </div>

          {/* Slots */}
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(3, 1fr)", gap: 10 }}>
            {slots.map(s => {
              const active = s.t === slot;
              const disabled = !s.available;
              return (
                <button key={s.t} disabled={disabled} onClick={() => setSlot(s.t)} style={{
                  padding: "16px 14px", borderRadius: 12, position: "relative",
                  border: `1px solid ${active ? "var(--cs-gold-deep)" : "var(--cs-line-2)"}`,
                  background: disabled ? "transparent" : active ? "var(--cs-gold)" : "var(--cs-bone)",
                  color: disabled ? "var(--cs-ink-4)" : active ? "var(--cs-bone)" : "var(--cs-ink)",
                  cursor: disabled ? "not-allowed" : "pointer",
                  textDecoration: disabled ? "line-through" : "none",
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 4,
                }}>
                  <span className="serif" style={{ fontSize: 18 }}>{s.t}</span>
                  {s.badge && !disabled && (
                    <span style={{ fontSize: 10, opacity: 0.85, fontFamily: "var(--cs-mono)" }}>{s.badge}</span>
                  )}
                </button>
              );
            })}
          </div>

          {/* Summary */}
          <div className="card" style={{ marginTop: 28, padding: 20, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14 }}>
            <div>
              <div style={{ fontSize: 12, color: "var(--cs-ink-3)", marginBottom: 4 }}>Booking summary</div>
              <div className="serif" style={{ fontSize: 17 }}>
                {service.name} · Thu May 7, {slot} <span style={{ color: "var(--cs-ink-3)" }}>· ${service.price - 32} <span style={{ textDecoration: "line-through", fontSize: 13 }}>${service.price}</span></span>
              </div>
            </div>
            <button onClick={onConfirm} className="btn btn-primary">Continue to checkout <Icon name="arrow_right" size={14} /></button>
          </div>
        </div>
      </div>
    </div>
  );

  if (mobile) {
    return (
      <PhoneFrame>
        <MobileTopBar title="Book" left={<button style={{background:"none",border:0,padding:0,cursor:"pointer"}}><Icon name="arrow_left" size={20}/></button>} right={<button style={{background:"none",border:0,padding:0,cursor:"pointer"}}><Icon name="close" size={20}/></button>} />
        <div style={{ height: "calc(100% - 88px)", overflow: "auto", paddingBottom: 80 }}>
          <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="mono" style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>amelia.cuts.voxink.com.au / book</div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: "var(--cs-ink-3)" }}>
          <Icon name="lock" size={12} /> secure checkout
        </div>
      </header>
      <Body />
    </div>
  );
};

window.CustomerTimePicker = CustomerTimePicker;