/* HudCo — Booking flow: schedule, confirm, success steps */
const {
  Button: BF_Button, Card: BF_Card, PriceTag: BF_PriceTag,
  Avatar: BF_Avatar, Rating: BF_Rating, Alert: BF_Alert,
  Badge: BF_Badge, Input: BF_Input, Checkbox: BF_Checkbox,
  IconButton: BF_IconButton, StatusPill: BF_StatusPill,
} = window.HudCoDesignSystem_e27b9b;
const Ico2 = (n, p) => <i data-lucide={n} {...(p || {})}></i>;

const BF_DAYS = [
  { dow: "Tue", d: "17" }, { dow: "Wed", d: "18" }, { dow: "Thu", d: "19" },
  { dow: "Fri", d: "20" }, { dow: "Sat", d: "21" }, { dow: "Sun", d: "22" },
];
const BF_SLOTS = [
  { t: "8:00 – 10:00am",    off: false },
  { t: "10:00am – 12:00pm", off: false },
  { t: "12:00 – 2:00pm",    off: true  },
  { t: "2:00 – 4:00pm",     off: false },
  { t: "4:00 – 6:00pm",     off: false },
];
window.BF_DAYS  = BF_DAYS;
window.BF_SLOTS = BF_SLOTS;

/* ---- ScheduleStep ---- */
function ScheduleStep({ cart, day, setDay, slot, setSlot, photo, setPhoto, onNext }) {
  const total = (cart || []).reduce((s, i) => s + i.service.price * i.quantity, 0);

  function handlePhotoChange(e) {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => setPhoto(ev.target.result);
    reader.readAsDataURL(file);
  }

  return (
    <>
      <div className="bk-body">
        {(cart || []).length > 1 && (
          <div className="bk-cart-pill">
            {Ico2("shopping-cart", { style: { width: 14, height: 14 } })}
            {cart.length} services · <span style={{ fontFamily: "var(--font-mono)" }}>${total}</span> total
          </div>
        )}
        <div className="ap-label">Choose a day</div>
        <div className="ap-days">
          {BF_DAYS.map((d, i) => (
            <button key={d.d} className={"ap-day" + (i === day ? " ap-day--on" : "")} onClick={() => setDay(i)}>
              <small>{d.dow}</small><b>{d.d}</b>
            </button>
          ))}
        </div>
        <div className="ap-label" style={{ marginTop: 8 }}>Arrival window</div>
        <div className="ap-slots">
          {BF_SLOTS.map((s, i) => (
            <button key={s.t} disabled={s.off}
              className={"ap-slot" + (i === slot ? " ap-slot--on" : "") + (s.off ? " ap-slot--off" : "")}
              onClick={() => !s.off && setSlot(i)}>{s.t}
            </button>
          ))}
        </div>
        <div className="ap-label" style={{ marginTop: 8 }}>Where</div>
        <BF_Input leadingIcon={Ico2("map-pin")} defaultValue="123 Maple St, Riverside" aria-label="Address" />
        <BF_Checkbox label="Text me when my pro is on the way" defaultChecked />

        <div className="ap-label" style={{ marginTop: 4 }}>Add a photo <span style={{ fontWeight: 400, color: "var(--text-muted)" }}>(optional)</span></div>
        <label className="bk-upload">
          {photo ? (
            <div className="bk-upload__preview">
              <img src={photo} alt="Uploaded" style={{ width: "100%", borderRadius: "var(--radius-md)", maxHeight: 160, objectFit: "cover", display: "block" }} />
              <button className="bk-upload__remove" onClick={e => { e.preventDefault(); setPhoto(null); }}>
                {Ico2("x", { style: { width: 13, height: 13 } })} Remove
              </button>
            </div>
          ) : (
            <div className="bk-upload__placeholder">
              {Ico2("camera")}
              <span>Upload a photo to help us prepare<br /><small>Shows what needs doing — speeds up the visit</small></span>
            </div>
          )}
          <input type="file" accept="image/*" style={{ display: "none" }} onChange={handlePhotoChange} />
        </label>
      </div>
      <div className="bk-dock">
        <BF_Button variant="primary" size="lg" fullWidth iconRight={Ico2("arrow-right")}
          disabled={slot == null} onClick={onNext}>
          Review booking
        </BF_Button>
      </div>
    </>
  );
}
window.ScheduleStep = ScheduleStep;

