// "Nos parkings" index page — browse all locations grouped by airport.

function ParkingsIndex({ lang, theme, go, setSearch, parkings }) {
  const [airport, setAirport] = React.useState("all"); // all | CDG | ORY
  const [typeFilter, setTypeFilter] = React.useState("all");

  const counts = React.useMemo(() => ({
    all: parkings.length,
    CDG: parkings.filter(p => p.airport === "CDG").length,
    ORY: parkings.filter(p => p.airport === "ORY").length,
  }), [parkings]);

  const filtered = React.useMemo(() => {
    let list = parkings;
    if (airport !== "all") list = list.filter(p => p.airport === airport);
    if (typeFilter !== "all") list = list.filter(p => p.type === typeFilter);
    return list;
  }, [parkings, airport, typeFilter]);

  const grouped = React.useMemo(() => {
    if (airport !== "all") return [{ airport, list: filtered }];
    return [
      { airport: "CDG", list: filtered.filter(p => p.airport === "CDG") },
      { airport: "ORY", list: filtered.filter(p => p.airport === "ORY") },
    ];
  }, [filtered, airport]);

  const openParking = (p) => {
    setSearch(s => ({ ...s, airport: p.airport }));
    go("detail", p.id);
  };

  const t = COPY[lang];

  return (
    <div style={{ background: theme.bg, minHeight: "100%" }}>
      {/* Page hero */}
      <section style={{
        padding: "54px 56px 40px",
        background: `linear-gradient(180deg, ${theme.primaryBg} 0%, ${theme.bg} 100%)`,
        borderBottom: "1px solid " + theme.border,
      }}>
        <div style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.8, color: theme.primary, marginBottom: 10 }}>
          {lang === "fr" ? "Nos emplacements" : "Our locations"}
        </div>
        <h1 style={{
          fontFamily: theme.fontDisplay, fontSize: 48, fontWeight: 700, margin: "0 0 14px",
          color: theme.ink, letterSpacing: -1.2, textWrap: "balance", maxWidth: 820,
        }}>
          {lang === "fr"
            ? "Tous nos parkings près de Paris-CDG et Orly"
            : "All our parkings near Paris-CDG and Orly"}
        </h1>
        <p style={{ fontSize: 16, color: theme.inkMuted, maxWidth: 640, lineHeight: 1.5, margin: 0 }}>
          {lang === "fr"
            ? "Parkings couverts, extérieurs ou service voiturier — navette gratuite incluse pour la plupart, vidéosurveillance 24/7 et paiement sécurisé par Stripe."
            : "Indoor, outdoor or valet parkings — free shuttle included for most, 24/7 CCTV and Stripe-secured payment."}
        </p>

        {/* summary stats */}
        <div style={{ display: "flex", gap: 40, marginTop: 32, flexWrap: "wrap" }}>
          <Stat theme={theme} value={counts.all} label={lang === "fr" ? "parkings partenaires" : "partner parkings"}/>
          <Stat theme={theme} value={counts.CDG} label={lang === "fr" ? "à Roissy-CDG" : "at Roissy-CDG"}/>
          <Stat theme={theme} value={counts.ORY} label={lang === "fr" ? "à Paris-Orly" : "at Paris-Orly"}/>
          <Stat theme={theme} value="24/7" label={lang === "fr" ? "accès et navettes" : "access & shuttles"}/>
        </div>
      </section>

      {/* Controls */}
      <div style={{
        position: "sticky", top: 74, zIndex: 5,
        background: theme.bg, borderBottom: "1px solid " + theme.border,
        padding: "16px 56px", display: "flex", gap: 16, alignItems: "center", flexWrap: "wrap",
      }}>
        <div style={{ display: "inline-flex", background: theme.subtle, padding: 3, borderRadius: 999, fontSize: 13 }}>
          {[
            { id: "all", label: lang === "fr" ? "Tous" : "All", n: counts.all },
            { id: "CDG", label: "Paris-CDG", n: counts.CDG },
            { id: "ORY", label: "Paris-Orly", n: counts.ORY },
          ].map(o => (
            <button key={o.id} onClick={() => setAirport(o.id)} style={{
              border: "none", borderRadius: 999, padding: "7px 14px", cursor: "pointer",
              background: airport === o.id ? theme.bg : "transparent",
              color: airport === o.id ? theme.ink : theme.inkMuted,
              fontWeight: 600,
              boxShadow: airport === o.id ? "0 1px 2px rgba(0,0,0,0.06)" : "none",
              display: "inline-flex", alignItems: "center", gap: 7,
            }}>
              {o.label}
              <span style={{ fontSize: 11, opacity: 0.7 }}>{o.n}</span>
            </button>
          ))}
        </div>

        <div style={{ width: 1, height: 20, background: theme.border }}/>

        <div style={{ display: "flex", gap: 6 }}>
          {[
            { id: "all", label: lang === "fr" ? "Tous types" : "All types", icon: null },
            { id: "indoor", label: t.typeIndoor, icon: "shield" },
            { id: "outdoor", label: t.typeOutdoor, icon: "leaf" },
            { id: "valet", label: t.typeValet, icon: "valet" },
          ].map(o => (
            <button key={o.id} onClick={() => setTypeFilter(o.id)} style={{
              border: "1px solid " + (typeFilter === o.id ? theme.primary : theme.border),
              background: typeFilter === o.id ? theme.primaryBg : theme.bg,
              color: typeFilter === o.id ? theme.primary : theme.ink,
              borderRadius: 999, padding: "7px 12px", cursor: "pointer", fontSize: 13, fontWeight: 500,
              display: "inline-flex", alignItems: "center", gap: 6,
            }}>
              {o.icon && <Icon name={o.icon} size={13}/>}
              {o.label}
            </button>
          ))}
        </div>

        <div style={{ marginLeft: "auto", fontSize: 13, color: theme.inkMuted }}>
          {filtered.length} {t.resultsTitle}
        </div>
      </div>

      {/* Grouped content */}
      <div style={{ padding: "40px 56px 60px" }}>
        {grouped.map((g, gi) => (
          <section key={g.airport} style={{ marginBottom: gi === grouped.length - 1 ? 0 : 56 }}>
            <AirportHeader airport={g.airport} count={g.list.length} lang={lang} theme={theme}/>
            {g.list.length === 0 ? (
              <div style={{ padding: "40px 0", color: theme.inkMuted, fontSize: 14, textAlign: "center" }}>
                {lang === "fr" ? "Aucun parking ne correspond à vos filtres." : "No parkings match your filters."}
              </div>
            ) : (
              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
                gap: 20, marginTop: 22,
              }}>
                {g.list.map((p, i) => (
                  <ParkingGridCard key={p.id} parking={p} seed={i + gi * 10 + 30} lang={lang} theme={theme} onClick={() => openParking(p)}/>
                ))}
              </div>
            )}
          </section>
        ))}
      </div>

      {/* CTA */}
      <section style={{
        margin: "0 56px 56px",
        background: `linear-gradient(120deg, ${theme.ink} 0%, oklch(0.28 0.04 250) 100%)`,
        color: theme.bg, borderRadius: 20, padding: "40px 44px",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap",
      }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: 0.8, textTransform: "uppercase", opacity: 0.7, marginBottom: 10 }}>
            {lang === "fr" ? "Prêt à partir ?" : "Ready to go?"}
          </div>
          <h2 style={{ fontFamily: theme.fontDisplay, fontSize: 28, fontWeight: 700, margin: 0, letterSpacing: -0.6, maxWidth: 520, textWrap: "balance" }}>
            {lang === "fr"
              ? "Comparez les prix et réservez votre place en deux minutes."
              : "Compare prices and book your spot in two minutes."}
          </h2>
        </div>
        <button onClick={() => go("home")} style={{
          background: theme.bg, color: theme.ink, border: "none", borderRadius: 12,
          padding: "14px 22px", fontSize: 15, fontWeight: 700, cursor: "pointer",
          display: "inline-flex", alignItems: "center", gap: 8,
        }}>
          {lang === "fr" ? "Lancer une recherche" : "Start a search"}
          <Icon name="arrow" size={16}/>
        </button>
      </section>

      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

