const { Card, Badge, Button, StarRating } = window.GDVExpressDesignSystem_766357;

const TRIPS = [
  { title: "Marbrisa Carlsbad Resort", location: "Carlsbad, CA", dates: "Aug 8 – Aug 15, 2026", status: "upcoming", rating: 4.5, paid: "$712" },
  { title: "Ocean Pointe Suites", location: "Key Largo, FL", dates: "Mar 14 – Mar 21, 2025", status: "completed", rating: 4, paid: "$498" },
  { title: "Tahoe Ridge Resort", location: "Stateline, NV", dates: "Dec 20 – Dec 27, 2024", status: "completed", rating: 4, paid: "$540" },
  { title: "Cabo Azul Resort", location: "San José del Cabo, MX", dates: "Jul 2 – Jul 9, 2024", status: "completed", rating: 5, paid: "$884" },
];

/* Member travel history — upcoming + past stays, each rebookable. */
function TravelHistory({ onRebook }) {
  return (
    <div style={{ maxWidth: "820px", margin: "0 auto", padding: "30px 30px 70px" }}>
      <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "26px", color: "var(--navy-800)", margin: "0 0 4px" }}>Travel history</h1>
      <p style={{ color: "var(--muted)", fontSize: "14px", margin: "0 0 22px" }}>Every stay you've booked with GDV Express — easy to revisit or rebook in a tap.</p>

      <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
        {TRIPS.map((t) => (
          <Card key={t.title + t.dates} padding="16px" style={{ display: "flex", alignItems: "center", gap: "16px" }}>
            <div style={{ width: "62px", height: "62px", borderRadius: "var(--radius-md)", flex: "0 0 62px", background: t.status === "upcoming" ? "linear-gradient(135deg,#6ABD46,#3f8a2a)" : "linear-gradient(135deg,#3961b3,#2a4888)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "22px" }}>
              {t.location.replace(/,.*/, "").charAt(0)}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: "9px", flexWrap: "wrap" }}>
                <span style={{ fontWeight: 800, fontSize: "14.5px", color: "var(--navy-800)" }}>{t.title}</span>
                {t.status === "upcoming"
                  ? <Badge tone="now">Upcoming</Badge>
                  : <Badge tone="neutral">Completed</Badge>}
              </div>
              <div style={{ fontSize: "12.5px", color: "var(--navy-600)", fontWeight: 600, marginTop: "2px" }}>{t.location}</div>
              <div style={{ display: "flex", alignItems: "center", gap: "12px", marginTop: "5px" }}>
                <span style={{ fontSize: "12.5px", color: "var(--muted)" }}>{t.dates}</span>
                <StarRating value={t.rating} size={12} />
              </div>
            </div>
            <div style={{ textAlign: "right", display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "8px" }}>
              <span style={{ fontSize: "12px", color: "var(--muted)" }}>paid <b style={{ color: "var(--navy-800)", fontSize: "15px" }}>{t.paid}</b></span>
              {t.status === "completed" && <Button variant="secondary" size="sm" onClick={() => onRebook && onRebook(t)}>Rebook</Button>}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}
window.TravelHistory = TravelHistory;