(() => {
const { Button, Icon, SectionHeader, Card, Photo, PriceBlock, SpecRow, Tag, Badge, Breadcrumb, UnitCard } = window.RespectorGroupDesignSystem_21eac1;
const D = window.RGDATA;

const eur = n => "€ " + Math.round(n).toLocaleString("de-DE");
const m2 = n => String(n).replace(".", ",") + " м²";
const STATUS = { free: "Свободна", held: "Забронирована", sold: "Продана" };

/* Открыть квартиру: запоминаем дом и код, страница читает их при рендере. */
window.RGOpenUnit = (go, projectId, code) => { window.RGSel = { projectId, code }; go("apartment", projectId); };

function ApartmentPage({ go, projectId }) {
  const [sel, setSel] = React.useState(window.RGSel || {});
  const P = D.projects || [];
  const p = P.find(x => x.id === (sel.projectId || projectId)) || P.find(x => x.freeCount > 0) || P[0];
  const list = p.units || [];
  const found = sel.code && list.find(x => x.code === sel.code || x.code.split(" ")[0] === sel.code);
  const up = D.unitPage;
  const rich = up && up.project === p.name && (!found || found.code === up.code);
  const u = rich ? up : (() => { const x = found || list.find(y => y.status === "free") || list[0] || {};
    return { code: x.code, type: x.type, floor: x.floor, project: p.name, location: p.name + " · " + p.location, price: x.price, perM2: x.perM2, status: x.status || "free",
      /* Планировка — только загруженная планировка; фото не подставляем вместо неё. Интерьеры — без повторов и без планировки. */
      plan: x.plan || null, image: x.image || null, area: x.area,
      gallery: Array.from(new Set((x.gallery && x.gallery.length ? x.gallery : (x.image ? [x.image] : [])).filter(Boolean))).filter(g => g !== x.plan),
      specs: [["Общая площадь", x.area != null ? m2(x.area) : "—"], ...(x.extras || []).map(e => ["Дополнительно", e]), ["Этаж", x.floor], ...(x.perM2 ? [["Цена за м²", eur(x.perM2)]] : []), ...((p.specs || {}).stage ? [["Этап", p.specs.stage]] : [])],
      tags: x.extras || [] }; })();
  const open = code => { window.RGSel = { projectId: p.id, code }; setSel(window.RGSel); try { history.replaceState(null, "", window.RGLink("apartment", p.id, code)); } catch (e) {} window.scrollTo(0, 0); };
  const [shot, setShot] = React.useState(0);
  React.useEffect(() => setShot(0), [u.code]);
  const others = list.filter(x => x.status === "free" && x.code !== u.code).slice(0, 4);
  return (
    <>
      <div className="rg-container" style={{ paddingBlock: "var(--space-6)" }}>
        <Breadcrumb items={[
          { label: "Проекты", href: "#", onClick: e => { e.preventDefault(); go("projects"); } },
          { label: u.project, href: "#", onClick: e => { e.preventDefault(); go("project", p.id); } },
          { label: u.code }]} />
      </div>

      <section className="rg-container rg-split rg-split--wide">
        <div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "var(--space-6)", flexWrap: "wrap" }}>
            <div>
              <span className="rg-eyebrow">Код квартиры</span>
              <h1 className="rg-unitcode" style={{ marginTop: "var(--space-2)" }}>{u.code}</h1>
            </div>
            {window.RGShareBar && <window.RGShareBar kind="unit" p={p} u={u} size="sm" />}
          </div>
          <div style={{ display: "flex", gap: "var(--space-3)", alignItems: "center", flexWrap: "wrap", marginTop: "var(--space-5)" }}>
            <Badge status={u.status} dot>{STATUS[u.status]}</Badge>
            <span style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h4)", fontWeight: "var(--fw-semibold)", color: "var(--text-strong)" }}>{u.type}{u.floor ? " · " + u.floor : ""}</span>
          </div>
          <p style={{ marginTop: "var(--space-2)", fontSize: "var(--fs-body-sm)", color: "var(--text-muted)" }}>{u.location}{window.RGSeaM(p) != null ? " · " + window.RGSeaLabel(window.RGSeaM(p)) : ""}</p>
          {u.plan ? <>
            <Photo src={u.plan} alt={"Планировка " + u.code} ratio="16/10" style={{ marginTop: "var(--space-8)", background: "var(--stone-000)" }} />
            <p style={{ marginTop: "var(--space-3)", fontSize: "var(--fs-caption)", color: "var(--text-muted)", fontStyle: "italic" }}>{"Планировка · " + (rich ? "78,2 м²" : m2(u.area)) + " общей площади"}</p>
          </> : <p style={{ marginTop: "var(--space-8)", fontSize: "var(--fs-body-sm)", color: "var(--text-muted)" }}>Планировка появится позже</p>}

          {!!u.gallery.length && <div style={{ marginTop: "var(--space-10)" }}>
            <span className="rg-eyebrow">Фото · {u.gallery.length}</span>
            <Photo src={u.gallery[shot]} alt="Интерьер" ratio="16/9" count={(shot + 1) + " / " + u.gallery.length} style={{ marginTop: "var(--space-4)" }} />
            <div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-3)" }}>
              {u.gallery.length > 1 && u.gallery.map((g, i) => (
                <button key={g} onClick={() => setShot(i)} style={{ flex: 1, padding: 0, border: i === shot ? "2px solid var(--navy-700)" : "1px solid var(--border-hairline)", background: "none", cursor: "pointer", borderRadius: "var(--radius-sm)", overflow: "hidden" }}>
                  <Photo src={g} ratio="4/3" radius="0" />
                </button>
              ))}
            </div>
          </div>}
        </div>

        <div className="rg-side">
          <Card pad style={{ padding: "var(--card-pad-lg)" }}>
            {u.status === "sold" ? <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>Продана</div>
              : u.price != null ? <PriceBlock value={u.price} size="lg" /> : <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>Цена по запросу</div>}
            <div style={{ marginTop: "var(--space-5)" }}>
              {u.specs.map(([k, v]) => <SpecRow key={k} label={k} value={v} />)}
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-2)", marginTop: "var(--space-5)" }}>
              {u.tags.map(t => <Tag key={t}>{t}</Tag>)}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", marginTop: "var(--space-6)" }}>
              {u.status === "sold"
                ? <><p style={{ fontSize: "var(--fs-body-sm)", color: "var(--text-muted)" }}>Квартира продана и показана как пример нашей работы.</p>
                   <Button full size="lg" onClick={() => go("projects")}>Подобрать похожую</Button></>
                : <Button full size="lg">{u.status === "held" ? "Встать в лист ожидания" : "Записаться на просмотр"}</Button>}
              <Button full variant="ghost" onClick={() => go("config")}>Рассчитать отделку</Button>
            </div>
          </Card>
        </div>
      </section>

      {!!others.length && <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
        <SectionHeader eyebrow="Свободно в этом доме" title={"Другие квартиры " + p.name}
          action={<Button variant="secondary" size="sm" onClick={() => go("project", p.id)}>Вся шахматка</Button>} />
        <div className="rg-g4">
          {others.map(x => <UnitCard key={x.code} {...x} perM2={undefined} href="#" onClick={e => { e.preventDefault(); open(x.code); }} />)}
        </div>
      </section>}
    </>
  );
}
window.ApartmentPage = ApartmentPage;
})();