const { Gallery, Badge, Button, DataTable, Card, Icon, MediaFrame } = window.FriendsCarsDesignSystem_f69f0e;

function VehicleScreen({ car, onBack, onBook, onOpen }) {
  const c = car || window.FLEET[0];
  const store = window.useStore();
  const imgs = (c.gallery || (c.img ? [c.img] : [])).map((src) => ({ src, alt: c.name }));
  const rows = [
    { spec: "Category", value: (window.CATEGORIES.find((x) => x.id === c.cat) || {}).label },
    { spec: "Fuel", value: c.fuel },
    { spec: "Transmission", value: c.gearbox },
    { spec: "Seats", value: String(c.seats) },
    { spec: "Rate", value: window.rupees(c.price) + " per day" },
    { spec: "Delivery", value: "Doorstep in " + window.BIZ.city + ", or either airport terminal" }
  ];
  const others = window.FLEET.filter((x) => x.cat === c.cat && x.id !== c.id).slice(0, 6);

  return (
    <window.Shell style={{ paddingTop: "calc(var(--navbar-h) + var(--space-12))" }}>
      <button onClick={onBack} className="fc-back"><Icon name="arrow-left" size={16} /> Back to the fleet</button>

      <div className="fc-detail">
        <div data-reveal>
          {imgs.length ? <Gallery items={imgs} /> : <MediaFrame ratio="4 / 3" radius="var(--radius-hero)" alt={"Photograph of the " + c.name + " is being shot"} />}
        </div>
        <div className="fc-buy">
          {c.badge ? <Badge tone="accent" icon="sparkles">{c.badge}</Badge> : null}
          <span className="fc-eyebrow">{c.marque}</span>
          <h1>{c.name}</h1>
          <span className="fc-hero-rate">{window.rupees(c.price)} <em>/ day</em></span>
          <span className="fc-buy-meta">{c.fuel} · {c.gearbox} · {c.seats} seats</span>
          <div className="fc-buy-acts">
            <Button variant="primary" size="lg" fullWidth iconRight="arrow-right" onClick={() => onBook(c)}>Book this car</Button>
            <Button variant="secondary" size="lg" fullWidth iconLeft="phone" as="a" href={"tel:" + window.BIZ.tel1}>Call to confirm</Button>
            <Button variant="ghost" size="md" fullWidth iconLeft="heart" onClick={() => store.toggle("wish", c.id)}>{store.has("wish", c.id) ? "Saved" : "Save for later"}</Button>
          </div>
          <Card variant="glass" padding="var(--space-6)" radius="var(--radius-md)">
            <div style={{ display: "grid", gap: "var(--space-3)", fontSize: "var(--fs-small)", color: "var(--text-secondary)" }}>
              <span style={{ display: "flex", gap: 10, alignItems: "center" }}><Icon name="sparkles" size={16} color="var(--accent)" /> Sanitised and sealed before handover</span>
              <span style={{ display: "flex", gap: 10, alignItems: "center" }}><Icon name="wrench" size={16} color="var(--accent)" /> Roadside assistance on every booking</span>
              <span style={{ display: "flex", gap: 10, alignItems: "center" }}><Icon name="truck" size={16} color="var(--accent)" /> Doorstep pickup and drop</span>
            </div>
          </Card>
        </div>
      </div>

      <div className="fc-spec">
        <window.Heading eyebrow="Specification" title="What you are driving." />
        <div data-reveal><DataTable columns={[{ key: "spec", label: "Specification" }, { key: "value", label: "Detail", align: "right" }]} rows={rows} /></div>
      </div>

      {others.length ? (
        <div style={{ display: "grid", gap: "var(--space-8)" }}>
          <window.Heading eyebrow="Also available" title="Others in the same class." />
          <window.Rail label="Similar cars">{others.map((x) => <window.CarCard key={x.id} car={x} onOpen={onOpen} />)}</window.Rail>
        </div>
      ) : null}
    </window.Shell>
  );
}
Object.assign(window, { VehicleScreen });