// Vehicle list views: card grid, table, and split (sidebar list + detail).

const { useState: useStateL, useMemo: useMemoL } = React;

function StatusBadge({ status }) {
  const cls = {
    Available: "badge-success",
    Maintenance: "badge-warn",
    Retired: "badge-muted",
  }[status] || "badge-muted";
  return <span className={`badge ${cls}`}>{status}</span>;
}

function vehicleCover(v) {
  return v.photos?.[v.coverIndex || 0] || v.photos?.[0];
}

function bookingCountFor(v, bookings) {
  const todayKey = window.RENTAL_DATA.dateKey(new Date());
  const list = bookings[v.id] || [];
  return list.filter((b) => b.end >= todayKey).length;
}

// ---------- Card grid (default) ----------
function VehicleCardGrid({ vehicles, bookings, onSelect, onAdd }) {
  return (
    <div className="card-grid">
      {vehicles.map((v) => {
        const cover = vehicleCover(v);
        const upcoming = bookingCountFor(v, bookings);
        return (
          <div key={v.id} className="vehicle-card" onClick={() => onSelect(v.id)}>
            <div className="vehicle-card-photo">
              {cover ? <img src={cover} alt="" /> : <div className="no-photo">No photo</div>}
              <div className="vehicle-card-status"><StatusBadge status={v.status || "Available"} /></div>
            </div>
            <div className="vehicle-card-body">
              <div className="vehicle-card-title">
                <span>{v.year} {v.make} {v.model}</span>
                <span className="vehicle-card-price">${v.price}<span className="muted">/day</span></span>
              </div>
              <div className="vehicle-card-meta">
                <span>{v.type}</span>
                <span className="dot">·</span>
                <span>{v.transmission}</span>
                <span className="dot">·</span>
                <span>{v.passengers} pax</span>
                <span className="dot">·</span>
                <span>{v.suitcases} bags</span>
              </div>
              <div className="vehicle-card-footer">
                <span className="muted small">{v.plate || "—"}</span>
                <span className="muted small">
                  {upcoming === 0 ? "No upcoming bookings" : `${upcoming} upcoming booking${upcoming === 1 ? "" : "s"}`}
                </span>
              </div>
            </div>
          </div>
        );
      })}
      <button type="button" className="vehicle-card add-card" onClick={onAdd}>
        <div className="add-card-icon">+</div>
        <div>Add vehicle</div>
      </button>
    </div>
  );
}

