// ProMTK — Multi-Apartment screens: Add apartment, Invite resident, Apartment manage,
// Family members. Enterprise multi-tenant flow.

// ═════════════════════════════════════════════════════════════
// Add Apartment — wizard to link a new apartment
// ═════════════════════════════════════════════════════════════
const ScreenAddApartment = ({ go }) => {
  const [step, setStep] = React.useState(0);
  const [method, setMethod] = React.useState(null); // 'code' | 'fin' | 'invite'
  const [code, setCode] = React.useState('');
  const [role, setRole] = React.useState('owner');
  const [resolved, setResolved] = React.useState(null);

  const goBack = () => {
    if (step === 0) return go('home');
    setStep(step - 1);
  };

  const verify = () => {
    setTimeout(() => {
      setResolved({
        name: 'Sea Breeze',
        block: 'A',
        unit: '128',
        floor: 8,
        area: 72,
        address: 'Xətai r., Nobel pr. 15',
        komendant: 'Ramil Əliyev',
      });
      setStep(2);
    }, 800);
  };

  return (
    <div className="pm-fade pm-themed" style={{ background: 'var(--pm-bg)', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
        <IconBtn name="chevronLeft" size={44} iconSize={18} bg="var(--pm-chipBg)" onClick={goBack}/>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.4 }}>Mənzil əlavə et</h1>
          <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>Addım {step + 1} / 3</div>
        </div>
      </div>

      <div style={{ padding: '14px 20px 0', flexShrink: 0 }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {[0,1,2].map(i => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= step ? pmBase.gradient : 'var(--pm-bg4)', transition: 'background .4s' }}/>
          ))}
        </div>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', paddingBottom: 100 }} className="pm-scroll">
        {step === 0 && (
          <div style={{ padding: '24px 20px', animation: 'pm-slide-right .4s ease both' }}>
            <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.5 }}>Necə qoşulmaq istəyirsiniz?</div>
            <div style={{ fontSize: 13, color: 'var(--pm-fg3)', marginTop: 4, lineHeight: 1.5 }}>Mövcud mənzilinizə qoşulmaq üçün üsul seçin</div>

            <div className="pm-stagger" style={{ marginTop: 20 }}>
              {[
                { id: 'code', i: 'key', t: 'Komendant kodu ilə', d: 'Komendant tərəfindən verilən 6-rəqəmli kod', c: pmBase.brand },
                { id: 'fin', i: 'signature', t: 'FİN + Mənzil ünvanı', d: 'Şəxsiyyət vəsiqəsi və mənzil ünvanı ilə avtomatik təsdiq', c: pmBase.info },
                { id: 'invite', i: 'users', t: 'Ailə üzvü dəvəti', d: 'Ailə başçısından dəvətnamə qəbul edin', c: pmBase.ok },
              ].map(m => {
                const active = method === m.id;
                return (
                  <button key={m.id} onClick={() => setMethod(m.id)} className="pm-tap" style={{
                    width: '100%', padding: 16, marginBottom: 10,
                    background: 'var(--pm-bg3)', border: `2px solid ${active ? m.c : 'var(--pm-line)'}`,
                    borderRadius: 16, cursor: 'pointer', textAlign: 'left', fontFamily: pmBase.font,
                    display: 'flex', alignItems: 'center', gap: 14,
                    boxShadow: active ? `0 10px 24px -8px ${m.c}80` : 'none',
                  }}>
                    <div style={{ width: 44, height: 44, borderRadius: 13, background: `${m.c}22`, color: m.c, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                      <Icon name={m.i} size={20}/>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--pm-fg)' }}>{m.t}</div>
                      <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2, lineHeight: 1.4 }}>{m.d}</div>
                    </div>
                    {active && <div style={{ width: 22, height: 22, borderRadius: 11, background: m.c, color: '#fff', display: 'grid', placeItems: 'center' }}><Icon name="check" size={12}/></div>}
                  </button>
                );
              })}
            </div>

            <div style={{ marginTop: 20, padding: 14, background: pmBase.infoSoft, borderRadius: 14, display: 'flex', gap: 10 }}>
              <div style={{ color: pmBase.info, flexShrink: 0 }}><Icon name="info" size={18}/></div>
              <div style={{ fontSize: 11, color: 'var(--pm-fg2)', lineHeight: 1.5 }}>
                Yeni binadasınız? <b style={{ color: 'var(--pm-fg)' }}>"Bina qeydiyyatdan keç"</b> seçimi ilə MTK-nı sistemə qoşmaq üçün müraciət göndərin.
              </div>
            </div>
          </div>
        )}

        {step === 1 && method === 'code' && (
          <div style={{ padding: '24px 20px', animation: 'pm-slide-right .4s ease both' }}>
            <div style={{ width: 64, height: 64, borderRadius: 18, background: `${pmBase.brand}22`, color: pmBase.brand, display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}>
              <Icon name="key" size={28}/>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.5 }}>Komendant kodu</div>
              <div style={{ fontSize: 13, color: 'var(--pm-fg3)', marginTop: 4, lineHeight: 1.5 }}>Komendantınız sizə 6 rəqəmli kod göndərib</div>
            </div>
            <div style={{ marginTop: 28, display: 'flex', gap: 10, justifyContent: 'center' }}>
              {[0,1,2,3,4,5].map(i => (
                <div key={i} style={{
                  width: 44, height: 56, borderRadius: 12, background: 'var(--pm-bg3)',
                  border: `2px solid ${code[i] ? pmBase.brand : 'var(--pm-line)'}`,
                  display: 'grid', placeItems: 'center',
                  fontSize: 24, fontWeight: 800, color: 'var(--pm-fg)', fontFamily: pmBase.mono,
                }}>{code[i] || ''}</div>
              ))}
            </div>
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, maxWidth: 280, margin: '18px auto 0' }}>
              {[1,2,3,4,5,6,7,8,9,'',0,'⌫'].map((d, i) => (
                <button key={i} className="pm-tap" disabled={d === ''} onClick={() => {
                  if (d === '⌫') setCode(c => c.slice(0, -1));
                  else if (d !== '' && code.length < 6) setCode(c => c + d);
                }} style={{
                  height: 56, borderRadius: 16, border: 'none',
                  background: d === '' ? 'transparent' : 'var(--pm-bg3)',
                  color: 'var(--pm-fg)', fontSize: 22, fontWeight: 600, cursor: d === '' ? 'default' : 'pointer',
                  fontFamily: pmBase.font, display: 'grid', placeItems: 'center',
                }}>{d}</button>
              ))}
            </div>
            <div style={{ marginTop: 16, textAlign: 'center', fontSize: 12, color: 'var(--pm-fg3)' }}>
              Kod yoxdur? <span style={{ color: pmBase.brandSoft, fontWeight: 700, cursor: 'pointer' }}>Komendantla əlaqə</span>
            </div>
          </div>
        )}

        {step === 1 && method === 'fin' && (
          <div style={{ padding: '24px 20px', animation: 'pm-slide-right .4s ease both' }}>
            <div style={{ width: 64, height: 64, borderRadius: 18, background: `${pmBase.info}22`, color: pmBase.info, display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}>
              <Icon name="signature" size={28}/>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.5 }}>Şəxsi məlumatlar</div>
              <div style={{ fontSize: 13, color: 'var(--pm-fg3)', marginTop: 4, lineHeight: 1.5 }}>DİM bazasından avtomatik təsdiq</div>
            </div>
            <div style={{ marginTop: 24, padding: 18, background: 'var(--pm-bg3)', borderRadius: 16, border: '1px solid var(--pm-line)' }}>
              <label style={{ fontSize: 11, color: 'var(--pm-fg3)', fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>FİN kod</label>
              <input type="text" placeholder="6A12345" maxLength={7} style={{ display: 'block', marginTop: 8, width: '100%', background: 'transparent', border: 'none', outline: 'none', color: 'var(--pm-fg)', fontSize: 22, fontWeight: 700, fontFamily: pmBase.mono, letterSpacing: 2, caretColor: pmBase.info }}/>
            </div>
            <div style={{ marginTop: 12, padding: 18, background: 'var(--pm-bg3)', borderRadius: 16, border: '1px solid var(--pm-line)' }}>
              <label style={{ fontSize: 11, color: 'var(--pm-fg3)', fontWeight: 700, letterSpacing: 0.5, textTransform: 'uppercase' }}>Mənzil ünvanı</label>
              <input type="text" placeholder="Sea Breeze, Blok A, Mənzil 128" style={{ display: 'block', marginTop: 8, width: '100%', background: 'transparent', border: 'none', outline: 'none', color: 'var(--pm-fg)', fontSize: 15, fontWeight: 600, fontFamily: pmBase.font, caretColor: pmBase.brand }}/>
            </div>
          </div>
        )}

        {step === 1 && method === 'invite' && (
          <div style={{ padding: '24px 20px', animation: 'pm-slide-right .4s ease both' }}>
            <div style={{ width: 64, height: 64, borderRadius: 18, background: `${pmBase.ok}22`, color: pmBase.ok, display: 'grid', placeItems: 'center', margin: '0 auto 16px' }}>
              <Icon name="users" size={28}/>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.5 }}>Dəvətnamələriniz</div>
              <div style={{ fontSize: 13, color: 'var(--pm-fg3)', marginTop: 4, lineHeight: 1.5 }}>Sizə göndərilmiş aktiv dəvətlər</div>
            </div>
            <div style={{ marginTop: 24 }}>
              {[
                { from: 'Atam — Ramin Məmmədov', apt: 'Sea Breeze · Blok A · 128', role: 'Ailə üzvü', icon: 'home', c: pmBase.brand, at: '2s əvvəl' },
                { from: 'Kirayəverən — Nigar x.', apt: 'White Villas · V-12', role: 'Kirayəçi', icon: 'key', c: pmBase.warn, at: 'Dünən' },
              ].map((inv, i) => (
                <div key={i} style={{ marginBottom: 10, padding: 14, background: 'var(--pm-bg3)', borderRadius: 16, border: '1px solid var(--pm-line)' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <div style={{ width: 40, height: 40, borderRadius: 11, background: `${inv.c}22`, color: inv.c, display: 'grid', placeItems: 'center' }}>
                      <Icon name={inv.icon} size={18}/>
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--pm-fg)' }}>{inv.from}</div>
                      <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>{inv.apt}</div>
                    </div>
                    <Pill color={inv.c}>{inv.role}</Pill>
                  </div>
                  <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                    <Btn variant="secondary" full style={{ padding: '10px 14px', fontSize: 12 }}>İmtina</Btn>
                    <Btn icon="check" full style={{ padding: '10px 14px', fontSize: 12 }} onClick={() => { setResolved({ name: inv.apt.split(' · ')[0], block: inv.apt.split(' · ')[1]?.replace('Blok ', '') || 'A', unit: inv.apt.split(' · ')[2] || '128', floor: 8, area: 72, address: '—', komendant: '—', role: inv.role }); setStep(2); }}>Qəbul et</Btn>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {step === 2 && resolved && (
          <div style={{ padding: '24px 20px', animation: 'pm-slide-right .4s ease both' }}>
            <div style={{ position: 'relative', width: 100, height: 100, margin: '0 auto 20px' }}>
              {[0,1,2].map(i => <div key={i} style={{ position: 'absolute', inset: 0, borderRadius: '50%', border: `2px solid ${pmBase.ok}`, animation: 'pm-pulse-ring 2.4s ease-out infinite', animationDelay: `${i*0.6}s` }}/>)}
              <div style={{ position: 'absolute', inset: 14, borderRadius: '50%', background: `linear-gradient(135deg, ${pmBase.ok}, #059669)`, display: 'grid', placeItems: 'center', boxShadow: `0 16px 32px -10px ${pmBase.ok}80` }}>
                <Icon name="check" size={36} color="#fff"/>
              </div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.5 }}>Mənzil tapıldı!</div>
              <div style={{ fontSize: 13, color: 'var(--pm-fg3)', marginTop: 4 }}>Komendant təsdiqi gözlənilir...</div>
            </div>

            <div style={{ marginTop: 24, padding: 16, background: 'var(--pm-bg3)', borderRadius: 18, border: `1px solid ${pmBase.ok}44` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 48, height: 48, borderRadius: 13, background: `linear-gradient(135deg, #06B6D4, #06B6D4aa)`, color: '#fff', display: 'grid', placeItems: 'center' }}>
                  <Icon name="building" size={22}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--pm-fg)' }}>{resolved.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>Blok {resolved.block} · Mənzil {resolved.unit} · {resolved.area}m²</div>
                </div>
              </div>
              <div style={{ height: 1, background: 'var(--pm-line)', margin: '14px 0' }}/>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, fontSize: 12 }}>
                <div>
                  <div style={{ color: 'var(--pm-fg3)', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>Ünvan</div>
                  <div style={{ color: 'var(--pm-fg)', fontWeight: 600, marginTop: 4 }}>{resolved.address}</div>
                </div>
                <div>
                  <div style={{ color: 'var(--pm-fg3)', fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>Komendant</div>
                  <div style={{ color: 'var(--pm-fg)', fontWeight: 600, marginTop: 4 }}>{resolved.komendant}</div>
                </div>
              </div>
            </div>

            <div style={{ marginTop: 16, fontSize: 11, fontWeight: 800, color: 'var(--pm-fg3)', letterSpacing: 0.5, textTransform: 'uppercase' }}>Sizin rolunuz</div>
            <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
              {[
                { id: 'owner', i: 'shieldCheck', t: 'Mülkiyyətçi' },
                { id: 'tenant', i: 'key', t: 'Kirayəçi' },
                { id: 'family', i: 'users', t: 'Ailə üzvü' },
              ].map(r => {
                const active = role === r.id;
                return (
                  <button key={r.id} onClick={() => setRole(r.id)} className="pm-tap" style={{
                    padding: '12px 6px', background: 'var(--pm-bg3)',
                    border: `2px solid ${active ? pmBase.brand : 'var(--pm-line)'}`,
                    borderRadius: 14, cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                    color: 'var(--pm-fg)', fontFamily: pmBase.font,
                  }}>
                    <div style={{ width: 32, height: 32, borderRadius: 9, background: `${active ? pmBase.brand : 'var(--pm-fg3)'}22`, color: active ? pmBase.brand : 'var(--pm-fg3)', display: 'grid', placeItems: 'center' }}>
                      <Icon name={r.i} size={16}/>
                    </div>
                    <div style={{ fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap' }}>{r.t}</div>
                  </button>
                );
              })}
            </div>
          </div>
        )}
      </div>

      <div style={{ position: 'sticky', bottom: 0, padding: '12px 20px 24px', background: 'linear-gradient(to top, var(--pm-bg) 70%, transparent)', flexShrink: 0 }}>
        {step === 0 && <Btn full icon="arrowRight" disabled={!method} onClick={() => method && setStep(1)}>Davam et</Btn>}
        {step === 1 && method === 'code' && <Btn full icon="shieldCheck" disabled={code.length < 6} onClick={verify}>Kodu təsdiq et</Btn>}
        {step === 1 && method === 'fin' && <Btn full icon="shieldCheck" onClick={verify}>FİN ilə təsdiq et</Btn>}
        {step === 2 && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <Btn variant="secondary" full onClick={() => go('home')}>Hələ yox</Btn>
            <Btn icon="check" full onClick={() => go('home')}>Aktivləşdir</Btn>
          </div>
        )}
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════
// Invite Resident — invite family / tenant
// ═════════════════════════════════════════════════════════════
const ScreenInviteResident = ({ go }) => {
  const { currentApt } = usePM();
  const [type, setType] = React.useState('family');
  const [phoneRaw, setPhoneRaw] = React.useState('');
  const [perms, setPerms] = React.useState({ pay: false, guests: true, smart: true, vote: false });

  const formatPhone = (d) => {
    const n = d.slice(0, 9);
    return [n.slice(0,2), n.slice(2,5), n.slice(5,7), n.slice(7,9)].filter(Boolean).join(' ');
  };

  return (
    <div className="pm-fade pm-themed" style={{ background: 'var(--pm-bg)', minHeight: '100%', paddingBottom: 120 }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <IconBtn name="chevronLeft" size={44} iconSize={18} bg="var(--pm-chipBg)" onClick={() => go('apartmentManage')}/>
        <div style={{ flex: 1 }}>
          <h1 style={{ margin: 0, fontSize: 20, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.4 }}>Sakin dəvət et</h1>
          <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>{currentApt.name} · Mənzil {currentApt.unit}</div>
        </div>
      </div>

      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--pm-fg3)', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Dəvət növü</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {[
            { id: 'family', i: 'users', t: 'Ailə üzvü', d: 'Limitsiz müddət', c: pmBase.brand },
            { id: 'tenant', i: 'key', t: 'Kirayəçi', d: 'Müddətli, məhdud', c: pmBase.warn },
          ].map(o => {
            const active = type === o.id;
            return (
              <button key={o.id} onClick={() => setType(o.id)} className="pm-tap" style={{
                padding: 14, background: 'var(--pm-bg3)', border: `2px solid ${active ? o.c : 'var(--pm-line)'}`,
                borderRadius: 14, cursor: 'pointer', textAlign: 'left', color: 'var(--pm-fg)', fontFamily: pmBase.font,
                boxShadow: active ? `0 8px 20px -6px ${o.c}66` : 'none',
              }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: `${o.c}22`, color: o.c, display: 'grid', placeItems: 'center', marginBottom: 8 }}>
                  <Icon name={o.i} size={18}/>
                </div>
                <div style={{ fontSize: 14, fontWeight: 800 }}>{o.t}</div>
                <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>{o.d}</div>
              </button>
            );
          })}
        </div>
      </div>

      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--pm-fg3)', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Telefon nömrəsi</div>
        <div style={{ padding: 16, background: 'var(--pm-bg3)', borderRadius: 14, border: '1px solid var(--pm-line)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, paddingRight: 10, borderRight: '1px solid var(--pm-line)' }}>
            <span style={{ fontSize: 20 }}>🇦🇿</span>
            <span style={{ fontSize: 15, fontWeight: 700, color: 'var(--pm-fg)', fontFamily: pmBase.mono }}>+994</span>
          </div>
          <input
            value={formatPhone(phoneRaw)}
            onChange={e => setPhoneRaw(e.target.value.replace(/\D/g, '').slice(0, 9))}
            placeholder="55 123 45 67"
            type="tel" inputMode="numeric"
            style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: 'var(--pm-fg)', WebkitTextFillColor: 'var(--pm-fg)', caretColor: pmBase.brand, fontSize: 16, fontWeight: 700, fontFamily: pmBase.font, letterSpacing: 0.5 }}
          />
        </div>
        <button className="pm-tap-soft" style={{ marginTop: 10, padding: '8px 12px', background: 'transparent', border: 'none', color: pmBase.brandSoft, fontSize: 12, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6 }}>
          <Icon name="users" size={14}/> Kontaktlardan seç
        </button>
      </div>

      <div style={{ padding: '20px 20px 0' }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--pm-fg3)', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>İcazələr</div>
        <Card style={{ padding: 0 }}>
          {[
            { id: 'pay', i: 'wallet', t: 'Ödənişlər', d: 'Kommunal və MTK ödənişləri görüş, ödəniş etmək', c: pmBase.warn },
            { id: 'guests', i: 'qr', t: 'Qonaq kodu', d: 'Qonaq dəvət edə bilər', c: pmBase.info },
            { id: 'smart', i: 'doorOpen', t: 'Smart bina', d: 'Domofon, lift, qapı idarəsi', c: pmBase.brand },
            { id: 'vote', i: 'vote', t: 'Səsvermə', d: 'Bina qərarlarında səs', c: pmBase.brand2 },
          ].map((p, i) => (
            <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < 3 ? '1px solid var(--pm-line)' : 'none' }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: `${p.c}22`, color: p.c, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={p.i} size={16}/></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pm-fg)' }}>{p.t}</div>
                <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 1, lineHeight: 1.4 }}>{p.d}</div>
              </div>
              <button onClick={() => setPerms(s => ({ ...s, [p.id]: !s[p.id] }))} style={{ width: 44, height: 26, borderRadius: 13, border: 'none', background: perms[p.id] ? pmBase.brand : 'var(--pm-bg4)', position: 'relative', cursor: 'pointer', transition: 'background .2s' }}>
                <div style={{ position: 'absolute', top: 2, left: perms[p.id] ? 20 : 2, width: 22, height: 22, borderRadius: 11, background: '#fff', transition: 'left .2s', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}/>
              </button>
            </div>
          ))}
        </Card>
      </div>

      {type === 'tenant' && (
        <div style={{ padding: '20px 20px 0' }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: 'var(--pm-fg3)', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 10 }}>Kirayə müddəti</div>
          <div style={{ padding: 16, background: 'var(--pm-bg3)', borderRadius: 14, border: '1px solid var(--pm-line)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <Icon name="calendar" size={18} color={pmBase.warn}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pm-fg)' }}>01 May — 01 Noy 2026</div>
              <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>6 ay · Avtomatik bitir</div>
            </div>
            <IconBtn name="chevronRight" size={32} iconSize={14} bg="var(--pm-bg4)"/>
          </div>
        </div>
      )}

      <div style={{ position: 'absolute', bottom: 24, left: 20, right: 20 }}>
        <Btn full icon="send" disabled={phoneRaw.length < 9}>Dəvətnamə göndər</Btn>
      </div>
    </div>
  );
};

