// screens-data.jsx — ULDK widget detail, RCN search modal, Budowniczy RCiWN

// ═══════════════════════════════════════════════════════════ ULDK WIDGET — detail
const ScreenULDK = () => (
  <div style={{ width: '100%', height: '100%', background: T.bg, fontFamily: T.sans, color: T.ink, padding: 40, display: 'flex', flexDirection: 'column', gap: 20 }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
      <div>
        <Caps style={{ marginBottom: 8 }}>Widget · ULDK GUGiK · stany</Caps>
        <div style={{ fontFamily: T.serif, fontSize: 22, letterSpacing: '-0.01em' }}>Pobieranie danych działki</div>
      </div>
      <span style={{ fontFamily: T.mono, fontSize: 11, color: T.ink3, letterSpacing: '0.04em' }}>GetParcelByXY · EPSG 2180 / 4326</span>
    </div>

    {/* States grid */}
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, flex: 1 }}>
      {/* Default */}
      <div style={{ border: `1px solid ${T.border}`, borderRadius: 6, background: T.surface, padding: 18 }}>
        <Caps style={{ marginBottom: 10 }}>01 · Domyślny</Caps>
        <div style={{ fontSize: 11.5, color: T.ink3, marginBottom: 6, fontFamily: T.sans }}>Adres nieruchomości</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 6 }}>
          <div style={{ height: 36, border: `1px solid ${T.border}`, background: T.surface, borderRadius: 3, padding: '0 12px', display: 'flex', alignItems: 'center', fontSize: 13, color: T.ink3 }}>Wpisz adres lub TERYT…</div>
          <Btn variant="ghost" size="sm" icon="down">Pobierz</Btn>
        </div>
      </div>

      {/* Loading */}
      <div style={{ border: `1px solid ${T.border}`, borderRadius: 6, background: T.surface, padding: 18 }}>
        <Caps style={{ marginBottom: 10 }}>02 · Ładowanie</Caps>
        <div style={{ fontSize: 11.5, color: T.ink3, marginBottom: 6 }}>Adres nieruchomości</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 6 }}>
          <div style={{ height: 36, border: `1px solid ${T.border}`, background: T.surface2, borderRadius: 3, padding: '0 12px', display: 'flex', alignItems: 'center', fontSize: 13, color: T.ink3 }}>ul. Klonowa 14, Stara Wieś</div>
          <Btn variant="primary" size="sm">
            <span style={{ width: 11, height: 11, borderRadius: '50%', border: '1.5px solid #fff', borderRightColor: 'transparent', animation: 'spin 0.8s linear infinite' }} />
            Pobieram…
          </Btn>
        </div>
        <div style={{ marginTop: 12, fontFamily: T.mono, fontSize: 10.5, color: T.ink4, letterSpacing: '0.04em', lineHeight: 1.6 }}>
          Nominatim → WGS84 → ULDK GetParcelByXY<br/>
          <span style={{ color: T.ink3 }}>oczekiwany czas: 200–600 ms</span>
        </div>
      </div>

      {/* Success */}
      <div style={{ border: `1px solid ${T.ok}`, borderRadius: 6, background: T.surface, padding: 0, overflow: 'hidden', gridColumn: '1 / -1' }}>
        <div style={{ padding: '12px 18px', background: 'rgba(21, 128, 61, 0.06)', borderBottom: `1px solid ${T.border}`, display: 'flex', alignItems: 'center', gap: 10 }}>
          <Caps style={{ color: T.ok }}>03 · Sukces</Caps>
          <div style={{ width: 1, height: 14, background: T.border, margin: '0 4px' }} />
          <div style={{ width: 18, height: 18, borderRadius: '50%', background: T.ok, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="check" size={11} color="#fff" stroke={2} />
          </div>
          <span style={{ fontSize: 13, color: T.ink, fontWeight: 500 }}>Dane działki pobrane automatycznie</span>
          <span style={{ marginLeft: 6, fontFamily: T.mono, fontSize: 11, color: T.ink3, letterSpacing: '0.04em' }}>240 ms</span>
          <div style={{ flex: 1 }} />
          <Btn variant="quiet" size="sm">Zmień adres</Btn>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 0 }}>
          <div style={{ padding: '6px 18px' }}>
            {[
              ['Nr działki', '127/3'],
              ['Powierzchnia', '3 247 m²'],
              ['Obręb', '0024 · Stara Wieś'],
              ['Gmina', 'Brzeg Dolny'],
              ['Powiat', 'wołowski'],
              ['Województwo', 'dolnośląskie'],
              ['TERYT', '022002_5.0024.127/3'],
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '150px 1fr 70px', alignItems: 'center', padding: '10px 0', borderTop: i ? `1px solid ${T.border}` : 'none' }}>
                <span style={{ fontSize: 12.5, color: T.ink3 }}>{r[0]}</span>
                <span style={{ fontFamily: T.mono, fontSize: 13, color: T.ink, letterSpacing: '0.02em' }}>{r[1]}</span>
                <Btn variant="quiet" size="sm">Edytuj</Btn>
              </div>
            ))}
          </div>
          <div style={{ borderLeft: `1px solid ${T.border}`, background: `repeating-linear-gradient(45deg, ${T.surface2}, ${T.surface2} 6px, ${T.surface} 6px, ${T.surface} 12px)`, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 200 }}>
            <svg viewBox="0 0 320 280" width="80%" height="80%">
              <polygon points="120,80 220,80 230,200 110,200" fill="rgba(15,23,42,0.06)" stroke={T.ink} strokeWidth="1.5" strokeDasharray="3 2" />
              <circle cx="170" cy="140" r="4" fill={T.ink} />
              <text x="170" y="130" textAnchor="middle" fontFamily={T.mono} fontSize="9" fill={T.ink}>127/3</text>
            </svg>
            <div style={{ position: 'absolute', bottom: 10, left: 12, fontFamily: T.mono, fontSize: 10, color: T.ink3, letterSpacing: '0.05em', background: T.surface, padding: '2px 6px', border: `1px solid ${T.border}`, borderRadius: 2 }}>ORTOFOTO podgląd · 1:1 000</div>
          </div>
        </div>
      </div>

      {/* Warn */}
      <div style={{ border: `1px solid ${T.warn}`, borderRadius: 6, background: T.surface, padding: 18 }}>
        <Caps style={{ marginBottom: 10, color: T.warn }}>04 · Brak wyników</Caps>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 6, marginBottom: 12 }}>
          <div style={{ height: 36, border: `1px solid ${T.warn}`, background: 'rgba(161, 98, 7, 0.04)', borderRadius: 3, padding: '0 12px', display: 'flex', alignItems: 'center', fontSize: 13, color: T.ink }}>Rumiankowa 47, Pcim Dolny</div>
          <Btn variant="ghost" size="sm" icon="down">Pobierz</Btn>
        </div>
        <div style={{ fontSize: 12.5, color: T.ink2, lineHeight: 1.55 }}>
          Nominatim nie znalazł adresu w&nbsp;Polsce. Spróbuj uściślić ulicę i&nbsp;miejscowość, albo <a style={{ color: T.ink, textDecoration: 'underline' }}>wpisz dane działki ręcznie</a>.
        </div>
      </div>

      {/* Error */}
      <div style={{ border: `1px solid ${T.bad}`, borderRadius: 6, background: T.surface, padding: 18 }}>
        <Caps style={{ marginBottom: 10, color: T.bad }}>05 · Błąd GUGiK</Caps>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 6, marginBottom: 12 }}>
          <div style={{ height: 36, border: `1px solid ${T.bad}`, background: 'rgba(153, 27, 27, 0.04)', borderRadius: 3, padding: '0 12px', display: 'flex', alignItems: 'center', fontSize: 13, color: T.ink }}>ul. Klonowa 14, Stara Wieś</div>
          <Btn variant="ghost" size="sm" icon="down">Spróbuj ponownie</Btn>
        </div>
        <div style={{ fontSize: 12.5, color: T.ink2, lineHeight: 1.55 }}>
          ULDK GUGiK nie odpowiada (HTTP&nbsp;503, timeout 6&nbsp;s). Dane wprowadź ręcznie&nbsp;— operat&nbsp;nie zostanie zablokowany.
        </div>
        <div style={{ marginTop: 10, fontFamily: T.mono, fontSize: 10.5, color: T.ink4, letterSpacing: '0.04em' }}>retry · exponential 1s / 2s / 4s · max 3</div>
      </div>
    </div>

    <style>{`
      @keyframes spin { to { transform: rotate(360deg); } }
      @keyframes blink { 50% { opacity: 0; } }
    `}</style>
  </div>
);