// ---------- Table view ----------
function VehicleTable({ vehicles, bookings, onSelect }) {
  const [sortBy, setSortBy] = useStateL("make");
  const [dir, setDir] = useStateL("asc");

  const sorted = useMemoL(() => {
    const list = [...vehicles];
    list.sort((a, b) => {
      const va = a[sortBy], vb = b[sortBy];
      if (va == null) return 1;
      if (vb == null) return -1;
      if (typeof va === "number") return dir === "asc" ? va - vb : vb - va;
      return dir === "asc" ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
    });
    return list;
  }, [vehicles, sortBy, dir]);

  const setSort = (col) => {
    if (sortBy === col) setDir(dir === "asc" ? "desc" : "asc");
    else { setSortBy(col); setDir("asc"); }
  };
  const arrow = (col) => sortBy !== col ? "" : (dir === "asc" ? " ↑" : " ↓");

  return (
    <div className="table-wrap">
      <table className="data-table">
        <thead>
          <tr>
            <th></th>
            <th onClick={() => setSort("year")} className="sortable">Year{arrow("year")}</th>
            <th onClick={() => setSort("make")} className="sortable">Make{arrow("make")}</th>
            <th onClick={() => setSort("model")} className="sortable">Model{arrow("model")}</th>
            <th onClick={() => setSort("type")} className="sortable">Type{arrow("type")}</th>
            <th onClick={() => setSort("transmission")} className="sortable">Trans.{arrow("transmission")}</th>
            <th className="num" onClick={() => setSort("passengers")}>Pax{arrow("passengers")}</th>
            <th className="num" onClick={() => setSort("suitcases")}>Bags{arrow("suitcases")}</th>
            <th className="num" onClick={() => setSort("price")}>Price{arrow("price")}</th>
            <th>Plate</th>
            <th>Status</th>
            <th className="num">Bookings</th>
          </tr>
        </thead>
        <tbody>
          {sorted.map((v) => {
            const cover = vehicleCover(v);
            const upcoming = bookingCountFor(v, bookings);
            return (
              <tr key={v.id} onClick={() => onSelect(v.id)}>
                <td className="thumb-cell">
                  {cover && <img src={cover} alt="" className="row-thumb" />}
                </td>
                <td>{v.year}</td>
                <td className="cell-strong">{v.make}</td>
                <td>{v.model}</td>
                <td>{v.type}</td>
                <td>{v.transmission}</td>
                <td className="num">{v.passengers}</td>
                <td className="num">{v.suitcases}</td>
                <td className="num">${v.price}</td>
                <td className="muted">{v.plate || "—"}</td>
                <td><StatusBadge status={v.status || "Available"} /></td>
                <td className="num">{upcoming}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ---------- Split view (list + summary) ----------
function VehicleSplitView({ vehicles, bookings, onSelect, selectedId, setSelectedId }) {
  const selected = vehicles.find((v) => v.id === selectedId) || vehicles[0];

  return (
    <div className="split-view">
      <div className="split-list">
        {vehicles.map((v) => {
          const cover = vehicleCover(v);
          return (
            <button
              key={v.id}
              type="button"
              className={`split-row ${selected?.id === v.id ? "active" : ""}`}
              onClick={() => setSelectedId(v.id)}
            >
              {cover && <img src={cover} alt="" className="split-thumb" />}
              <div className="split-row-text">
                <div className="split-row-title">{v.year} {v.make} {v.model}</div>
                <div className="split-row-sub muted small">
                  {v.type} · ${v.price}/day
                </div>
              </div>
              <StatusBadge status={v.status || "Available"} />
            </button>
          );
        })}
      </div>

      <div className="split-detail">
        {selected && (
          <>
            <div className="split-detail-photo">
              {vehicleCover(selected) ? (
                <img src={vehicleCover(selected)} alt="" />
              ) : <div className="no-photo">No photo</div>}
            </div>
            <div className="split-detail-body">
              <div className="split-detail-head">
                <div>
                  <h2 className="split-detail-title">{selected.year} {selected.make} {selected.model}</h2>
                  <div className="muted">{selected.plate || "No plate set"}</div>
                </div>
                <button className="btn-primary" onClick={() => onSelect(selected.id)}>
                  Open vehicle
                </button>
              </div>

              <div className="spec-grid">
                <div><div className="spec-label">Type</div><div className="spec-value">{selected.type}</div></div>
                <div><div className="spec-label">Transmission</div><div className="spec-value">{selected.transmission}</div></div>
                <div><div className="spec-label">Price / day</div><div className="spec-value">${selected.price} XCD</div></div>
                <div><div className="spec-label">Passengers</div><div className="spec-value">{selected.passengers}</div></div>
                <div><div className="spec-label">Suitcases</div><div className="spec-value">{selected.suitcases}</div></div>
                <div><div className="spec-label">Status</div><div className="spec-value"><StatusBadge status={selected.status || "Available"} /></div></div>
              </div>

              {selected.description && (
                <div className="split-description">
                  <div className="spec-label">Description</div>
                  <p>{selected.description}</p>
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

window.VehicleCardGrid = VehicleCardGrid;
window.VehicleTable = VehicleTable;
window.VehicleSplitView = VehicleSplitView;
window.StatusBadge = StatusBadge;
window.vehicleCover = vehicleCover;
window.bookingCountFor = bookingCountFor;