(() => {
const { SiteHeader, Button, Icon, SectionHeader, Card, Photo, PriceBlock, SpecRow, UnitCard, UnitChessboard, FilterTabs, Badge, Breadcrumb, Tag, PhotoCarousel } = window.RespectorGroupDesignSystem_21eac1;
const D = window.RGDATA;
const Carousel = PhotoCarousel || (({ images = [], alt, height, scrim, radius }) => <Photo src={images[0]} alt={alt} scrim={scrim} style={{ height, borderRadius: radius ?? 0 }} />);

/* Характеристики дома — из таблицы объектов (редактируются в админке). */
function ProjectSpecs({ specs, sea }) {
  if (!specs && sea == null) return null;
  specs = specs || {};
  const rows = [["До моря", sea != null && window.RGSeaLabel(sea).replace(" до моря", "")], ["Площадь застройки", specs.buildArea && String(specs.buildArea).replace(".", ",") + " м²"], ["Квартир в доме", specs.units], ["Этап", specs.stage], ["Продажи", specs.sales]].filter(r => r[1] != null && r[1] !== "" && r[1] !== false);
  return (
    <div style={{ marginTop: "var(--space-8)" }}>
      <div className="rg-eyebrow" style={{ marginBottom: "var(--space-3)" }}>Характеристики</div>
      {rows.map(([k, v]) => <SpecRow key={k} label={k} value={String(v)} />)}
    </div>
  );
}
window.ProjectSpecs = ProjectSpecs;

/* Точка дома на карте — под описанием на странице проекта. */
function RGProjectMap({ p }) {
  const { ProjectsMap } = window.RespectorGroupDesignSystem_21eac1;
  const c = p.coords ? [p.coords.lat, p.coords.lng] : (window.RGCoords || {})[p.id];
  if (!c || !ProjectsMap) return null;
  const st = window.RGPhaseSticker(p);
  const pt = { id: p.id, title: p.name, lat: c[0], lng: c[1], note: p.mapNote || p.location, image: p.image, phase: st,
    ...(p.freeCount ? { priceFrom: p.priceFrom, areaTo: p.areaTo, freeCount: p.freeCount, totalCount: p.totalCount } : { objects: st && st[1].toLowerCase() }) };
  return (
    <section className="rg-container" style={{ paddingBottom: "var(--section-y)" }}>
      <SectionHeader eyebrow="Расположение" title={p.mapNote || p.location} />
      <ProjectsMap points={[pt]} selectedId={p.id} key={p.id} center={c} zoom={16} height={560} dark={false} />
    </section>
  );
}
window.RGProjectMap = RGProjectMap;

const floorRank = l => /исогио|цокол/i.test(l) ? 0 : parseInt(l) || 0;
const toFloors = us => { const m = []; us.forEach(u => { let f = m.find(x => x.label === u.floor); if (!f) m.push(f = { label: u.floor, units: [] }); f.units.push({ id: u.code, area: u.area, status: u.status, hot: u.hot }); });
  return m.sort((a, b) => floorRank(b.label) - floorRank(a.label)); };

function ProjectDetail({ go, projectId }) {
  const P = D.projects || [];
  const p = P.find(x => x.id === projectId) || P.find(x => x.freeCount > 0) || P[0];
  const allUnits = p.units || [];
  const floors = toFloors(allUnits);
  const phase = window.RGPhase(p);
  const firstFree = (allUnits.find(u => u.status === "free") || allUnits[0] || {}).code;
  const [type, setType] = React.useState("all");
  const [sel, setSel] = React.useState(firstFree);
  const [peekId, setPeekId] = React.useState(null);
  const [asked, setAsked] = React.useState(false);
  React.useEffect(() => { setSel(firstFree); setPeekId(null); setType("all"); setAsked(false); }, [p.id]);
  const shownId = peekId || sel;
  const cell = floors.flatMap(f => f.units.map(u => ({ ...u, floor: f.label }))).find(u => u.id === shownId);
  const full = allUnits.find(u => u.code === shownId || u.code.split(" ")[0] === shownId);
  const peek = full || (cell && { code: cell.id, type: "Квартира", floor: cell.floor, area: cell.area, extras: [], price: null, perM2: null, status: cell.status, image: null, imageCount: null });
  const units = allUnits.filter(u => type === "all" || (type === "studio" ? u.type === "Студия" : u.type !== "Студия"));
  return (
    <>
      <section style={{ position: "relative", background: "var(--navy-900)" }}>
        <Carousel images={p.gallery || [p.image]} alt={p.name + " — фотографии дома"} height="clamp(380px, 40vw, 540px)" scrim thumbs={false} radius={0} />
        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "flex-end", pointerEvents: "none" }}>
          <div className="rg-container" style={{ width: "100%", paddingBottom: "var(--space-12)" }}>
            <span className="rg-eyebrow" style={{ color: "var(--gold-500)" }}>{phase === "soon" ? "Резиденция · скоро в продаже" : "Резиденция · выбор квартиры"}</span>
            <h1 style={{ marginTop: "var(--space-3)", fontSize: "var(--fs-display)", fontWeight: "var(--fw-black)", letterSpacing: "var(--ls-wordmark)", textTransform: "none", color: "#fff" }}>{p.name}</h1>
            <p style={{ marginTop: "var(--space-2)", color: "var(--navy-200)", fontSize: "var(--fs-body-sm)" }}>{p.location}</p>
            {!!(p.gallery || (p.image ? [p.image] : [])).length && <p style={{ marginTop: "var(--space-4)", color: "var(--navy-300)", fontSize: "var(--fs-caption)", letterSpacing: "var(--ls-eyebrow)", textTransform: "none" }}>Фотографии дома · {(p.gallery || [p.image]).length}</p>}
          </div>
        </div>
      </section>

      <div className="rg-container" style={{ paddingBlock: "var(--space-6)" }}>
        <Breadcrumb items={[{ label: "Проекты", href: "#", onClick: e => { e.preventDefault(); go("projects"); } }, { label: p.name }]} />
      </div>

      <section className="rg-container rg-split" style={{ paddingBottom: "var(--section-y)" }}>
        <div>
          <p style={{ fontSize: "var(--fs-body-lg)", lineHeight: "var(--lh-snug)", color: "var(--text-body)", maxWidth: "62ch" }}>{p.lead}</p>
          <ul className="rg-features">
            {(p.features || []).map(ft => (
              <li key={ft} style={{ display: "flex", gap: "var(--space-3)", fontSize: "var(--fs-body-sm)", color: "var(--text-body)" }}>
                <Icon name="check" size={16} color="var(--free-500)" />{ft}
              </li>
            ))}
          </ul>
          <ProjectSpecs specs={p.specs} sea={window.RGSeaM(p)} />
          <div id="rg-drone"><window.DroneVideo src={p.drone} title={p.name + " — видео с дрона"} /></div>
        </div>
        <Card pad style={{ padding: "var(--card-pad-lg)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "var(--space-4)" }}>
            {p.priceFrom != null ? <PriceBlock value={p.priceFrom} from size="lg" /> : <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>{phase === "soon" ? "Цены — к старту продаж" : "Цена по запросу"}</div>}
            <Badge status="navy">{p.status}</Badge>
          </div>
          <div style={{ display: "flex", gap: "var(--space-8)", marginTop: "var(--space-6)", paddingTop: "var(--space-5)", borderTop: "1px solid var(--border-hairline)" }}>
            <div><div className="rg-eyebrow">{phase === "soon" ? "квартир в доме" : "свободно"}</div><div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>{phase === "soon" ? p.totalCount : p.freeCount + " / " + p.totalCount}</div></div>
            {allUnits.some(u => u.status === "held") && <div><div className="rg-eyebrow">в брони</div><div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>{allUnits.filter(u => u.status === "held").length}</div></div>}
            {p.areaTo != null && <div><div className="rg-eyebrow">площадь до</div><div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h3)", color: "var(--navy-700)" }}>{String(p.areaTo).replace(".", ",")} м²</div></div>}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", marginTop: "var(--space-6)" }}>
            {phase === "soon"
              ? (asked ? <div style={{ display: "flex", gap: 8, alignItems: "center", color: "var(--text-strong)" }}><Icon name="check" size={18} />Сообщим первыми о старте продаж.</div>
                : <Button full onClick={() => setAsked(true)}>Узнать о старте продаж</Button>)
              : <Button full onClick={() => window.RGOpenUnit(go, p.id, shownId)}>{phase === "reserved" ? "Встать в лист ожидания" : "Записаться на просмотр"}</Button>}
            {p.drone && <Button variant="secondary" full icon={<Icon name="play" size={16} />} href="#rg-drone">Видеообход дома</Button>}
            {phase !== "soon" && <Button variant="ghost" full onClick={() => go("config")}>Рассчитать отделку</Button>}
          </div>
          {window.RGShareBar && <div style={{ marginTop: "var(--space-5)", paddingTop: "var(--space-5)", borderTop: "1px solid var(--border-hairline)" }}><window.RGShareBar kind="project" p={p} full size="sm" /></div>}
        </Card>
      </section>

      {window.RGProjectMap && <window.RGProjectMap p={p} />}

      {!allUnits.length ? (
      <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--section-y)" }}>
        <div className="rg-container" style={{ maxWidth: 760 }}>
          <SectionHeader eyebrow="Шахматка" title="Квартиры появятся к старту продаж"
            lead={"Дом на " + (p.totalCount || "несколько") + " квартир сейчас на этапе «" + ((p.specs || {}).stage || p.status) + "». Планировки, цены и шахматка откроются здесь, как только объект выйдет в продажу."} />
        </div>
      </section>
      ) : (<>
      <section style={{ background: "var(--surface-sunken)", paddingBlock: "var(--section-y)" }}>
        <div className="rg-container">
          <SectionHeader eyebrow="Шахматка" title="Выберите квартиру на плане дома"
            lead="Каждая клетка — реальная квартира с актуальным статусом. Откроется планировка, характеристики и цена из прайса." />
          <div className="rg-chessgrid">
            <div className="rg-unitpeek">
              {peek ? (
                <Card pad style={{ padding: 0, overflow: "hidden" }}>
                  <Photo key={peek.code} src={peek.image} images={peek.gallery && peek.gallery.length > 1 ? [peek.image, ...peek.gallery.filter(g => g !== peek.image)].filter(Boolean) : undefined} alt={peek.code} ratio="4/3" count={peek.imageCount} />
                  <div style={{ padding: "var(--card-pad)" }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "var(--space-3)" }}>
                      <div>
                        <div style={{ fontFamily: "var(--font-display)", fontSize: "var(--fs-h2)", fontWeight: "var(--fw-bold)", lineHeight: 1.05, color: "var(--navy-700)" }}>{peek.code}</div>
                        <div style={{ fontSize: "var(--fs-body-sm)", color: "var(--text-muted)" }}>{peek.type} · {peek.floor}</div>
                      </div>
                      <Badge status={peek.status} dot>{peek.status === "free" ? "Свободна" : peek.status === "held" ? "Забронирована" : "Продана"}</Badge>
                    </div>
                    <div className="rg-unitpeek__specs">
                      <SpecRow label="Площадь" value={String(peek.area).replace(".", ",") + " м²"} />
                      {peek.extras.map(e => <SpecRow key={e} label="Дополнительно" value={e} />)}
                    </div>
                    {peek.price != null ? <div style={{ marginTop: "var(--space-4)" }}><PriceBlock value={peek.price} size="md" /></div> : peek.status !== "sold" && <div style={{ marginTop: "var(--space-4)", fontFamily: "var(--font-display)", fontSize: "var(--fs-h4)", color: "var(--navy-700)" }}>Цена по запросу</div>}
                    <Button full style={{ marginTop: "var(--space-4)" }} variant={peek.status === "sold" ? "secondary" : undefined} onClick={() => window.RGOpenUnit(go, p.id, peek.code)}>Смотреть квартиру</Button>
                  </div>
                </Card>
              ) : (
                <div className="rg-unitpeek__empty">
                  <Icon name="mouse-pointer-2" size={20} color="var(--navy-300)" />
                  Наведите курсор на клетку — здесь появятся фото и характеристики квартиры.
                </div>
              )}
            </div>
            <Card pad style={{ padding: "var(--card-pad-lg)" }}>
              <UnitChessboard floors={floors} selectedId={sel} hoveredId={peekId} allowSold
                onHover={u => setPeekId(u ? u.id : null)}
                onSelect={u => { setSel(u.id); if (phase !== "soon") window.RGOpenUnit(go, p.id, u.id); }} />
            </Card>
          </div>
        </div>
      </section>

      <section className="rg-container" style={{ paddingBlock: "var(--section-y)" }}>
        <SectionHeader eyebrow={"Квартиры дома · " + p.totalCount} title="Все квартиры списком"
          action={<FilterTabs value={type} onChange={setType} items={[{ id: "all", label: "Все", count: allUnits.length }, { id: "studio", label: "Студия", count: allUnits.filter(u => u.type === "Студия").length }, { id: "mz", label: "Другие", count: allUnits.filter(u => u.type !== "Студия").length }]} />} />
        <div className="rg-g4">
          {units.map(u => <UnitCard key={u.code} {...u} perM2={undefined} href="#" onClick={e => { e.preventDefault(); if (phase !== "soon") window.RGOpenUnit(go, p.id, u.code); }} />)}
        </div>
      </section>
      </>)}
    </>
  );
}
window.ProjectDetail = ProjectDetail;
})();
