// Trend Home — complex browser + floor + unit selector

// ─────────────────────────────────────────────────────────────────
// COMPLEX BROWSER — three editorial cards, hoverable, click to focus
// ─────────────────────────────────────────────────────────────────
function ComplexBrowser({ activeId, onSelect }) {
  return (
    <section className="th-section" id="komplekset">
      <header className="th-section__head">
        <div className="th-eyebrow"><span className="th-dot" /> Komplekset</div>
        <h2 className="th-h2">Tre adresa, një filozofi.</h2>
        <p className="th-section__lede">
          Çdo kompleks ndërtohet me të njëjtën përkushtim ndaj cilësisë,
          por me një karakter që i përshtatet lagjes dhe njerëzve që do të jetojnë aty.
        </p>
      </header>

      <div className="th-complex-grid">
        {TH_COMPLEXES.map((c, i) => {
          const active = c.id === activeId;
          return (
            <article
              key={c.id}
              className={`th-complex ${active ? 'th-complex--active' : ''}`}
              onClick={() => onSelect(c.id)}
              style={{ animationDelay: `${i * 80}ms` }}
            >
              <div className="th-complex__media">
                <img src={c.heroImg} alt={c.name} />
                <div className="th-complex__status">{c.status}</div>
              </div>
              <div className="th-complex__body">
                <div className="th-complex__loc">{c.location}</div>
                <h3 className="th-complex__name">{c.name}</h3>
                <p className="th-complex__tag">{c.tagline}</p>
                <dl className="th-complex__stats">
                  <div><dt>Banesa</dt><dd>{c.units}</dd></div>
                  <div><dt>Kate</dt><dd>{c.floors}</dd></div>
                  <div><dt>Dorëzim</dt><dd>{c.delivery}</dd></div>
                </dl>
                <div className="th-complex__cta">
                  {active ? 'I zgjedhur ↓' : 'Zgjidh kompleksin'}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </div>
              </div>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// BUILDING ELEVATION — interactive SVG of the building with floors
// Click a floor to filter the unit grid below
// ─────────────────────────────────────────────────────────────────
function BuildingElevation({ floors, activeFloor, onPickFloor, hoveredFloor, setHoveredFloor }) {
  // floors come highest-first; reverse for drawing
  const drawn = [...floors].slice().reverse(); // bottom→top

  // Building dims
  const W = 320;
  const FLOOR_H = 38;
  const TOP = 80; // roof
  const FOUNDATION = 18;
  const totalH = TOP + drawn.length * FLOOR_H + FOUNDATION;
  const buildingX = 60;
  const buildingW = W - 100;

  return (
    <div className="th-elev">
      <div className="th-elev__caption">
        <span className="th-eyebrow"><span className="th-dot" /> Kulla 2B</span>
        <h4>Zgjidh katin</h4>
        <p>Kalo me kursor mbi kulla për të parë statusin. Kliko për të filtruar njësitë.</p>
      </div>
      <svg viewBox={`0 0 ${W} ${totalH}`} className="th-elev__svg">
        {/* Sky gradient */}
        <defs>
          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--th-sky-1)" />
            <stop offset="100%" stopColor="var(--th-sky-2)" />
          </linearGradient>
          <linearGradient id="ground" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="var(--th-sand)" />
            <stop offset="100%" stopColor="var(--th-cream)" />
          </linearGradient>
        </defs>
        <rect x="0" y="0" width={W} height={totalH - FOUNDATION} fill="url(#sky)" />
        <rect x="0" y={totalH - FOUNDATION} width={W} height={FOUNDATION} fill="url(#ground)" />

        {/* Mountains silhouette */}
        <path d={`M0 ${TOP + 10} L40 ${TOP - 20} L80 ${TOP + 5} L130 ${TOP - 30} L180 ${TOP - 5} L240 ${TOP - 25} L300 ${TOP + 0} L${W} ${TOP + 10} L${W} ${TOP + 30} L0 ${TOP + 30} Z`}
          fill="var(--th-ink)" opacity="0.08" />

        {/* Roof */}
        <rect x={buildingX - 6} y={TOP - 10} width={buildingW + 12} height="10" fill="var(--th-ink)" opacity="0.85" rx="1" />
        {/* Sides shadow */}
        <rect x={buildingX} y={TOP} width={buildingW} height={drawn.length * FLOOR_H} fill="var(--th-ink)" opacity="0.04" />

        {/* Floors */}
        {drawn.map((f, i) => {
          const y = TOP + (drawn.length - 1 - i) * FLOOR_H;
          const available = f.units.filter((u) => u.status === 'available').length;
          const reserved = f.units.filter((u) => u.status === 'reserved').length;
          const total = f.units.length;
          const sold = total - available - reserved;
          const isActive = activeFloor === f.n;
          const isHover = hoveredFloor === f.n;

          // status color
          let fill = 'var(--th-floor-sold)';
          if (available > 0) fill = 'var(--th-floor-available)';
          else if (reserved > 0) fill = 'var(--th-floor-reserved)';
          if (isActive) fill = 'var(--th-teal)';

          return (
            <g key={f.n}
              onMouseEnter={() => setHoveredFloor(f.n)}
              onMouseLeave={() => setHoveredFloor(null)}
              onClick={() => onPickFloor(f.n)}
              style={{ cursor: 'pointer' }}
            >
              <rect x={buildingX} y={y} width={buildingW} height={FLOOR_H - 2}
                fill={fill}
                stroke="var(--th-ink)" strokeOpacity={isActive || isHover ? 0.5 : 0.18}
                strokeWidth={isActive ? 1.5 : 0.5}
                style={{ transition: 'all .25s ease' }}
              />
              {/* Windows */}
              {Array.from({ length: total }).map((_, wi) => {
                const ww = (buildingW - 18) / total;
                const wx = buildingX + 9 + wi * ww;
                const u = f.units[wi];
                const wfill = u.status === 'available' ? 'var(--th-window-on)'
                  : u.status === 'reserved' ? 'var(--th-window-warn)'
                  : 'var(--th-window-off)';
                return (
                  <g key={wi}>
                    <rect x={wx + 4} y={y + 6} width={ww - 8} height={FLOOR_H - 14}
                      fill={wfill} opacity={isActive ? 1 : 0.85} rx="1" />
                    <line x1={wx + 4} y1={y + (FLOOR_H - 14) / 2 + 6} x2={wx + ww - 4} y2={y + (FLOOR_H - 14) / 2 + 6}
                      stroke="var(--th-ink)" strokeOpacity="0.25" strokeWidth="0.5" />
                    <line x1={wx + ww / 2} y1={y + 6} x2={wx + ww / 2} y2={y + FLOOR_H - 8}
                      stroke="var(--th-ink)" strokeOpacity="0.25" strokeWidth="0.5" />
                  </g>
                );
              })}

              {/* Floor label outside */}
              <text x={buildingX - 10} y={y + FLOOR_H / 2 + 1}
                textAnchor="end" dominantBaseline="middle"
                fontFamily="var(--th-sans)" fontSize="9" fontWeight="600"
                fill={isActive || isHover ? 'var(--th-ink)' : 'var(--th-ink-soft)'}
              >
                {f.n === 0 ? 'PD' : f.n}
              </text>
              {/* Availability tag right side */}
              <text x={buildingX + buildingW + 8} y={y + FLOOR_H / 2 + 1}
                dominantBaseline="middle"
                fontFamily="var(--th-sans)" fontSize="8"
                fill={available > 0 ? 'var(--th-teal)' : 'var(--th-ink-soft)'}
                fontWeight={available > 0 ? '600' : '400'}
              >
                {available > 0 ? `${available} të lira` : 'Shitur'}
              </text>
            </g>
          );
        })}

        {/* Foundation line */}
        <line x1="0" y1={totalH - FOUNDATION} x2={W} y2={totalH - FOUNDATION}
          stroke="var(--th-ink)" strokeOpacity="0.3" strokeWidth="0.5" strokeDasharray="2 2" />
      </svg>

      <div className="th-elev__legend">
        <div><span className="th-swatch" style={{ background: 'var(--th-floor-available)' }} /> Të lira</div>
        <div><span className="th-swatch" style={{ background: 'var(--th-floor-reserved)' }} /> Të rezervuara</div>
        <div><span className="th-swatch" style={{ background: 'var(--th-floor-sold)' }} /> Shitur</div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// UNIT GRID for the active floor
// ─────────────────────────────────────────────────────────────────
function UnitGrid({ floor, onSelectUnit, selectedUnitId }) {
  if (!floor) return null;
  return (
    <div className="th-units">
      <div className="th-units__head">
        <div>
          <span className="th-eyebrow"><span className="th-dot" /> {floor.label}</span>
          <h4>{floor.units.length} njësi në këtë kat</h4>
        </div>
        <div className="th-units__filter">
          {['Të gjitha', '2+1', '3+1'].map((f) => (
            <button key={f} className={`th-pill ${f === 'Të gjitha' ? 'th-pill--active' : ''}`}>{f}</button>
          ))}
        </div>
      </div>
      <div className="th-units__list">
        {floor.units.map((u, i) => (
          <button
            key={u.id}
            className={`th-unit th-unit--${u.status} ${selectedUnitId === u.id ? 'th-unit--selected' : ''}`}
            disabled={u.status !== 'available'}
            onClick={() => u.status === 'available' && onSelectUnit(u)}
            style={{ animationDelay: `${i * 40}ms` }}
          >
            <div className="th-unit__top">
              <span className="th-unit__id">{u.id}</span>
              <span className={`th-unit__badge th-unit__badge--${u.status}`}>
                {u.status === 'available' ? 'E lirë' : u.status === 'reserved' ? 'Rezervuar' : 'Shitur'}
              </span>
            </div>
            <div className="th-unit__type">{u.type}</div>
            <div className="th-unit__m2">{fmtM2(u.m2)}</div>
            <div className="th-unit__meta">
              <span>{u.bedrooms} dh.</span>
              <span>{u.baths} ba.</span>
              <span>{u.balconies} ter.</span>
            </div>
            <div className="th-unit__price">
              {u.status === 'available' ? fmtEUR(u.price) : <span className="th-unit__priceMuted">{fmtEUR(u.price)}</span>}
            </div>
            {u.status === 'available' && (
              <div className="th-unit__cta">
                Shih detajet
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </div>
            )}
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ComplexBrowser, BuildingElevation, UnitGrid });