// PrimeHouse — Offer print sheet (A4, multipage). Data: window.OFFER.
// Icons: inline SVG set (offer-icons.jsx → window.PhIcon) — print/PDF-safe,
// unlike the font-based bundle Icon which falls back to ligature text in export.
const Icon = window.PhIcon;

/* ---- Shared page chrome ------------------------------------------------ */
// Clean "PrimeHouse" wordmark — Prime (700) + House (500). No icon lockup.
function Brandmark({ onDark, size }) {
  return (
    <span className={"opx-brand" + (onDark ? " opx-brand--ondark" : "") + (size === "lg" ? " opx-brand--lg" : "")}>
      <span className="opx-brand-word">Prime<span>House</span></span>
    </span>
  );
}

function RunningHeader({ o }) {
  return (
    <header className="opx-rhead">
      <Brandmark />
      <span className="opx-rhead-meta">
        <span className="opx-chip">{o.status}</span>
        <span>Nr oferty {o.ref}</span>
      </span>
    </header>
  );
}

function RunningFooter({ o, page, total }) {
  return (
    <footer className="opx-rfoot">
      <span>{o.site}</span>
      <span className="opx-rfoot-dot" aria-hidden="true">·</span>
      <span>Oferta {o.ref}</span>
      <span className="opx-rfoot-spacer" />
      <span>Strona {page} / {total}</span>
    </footer>
  );
}

function Page({ children, className }) {
  return <section className={"opx-page" + (className ? " " + className : "")} data-screen-label={className}>{children}</section>;
}

/* ---- Page 1 — Cover + atuty ------------------------------------------- */
function CoverPage({ o }) {
  return (
    <Page className="opx-cover">
      <div className="opx-cover-photo">
        <img src={o.gallery[0].src} alt="" />
        <div className="opx-cover-scrim" />
        <div className="opx-cover-top">
          <Brandmark onDark size="lg" />
          <span className="opx-cover-ref">Nr oferty {o.ref}</span>
        </div>
        <div className="opx-cover-headline">
          <span className="opx-cover-status">{o.status}</span>
          <h1>{o.title}</h1>
          <p className="opx-cover-addr">
            <Icon size={20}>location_on</Icon>{o.addressLine}
          </p>
        </div>
      </div>

      <div className="opx-cover-body">
        <div className="opx-cover-bar">
          <div className="opx-price">
            <span className="opx-price-label">Cena</span>
            <span className="opx-price-value">{o.price} <span className="opx-price-cur">{o.currency}</span></span>
            <span className="opx-price-sub">{o.pricePerM2}</span>
          </div>
          <div className="opx-keystats">
            {o.keyStats.map((s) => (
              <div className="opx-keystat" key={s.label}>
                <Icon size={24} style={{ color: "var(--accent-text)" }}>{s.icon}</Icon>
                <span className="opx-keystat-val">{s.value}</span>
                <span className="opx-keystat-lab">{s.label}</span>
              </div>
            ))}
          </div>
        </div>

        <p className="opx-cover-lead">{o.lead}</p>

        <div className="opx-cover-atuty">
          <h3 className="opx-h3">Najważniejsze atuty</h3>
          <ul className="opx-checks opx-checks--2col">
            {o.highlights.map((h, i) => (
              <li key={i}>{h}</li>
            ))}
          </ul>
        </div>
      </div>
      <RunningFooter o={o} page={1} total={4} />
    </Page>
  );
}

/* ---- Page 2 — Opis, parametry, lokalizacja ---------------------------- */
function DetailsPage({ o }) {
  return (
    <Page className="opx-details">
      <RunningHeader o={o} />
      <h2 className="opx-h2">Szczegóły nieruchomości</h2>
      <div className="opx-details-grid">
        <div className="opx-desc">
          {o.description.map((p, i) => (
            <p className="opx-desc-p" key={i}>{p}</p>
          ))}
          <h3 className="opx-h3 opx-h3--mt">Lokalizacja i okolica</h3>
          <ul className="opx-nearby">
            {o.nearby.map((n) => (
              <li key={n.label}>
                <Icon size={20} style={{ color: "var(--accent-text)" }}>{n.icon}</Icon>
                <span className="opx-nearby-lab">{n.label}</span>
                <span className="opx-nearby-dist">{n.dist}</span>
              </li>
            ))}
          </ul>
        </div>
        <aside className="opx-specs">
          {o.specGroups.map((g) => (
            <div className="opx-specgroup" key={g.title}>
              <h3 className="opx-specgroup-title">{g.title}</h3>
              <dl className="opx-spectable">
                {g.rows.map(([k, v]) => (
                  <div className="opx-specrow" key={k}>
                    <dt>{k}</dt><dd>{v}</dd>
                  </div>
                ))}
              </dl>
            </div>
          ))}
        </aside>
      </div>
      <RunningFooter o={o} page={2} total={4} />
    </Page>
  );
}

