/* global React, STR, tr, fmtPrice, BOATS, useApp, BoatCard, SectionHead */
// ============================================================
// PAGE: Used boats (filters + grid)
// ============================================================
const { useState: useStateB, useMemo: useMemoB } = React;

const PRICE_MAX = Math.ceil(Math.max(...BOATS.map(b => b.price)) / 5000) * 5000;
const PRICE_MIN = Math.floor(Math.min(...BOATS.map(b => b.price)) / 5000) * 5000;
const LEN_MAX = Math.ceil(Math.max(...BOATS.map(b => b.length)));
const LEN_MIN = Math.floor(Math.min(...BOATS.map(b => b.length)));
const BRANDS = [...new Set(BOATS.map(b => b.brand))].sort();

function BoatsPage() {
  const { lang } = useApp();
  const [brand, setBrand] = useStateB("all");
  const [maxPrice, setMaxPrice] = useStateB(PRICE_MAX);
  const [maxLen, setMaxLen] = useStateB(LEN_MAX);
  const [fuel, setFuel] = useStateB("all");
  const [sale, setSale] = useStateB(false);
  const [sort, setSort] = useStateB("featured");

  const filtered = useMemoB(() => {
    let r = BOATS.filter(b =>
      (brand === "all" || b.brand === brand) &&
      b.price <= maxPrice &&
      b.length <= maxLen &&
      (fuel === "all" || b.fuel === fuel) &&
      (!sale || (b.oldPrice && b.oldPrice > b.price))
    );
    const s = {
      featured: (a, b) => (b.featured - a.featured) || a.price - b.price,
      "price-asc": (a, b) => a.price - b.price,
      "price-desc": (a, b) => b.price - a.price,
      "len-desc": (a, b) => b.length - a.length,
      "year-desc": (a, b) => b.year - a.year,
    }[sort];
    return [...r].sort(s);
  }, [brand, maxPrice, maxLen, fuel, sale, sort]);

  const reset = () => { setBrand("all"); setMaxPrice(PRICE_MAX); setMaxLen(LEN_MAX); setFuel("all"); setSale(false); setSort("featured"); };
  const active = brand !== "all" || maxPrice !== PRICE_MAX || maxLen !== LEN_MAX || fuel !== "all" || sale;

  return (
    React.createElement(React.Fragment, null,
      React.createElement("section", { className: "page-hero" },
        React.createElement("div", { className: "container" },
          React.createElement("span", { className: "eyebrow" }, lang === "de" ? "Gebrauchtboote" : "Used boats"),
          React.createElement("h1", { className: "page-hero-title" }, lang === "de" ? "Unsere aktuelle Auswahl." : "Our current selection."),
          React.createElement("p", { className: "page-hero-lead" }, lang === "de"
            ? "Geprüfte Motorboote und Yachten mit dokumentierter Historie. Nichts Passendes dabei? Rufen Sie an — wir finden Ihr Traumboot."
            : "Inspected motorboats and yachts with documented history. Nothing fits? Call us — we'll find your dream boat.")
        )
      ),
      React.createElement("section", { className: "boats-listing container" },
        // filter bar
        React.createElement("div", { className: "filter-bar" },
          React.createElement("div", { className: "filter-chips" },
            React.createElement("button", { className: "fchip" + (brand === "all" ? " on" : ""), onClick: () => setBrand("all") }, lang === "de" ? "Alle Marken" : "All brands"),
            BRANDS.map(br => React.createElement("button", { key: br, className: "fchip" + (brand === br ? " on" : ""), onClick: () => setBrand(br) }, br))
          ),
          React.createElement("div", { className: "filter-controls" },
            React.createElement("div", { className: "frange" },
              React.createElement("label", null, lang === "de" ? "Max. Preis" : "Max. price",
                React.createElement("span", { className: "frange-val" }, fmtPrice(maxPrice, lang))),
              React.createElement("input", { type: "range", min: PRICE_MIN, max: PRICE_MAX, step: 1000, value: maxPrice, onChange: e => setMaxPrice(+e.target.value) })
            ),
            React.createElement("div", { className: "frange" },
              React.createElement("label", null, lang === "de" ? "Max. Länge" : "Max. length",
                React.createElement("span", { className: "frange-val" }, (lang === "de" ? maxLen.toString().replace(".", ",") : maxLen.toString()) + " m")),
              React.createElement("input", { type: "range", min: LEN_MIN, max: LEN_MAX, step: 0.1, value: maxLen, onChange: e => setMaxLen(+e.target.value) })
            ),
            React.createElement("div", { className: "fselect" },
              React.createElement("label", null, lang === "de" ? "Kraftstoff" : "Fuel"),
              React.createElement("select", { value: fuel, onChange: e => setFuel(e.target.value) },
                React.createElement("option", { value: "all" }, lang === "de" ? "Alle" : "All"),
                React.createElement("option", { value: "Diesel" }, "Diesel"),
                React.createElement("option", { value: "Benzin" }, lang === "de" ? "Benzin" : "Petrol"))
            ),
            React.createElement("button", { className: "ftoggle" + (sale ? " on" : ""), onClick: () => setSale(s => !s) },
              React.createElement("span", { className: "ft-box" }), "Sale"),
            React.createElement("div", { className: "fselect fsort" },
              React.createElement("label", null, lang === "de" ? "Sortieren" : "Sort"),
              React.createElement("select", { value: sort, onChange: e => setSort(e.target.value) },
                React.createElement("option", { value: "featured" }, lang === "de" ? "Empfohlen" : "Featured"),
                React.createElement("option", { value: "price-asc" }, lang === "de" ? "Preis ↑" : "Price ↑"),
                React.createElement("option", { value: "price-desc" }, lang === "de" ? "Preis ↓" : "Price ↓"),
                React.createElement("option", { value: "len-desc" }, lang === "de" ? "Länge ↓" : "Length ↓"),
                React.createElement("option", { value: "year-desc" }, lang === "de" ? "Baujahr ↓" : "Year ↓"))
            )
          )
        ),
        React.createElement("div", { className: "results-row" },
          React.createElement("span", { className: "results-count" }, filtered.length, " ", lang === "de" ? (filtered.length === 1 ? "Boot" : "Boote") : (filtered.length === 1 ? "boat" : "boats")),
          active && React.createElement("button", { className: "reset-btn", onClick: reset }, lang === "de" ? "Filter zurücksetzen" : "Reset filters", " ✕")
        ),
        filtered.length
          ? React.createElement("div", { className: "boats-grid listing-grid" }, filtered.map(b => React.createElement(BoatCard, { key: b.id, b })))
          : React.createElement("div", { className: "empty-state" },
              React.createElement("p", null, lang === "de" ? "Keine Boote mit diesen Kriterien." : "No boats match these criteria."),
              React.createElement("button", { className: "btn btn-ghost", onClick: reset }, lang === "de" ? "Filter zurücksetzen" : "Reset filters"))
      )
    )
  );
}

Object.assign(window, { BoatsPage });