function Stat({ value, label, theme }) {
  return (
    <div>
      <div style={{ fontFamily: theme.fontDisplay, fontSize: 36, fontWeight: 700, color: theme.ink, letterSpacing: -1, lineHeight: 1 }}>
        {value}
      </div>
      <div style={{ fontSize: 13, color: theme.inkMuted, marginTop: 4 }}>{label}</div>
    </div>
  );
}

function AirportHeader({ airport, count, lang, theme }) {
  const isCDG = airport === "CDG";
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 14, paddingBottom: 14, borderBottom: "1px solid " + theme.border }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12, background: theme.primaryBg, color: theme.primary,
        display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
      }}>
        <Icon name="plane" size={22}/>
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: theme.fontDisplay, fontSize: 24, fontWeight: 700, color: theme.ink, letterSpacing: -0.6, lineHeight: 1.2 }}>
          {isCDG ? "Paris-Charles de Gaulle" : "Paris-Orly"}
        </div>
        <div style={{ fontSize: 13, color: theme.inkMuted, marginTop: 4 }}>
          {airport} · {count} {count > 1 ? (lang === "fr" ? "parkings" : "parkings") : "parking"}
        </div>
      </div>
    </div>
  );
}

function ParkingGridCard({ parking, seed, lang, theme, onClick }) {
  return (
    <button onClick={onClick} style={{
      cursor: "pointer", background: theme.bg, border: "1px solid " + theme.border,
      borderRadius: 16, overflow: "hidden", padding: 0,
      display: "flex", flexDirection: "column", textAlign: "left", width: "100%",
      transition: "transform .18s ease, box-shadow .18s ease",
    }}
    onMouseOver={e => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.boxShadow = "0 10px 30px rgba(10,30,60,0.1)"; }}
    onMouseOut={e => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{ position: "relative" }}>
        <PlaceholderImage seed={seed} label={parking.typeLabel[lang].toLowerCase()} height={180} rounded={0}/>
        <div style={{ position: "absolute", top: 12, left: 12, display: "flex", gap: 6, flexWrap: "wrap", maxWidth: "80%" }}>
          {parking.premium && <BadgeFor kind="premium" lang={lang}/>}
          {parking.recommended && !parking.premium && <BadgeFor kind="confirm" lang={lang}/>}
        </div>
        <div style={{
          position: "absolute", bottom: 12, right: 12,
          background: theme.bg, color: theme.ink, borderRadius: 10, padding: "6px 10px",
          fontSize: 12, fontWeight: 700, boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
          display: "inline-flex", alignItems: "center", gap: 4,
        }}>
          <Icon name="pin" size={12} color={theme.primary}/>
          {parking.distanceKm} km
        </div>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
        <div>
          <div style={{ fontSize: 11, color: theme.inkMuted, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 4 }}>
            {parking.typeLabel[lang]} · {parking.airport === "CDG" ? "Roissy-CDG" : "Paris-Orly"}
          </div>
          <div style={{ fontFamily: theme.fontDisplay, fontSize: 19, fontWeight: 600, color: theme.ink, letterSpacing: -0.3, lineHeight: 1.2 }}>
            {parking.name}
          </div>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12, color: theme.inkMuted }}>
          <Stars value={parking.rating} size={12}/>
          <span><b style={{ color: theme.ink }}>{parking.rating}</b> · {parking.reviews.toLocaleString(lang)}</span>
        </div>

        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {parking.services.slice(0, 4).map(s => (
            <span key={s} style={{
              display: "inline-flex", alignItems: "center", gap: 5,
              padding: "3px 8px", borderRadius: 6,
              background: theme.subtle, color: theme.inkMuted,
              fontSize: 11, fontWeight: 500,
            }}>
              <Icon name={s} size={11}/>
              {SERVICE_LABELS[lang][s]}
            </span>
          ))}
        </div>

        <div style={{
          marginTop: "auto", paddingTop: 12,
          borderTop: "1px dashed " + theme.border,
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
        }}>
          <div>
            <span style={{ fontSize: 11, color: theme.inkMuted, marginRight: 4 }}>
              {lang === "fr" ? "à partir de" : "from"}
            </span>
            <span style={{ fontFamily: theme.fontDisplay, fontSize: 22, fontWeight: 700, color: theme.ink }}>€{parking.pricePerDay.toFixed(2)}</span>
            <span style={{ fontSize: 12, color: theme.inkMuted }}> {COPY[lang].perDay}</span>
          </div>
          <span style={{ fontSize: 13, color: theme.primary, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 4 }}>
            {COPY[lang].viewDetails} <Icon name="arrow" size={13}/>
          </span>
        </div>
      </div>
    </button>
  );
}

Object.assign(window, { ParkingsIndex });