// PonteREI — Properties listing + filters

function PropertiesPage() {
  const { locale } = useLocale();
  useReveal();
  const [filters, setFilters] = useState({
    country: "all",
    modality: "all",
    minTicket: 100,
    minYield: 0,
    sort: "yield",
  });

  const filtered = useMemo(() => {
    let res = [...window.PROPERTIES];
    if (filters.country !== "all") res = res.filter((p) => p.countryCode === filters.country);
    if (filters.modality !== "all") res = res.filter((p) => p.modality.includes(filters.modality));
    res = res.filter((p) => p.financials.shareUnitPrice >= filters.minTicket);
    res = res.filter((p) => p.financials.projectedAnnualYield >= filters.minYield);
    if (filters.sort === "yield") res.sort((a, b) => b.financials.projectedAnnualYield - a.financials.projectedAnnualYield);
    if (filters.sort === "price") res.sort((a, b) => a.financials.shareUnitPrice - b.financials.shareUnitPrice);
    if (filters.sort === "newest") res.sort((a, b) => (b.isJustAdded ? 1 : 0) - (a.isJustAdded ? 1 : 0));
    return res;
  }, [filters]);

  const set = (k, v) => setFilters((c) => ({ ...c, [k]: v }));
  const clear = () => setFilters({ country: "all", modality: "all", minTicket: 100, minYield: 0, sort: "yield" });

  return (
    <div className="page-enter">
      <section className="section-tight" style={{ paddingTop: 48 }}>
        <div className="container">
          <div className="breadcrumbs"><a href="#/">Home</a> · {t("nav.properties", locale)}</div>
          <h1 className="serif" style={{ fontSize: "clamp(40px, 5vw, 64px)", letterSpacing: "-0.025em", margin: "8px 0 12px", lineHeight: 1.05 }}>
            {locale === "pt" ? "Imóveis disponíveis" : "Available properties"}
          </h1>
          <p className="muted" style={{ fontSize: 18, maxWidth: 600, marginBottom: 32 }}>
            {locale === "pt" ? "Curadoria do nosso time, com diligence completa em cada listagem." : "Curated by our team with full diligence on every listing."}
          </p>

          <div className="filters-layout">
            <aside className="filters-panel reveal">
              <div className="flex justify-between items-center mb-16">
                <h3 className="serif" style={{ margin: 0, fontSize: 22, fontWeight: 400 }}>{t("filters.title", locale)}</h3>
                <button onClick={clear} style={{ fontSize: 12, color: "var(--accent)" }}>{t("filters.clear", locale)}</button>
              </div>

              <div className="filter-group">
                <h4>{t("filters.country", locale)}</h4>
                <div className="filter-options">
                  {[["all", t("filters.all", locale)], ["BR", "🇧🇷 Brasil"], ["US", "🇺🇸 USA"], ["ID", "🇮🇩 Indonésia"]].map(([v, l]) => (
                    <label className="filter-option" key={v}>
                      <input type="radio" name="country" checked={filters.country === v} onChange={() => set("country", v)} />
                      {l}
                    </label>
                  ))}
                </div>
              </div>

              <div className="filter-group">
                <h4>{t("filters.modality", locale)}</h4>
                <div className="filter-options">
                  {[["all", t("filters.all", locale)], ["cotas", t("modalities.cotasTitle", locale)], ["inteiro", t("modalities.inteiroTitle", locale)]].map(([v, l]) => (
                    <label className="filter-option" key={v}>
                      <input type="radio" name="modality" checked={filters.modality === v} onChange={() => set("modality", v)} />
                      {l}
                    </label>
                  ))}
                </div>
              </div>

              <div className="filter-group">
                <h4>{t("filters.ticket", locale)}: <span className="serif" style={{ fontSize: 18 }}>{formatBRL(filters.minTicket)}</span></h4>
                <input type="range" min="100" max="1000" step="50" value={filters.minTicket} onChange={(e) => set("minTicket", +e.target.value)} className="range-input" style={{ width: "100%", accentColor: "var(--primary)" }} />
              </div>

              <div className="filter-group">
                <h4>{t("filters.yield", locale)}: <span className="serif" style={{ fontSize: 18 }}>{formatPctLocalized(filters.minYield, locale)}</span></h4>
                <input type="range" min="0" max="15" step="0.5" value={filters.minYield} onChange={(e) => set("minYield", +e.target.value)} className="range-input" style={{ width: "100%", accentColor: "var(--primary)" }} />
              </div>
            </aside>

            <div>
              <div className="results-bar">
                <div className="muted">{filtered.length} {t("filters.results", locale)}</div>
                <div className="flex items-center gap-12">
                  <select className="select" style={{ width: "auto" }} value={filters.sort} onChange={(e) => set("sort", e.target.value)}>
                    <option value="yield">{t("filters.sortYield", locale)}</option>
                    <option value="price">{t("filters.sortPrice", locale)}</option>
                    <option value="newest">{t("filters.sortNewest", locale)}</option>
                  </select>
                </div>
              </div>
              {filtered.length > 0 ? (
                <div className="property-grid">
                  {filtered.map((p) => <PropertyCard p={p} key={p.id} />)}
                </div>
              ) : (
                <div style={{ padding: 60, textAlign: "center", border: "1px dashed var(--border-strong)", borderRadius: 16 }}>
                  <p className="muted">{locale === "pt" ? "Nenhum imóvel corresponde aos filtros." : "No properties match these filters."}</p>
                  <button className="btn btn-secondary mt-16" onClick={clear}>{t("filters.clear", locale)}</button>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PropertiesPage });