// ═════════════════════════════════════════════════════════════
// Apartment Manage — full management screen for current apt
// ═════════════════════════════════════════════════════════════
const ScreenApartmentManage = ({ go }) => {
  const { currentApt, subs } = usePM();
  const totalDue = subs.filter(s => s.state !== 'paid').reduce((a, b) => a + b.balance, 0);

  return (
    <div className="pm-fade pm-themed" style={{ background: 'var(--pm-bg)', minHeight: '100%', paddingBottom: 28 }}>
      <div style={{ padding: '54px 20px 0', display: 'flex', alignItems: 'center', gap: 12 }}>
        <IconBtn name="chevronLeft" size={44} iconSize={18} bg="var(--pm-chipBg)" onClick={() => go('profile')}/>
        <h1 style={{ flex: 1, margin: 0, fontSize: 20, fontWeight: 800, color: 'var(--pm-fg)', letterSpacing: -0.4 }}>Mənzil idarəsi</h1>
        <IconBtn name="more" size={44} iconSize={16} bg="var(--pm-chipBg)"/>
      </div>

      {/* Apt hero */}
      <div style={{ padding: '16px 20px 0' }}>
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 22, padding: 18, background: `linear-gradient(135deg, ${currentApt.color}, ${currentApt.color}99 60%, ${currentApt.color}55)`, color: '#fff' }}>
          <div style={{ position: 'absolute', top: -30, right: -30, width: 140, height: 140, borderRadius: 70, background: 'rgba(255,255,255,0.08)' }}/>
          <div style={{ position: 'relative' }}>
            <Pill bg="rgba(255,255,255,0.18)" color="#fff" style={{ fontSize: 10 }}>{currentApt.role}</Pill>
            <div style={{ fontSize: 24, fontWeight: 900, letterSpacing: -0.6, marginTop: 10 }}>{currentApt.name}</div>
            <div style={{ fontSize: 13, opacity: .9, marginTop: 2 }}>Blok {currentApt.block} · Mənzil {currentApt.unit} · {currentApt.area} m²</div>
            <div style={{ marginTop: 14, fontSize: 11, opacity: .85, display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
              <Icon name="location" size={12}/>{currentApt.address}
            </div>
          </div>
        </div>
      </div>

      {/* Quick stats */}
      <div style={{ padding: '16px 20px 0', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }}>
        <StatTile icon="wallet" color={totalDue > 0 ? pmBase.warn : pmBase.ok} label="Cari borc" value={`${totalDue.toFixed(0)} ₼`}/>
        <StatTile icon="users" color={pmBase.brand} label="Sakinlər" value="4"/>
        <StatTile icon="key" color={pmBase.info} label="Aktiv kodlar" value={subs.length.toString()}/>
      </div>

      {/* Residents */}
      <div style={{ padding: '20px 0 0' }}>
        <SectionHeader title="Sakinlər" subtitle="Bu mənzildə qeydiyyatda olan istifadəçilər" action="Dəvət et" onAction={() => go('inviteResident')}/>
        <div style={{ padding: '0 20px' }}>
          <Card style={{ padding: 0 }}>
            {[
              { n: 'Elvin Məmmədov', r: 'Mülkiyyətçi', sub: 'Siz · Bütün icazələr', online: true, c: pmBase.brand, you: true },
              { n: 'Aysel Məmmədova', r: 'Ailə üzvü', sub: 'Həyat yoldaşı · Ödəniş, qonaq', online: true, c: pmBase.ok },
              { n: 'Murad Məmmədov', r: 'Ailə üzvü', sub: 'Oğul · Yalnız qonaq', online: false, c: pmBase.info },
              { n: 'Səbinə Əliyeva', r: 'Kirayəçi', sub: 'Otaq 2 · 01 May - 01 Noy', online: false, c: pmBase.warn, pending: false },
            ].map((p, i, a) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < a.length - 1 ? '1px solid var(--pm-line)' : 'none' }}>
                <div style={{ position: 'relative' }}>
                  <Avatar name={p.n} size={42}/>
                  {p.online && <span style={{ position: 'absolute', bottom: -1, right: -1, width: 11, height: 11, borderRadius: 6, background: pmBase.ok, border: '2px solid var(--pm-bg3)' }}/>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--pm-fg)' }}>{p.n}</div>
                    {p.you && <Pill color={pmBase.brand} style={{ fontSize: 9 }}>Siz</Pill>}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--pm-fg3)', marginTop: 2 }}>{p.sub}</div>
                </div>
                <Pill color={p.c} style={{ fontSize: 10 }}>{p.r}</Pill>
                {!p.you && <IconBtn name="more" size={32} iconSize={14} bg="var(--pm-bg4)"/>}
              </div>
            ))}
            <button onClick={() => go('inviteResident')} className="pm-tap" style={{
              width: '100%', padding: 14, background: 'transparent', border: 'none', borderTop: '1px dashed var(--pm-lineStrong)',
              color: pmBase.brand, fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: pmBase.font,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              <Icon name="plus" size={16}/> Yeni sakin dəvət et
            </button>
          </Card>
        </div>
      </div>

      {/* Komendant + Manager */}
      <div style={{ padding: '20px 0 0' }}>
        <SectionHeader title="MTK əlaqələri"/>
        <div style={{ padding: '0 20px' }}>
          <Card style={{ padding: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: '1px solid var(--pm-line)' }}>
              <Avatar name={currentApt.komendant.name} size={42}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--pm-fg)' }}>{currentApt.komendant.name}</div>
                <div style={{ fontSize: 11, color: 'var(--pm-fg3)' }}>Komendant · {currentApt.komendant.phone}</div>
              </div>
              <IconBtn name="phone" size={40} iconSize={16} bg={pmBase.okSoft} color={pmBase.ok}/>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14 }}>
              <Avatar name={currentApt.manager.name} size={42}/>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--pm-fg)' }}>{currentApt.manager.name}</div>
                <div style={{ fontSize: 11, color: 'var(--pm-fg3)' }}>Bina rəhbəri · {currentApt.manager.phone}</div>
              </div>
              <IconBtn name="phone" size={40} iconSize={16} bg={pmBase.okSoft} color={pmBase.ok}/>
            </div>
          </Card>
        </div>
      </div>

      {/* Documents */}
      <div style={{ padding: '20px 0 0' }}>
        <SectionHeader title="Mənzil sənədləri" action="Hamısı" onAction={() => go('docs')}/>
        <div style={{ padding: '0 20px' }}>
          <Card style={{ padding: 0 }}>
            {[
              { t: 'Alqı-satqı müqaviləsi', d: '15 Mart 2022', i: 'signature', c: pmBase.brand },
              { t: 'Texniki pasport', d: '18 Fev 2022', i: 'home', c: pmBase.info },
              { t: 'MTK üzvlük vəsiqəsi', d: '10 Apr 2026', i: 'shield', c: pmBase.ok },
            ].map((d, i, a) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, borderBottom: i < a.length - 1 ? '1px solid var(--pm-line)' : 'none' }}>
                <div style={{ width: 36, height: 44, borderRadius: 8, background: `${d.c}22`, color: d.c, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name={d.i} size={18}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--pm-fg)' }}>{d.t}</div>
                  <div style={{ fontSize: 11, color: 'var(--pm-fg3)' }}>{d.d}</div>
                </div>
                <IconBtn name="download" size={34} iconSize={14} bg="var(--pm-bg4)"/>
              </div>
            ))}
          </Card>
        </div>
      </div>

      {/* Danger zone */}
      <div style={{ padding: '20px 20px 0' }}>
        <Card style={{ padding: 14, background: 'var(--pm-bg3)', borderColor: pmBase.danger + '44' }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: pmBase.danger, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 8 }}>Təhlükəli zona</div>
          <button className="pm-tap" style={{ width: '100%', padding: 12, background: 'transparent', border: `1px solid ${pmBase.danger}44`, borderRadius: 10, color: pmBase.danger, fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: pmBase.font, display: 'flex', alignItems: 'center', gap: 10 }}>
            <Icon name="trash" size={16}/> Mənzili hesabdan sil
          </button>
        </Card>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenAddApartment, ScreenInviteResident, ScreenApartmentManage });