const { Button, SearchField, FilterBar, Card, Icon, Badge } = window.FriendsCarsDesignSystem_f69f0e;

const FACETS = ["Premium", "MUV", "7 seater", "Sedan", "Hatchback", "Automatic", "Diesel", "Under ₹4,000"];

function FleetScreen({ onOpen, onBook }) {
  const store = window.useStore();
  const [selected, setSelected] = React.useState([]);
  const [q, setQ] = React.useState("");
  const [sort, setSort] = React.useState("Price low to high");
  const toggle = (f) => setSelected(selected.includes(f) ? selected.filter((x) => x !== f) : [...selected, f]);

  const catOf = (c) => (window.CATEGORIES.find((x) => x.id === c.cat) || {}).label;
  const matches = (c) => selected.every((f) =>
    f === "Automatic" ? c.gearbox === "Automatic"
      : f === "Diesel" ? c.fuel.indexOf("Diesel") > -1
        : f === "Under ₹4,000" ? c.price < 4000
          : catOf(c) === f);

  let cars = window.FLEET.filter((c) => matches(c) && (c.name + " " + c.marque).toLowerCase().indexOf(q.toLowerCase()) > -1);
  cars = cars.slice().sort((a, b) => sort === "Price high to low" ? b.price - a.price : sort === "Price low to high" ? a.price - b.price : 0);

  const compare = store.ids("compare").map((id) => window.FLEET.find((c) => c.id === id)).filter(Boolean);

  return (
    <window.Shell style={{ paddingTop: "calc(var(--navbar-h) + var(--space-16))" }}>
      <window.Heading eyebrow="The fleet" title="Twenty-seven models. Seventy cars." body="Every rate below is per day. Photographs are of the actual cars in the yard — a few are still being shot."
        action={<SearchField size="lg" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search a model" className="fc-search" />} />

      <div data-reveal className="fc-filters"><FilterBar facets={FACETS} selected={selected} onToggle={toggle} resultCount={cars.length} sort={sort} onSort={setSort} /></div>

      <div className="fc-grid">
        {cars.map((c) => <window.CarCard key={c.id} car={c} onOpen={onOpen} />)}
      </div>

      {cars.length === 0 ? <p style={{ color: "var(--text-muted)", textAlign: "center", padding: "var(--space-16) 0" }}>Nothing matches those filters yet — widen the budget or clear a facet.</p> : null}

      {compare.length ? (
        <div className="fc-compare">
          <Card variant="glass" padding="var(--space-6)" radius="var(--radius-hero)" style={{ display: "flex", gap: "var(--space-8)", alignItems: "center", flexWrap: "wrap", justifyContent: "space-between" }}>
            <div style={{ display: "flex", gap: "var(--space-6)", flexWrap: "wrap" }}>
              {compare.map((c) => (
                <span key={c.id} style={{ display: "grid", gap: 2 }}>
                  <em style={{ fontStyle: "normal", fontSize: "var(--fs-caption)", color: "var(--text-muted)", letterSpacing: "var(--ls-eyebrow)", textTransform: "uppercase" }}>{c.marque}</em>
                  <strong style={{ fontWeight: "var(--fw-medium)" }}>{c.name}</strong>
                  <span style={{ color: "var(--text-accent)", fontSize: "var(--fs-small)" }}>{window.rupees(c.price)} / day</span>
                </span>
              ))}
            </div>
            <div style={{ display: "flex", gap: "var(--space-3)" }}>
              {compare.forEach ? null : null}
              <Button variant="ghost" onClick={() => compare.forEach((c) => store.toggle("compare", c.id))}>Clear</Button>
              <Button variant="primary" iconRight="arrow-right" onClick={() => onBook(compare[0])}>Book {compare[0].name.split(" ").slice(-1)[0]}</Button>
            </div>
          </Card>
        </div>
      ) : null}
    </window.Shell>
  );
}
Object.assign(window, { FleetScreen });