// PrimeHouse UI kit — screens
const { useState: useS } = React;
const { OFFERS, CITIES, AGENTS, VALUES } = window.PH_DATA;

function SearchBar({ onSearch }) {
  return (
    <div className="phsearch">
      <div className="phsearch-field phsearch-grow">
        <Icon size={22} style={{ color: "var(--ink-muted)" }}>search</Icon>
        <input placeholder="Wpisz lokalizację — miasto, dzielnica" aria-label="Lokalizacja" />
      </div>
      <div className="phsearch-sep" />
      <div className="phsearch-field">
        <select aria-label="Typ"><option>Mieszkanie</option><option>Dom</option><option>Działka</option></select>
        <Icon size={22} style={{ color: "var(--ink)" }}>keyboard_arrow_down</Icon>
      </div>
      <div className="phsearch-sep" />
      <div className="phsearch-field">
        <select aria-label="Transakcja"><option>Sprzedaż</option><option>Wynajem</option></select>
        <Icon size={22} style={{ color: "var(--ink)" }}>keyboard_arrow_down</Icon>
      </div>
      <button className="phsearch-btn" onClick={onSearch} aria-label="Szukaj"><Icon size={24} style={{ color: "var(--white)" }}>search</Icon></button>
    </div>
  );
}

function HomeScreen({ onNav, favs, toggleFav, openOffer }) {
  const [tab, setTab] = useS("agent");
  const v = VALUES[tab];
  return (
    <div className="phhome">
      {/* Hero */}
      <section className="phhero">
        <img src="/img/property-2.png" alt="" aria-hidden="true" className="phhero-bg" />
        <span className="phhero-scrim" />
        <div className="phhero-content">
          <p className="phhero-eyebrow">Transparentny rynek nieruchomości</p>
          <h1 className="phhero-title">Znajdź swój<br />kolejny adres</h1>
          <p className="phhero-sub">Sprawdzone oferty od profesjonalnych agentów, którzy nie pobierają prowizji od kupującego.</p>
          <SearchBar onSearch={() => onNav("offers")} />
        </div>
      </section>

      <div className="phwrap">
        {/* Values */}
        <section className="phsection">
          <h2 className="phsection-title">Wartości PrimeHouse</h2>
          <Tabs value={tab} onChange={setTab} items={[
            { value: "agent", label: "Dla agenta" },
            { value: "seller", label: "Dla sprzedającego" },
            { value: "buyer", label: "Dla kupującego" },
          ]} />
          <div className="phvalue">
            <div className="phvalue-main">
              <h3>{v.title}</h3>
              <p>{v.body}</p>
              <Button variant="primary" iconRight="arrow_forward" onClick={() => onNav("login")}>Załóż konto</Button>
            </div>
            <ul className="phvalue-points">
              {v.points.map((p) => (
                <li key={p}><Icon size={22} style={{ color: "var(--accent-text)" }}>check</Icon>{p}</li>
              ))}
            </ul>
          </div>
        </section>

        {/* Cities */}
        <section className="phsection">
          <h2 className="phsection-title">Wyszukaj sprawdzone oferty</h2>
          <p className="phsection-sub">Wybierz miasto i odkryj nieruchomości w swojej okolicy.</p>
          <div className="phcities">
            {CITIES.map((c) => (
              <CityTile key={c.city} {...c} onClick={() => onNav("offers")} />
            ))}
          </div>
        </section>

        {/* Recent offers */}
        <section className="phsection">
          <div className="phsection-head">
            <h2 className="phsection-title phsection-title-flush">Ostatnio dodane oferty</h2>
            <button className="phlink" onClick={() => onNav("offers")}>Zobacz wszystkie <Icon size={18}>arrow_forward</Icon></button>
          </div>
          <div className="phgrid">
            {OFFERS.slice(0, 3).map((o) => (
              <OfferCard key={o.id} offer={o} favorite={favs.includes(o.id)} onFavorite={() => toggleFav(o.id)} onClick={() => openOffer(o.id)} />
            ))}
          </div>
        </section>

        {/* Ranking teaser */}
        <section className="phsection">
          <div className="phsection-head">
            <h2 className="phsection-title phsection-title-flush">Najlepsi agenci PrimeHouse</h2>
            <button className="phlink" onClick={() => onNav("ranking")}>Pełny ranking <Icon size={18}>arrow_forward</Icon></button>
          </div>
          <div className="phranking">
            {AGENTS.map((a) => <AgentRow key={a.rank} agent={a} />)}
          </div>
        </section>
      </div>

      {/* CTA band */}
      <section className="phcta">
        <div className="phcta-in">
          <div>
            <h2>Dołącz do PrimeHouse</h2>
            <p>Zrób krok w stronę przyszłości nieruchomości. Uczciwie, profesjonalnie, z pełnym wsparciem.</p>
          </div>
          <Button variant="accent" size="lg" iconRight="arrow_forward" onClick={() => onNav("login")}>Załóż konto agenta</Button>
        </div>
      </section>
    </div>
  );
}