/* ---- ConfirmStep ---- */
function ConfirmStep({ cart, day, slot, photo, onNext }) {
  const total   = (cart || []).reduce((s, i) => s + i.service.price * i.quantity, 0);
  const deposit = Math.round(total * 0.3);
  const due     = total - deposit;
  const dayObj  = BF_DAYS[day] || BF_DAYS[0];
  const slotObj = BF_SLOTS[slot != null ? slot : 0];

  return (
    <>
      <div className="bk-body">
        <BF_Card padding="md">
          {(cart || []).map((item, idx) => (
            <React.Fragment key={item.service.id}>
              {idx > 0 && <div style={{ height: 1, background: "var(--divider)", margin: "12px 0" }}></div>}
              <div className="ap-srow">
                <span className="ap-srow__ic">{Ico2(item.service.icon)}</span>
                <div className="ap-srow__info">
                  <b>{item.service.name}{item.quantity > 1 ? ` ×${item.quantity}` : ""}</b>
                  <span>{Ico2("clock", { style: { width: 13, height: 13 } })} {item.service.time}</span>
                </div>
                <BF_PriceTag amount={item.service.price * item.quantity} size="sm" />
              </div>
            </React.Fragment>
          ))}
          <div style={{ height: 1, background: "var(--divider)", margin: "14px 0" }}></div>
          <div className="ap-break">
            <div className="ap-break__r">
              {Ico2("calendar", { style: { width: 16, height: 16, flexShrink: 0 } })}
              <span style={{ flex: 1, marginLeft: 8 }}>{dayObj.dow}, Apr {dayObj.d}</span>
              <b>{slotObj.t}</b>
            </div>
            <div className="ap-break__r">
              {Ico2("map-pin", { style: { width: 16, height: 16, flexShrink: 0 } })}
              <span style={{ flex: 1, marginLeft: 8 }}>Address</span>
              <span>123 Maple St</span>
            </div>
            {photo && (
              <div className="ap-break__r">
                {Ico2("image", { style: { width: 16, height: 16, flexShrink: 0 } })}
                <span style={{ flex: 1, marginLeft: 8 }}>Your photo</span>
                <img src={photo} alt="" style={{ width: 40, height: 40, objectFit: "cover", borderRadius: "var(--radius-sm)" }} />
              </div>
            )}
          </div>
        </BF_Card>

        <BF_Card padding="md">
          <div className="ap-break">
            <div className="ap-break__r"><span>Total (parts incl.)</span><span style={{ fontFamily: "var(--font-mono)" }}>${total}.00</span></div>
            <div className="ap-break__r"><span>Deposit due now</span><span style={{ fontFamily: "var(--font-mono)" }}>${deposit}.00</span></div>
            <div className="ap-break__r ap-break__tot"><b>Due after job</b><b style={{ fontFamily: "var(--font-mono)" }}>${due}.00</b></div>
          </div>
        </BF_Card>

        <BF_Alert tone="info" icon={Ico2("lock")}>
          Price locked at <b>${total}</b>. We don't add fees — what you see is what you pay.
        </BF_Alert>

        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span className="ap-srow__ic" style={{ background: "var(--slate-50)", color: "var(--slate-600)", width: 40, height: 40, flexShrink: 0 }}>
            {Ico2("credit-card", { style: { width: 20, height: 20 } })}
          </span>
          <div style={{ flex: 1 }}><b style={{ fontSize: 14 }}>Visa ·· 4821</b><div style={{ fontSize: 12, color: "var(--text-muted)" }}>Default card</div></div>
          <BF_Badge color="slate" variant="soft" size="sm">Change</BF_Badge>
        </div>
      </div>
      <div className="bk-dock">
        <div className="bk-dock__price"><small>Deposit now</small><BF_PriceTag amount={deposit} size="sm" /></div>
        <BF_Button variant="primary" size="lg" iconLeft={Ico2("lock")} onClick={onNext}>Confirm &amp; pay</BF_Button>
      </div>
    </>
  );
}
window.ConfirmStep = ConfirmStep;

/* ---- SuccessStep ---- */
function SuccessStep({ cart, day, slot, onClose }) {
  const dayObj  = BF_DAYS[day] || BF_DAYS[0];
  const slotObj = BF_SLOTS[slot != null ? slot : 0];
  const total   = (cart || []).reduce((s, i) => s + i.service.price * i.quantity, 0);
  return (
    <div className="bk-body">
      <div className="ap-success">
        <div className="ap-success__ic">{Ico2("check-circle")}</div>
        <h2 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 800, margin: "4px 0 6px", letterSpacing: "-.02em" }}>You're booked!</h2>
        <p style={{ color: "var(--ink-600)", fontSize: 15, margin: 0, textAlign: "center" }}>
          {(cart || []).length > 1 ? `${cart.length} services, one visit.` : ((cart[0]?.service.name || "") + ".")}<br />
          Marcus arrives {dayObj.dow}, Apr {dayObj.d} between {slotObj.t}.
        </p>
      </div>
      <BF_Card padding="md">
        <div className="ap-procard">
          <BF_Avatar name="Marcus Hill" status="online" size="lg" ring />
          <div className="ap-procard__info">
            <b>Marcus Hill</b>
            <span style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 13, color: "var(--text-muted)" }}>
              {Ico2("star", { style: { width: 13, height: 13, fill: "currentColor", color: "var(--amber-500)" } })} 4.9 · Your pro
            </span>
          </div>
          <div className="ap-procard__actions">
            <BF_IconButton icon={Ico2("message-circle")} variant="outline" aria-label="Message" />
            <BF_IconButton icon={Ico2("phone")} variant="primary" aria-label="Call" />
          </div>
        </div>
      </BF_Card>
      <div className="ap-map">
        <div className="ap-map__route"></div>
        <div className="ap-map__pin ap-map__pin--pro">{Ico2("truck")}</div>
        <div className="ap-map__pin ap-map__pin--home">{Ico2("home")}</div>
        <div style={{ position: "absolute", bottom: 12, left: "50%", transform: "translateX(-50%)" }}>
          <BF_StatusPill status="enroute" />
        </div>
      </div>
      <BF_Alert tone="success" icon={Ico2("shield-check")}>
        Price locked at <b>${total}</b>. Pay the rest only when the job's done right.
      </BF_Alert>
      <BF_Button variant="outline" size="md" fullWidth onClick={onClose}>Done</BF_Button>
    </div>
  );
}
window.SuccessStep = SuccessStep;