// PrimeHouse UI kit — shared primitives, header & footer.
// Self-contained (cosmetic versions of the DS components) so the kit
// renders standalone. Exposed on window for the screen files.
const { useState } = React;

const Icon = ({ children, size = 24, fill = 0, style = {} }) => (
  <span className="material-symbols-sharp" style={{ fontSize: size, fontVariationSettings: `'FILL' ${fill}`, lineHeight: 1, ...style }}>{children}</span>
);

function Wordmark({ color = "var(--ink)", houseColor, size = 26 }) {
  return (
    <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: size, letterSpacing: "-0.006em", lineHeight: 1, color }}>
      Prime<span style={{ fontWeight: 400, color: houseColor || color }}>House</span>
    </span>
  );
}

function Button({ children, variant = "primary", size = "lg", iconRight, iconLeft, onClick, fullWidth, type = "button" }) {
  const cls = `phb phb-${variant} phb-${size}` + (fullWidth ? " phb-full" : "");
  return (
    <button type={type} className={cls} onClick={onClick}>
      {iconLeft && <Icon size={22}>{iconLeft}</Icon>}
      {children}
      {iconRight && <Icon size={22}>{iconRight}</Icon>}
    </button>
  );
}

function IconButton({ children, label, variant = "outline", onClick, active }) {
  return (
    <button type="button" aria-label={label} aria-pressed={active} className={`phib phib-${variant}`} onClick={onClick}>
      <Icon size={24} fill={active ? 1 : 0}>{children}</Icon>
    </button>
  );
}

function Badge({ children, tone = "neutral", solid, dot, icon }) {
  return (
    <span className={`phbadge phbadge-${tone}` + (solid ? " phbadge-solid" : "")}>
      {dot && <span className="phbadge-dot" />}
      {icon && <Icon size={16}>{icon}</Icon>}
      {children}
    </span>
  );
}

function Tabs({ items, value, onChange }) {
  return (
    <div role="tablist" className="phtabs">
      {items.map((it) => (
        <button key={it.value} role="tab" aria-selected={it.value === value}
          className={"phtab" + (it.value === value ? " phtab-active" : "")}
          onClick={() => onChange(it.value)}>{it.label}</button>
      ))}
    </div>
  );
}

function OfferCard({ offer, favorite, onFavorite, onClick }) {
  return (
    <article className="phcard" onClick={onClick}>
      <div className="phcard-photo">
        <img src={offer.image} alt={offer.title} />
        {offer.status && <span className="phcard-status"><span className="phcard-statusdot" style={{ background: `var(--${offer.status.tone})` }} />{offer.status.label}</span>}
        <button className="phcard-fav" aria-label="Dodaj do ulubionych" aria-pressed={favorite}
          onClick={(e) => { e.stopPropagation(); onFavorite && onFavorite(); }}>
          <Icon size={24} fill={favorite ? 1 : 0} style={{ color: favorite ? "var(--error)" : "var(--ink)" }}>favorite</Icon>
        </button>
      </div>
      <div className="phcard-body">
        <h3>{offer.title}</h3>
        <p className="phcard-loc">{offer.location}</p>
        <p className="phcard-price">{offer.price}<span className="phcard-specs"> · {offer.specs}</span></p>
      </div>
    </article>
  );
}

function CityTile({ city, count, image, onClick, tall }) {
  return (
    <button className={"phcity" + (tall ? " phcity-tall" : "")} onClick={onClick}>
      <img src={image} alt="" aria-hidden="true" />
      <span className="phcity-scrim" />
      <span className="phcity-label">
        <span className="phcity-name">{city}</span>
        <span className="phcity-count">{count} ofert</span>
      </span>
      <span className="phcity-arrow"><Icon size={28}>arrow_forward</Icon></span>
    </button>
  );
}

function AgentRow({ agent }) {
  return (
    <div className="phagent">
      {agent.rank != null && <span className={"phagent-rank" + (agent.rank <= 3 ? " phagent-rank-top" : "")}>{agent.rank}</span>}
      <span className="phagent-avatar"><img src={agent.avatar} alt="" /></span>
      <span className="phagent-id">
        <span className="phagent-name">{agent.name}</span>
        <span className="phagent-agency">{agent.agency}</span>
      </span>
      <span className="phagent-rating"><Icon size={20} fill={1} style={{ color: "var(--gold)" }}>star</Icon>{agent.rating}<span className="phagent-reviews">({agent.reviews})</span></span>
      <span className="phagent-coins"><Icon size={16}>paid</Icon>{agent.coins.toLocaleString("pl-PL")}</span>
    </div>
  );
}

function Header({ onNav, current, favCount = 0 }) {
  const links = [
    { id: "offers", label: "Kupuj" },
    { id: "sell", label: "Sprzedaj" },
    { id: "agents", label: "Dla agentów" },
    { id: "ranking", label: "Ranking" },
    { id: "rules", label: "Zasady" },
  ];
  return (
    <header className="phheader">
      <div className="phheader-in">
        <button className="phheader-logo" onClick={() => onNav("home")} aria-label="PrimeHouse — strona główna"><Wordmark /></button>
        <nav className="phheader-nav">
          {links.map((l) => (
            <button key={l.id} className={"phnav-link" + (current === l.id ? " phnav-link-active" : "")} onClick={() => onNav(l.id)}>{l.label}</button>
          ))}
        </nav>
        <div className="phheader-actions">
          <IconButton label="Ulubione" variant="ghost"><Icon>favorite</Icon></IconButton>
          <button className="phnav-link" onClick={() => onNav("login")}>Zaloguj</button>
          <Button size="md" variant="primary" iconRight="arrow_forward" onClick={() => onNav("login")}>Załóż konto</Button>
        </div>
      </div>
    </header>
  );
}

function Footer({ onNav }) {
  const cols = [
    { h: "Dla agenta", items: ["Dla agentów", "Cennik", "PrimeCoins", "Ranking", "Dobre praktyki"] },
    { h: "Dla kupujących", items: ["Zasady PrimeHouse", "Sprzedaj", "Kupuj", "Poradnik"] },
    { h: "Kontakt", items: ["Obsługa klienta", "Obsługa agenta", "kontakt@primehouse.pl"] },
  ];
  return (
    <footer className="phfooter">
      <div className="phfooter-in">
        <div className="phfooter-brand">
          <Wordmark color="var(--white)" houseColor="var(--sand-300)" size={30} />
          <p>Transparentny rynek nieruchomości. Bez ukrytych kosztów, bez prowizji od kupującego.</p>
          <div className="phfooter-social">
            <IconButton label="Facebook" variant="ghostdark"><Icon>thumb_up</Icon></IconButton>
            <IconButton label="Instagram" variant="ghostdark"><Icon>photo_camera</Icon></IconButton>
            <IconButton label="E-mail" variant="ghostdark"><Icon>mail</Icon></IconButton>
          </div>
        </div>
        {cols.map((c) => (
          <div key={c.h} className="phfooter-col">
            <h4>{c.h}</h4>
            {c.items.map((it) => <button key={it} onClick={() => onNav("offers")}>{it}</button>)}
          </div>
        ))}
      </div>
      <div className="phfooter-base"><Wordmark color="rgba(255,255,255,0.5)" size={16} /><span>© 2026 PrimeHouse. Wszelkie prawa zastrzeżone.</span></div>
    </footer>
  );
}

Object.assign(window, { Icon, Wordmark, Button, IconButton, Badge, Tabs, OfferCard, CityTile, AgentRow, Header, Footer });