function OffersScreen({ favs, toggleFav, openOffer }) {
  const [type, setType] = useS("Wszystkie");
  const [q, setQ] = useS("");
  const types = ["Wszystkie", "Mieszkanie", "Dom", "Działka"];
  const list = OFFERS.filter((o) => (type === "Wszystkie" || o.type === type) && (q === "" || (o.location + o.title + o.city).toLowerCase().includes(q.toLowerCase())));
  return (
    <div className="phwrap phoffers">
      <div className="phoffers-head">
        <div>
          <h1 className="phsection-title phsection-title-flush">Oferty na sprzedaż</h1>
          <p className="phsection-sub" style={{ marginTop: 6 }}>{list.length} nieruchomości spełnia kryteria</p>
        </div>
        <div className="phsearch phsearch-inline">
          <div className="phsearch-field phsearch-grow">
            <Icon size={22} style={{ color: "var(--ink-muted)" }}>search</Icon>
            <input placeholder="Lokalizacja" value={q} onChange={(e) => setQ(e.target.value)} aria-label="Szukaj" />
          </div>
          <button className="phsearch-btn"><Icon size={24} style={{ color: "var(--white)" }}>tune</Icon></button>
        </div>
      </div>
      <div className="phchips">
        {types.map((t) => (
          <button key={t} className={"phchip" + (t === type ? " phchip-active" : "")} onClick={() => setType(t)}>{t}</button>
        ))}
      </div>
      <div className="phgrid phgrid-3">
        {list.map((o) => (
          <OfferCard key={o.id} offer={o} favorite={favs.includes(o.id)} onFavorite={() => toggleFav(o.id)} onClick={() => openOffer(o.id)} />
        ))}
      </div>
    </div>
  );
}

function DetailScreen({ id, onBack, favs, toggleFav }) {
  const o = OFFERS.find((x) => x.id === id) || OFFERS[0];
  const gallery = ["/img/property-2.png", "/img/property-3.png", "/img/property-4.png", "/img/property-hero.png"];
  const [active, setActive] = useS(0);
  const agent = AGENTS[0];
  return (
    <div className="phwrap phdetail">
      <button className="phlink phback" onClick={onBack}><Icon size={20}>arrow_back</Icon> Wróć do ofert</button>
      <div className="phdetail-gallery">
        <div className="phdetail-main"><img src={gallery[active]} alt={o.title} /></div>
        <div className="phdetail-thumbs">
          {gallery.map((g, i) => (
            <button key={i} className={"phthumb" + (i === active ? " phthumb-active" : "")} onClick={() => setActive(i)}><img src={g} alt="" /></button>
          ))}
        </div>
      </div>
      <div className="phdetail-cols">
        <div className="phdetail-info">
          <div className="phdetail-badges">
            <Badge tone={o.status.tone} dot>{o.status.label}</Badge>
            <Badge tone="neutral">{o.type}</Badge>
          </div>
          <h1>{o.title}</h1>
          <p className="phdetail-loc"><Icon size={20} style={{ color: "var(--ink-muted)" }}>location_on</Icon>{o.location}</p>
          <div className="phdetail-facts">
            <div><span className="phfact-k">Cena</span><span className="phfact-v">{o.price}</span></div>
            <div><span className="phfact-k">Powierzchnia</span><span className="phfact-v">{o.area}</span></div>
            <div><span className="phfact-k">Układ</span><span className="phfact-v">{o.specs}</span></div>
          </div>
          <h3 className="phdetail-h3">Opis</h3>
          <p className="phdetail-desc">Wyjątkowa nieruchomość w cenionej lokalizacji, łącząca nowoczesną architekturę z wysokiej klasy wykończeniem. Przestronne, doświetlone wnętrza, prywatny taras i bezpośredni dostęp do terenów zielonych. Idealna zarówno na własne potrzeby, jak i jako inwestycja.</p>
        </div>
        <aside className="phdetail-aside">
          <div className="phdetail-pricebox">
            <span className="phdetail-price">{o.price}</span>
            <span className="phdetail-pricesub">{o.specs} · {o.area}</span>
            <Button variant="primary" fullWidth iconRight="call">Skontaktuj się z agentem</Button>
            <Button variant="outline" fullWidth onClick={() => toggleFav(o.id)}>{favs.includes(o.id) ? "W ulubionych ✓" : "Zapisz ofertę"}</Button>
          </div>
          <div className="phdetail-agent">
            <AgentRow agent={agent} />
          </div>
        </aside>
      </div>
    </div>
  );
}

function LoginScreen({ onNav }) {
  return (
    <div className="phlogin">
      <div className="phlogin-card">
        <Wordmark size={30} />
        <h1>Dołącz do PrimeHouse</h1>
        <p className="phlogin-sub">Załóż konto i zacznij działać na transparentnym rynku.</p>
        <label className="phfield"><span>E-mail</span><div className="phinput"><input type="email" placeholder="agent@primehouse.pl" /></div></label>
        <label className="phfield"><span>Hasło</span><div className="phinput"><input type="password" placeholder="Minimum 8 znaków" /></div></label>
        <Button variant="primary" fullWidth iconRight="arrow_forward" onClick={() => onNav("home")}>Załóż konto</Button>
        <p className="phlogin-alt">Masz już konto? <button className="phlink-inline" onClick={() => onNav("home")}>Zaloguj się</button></p>
      </div>
      <div className="phlogin-aside">
        <img src="/img/property-3.png" alt="" />
        <span className="phlogin-scrim" />
        <blockquote>„Transparentność na każdym kroku transakcji."</blockquote>
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, OffersScreen, DetailScreen, LoginScreen });