// ---- BRAISE — Mes réservations ----------------------------------------

const STATUS = {
  confirmee: { label: "Confirmée", bg: "var(--olive-soft)", fg: "var(--olive)", dot: "var(--olive)" },
  honoree: { label: "Honorée", bg: "var(--bone-deep)", fg: "var(--ink-faint)", dot: "var(--ink-faint)" },
  annulee: { label: "Annulée", bg: "var(--ember-soft)", fg: "var(--ember-deep)", dot: "var(--ember-deep)" },
};

function ResaCard({ r, onCancel, past }) {
  const svc = SERVICES.find((s) => s.id === r.service);
  const zone = ZONES.find((z) => z.id === r.zone);
  const st = STATUS[r.status] || STATUS.confirmee;
  const d = fromISO(r.dateISO);
  return (
    <div style={{
      background: "var(--paper)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)",
      overflow: "hidden", display: "flex", opacity: past ? 0.82 : 1,
    }}>
      {/* Date block */}
      <div style={{
        flexShrink: 0, width: 104, background: past ? "var(--bone-deep)" : "var(--espresso)",
        color: past ? "var(--ink-soft)" : "var(--bone)", display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center", padding: "20px 8px", textAlign: "center",
      }}>
        <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: past ? "var(--ink-faint)" : "var(--gold)" }}>{JOURS[d.getDay()]}</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 38, lineHeight: 1, margin: "4px 0" }}>{d.getDate()}</div>
        <div style={{ fontSize: 12, textTransform: "lowercase" }}>{MOIS[d.getMonth()].slice(0, 4)}.</div>
      </div>
      {/* Body */}
      <div style={{ flex: 1, padding: "20px 24px", minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginBottom: 12 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 12px", borderRadius: 999, background: st.bg, color: st.fg, fontSize: 12, fontWeight: 600 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: st.dot }} />{st.label}
          </span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--ink-faint)", letterSpacing: "0.04em" }}>{r.ref}</span>
        </div>
        <div style={{ display: "flex", gap: 22, flexWrap: "wrap", alignItems: "center" }}>
          {[["clock", `${svc ? svc.name : ""} · ${r.slot}`], ["users", partyLabel(r.party)], ["flame", zone ? zone.name : "—"]].map(([ic, v]) => (
            <span key={ic} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14.5, color: "var(--ink-soft)" }}>
              <Icon name={ic} size={16} style={{ color: "var(--ember)" }} />{v}
            </span>
          ))}
        </div>
        {r.occasion && r.occasion !== "Sans occasion" && (
          <div style={{ marginTop: 10, fontSize: 13, color: "var(--ink-faint)" }}>{r.occasion}</div>
        )}
        {!past && r.status === "confirmee" && (
          <div style={{ marginTop: 16, display: "flex", gap: 16, alignItems: "center" }}>
            <button className="link-underline" style={{ fontSize: 13 }}>Modifier</button>
            <button onClick={() => onCancel(r.ref)} className="link-underline" style={{ fontSize: 13, color: "var(--ember-deep)" }}>Annuler</button>
          </div>
        )}
      </div>
    </div>
  );
}

function MesResas({ resas, go, cancelReservation }) {
  const todayISO = toISO(new Date());
  const sorted = [...resas].sort((a, b) => a.dateISO.localeCompare(b.dateISO));
  const upcoming = sorted.filter((r) => r.dateISO >= todayISO && r.status !== "annulee");
  const past = sorted.filter((r) => r.dateISO < todayISO || r.status === "annulee").reverse();

  return (
    <div className="container page-fade" style={{ padding: "56px 32px 90px", maxWidth: 860 }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap", marginBottom: 40 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Votre espace</div>
          <h1 style={{ fontSize: "clamp(32px, 5vw, 52px)" }}>Mes réservations</h1>
        </div>
        <button className="btn btn--ember" onClick={() => go("reserver")}><Icon name="flame" size={16} /> Réserver une table</button>
      </div>

      {upcoming.length === 0 && past.length === 0 ? (
        <div style={{ textAlign: "center", padding: "70px 20px", background: "var(--paper)", border: "1px solid var(--line)", borderRadius: "var(--radius-lg)" }}>
          <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--bone-deep)", display: "grid", placeItems: "center", margin: "0 auto 20px", color: "var(--ink-faint)" }}><Icon name="calendar" size={26} /></div>
          <h3 style={{ fontSize: 24 }}>Aucune réservation pour l'instant</h3>
          <p style={{ color: "var(--ink-soft)", maxWidth: 360, margin: "12px auto 24px" }}>Réservez votre première table et retrouvez-la ici.</p>
          <button className="btn btn--ember" onClick={() => go("reserver")}>Réserver maintenant</button>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 44 }}>
          {upcoming.length > 0 && (
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <h2 style={{ fontSize: 22 }}>À venir</h2>
                <span style={{ fontSize: 13, color: "var(--ink-faint)" }}>{upcoming.length}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {upcoming.map((r) => <ResaCard key={r.ref} r={r} onCancel={cancelReservation} />)}
              </div>
            </div>
          )}
          {past.length > 0 && (
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                <h2 style={{ fontSize: 22 }}>Passées</h2>
                <span style={{ fontSize: 13, color: "var(--ink-faint)" }}>{past.length}</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                {past.map((r) => <ResaCard key={r.ref} r={r} past />)}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { MesResas });