/* ---- Floor plan schematic (illustrative) ------------------------------ */
function FloorPlanSchematic() {
  const W = 6, P = 3;
  const T = (x, y, name, area) => (
    <g key={name}>
      <text x={x} y={y} className="opx-fp-name" textAnchor="middle">{name}</text>
      <text x={x} y={y + 20} className="opx-fp-area" textAnchor="middle">{area}</text>
    </g>
  );
  return (
    <svg viewBox="0 0 660 460" className="opx-fp-svg" role="img" aria-label="Schematyczny rzut mieszkania">
      <rect x="34" y="232" width="56" height="150" className="opx-fp-balcony" />
      <rect x="90" y="20" width="558" height="420" fill="none" stroke="var(--ink)" strokeWidth={W} />
      <line x1="378" y1="20" x2="378" y2="440" stroke="var(--ink)" strokeWidth={P} />
      <line x1="378" y1="180" x2="648" y2="180" stroke="var(--ink)" strokeWidth={P} />
      <line x1="378" y1="300" x2="648" y2="300" stroke="var(--ink)" strokeWidth={P} />
      <line x1="516" y1="180" x2="516" y2="440" stroke="var(--ink)" strokeWidth={P} />
      <rect x="372" y="92" width="12" height="46" fill="var(--white)" />
      <rect x="372" y="220" width="12" height="40" fill="var(--white)" />
      <rect x="510" y="220" width="12" height="36" fill="var(--white)" />
      <rect x="510" y="344" width="12" height="36" fill="var(--white)" />
      <rect x="84" y="290" width="12" height="40" fill="var(--white)" />
      {T(234, 215, "Salon z aneksem", "40,0 m²")}
      {T(57, 312, "Balkon", "4,5 m²")}
      {T(513, 96, "Sypialnia", "14,5 m²")}
      {T(447, 244, "Pokój", "11,0 m²")}
      {T(582, 236, "Łazienka", "5,5 m²")}
      {T(447, 366, "Przedpokój", "9,0 m²")}
      {T(582, 366, "WC", "3,5 m²")}
    </svg>
  );
}

/* ---- Page 3 — Rzut + dodatki ------------------------------------------ */
function FloorPlanPage({ o }) {
  return (
    <Page className="opx-floor">
      <RunningHeader o={o} />
      <h2 className="opx-h2">Rzut nieruchomości</h2>
      <p className="opx-sub">Rozkład pomieszczeń — rzut poglądowy.</p>
      <div className="opx-fp-frame">
        <FloorPlanSchematic />
        <span className="opx-fp-tag">Rzut poglądowy · nie stanowi dokumentacji technicznej</span>
      </div>
      <div className="opx-floor-cols">
        <aside className="opx-fp-legend">
          <h3 className="opx-h3">Zestawienie powierzchni</h3>
          <ul className="opx-roomlist">
            {o.rooms.map((r) => (
              <li key={r.name}><span className="opx-room-name">{r.name}</span><span className="opx-room-dots" aria-hidden="true" /><span className="opx-room-area">{r.area}</span></li>
            ))}
          </ul>
          <div className="opx-fp-total">
            <span>Powierzchnia całkowita</span><strong>88,0 m²</strong>
          </div>
        </aside>

        <div className="opx-floor-extras">
          <h3 className="opx-h3">Dodatkowo do zakupu</h3>
          <ul className="opx-extras">
            {o.extras.map((e) => (
              <li key={e.name}>
                <Icon size={20} style={{ color: "var(--accent-text)" }}>add_circle</Icon>
                <span className="opx-extras-name">{e.name}</span>
                <span className="opx-extras-dots" aria-hidden="true" />
                <strong>{e.price}</strong>
              </li>
            ))}
          </ul>
          <p className="opx-floor-note">
            <Icon size={18} style={{ color: "var(--accent-text)" }}>info</Icon>
            Pełna dokumentacja techniczna oraz wymiary pomieszczeń dostępne u agenta prowadzącego.
          </p>
        </div>
      </div>
      <RunningFooter o={o} page={3} total={4} />
    </Page>
  );
}

/* ---- Page 4 — Galeria + agent ----------------------------------------- */
function GalleryAgentPage({ o }) {
  return (
    <Page className="opx-final">
      <RunningHeader o={o} />
      <h2 className="opx-h2">Galeria</h2>
      <div className="opx-gallery">
        {o.gallery.map((g, i) => (
          <figure className="opx-gfig" key={i}>
            <img src={g.src} alt={g.caption} />
            <figcaption>{g.caption}</figcaption>
          </figure>
        ))}
      </div>

      <aside className="opx-agentcard">
        <img className="opx-agent-photo" src={o.agent.photo} alt={o.agent.name} />
        <div className="opx-agent-body">
          <span className="opx-agent-role">{o.agent.role}</span>
          <span className="opx-agent-name">{o.agent.name}</span>
          <span className="opx-agent-lic">{o.agent.license}</span>
          <div className="opx-agent-cta">
            Umów prezentację — zadzwoń lub napisz. Jako kupujący nie płacisz prowizji.
          </div>
        </div>
        <div className="opx-agent-contacts">
          <span><Icon size={18} style={{ color: "var(--accent-text)" }}>call</Icon>{o.agent.phone}</span>
          <span><Icon size={18} style={{ color: "var(--accent-text)" }}>mail</Icon>{o.agent.email}</span>
          <span><Icon size={18} style={{ color: "var(--accent-text)" }}>language</Icon>{o.site}</span>
        </div>
      </aside>

      <div className="opx-endbar">
        <Brandmark onDark />
        <span className="opx-endbar-url">{o.site}</span>
      </div>
      <RunningFooter o={o} page={4} total={4} />
    </Page>
  );
}

function OfferSheet() {
  const o = window.OFFER;
  return (
    <div className="opx-doc">
      <CoverPage o={o} />
      <DetailsPage o={o} />
      <FloorPlanPage o={o} />
      <GalleryAgentPage o={o} />
    </div>
  );
}

Object.assign(window, { OfferSheet });