// ═══════════════════════════════════════════════════════════ RCN SEARCH MODAL
const ScreenRCN = () => (
  <div style={{ width: '100%', height: '100%', background: T.bg, position: 'relative', fontFamily: T.sans, color: T.ink, overflow: 'hidden' }}>
    {/* Dimmed kompozytor background */}
    <div style={{ position: 'absolute', inset: 0, opacity: 0.35, filter: 'grayscale(40%)' }}>
      <AppShell breadcrumbs={['Operaty', '2026‑0142', 'Kompozytor']} activeNav="operaty">
        <div style={{ padding: 40 }}>
          <div style={{ height: 24, background: T.surface2, width: 180, borderRadius: 2, marginBottom: 12 }} />
          <div style={{ height: 320, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 4 }} />
        </div>
      </AppShell>
    </div>

    {/* Dim overlay */}
    <div style={{ position: 'absolute', inset: 0, background: 'rgba(15, 23, 42, 0.42)' }} />

    {/* Modal */}
    <div style={{ position: 'absolute', inset: '40px 56px', background: T.surface, border: `1px solid ${T.borderStrong}`, borderRadius: 8, boxShadow: '0 24px 80px rgba(15,23,42,0.18)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Modal head */}
      <div style={{ padding: '18px 24px', borderBottom: `1px solid ${T.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Caps style={{ marginBottom: 6 }}>§ 4 · Transakcje porównawcze · RCN GUGiK</Caps>
          <div style={{ fontFamily: T.serif, fontSize: 22, letterSpacing: '-0.015em' }}>Wyszukaj transakcje w&nbsp;okolicy</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <Pill tone="ok">RCN WMS · 142 ms</Pill>
          <Icon name="x" size={18} color={T.ink2} />
        </div>
      </div>

      {/* Body */}
      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '300px 1fr', overflow: 'hidden' }}>
        {/* Filters */}
        <div style={{ borderRight: `1px solid ${T.border}`, padding: 22, overflow: 'auto', background: T.surface3 }}>
          <Caps style={{ marginBottom: 14 }}>Filtry</Caps>
          {[
            ['Promień', '1 km'],
            ['Typ', 'Grunty zabudowane'],
            ['Rynek', 'Wszystkie'],
            ['Data od', '2020'],
            ['Data do', '2026'],
          ].map((f, i) => (
            <div key={i} style={{ marginBottom: 12 }}>
              <div style={{ fontSize: 11.5, color: T.ink3, marginBottom: 4 }}>{f[0]}</div>
              <div style={{ height: 34, border: `1px solid ${T.border}`, background: T.surface, borderRadius: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 12px', fontSize: 13 }}>
                <span>{f[1]}</span>
                <Icon name="chevD" size={12} color={T.ink3} />
              </div>
            </div>
          ))}
          <Btn variant="ghost" size="sm" style={{ width: '100%', marginTop: 6 }}>Szukaj ponownie</Btn>

          <div style={{ marginTop: 28, paddingTop: 18, borderTop: `1px solid ${T.border}` }}>
            <Caps style={{ marginBottom: 10 }}>Strategia · 3 poziomy</Caps>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                ['1', 'RCN WMS', 'pełne ceny', true],
                ['2', 'KICN backup', 'bez ceny', false],
                ['3', 'Ręcznie', 'pełne pola', false],
              ].map(([n, t, sub, active], i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 10px', border: `1px solid ${active ? T.ink : T.border}`, borderRadius: 3, background: active ? T.surface : 'transparent' }}>
                  <span style={{ fontFamily: T.mono, fontSize: 11, color: active ? T.ink : T.ink4, fontWeight: 500 }}>L{n}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, color: T.ink, fontWeight: active ? 500 : 400 }}>{t}</div>
                    <div style={{ fontSize: 10.5, color: T.ink3, fontFamily: T.mono, letterSpacing: '0.04em' }}>{sub}</div>
                  </div>
                  {active && <Icon name="check" size={12} color={T.ok} />}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Map + list */}
        <div style={{ display: 'grid', gridTemplateRows: '320px 1fr', overflow: 'hidden' }}>
          {/* Map */}
          <div style={{ borderBottom: `1px solid ${T.border}`, position: 'relative', background: T.surface2, overflow: 'hidden' }}>
            <svg viewBox="0 0 800 320" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
              <defs>
                <pattern id="grid-rcn" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke={T.border} strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="800" height="320" fill="url(#grid-rcn)" />
              {/* Streets */}
              <path d="M 0 130 Q 200 130 400 150 T 800 170" stroke={T.borderStrong} strokeWidth="6" fill="none" />
              <path d="M 0 250 L 800 220" stroke={T.borderStrong} strokeWidth="4" fill="none" />
              <path d="M 320 0 L 380 320" stroke={T.borderStrong} strokeWidth="4" fill="none" />
              {/* Parcels schematic */}
              <rect x="200" y="60" width="120" height="80" fill="rgba(15,23,42,0.03)" stroke={T.borderStrong} strokeWidth="0.5"/>
              <rect x="430" y="60" width="100" height="80" fill="rgba(15,23,42,0.03)" stroke={T.borderStrong} strokeWidth="0.5"/>
              <rect x="540" y="60" width="180" height="80" fill="rgba(15,23,42,0.03)" stroke={T.borderStrong} strokeWidth="0.5"/>
              <rect x="100" y="180" width="200" height="60" fill="rgba(15,23,42,0.03)" stroke={T.borderStrong} strokeWidth="0.5"/>
              <rect x="500" y="240" width="180" height="60" fill="rgba(15,23,42,0.03)" stroke={T.borderStrong} strokeWidth="0.5"/>

              {/* Target parcel */}
              <polygon points="380,170 470,170 470,225 380,225" fill="rgba(15,23,42,0.12)" stroke={T.ink} strokeWidth="1.5" strokeDasharray="3 2" />

              {/* Markers */}
              <Mk x={230} y={100} n="1" />
              <Mk x={480} y={100} n="2" />
              <Mk x={620} y={100} n="3" />
              <Mk x={200} y={210} n="4" />
              <Mk x={580} y={270} n="5" sel />
              <Mk x={300} y={70}  n="6" />
            </svg>

            {/* Map UI */}
            <div style={{ position: 'absolute', top: 12, left: 12, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 4, padding: '6px 10px', fontFamily: T.mono, fontSize: 10.5, color: T.ink3, letterSpacing: '0.05em', display: 'flex', gap: 12 }}>
              <span><span style={{ display: 'inline-block', width: 8, height: 8, background: T.ink, borderRadius: '50%', marginRight: 5, verticalAlign: 'middle' }}/>działka wyceniana</span>
              <span><span style={{ display: 'inline-block', width: 8, height: 8, background: T.surface, border: `1px solid ${T.ink}`, borderRadius: '50%', marginRight: 5, verticalAlign: 'middle' }}/>transakcja RCN</span>
            </div>
            <div style={{ position: 'absolute', top: 12, right: 12, background: T.surface, border: `1px solid ${T.border}`, borderRadius: 4, display: 'flex', flexDirection: 'column' }}>
              <button style={{ height: 28, width: 28, background: 'transparent', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>+</button>
              <div style={{ borderTop: `1px solid ${T.border}` }} />
              <button style={{ height: 28, width: 28, background: 'transparent', border: 'none', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>−</button>
            </div>
            <div style={{ position: 'absolute', bottom: 12, right: 12, fontFamily: T.mono, fontSize: 10.5, color: T.ink3, letterSpacing: '0.04em', background: T.surface, padding: '3px 8px', border: `1px solid ${T.border}`, borderRadius: 2 }}>GUGiK ORTO · 1:5 000</div>
          </div>

          {/* List */}
          <div style={{ overflow: 'auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 22px', borderBottom: `1px solid ${T.border}`, background: T.surface3 }}>
              <div style={{ fontSize: 12.5, color: T.ink2 }}>
                Znaleziono <b style={{ color: T.ink, fontFamily: T.mono, letterSpacing: '0.02em' }}>6</b> transakcji w&nbsp;promieniu&nbsp;<b style={{ color: T.ink }}>1&nbsp;km</b>
              </div>
              <Caps>Sortuj: cena/m² rosnąco</Caps>
            </div>
            {[
              { sel: true,  id: '1', date: '2022‑04‑09', mkt: 'wolnyRynek · wtórny',  cena: '516 300', m: '3 247', m2: '159', addr: 'Stara Wieś, ul. Klonowa 14' },
              { sel: false, id: '2', date: '2021‑11‑22', mkt: 'wolnyRynek · pierwotny', cena: '512 000', m: '2 940', m2: '174', addr: 'Stara Wieś, ul. Wiosenna 7' },
              { sel: true,  id: '3', date: '2022‑08‑15', mkt: 'wolnyRynek · wtórny',  cena: '498 500', m: '3 102', m2: '161', addr: 'Pogalewo Wielkie, ul. Polna 14' },
              { sel: false, id: '4', date: '2019‑07‑18', mkt: 'wolnyRynek · wtórny',  cena: null,      m: '2 680', m2: null, addr: 'Stara Wieś, ul. Brzozowa 8' },
              { sel: false, id: '5', date: '2023‑02‑03', mkt: 'wolnyRynek · wtórny',  cena: '485 000', m: '2 750', m2: '176', addr: 'Pogalewo Wielkie, ul. Spokojna 22' },
              { sel: false, id: '6', date: '2020‑10‑11', mkt: 'wolnyRynek · pierwotny', cena: '460 000', m: '2 825', m2: '163', addr: 'Stara Wieś, ul. Słoneczna 3' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '30px 28px 110px 1.4fr 100px 90px 90px 90px', alignItems: 'center', gap: 14, padding: '12px 22px', borderBottom: i < 5 ? `1px solid ${T.border}` : 'none', background: r.sel ? 'rgba(15,23,42,0.02)' : 'transparent' }}>
                <div style={{ width: 16, height: 16, border: `1px solid ${r.sel ? T.ink : T.borderStrong}`, background: r.sel ? T.ink : 'transparent', borderRadius: 2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  {r.sel && <Icon name="check" size={10} color="#fff" stroke={2} />}
                </div>
                <div style={{ width: 24, height: 24, borderRadius: '50%', background: T.surface, border: `1px solid ${T.ink}`, color: T.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontSize: 11, fontWeight: 500 }}>{r.id}</div>
                <span style={{ fontFamily: T.mono, fontSize: 12, color: T.ink2 }}>{r.date}</span>
                <div>
                  <div style={{ fontSize: 13, color: T.ink }}>{r.addr}</div>
                  <div style={{ fontSize: 11, color: T.ink3, fontFamily: T.mono, letterSpacing: '0.04em' }}>{r.mkt}</div>
                </div>
                <span style={{ fontFamily: T.mono, fontSize: 13, color: r.cena ? T.ink : T.ink4, textAlign: 'right', letterSpacing: '0.02em' }}>{r.cena || '—'}</span>
                <span style={{ fontFamily: T.mono, fontSize: 12.5, color: T.ink3, textAlign: 'right' }}>{r.m} m²</span>
                <span style={{ fontFamily: T.mono, fontSize: 13, color: r.m2 ? T.ink : T.ink4, textAlign: 'right', fontWeight: r.m2 ? 500 : 400 }}>{r.m2 ? `${r.m2}` : '—'}<span style={{ color: T.ink4, fontSize: 11, marginLeft: 2 }}>{r.m2 ? 'PLN/m²' : ''}</span></span>
                {!r.cena
                  ? <span style={{ fontSize: 11, color: T.warn, textAlign: 'right' }}>Wprowadź cenę →</span>
                  : <span style={{ fontSize: 11, color: T.ink3, textAlign: 'right' }}>Podgląd →</span>
                }
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Footer */}
      <div style={{ padding: '14px 24px', borderTop: `1px solid ${T.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: T.surface3 }}>
        <div style={{ fontSize: 12.5, color: T.ink3 }}>
          Zaznaczono <b style={{ color: T.ink, fontFamily: T.mono }}>2</b> z&nbsp;6 transakcji · korekty uzupełnisz w&nbsp;Budowniczym RCN
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <Btn variant="ghost" size="sm">+ Dodaj ręcznie</Btn>
          <Btn variant="ghost" size="sm">Anuluj</Btn>
          <Btn variant="primary" size="sm" icon="arr-r">Dodaj zaznaczone (2)</Btn>
        </div>
      </div>
    </div>
  </div>
);

const Mk = ({ x, y, n, sel }) => (
  <g>
    <circle cx={x} cy={y} r={sel ? 11 : 10} fill={T.surface} stroke={T.ink} strokeWidth={sel ? 2 : 1.2} />
    <text x={x} y={y + 4} textAnchor="middle" fontFamily={T.mono} fontSize={11} fontWeight={500} fill={T.ink}>{n}</text>
  </g>
);

// ═══════════════════════════════════════════════════════════ RCiWN SECTION (Tabela RCiWN)
// Real app: the "Budowniczy RCiWN" is a section INSIDE the Kompozytor — a transactions
// table (RciwnEditor) shown in the center editor column, not a standalone dashboard.

// Real workbench data: 5 grunt correction features (cechy) + per-comp corrections.
const RCIWN_ATTRS = ['Lokaliz.', 'Stan', 'Dojazd', 'Otoczen.', 'Kształt'];
const RCIWN_TX = [
  { addr: 'ul. Klonowa 14, Stara Wieś',       dz: '127/3',  area: '3 247', cena: '516 300', ppm: '159', c: [0, 0, 0, 0, 0],     adj: '159' },
  { addr: 'ul. Wiosenna 7, Stara Wieś',       dz: '78/2',   area: '2 940', cena: '512 000', ppm: '174', c: [-3, -2, 0, -2, -1], adj: '160' },
  { addr: 'ul. Polna 14, Pogalewo Wielkie',   dz: '142/1',  area: '3 102', cena: '498 500', ppm: '161', c: [-1, 0, -1, 0, 0],   adj: '158' },
  { addr: 'ul. Słoneczna 3, Stara Wieś',      dz: '23/4',   area: '2 825', cena: '460 000', ppm: '163', c: [0, -1, 0, 0, 0],    adj: '161' },
  { addr: 'ul. Spokojna 22, Pogalewo Wielkie', dz: '88/12', area: '2 750', cena: '485 000', ppm: '176', c: [-5, -3, 0, -2, -1], adj: '157' },
  { addr: 'ul. Brzozowa 8, Stara Wieś',       dz: '56/3',   area: '2 680', cena: '438 000', ppm: '163', c: [-1, -1, 0, 0, -1],  adj: '160' },
];
const RCIWN_RESULT = { cena: '484 967', area: '2 924', ppm: '166', corr: ['−1.7', '−1.2', '−0.2', '−0.7', '−0.5'], unit: '159' };
const RCIWN_KPIS = [
  { k: 'Cena średnia / m²', v: '166', u: 'PLN', n: 'średnia z 6 transakcji' },
  { k: 'Suma korekt', v: '−4.2', u: '%', n: 'średnia korekta cech' },
  { k: 'Cena skoryg. / m²', v: '159', u: 'PLN', n: 'po korektach cech' },
  { k: 'Wartość rynkowa', v: '516 300', u: 'PLN', n: '3 247 m² × 159', big: true },
];

const CorrCell = ({ v, foot }) => {
  const num = parseFloat(String(v).replace('−', '-').replace('+', ''));
  const isZero = !foot ? v === 0 : (v === '—' || num === 0);
  const disp = foot ? v : (v === 0 ? '—' : v > 0 ? `+${v}` : String(v));
  const color = isZero ? T.ink4 : num > 0 ? T.ok : T.bad;
  const bg = foot ? 'transparent' : (v > 0 ? 'rgba(21,128,61,0.07)' : v < 0 ? 'rgba(153,27,27,0.07)' : 'transparent');
  return <span style={{ fontFamily: T.mono, fontSize: 11.5, color, padding: foot ? 0 : '2px 7px', borderRadius: 3, background: bg }}>{disp}</span>;
};

const RciwnSectionBody = () => {
  const th = { padding: '6px 5px', textAlign: 'left', fontWeight: 600, color: T.ink3, fontSize: 9.5, fontFamily: T.mono, letterSpacing: '0.06em', textTransform: 'uppercase', whiteSpace: 'nowrap' };
  const td = { padding: '7px 5px', fontSize: 12, verticalAlign: 'middle' };
  return (
    <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* Workbench toolbar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <button style={{ height: 32, padding: '0 12px', borderRadius: 3, fontSize: 12.5, border: `1px solid ${T.borderStrong}`, background: T.surface, color: T.ink, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontWeight: 500 }}>
            <Icon name="search" size={13} color={T.ink} />Szukaj w RCN (GUGiK)
          </button>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 11, color: T.ink4, fontFamily: T.mono }}>Zapisano</span>
            <button style={{ height: 32, padding: '0 14px', borderRadius: 3, fontSize: 12.5, fontWeight: 500, background: T.ink, color: T.surface, border: 'none', cursor: 'pointer' }}>Eksport</button>
          </div>
        </div>

        {/* Results bar */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', border: `1px solid ${T.ink}`, borderRadius: 4, background: T.surface, overflow: 'hidden' }}>
          {RCIWN_KPIS.map((s, i) => (
            <div key={i} style={{ padding: '16px 18px', borderLeft: i ? `1px solid ${T.border}` : 'none', background: s.big ? T.ink : T.surface, color: s.big ? T.surface : T.ink }}>
              <Caps style={{ marginBottom: 8, color: s.big ? 'rgba(203,213,225,0.8)' : T.ink3 }}>{s.k}</Caps>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontFamily: T.serif, fontSize: 25, letterSpacing: '-0.02em', lineHeight: 1 }}>{s.v}</span>
                <span style={{ fontFamily: T.mono, fontSize: 11, color: s.big ? 'rgba(203,213,225,0.8)' : T.ink3, letterSpacing: '0.04em' }}>{s.u}</span>
              </div>
              <div style={{ marginTop: 8, fontSize: 10.5, color: s.big ? 'rgba(203,213,225,0.8)' : T.ink4, fontFamily: T.mono, letterSpacing: '0.03em', lineHeight: 1.4 }}>{s.n}</div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', gap: 2, borderBottom: `1px solid ${T.border}` }}>
          {[['Transakcje', '6'], ['Korekty'], ['Metoda i parametry'], ['Narracja']].map(([label, badge], i) => (
            <button key={i} style={{ padding: '8px 14px', fontSize: 12.5, fontWeight: i === 0 ? 600 : 400, color: i === 0 ? T.ink : T.ink3, background: 'none', border: 'none', borderBottom: i === 0 ? `2px solid ${T.ink}` : '2px solid transparent', marginBottom: -1, cursor: 'pointer' }}>
              {label}{badge && <span style={{ marginLeft: 6, fontFamily: T.mono, fontSize: 10.5, color: T.ink4 }}>{badge}</span>}
            </button>
          ))}
        </div>

        {/* Transakcje tab: inner toolbar */}
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <button style={{ height: 30, padding: '0 12px', borderRadius: 3, fontSize: 12.5, fontWeight: 500, background: T.ink, color: T.surface, border: 'none', cursor: 'pointer' }}>+ Dodaj ręcznie</button>
          <span style={{ marginLeft: 'auto', fontSize: 11, color: T.ink4, fontFamily: T.mono }}>5 cech korekcyjnych</span>
        </div>

        {/* Transactions table — real columns: # · Adres/nr · Cena · m² · Cena/m² · [5 cechy] · Skoryg. */}
        <div style={{ border: `1px solid ${T.border}`, background: T.surface, borderRadius: 4, overflow: 'hidden' }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
              <thead>
                <tr style={{ background: T.surface2, borderBottom: `1px solid ${T.border}` }}>
                  <th style={{ ...th, width: 34 }}>#</th>
                  <th style={th}>Adres / nr</th>
                  <th style={{ ...th, textAlign: 'right' }}>Cena</th>
                  <th style={{ ...th, textAlign: 'right' }}>m²</th>
                  <th style={{ ...th, textAlign: 'right' }}>Cena/m²</th>
                  {RCIWN_ATTRS.map((a, i) => <th key={i} style={{ ...th, textAlign: 'center', minWidth: 44 }}>{a}</th>)}
                  <th style={{ ...th, textAlign: 'right' }}>Skoryg.</th>
                  <th style={{ ...th, width: 48 }} />
                </tr>
              </thead>
              <tbody>
                {RCIWN_TX.map((r, idx) => (
                  <tr key={idx} style={{ borderTop: `1px solid ${T.border}` }}>
                    <td style={td}><div style={{ width: 22, height: 22, borderRadius: '50%', border: `1px solid ${T.ink}`, color: T.ink, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: T.mono, fontSize: 10.5 }}>{idx + 1}</div></td>
                    <td style={td}>
                      <div style={{ fontSize: 12.5, color: T.ink, maxWidth: 132, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.addr}</div>
                      <div style={{ fontFamily: T.mono, fontSize: 10.5, color: T.ink3 }}>dz. {r.dz}</div>
                    </td>
                    <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', color: T.ink2 }}>{r.cena}</td>
                    <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', color: T.ink3 }}>{r.area}</td>
                    <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', fontWeight: 500 }}>{r.ppm}</td>
                    {r.c.map((v, i) => <td key={i} style={{ ...td, textAlign: 'center', padding: '5px 2px' }}><CorrCell v={v} /></td>)}
                    <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', fontWeight: 600 }}>{r.adj}</td>
                    <td style={{ ...td, textAlign: 'right', whiteSpace: 'nowrap' }}>
                      <Icon name="edit" size={13} color={T.ink3} />
                      <span style={{ marginLeft: 6 }}><Icon name="x" size={13} color={T.ink4} /></span>
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr style={{ borderTop: `2px solid ${T.ink}`, background: T.surface2 }}>
                  <td style={td} />
                  <td style={{ ...td, fontFamily: T.mono, fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: T.ink3 }}>Średnia / wynik</td>
                  <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', color: T.ink3 }}>{RCIWN_RESULT.cena}</td>
                  <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', color: T.ink3 }}>{RCIWN_RESULT.area}</td>
                  <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', fontWeight: 500 }}>{RCIWN_RESULT.ppm}</td>
                  {RCIWN_RESULT.corr.map((v, i) => <td key={i} style={{ ...td, textAlign: 'center' }}><CorrCell v={v} foot /></td>)}
                  <td style={{ ...td, fontFamily: T.mono, textAlign: 'right', fontWeight: 600 }}>{RCIWN_RESULT.unit}</td>
                  <td />
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

const ScreenBudowniczy = () => (
  <KompozytorFrame
    activeKey="Tabela RCN"
    center={
      <>
        <SectionEditorHeader title="Tabela RCN" typeLabel="Tabela RCN" status="Zapisano 09:14" />
        <RciwnSectionBody />
      </>
    }
  />
);

Object.assign(window, { ScreenULDK, ScreenRCN, ScreenBudowniczy });