/* global React, Icon, chf */
// ACN-Cars · Compare drawer (full overlay)

function CompareOverlay({ vehicles, ids, onClose, onRemove }) {
  if (!ids.length) return null;
  const items = ids.map(id => vehicles.find(v => v.id === id)).filter(Boolean);

  const rows = [
    { l: "Preis pro Tag", k: v => `CHF ${chf(v.pricePerDay)}` },
    { l: "Kategorie", k: v => v.category },
    { l: "Leistung", k: v => `${v.power} PS` },
    { l: "0–100 km/h", k: v => `${v.acceleration}s` },
    { l: "Spitze", k: v => `${v.topSpeed} km/h` },
    { l: "Getriebe", k: v => v.transmission },
    { l: "Antrieb", k: v => v.fuel },
    { l: "Sitzplätze", k: v => v.seats },
    { l: "Baujahr", k: v => v.year },
  ];

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 60, background: "color-mix(in oklab, var(--bg) 92%, transparent)",
      backdropFilter: "blur(20px)", overflow: "auto",
      animation: "fadeIn .3s ease",
    }}>
      <div className="container" style={{ padding: "32px 32px 80px" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 32 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Vergleich · {items.length} Fahrzeuge</div>
            <h2 className="h-1" style={{ margin: 0 }}>Direkter Vergleich.</h2>
          </div>
          <button className="btn btn-ghost" onClick={onClose}>Schließen ✕</button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: `200px repeat(${items.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: "var(--r-lg)", overflow: "hidden", background: "var(--bg-elev)" }}>
          {/* Header row */}
          <div style={{ padding: 24, borderBottom: "1px solid var(--line)" }} />
          {items.map(v => (
            <div key={v.id} style={{ padding: 0, borderBottom: "1px solid var(--line)", borderLeft: "1px solid var(--line)", position: "relative" }}>
              <button onClick={() => onRemove(v.id)} style={{ position: "absolute", top: 12, right: 12, zIndex: 2, width: 28, height: 28, borderRadius: 999, background: "rgba(0,0,0,0.7)", color: "#fff", border: 0, cursor: "pointer" }}>✕</button>
              <div style={{ aspectRatio: "16/10", backgroundImage: `url(${v.image})`, backgroundSize: "cover", backgroundPosition: "center" }} />
              <div style={{ padding: 16 }}>
                <div className="eyebrow" style={{ marginBottom: 4 }}>{v.brand}</div>
                <div className="h-3" style={{ margin: 0 }}>{v.model}</div>
              </div>
            </div>
          ))}

          {rows.map((row, i) => (
            <React.Fragment key={i}>
              <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)", fontSize: 12, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--ink-3)", background: "var(--bg-sunken)", display: "flex", alignItems: "center" }}>
                {row.l}
              </div>
              {items.map(v => (
                <div key={v.id} style={{ padding: "16px 20px", borderBottom: "1px solid var(--line)", borderLeft: "1px solid var(--line)", fontSize: 15, fontWeight: 500, fontFamily: "var(--font-display)" }}>
                  {row.k(v)}
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

window.CompareOverlay = CompareOverlay;