/* ─────────────────────────────────────────────────────────────────
   AYRA Portal — Benchmark-derived Pages & Chart Primitives
   Gecikmələr · Köç prosesi · Rol və access · Bitmə bildirişləri
   DonutChart · GroupedBarChart
   FR-291–295, FR-296–300 · Benchmark patterns §C.1.7, §C.2.5, §C.6.2
   ───────────────────────────────────────────────────────────────── */

// ── DONUT CHART ───────────────────────────────────────────
function DonutChart({ data, size = 130 }) {
  const total = data.reduce((s, d) => s + d.value, 0);
  let cum = 0;
  const cx = size / 2, cy = size / 2, r = size * 0.38, ir = size * 0.23;
  const TAU = 2 * Math.PI;
  const segments = data.map(d => {
    const sa = (cum / total) * TAU - TAU / 4;
    cum += d.value;
    const ea = (cum / total) * TAU - TAU / 4;
    const lg = d.value / total > 0.5 ? 1 : 0;
    const p = [
      `M ${cx + ir * Math.cos(sa)} ${cy + ir * Math.sin(sa)}`,
      `L ${cx + r  * Math.cos(sa)} ${cy + r  * Math.sin(sa)}`,
      `A ${r}  ${r}  0 ${lg} 1 ${cx + r  * Math.cos(ea)} ${cy + r  * Math.sin(ea)}`,
      `L ${cx + ir * Math.cos(ea)} ${cy + ir * Math.sin(ea)}`,
      `A ${ir} ${ir} 0 ${lg} 0 ${cx + ir * Math.cos(sa)} ${cy + ir * Math.sin(sa)} Z`,
    ].join(' ');
    return { ...d, path: p };
  });
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {segments.map((s, i) => <path key={i} d={s.path} fill={s.color} opacity={0.88}/>)}
      <text x={cx} y={cy - 6} textAnchor="middle" dominantBaseline="middle"
        fontSize={size * 0.145} fontWeight="700" fill="#0f1c30">{total}</text>
      <text x={cx} y={cy + size * 0.1} textAnchor="middle" dominantBaseline="middle"
        fontSize={size * 0.082} fill="#8aa4c0">cəmi</text>
    </svg>
  );
}

// ── GROUPED BAR CHART ─────────────────────────────────────
function GroupedBarChart({ data, colors, labels, width = 320, height = 148 }) {
  const maxVal = Math.max(...data.flatMap(d => d.values));
  const n = data[0].values.length;
  const bW = 11, gap = 3, gGap = 20;
  const gW = n * (bW + gap) - gap;
  const pL = 26, pB = 28, pT = 8;
  const cH = height - pB - pT;
  const totalW = data.length * (gW + gGap);
  const scaleX = (width - pL) / totalW;
  return (
    <svg width={width} height={height} style={{ overflow: 'visible' }}>
      {[0, 25, 50, 75, 100].map(pct => {
        const y = pT + cH - (pct / 100) * cH;
        const val = Math.round(maxVal * pct / 100);
        return (
          <g key={pct}>
            <line x1={pL} y1={y} x2={width} y2={y} stroke="#f0f4f8" strokeWidth={1}/>
            {pct > 0 && <text x={pL - 4} y={y} textAnchor="end" dominantBaseline="middle" fontSize={8} fill="#8aa4c0">{val}</text>}
          </g>
        );
      })}
      {data.map((grp, gi) => {
        const baseX = pL + gi * (gW + gGap) * scaleX;
        return (
          <g key={gi}>
            {grp.values.map((val, bi) => {
              const bH = (val / maxVal) * cH;
              const x = baseX + bi * (bW + gap) * scaleX;
              const y = pT + cH - bH;
              return (
                <g key={bi}>
                  <rect x={x} y={y} width={bW * scaleX} height={bH} rx={2}
                    fill={colors[bi]} opacity={0.82}/>
                  <text x={x + (bW * scaleX) / 2} y={y - 3} textAnchor="middle"
                    fontSize={7} fill={colors[bi]} fontWeight="700">{val}</text>
                </g>
              );
            })}
            <text x={baseX + (gW * scaleX) / 2} y={height - 8}
              textAnchor="middle" fontSize={9} fill="#4a6888" fontWeight="500">{grp.name}</text>
          </g>
        );
      })}
      {labels && labels.map((l, i) => (
        <g key={i} transform={`translate(${pL + i * 72}, ${height - 4})`}>
          <rect x={0} y={-9} width={8} height={8} rx={2} fill={colors[i]}/>
          <text x={11} y={-2} fontSize={8} fill="#4a6888">{l}</text>
        </g>
      ))}
    </svg>
  );
}

// ── CONSTRUCTION DELAYS PAGE (Gecikmələr, §C.1.7) ─────────

const DELAYS_DATA = [
  { code:'LYH-XK-001', name:'Xankəndi 5 saylı orta məktəb',    region:'Xankəndi', contractor:'Tikinti MMC №1', delay:35, due:'01.04.2026', progress:68, reason:'Material çatışmazlığı' },
  { code:'LYH-AG-002', name:'Ağdərə rayon xəstəxanası',        region:'Ağdərə',   contractor:'MedBuild ASC',   delay:21, due:'15.03.2026', progress:82, reason:'Podratçı gecikmə' },
  { code:'LYH-XL-007', name:'Xocalı-Ağdərə avtomobil yolu',    region:'Xocalı',   contractor:'Yol ASC',        delay:12, due:'20.04.2026', progress:45, reason:'Hava şəraiti' },
  { code:'LYH-XK-004', name:'Xankəndi su təchizatı şəbəkəsi',  region:'Xankəndi', contractor:'—',              delay:5,  due:'01.05.2026', progress:31, reason:'Tender prosesi' },
];

function PortalConstructionDelaysPage() {
  const [reasonTarget, setReasonTarget] = React.useState(null);
  const [reasonText,   setReasonText]   = React.useState('');

  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, marginBottom:18 }}>
        {[
          { label:'GECİKƏN OBYEKT SAYI', value: DELAYS_DATA.length, color:'#b91c1c', sub:'Aktiv gecikmə' },
          { label:'ORTA GECİKMƏ',        value:'18 gün',            color:'#b45309', sub:'Ortalama' },
          { label:'MAKSİMUM GECİKMƏ',    value:'35 gün',            color:'#dc2626', sub:'LYH-XK-001' },
        ].map((k, i) => (
          <div key={i} style={{ background:'#fff', border:'1px solid #e5ecf5', borderTop:`3px solid ${k.color}`, borderRadius:10, padding:'14px 16px', boxShadow:'0 1px 4px rgba(15,28,48,0.07)' }}>
            <div style={{ fontSize:10, color:'#8aa4c0', fontWeight:700, textTransform:'uppercase', letterSpacing:'0.08em', marginBottom:6 }}>{k.label}</div>
            <div style={{ fontSize:28, fontWeight:700, color:k.color, fontFamily:'IBM Plex Mono,monospace', lineHeight:1 }}>{k.value}</div>
            <div style={{ fontSize:11, color:'#8aa4c0', marginTop:5 }}>{k.sub}</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ overflow:'hidden' }}>
        <div style={{ padding:'12px 16px', borderBottom:'1px solid #e5ecf5', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontSize:13, fontWeight:600, color:'#0f1c30' }}>Gecikən Layihələr Reyestri</span>
          <button style={{ padding:'5px 12px', background:'#f0f4f8', border:'1px solid #d0ddef', borderRadius:6, fontSize:11, cursor:'pointer', color:'#4a6888' }}>↓ Excel İxrac</button>
        </div>
        <table className="tbl">
          <thead><tr>
            {['Kodu','Ad','Rayon','İcraçı','GECİKMƏ','Bitmə Tarixi','Tamamlanma','Səbəb','Əməliyyat'].map(h => (
              <th key={h} className="tbl-th">{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {DELAYS_DATA.map((d, i) => (
              <tr key={i} className="tbl-tr">
                <td className="tbl-td" style={{ fontFamily:'IBM Plex Mono,monospace', fontSize:11, color:'#2557d6' }}>{d.code}</td>
                <td className="tbl-td" style={{ fontWeight:500, color:'#0f1c30', maxWidth:160 }}>
                  <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{d.name}</div>
                </td>
                <td className="tbl-td">{d.region}</td>
                <td className="tbl-td" style={{ fontSize:12 }}>{d.contractor}</td>
                <td className="tbl-td">
                  <span style={{ fontSize:11, fontWeight:700, padding:'3px 9px', borderRadius:10, background:'#fef2f2', color:'#b91c1c' }}>{d.delay} gün</span>
                </td>
                <td className="tbl-td" style={{ fontSize:11, color:'#8aa4c0' }}>{d.due}</td>
                <td className="tbl-td">
                  <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                    <div style={{ width:48, height:5, background:'#e5ecf5', borderRadius:3, overflow:'hidden' }}>
                      <div style={{ height:'100%', width:`${d.progress}%`, background:'#2557d6', borderRadius:3 }}/>
                    </div>
                    <span style={{ fontSize:11, fontFamily:'monospace', fontWeight:600, color:'#0f1c30' }}>{d.progress}%</span>
                  </div>
                </td>
                <td className="tbl-td" style={{ fontSize:12, color:'#4a6888' }}>{d.reason}</td>
                <td className="tbl-td">
                  {reasonTarget === d.code ? (
                    <div style={{ display:'flex', gap:4 }}>
                      <input value={reasonText} onChange={e => setReasonText(e.target.value)}
                        style={{ padding:'3px 7px', border:'1px solid #d0ddef', borderRadius:4, fontSize:11, width:100 }}
                        placeholder="Səbəb..."/>
                      <button onClick={() => { setReasonTarget(null); setReasonText(''); }}
                        style={{ padding:'3px 8px', fontSize:11, borderRadius:4, border:'none', background:'#2557d6', color:'#fff', cursor:'pointer' }}>✓</button>
                    </div>
                  ) : (
                    <button onClick={() => setReasonTarget(d.code)}
                      style={{ padding:'3px 10px', fontSize:11, borderRadius:4, border:'1px solid #d0ddef', background:'#fff', color:'#4a6888', cursor:'pointer' }}>
                      Səbəb daxil et
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding:'10px 16px', borderTop:'1px solid #e5ecf5', fontSize:11, color:'#8aa4c0' }}>
          Gecikmiş obyektlər avtomatik eskalasiya üçün işarələnir · SLA bildirişi göndərilib (FR-295)
        </div>
      </div>
    </div>
  );
}

// ── RELOCATION EVENTS PAGE (Köç prosesi, §C.2.5) ──────────

const RELOCATION_EVENTS_DATA = [
  { id:'KOS-001', name:'Xankəndi I Köç Tədbiri',  date:'29.04.2026', region:'Xankəndi', families:3, code:'10-AB-123', officer:'Nigar Əliyeva',  status:'active',    label:'Aktiv' },
  { id:'KOS-002', name:'Xocalı Köç Tədbiri',       date:'02.05.2026', region:'Xocalı',   families:2, code:'10-XC-056', officer:'R. Hüseynov',   status:'planned',   label:'Planlaşdırılmış' },
  { id:'KOS-003', name:'Ağdərə Köç Tədbiri',       date:'05.05.2026', region:'Ağdərə',   families:3, code:'10-AG-078', officer:'A. Quliyeva',   status:'completed', label:'Tamamlandı' },
];
const KOC_STATUS_STYLE = {
  active:   { color:'#1d4ed8', bg:'#eff6ff' },
  planned:  { color:'#b45309', bg:'#fffbeb' },
  completed:{ color:'#15803d', bg:'#f0fdf4' },
};

// needs access to FAMILIES and FAM_STATUS from ayra-portal-vdp.jsx (loaded earlier)
function PortalRelocationEventsPage() {
  const [selected, setSelected] = React.useState(null);

  if (selected) {
    const ev = RELOCATION_EVENTS_DATA.find(e => e.id === selected);
    const st = KOC_STATUS_STYLE[ev.status];
    const fams = (window.FAMILIES_DATA || []).slice(0, ev.families);
    return (
      <div>
        <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:12, fontSize:12, color:'#8aa4c0' }}>
          <button style={{ background:'none', border:'none', color:'#2557d6', fontSize:12, cursor:'pointer', padding:0, fontFamily:'inherit' }}
            onClick={() => setSelected(null)}>Köç Prosesi</button>
          <span>›</span>
          <span style={{ color:'#0f1c30', fontWeight:500 }}>{ev.name}</span>
        </div>
        <div className="card card-padded" style={{ marginBottom:14 }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:16 }}>
            <div>
              <div style={{ display:'flex', gap:8, marginBottom:6 }}>
                <span style={{ fontFamily:'monospace', fontSize:11, color:'#8aa4c0' }}>{ev.id}</span>
                <span className="pill" style={{ background:st.bg, color:st.color }}>{ev.label}</span>
              </div>
              <div style={{ fontSize:17, fontWeight:700, color:'#0f1c30', marginBottom:4 }}>{ev.name}</div>
              <div style={{ fontSize:12, color:'#4a6888' }}>Tarix: {ev.date} · Rayon: {ev.region} · Məsul: {ev.officer}</div>
            </div>
            <div style={{ display:'flex', gap:8 }}>
              <button className="p-btn p-btn-secondary" style={{ fontSize:12 }}>✏️ Redaktə</button>
              {ev.status !== 'completed' && (
                <button className="p-btn p-btn-primary" style={{ fontSize:12 }}>✓ Təsdiqlə</button>
              )}
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:12 }}>
            {[
              { l:'Hadisə Kodu', v:ev.code },
              { l:'Ailə Sayı',   v:`${ev.families} ailə` },
              { l:'Məsul Şəxs',  v:ev.officer },
            ].map((f, i) => (
              <div key={i} style={{ background:'#f8fafd', borderRadius:8, padding:'10px 14px' }}>
                <div style={{ fontSize:10, color:'#8aa4c0', textTransform:'uppercase', letterSpacing:'0.06em', marginBottom:4 }}>{f.l}</div>
                <div style={{ fontSize:13, fontWeight:600, color:'#0f1c30' }}>{f.v}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="card" style={{ overflow:'hidden' }}>
          <div style={{ padding:'12px 16px', borderBottom:'1px solid #e5ecf5' }}>
            <span style={{ fontSize:13, fontWeight:600, color:'#0f1c30' }}>Bu Tədbirə Daxil Edilmiş Ailələr ({ev.families})</span>
          </div>
          <table className="tbl">
            <thead><tr>
              {['AİLƏ №','Ailə Başçısı','Üzv Sayı','Rayon','Status'].map(h => <th key={h} className="tbl-th">{h}</th>)}
            </tr></thead>
            <tbody>
              {[
                { code:'AİL-XK-001', name:'Hüseynov Ramil', members:4, region:'Xankəndi', status:'allocated' },
                { code:'AİL-AG-003', name:'Əliyev Tural',   members:5, region:'Ağdərə',   status:'lottery' },
                { code:'AİL-XL-005', name:'Nəsirov Kamran', members:6, region:'Xocalı',   status:'handoff' },
              ].slice(0, ev.families).map((f, i) => {
                const famStatus = { allocated:{label:'Mənzil Verildi',color:'#15803d',bg:'#f0fdf4'}, lottery:{label:'Püşkdə',color:'#1d4ed8',bg:'#eff6ff'}, handoff:{label:'Ötürülür',color:'#7c3aed',bg:'#f5f3ff'} };
                const fs = famStatus[f.status] || {label:f.status,color:'#6b7280',bg:'#f9fafb'};
                return (
                  <tr key={i} className="tbl-tr">
                    <td className="tbl-td" style={{ fontFamily:'monospace', fontSize:11, color:'#4a6888' }}>{f.code}</td>
                    <td className="tbl-td" style={{ fontWeight:500, color:'#0f1c30' }}>{f.name}</td>
                    <td className="tbl-td" style={{ textAlign:'center' }}>{f.members}</td>
                    <td className="tbl-td">{f.region}</td>
                    <td className="tbl-td">
                      <span className="pill" style={{ background:fs.bg, color:fs.color, fontSize:10 }}>{fs.label}</span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
        <div style={{ fontSize:13, color:'#4a6888' }}>{RELOCATION_EVENTS_DATA.length} köç tədbiri qeydiyyatda</div>
        <button className="p-btn p-btn-primary" style={{ fontSize:12 }}>+ Yeni Köç Tədbiri</button>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
        {RELOCATION_EVENTS_DATA.map((ev, i) => {
          const st = KOC_STATUS_STYLE[ev.status];
          return (
            <div key={i} className="card" style={{ padding:'16px 18px', cursor:'pointer', transition:'box-shadow 150ms' }}
              onMouseEnter={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(15,28,48,0.10)'}
              onMouseLeave={e => e.currentTarget.style.boxShadow = ''}
              onClick={() => setSelected(ev.id)}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
                <div style={{ flex:1 }}>
                  <div style={{ display:'flex', gap:8, marginBottom:6, alignItems:'center' }}>
                    <span style={{ fontFamily:'monospace', fontSize:10, color:'#8aa4c0' }}>{ev.id}</span>
                    <span className="pill" style={{ background:st.bg, color:st.color, fontSize:10 }}>{ev.label}</span>
                  </div>
                  <div style={{ fontSize:14, fontWeight:700, color:'#0f1c30', marginBottom:4 }}>{ev.name}</div>
                  <div style={{ fontSize:12, color:'#4a6888' }}>
                    📅 {ev.date} · 📍 {ev.region} · 👨‍👩‍👧 {ev.families} ailə · Hadisə: {ev.code}
                  </div>
                  <div style={{ fontSize:11, color:'#8aa4c0', marginTop:3 }}>Məsul: {ev.officer}</div>
                </div>
                <div style={{ display:'flex', gap:6, flexShrink:0 }}>
                  <button className="p-btn p-btn-secondary" style={{ fontSize:11 }}
                    onClick={e => { e.stopPropagation(); setSelected(ev.id); }}>Təfərrüat</button>
                  {ev.status !== 'completed' && (
                    <button className="p-btn p-btn-primary" style={{ fontSize:11 }}
                      onClick={e => e.stopPropagation()}>✓ Təsdiqlə</button>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── PERMISSION MATRIX (Rol və access, §C.6.2, FR-296–300) ─

const PERM_ROLES = [
  { name:'Sistem Admini',            ops:[1,1,1,1,1,1], highlight:true },
  { name:'Rəhbərlik',                ops:[1,0,0,1,1,1] },
  { name:'Memarlıq — Operator',      ops:[1,1,1,0,0,1] },
  { name:'Texnozor',                 ops:[1,0,1,1,0,1] },
  { name:'Memarlıq — Rəhbər',        ops:[1,1,1,1,1,1] },
  { name:'Məskunlaşma — Operator',   ops:[1,1,1,0,0,1] },
  { name:'Məskunlaşma — Rəhbər',     ops:[1,1,1,1,1,1] },
  { name:'Mənzil Fondu — Operator',  ops:[1,1,1,0,0,1] },
  { name:'Mənzil Fondu — Rəhbər',    ops:[1,1,1,1,1,1] },
  { name:'Əmlak — Operator',         ops:[1,1,1,0,0,1] },
  { name:'Əmlak — Rəhbər',           ops:[1,1,1,1,1,1] },
  { name:'Regional İstifadəçi',       ops:[1,0,0,0,0,1] },
];
const PERM_OPS  = ['BAXIŞ','YARATMA','REDAKTƏ','STATUS DƏYİŞMƏ','TƏSDİQ','İXRAC'];
const OP_COLORS = ['#2557d6','#15803d','#b45309','#7c3aed','#b91c1c','#0e7490'];

function PortalPermissionMatrixPage() {
  const total = PERM_ROLES.length;
  const fullAccess = PERM_ROLES.filter(r => r.ops.every(o => o === 1)).length;

  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, marginBottom:18 }}>
        {[
          { label:'ÜMUMİ ROL SAYI',   value:total,       color:'#0f1c30' },
          { label:'TAM İCАZƏ',        value:fullAccess,  color:'#15803d' },
          { label:'ƏMƏLİYYAT NÖVLƏRİ',value:PERM_OPS.length, color:'#2557d6' },
        ].map((k, i) => (
          <div key={i} className="kpi-card">
            <div className="kpi-name">{k.label}</div>
            <div className="kpi-value" style={{ fontSize:30, color:k.color }}>{k.value}</div>
          </div>
        ))}
      </div>

      <div className="card" style={{ overflow:'auto' }}>
        <div style={{ padding:'12px 16px', borderBottom:'1px solid #e5ecf5', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontSize:13, fontWeight:600, color:'#0f1c30' }}>İcazə Matrisi — Rol × Əməliyyat</span>
          <button style={{ padding:'5px 12px', background:'#f0f4f8', border:'1px solid #d0ddef', borderRadius:6, fontSize:11, cursor:'pointer', color:'#4a6888' }}>↓ Excel İxrac</button>
        </div>
        <table style={{ width:'100%', borderCollapse:'collapse', minWidth:700 }}>
          <thead>
            <tr style={{ background:'#f8fafd' }}>
              <th style={{ textAlign:'left', fontSize:11, fontWeight:700, color:'#8aa4c0', padding:'10px 16px', borderBottom:'1px solid #e5ecf5', minWidth:200 }}>ROL</th>
              {PERM_OPS.map((op, i) => (
                <th key={i} style={{ textAlign:'center', fontSize:9, fontWeight:700, color:OP_COLORS[i], textTransform:'uppercase', letterSpacing:'0.06em', padding:'10px 8px', borderBottom:'1px solid #e5ecf5', minWidth:80 }}>
                  <div style={{ width:8, height:8, borderRadius:'50%', background:OP_COLORS[i], margin:'0 auto 4px' }}/>
                  {op}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {PERM_ROLES.map((role, ri) => (
              <tr key={ri} style={{ borderBottom:'1px solid #f0f4f8', background: role.highlight ? '#fafbff' : undefined }}
                onMouseEnter={e => e.currentTarget.style.background = '#f8fafd'}
                onMouseLeave={e => e.currentTarget.style.background = role.highlight ? '#fafbff' : undefined}>
                <td style={{ padding:'11px 16px', fontSize:12, fontWeight: role.highlight ? 700 : 500, color:'#0f1c30', display:'flex', alignItems:'center', gap:8 }}>
                  {role.highlight && <span style={{ width:8, height:8, borderRadius:'50%', background:'#2557d6', flexShrink:0 }}/>}
                  {role.name}
                </td>
                {role.ops.map((checked, oi) => (
                  <td key={oi} style={{ textAlign:'center', padding:'11px 8px' }}>
                    {checked
                      ? <span style={{ width:22, height:22, borderRadius:'50%', background:OP_COLORS[oi], display:'inline-flex', alignItems:'center', justifyContent:'center', color:'#fff', fontSize:11, fontWeight:700 }}>✓</span>
                      : <span style={{ width:22, height:22, borderRadius:'50%', border:'1.5px solid #e5ecf5', display:'inline-flex', alignItems:'center', justifyContent:'center', color:'#d0ddef', fontSize:11 }}>—</span>
                    }
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding:'10px 16px', borderTop:'1px solid #e5ecf5', fontSize:11, color:'#8aa4c0', display:'flex', justifyContent:'space-between' }}>
          <span>SoD (Separation of Duties) xəbərdarlıqları aktiv · FR-299</span>
          <span>Effektiv icazə = miras alınan + öz icazəsi (FR-298)</span>
        </div>
      </div>
    </div>
  );
}

// ── PROPERTY EXPIRY NOTIFICATIONS (Bitmə bildirişləri, §C.4) ─

const EXPIRY_DATA = [
  { code:'ÜM-XK-002', tenant:'Qida Anbarı QSC',       type:'İcarə',            expiry:'30.06.2026', daysLeft:46, monthly:'₼ 2 900', status:'warning' },
  { code:'ÜM-XL-004', tenant:'Avadanlıq İdxalı ASC',  type:'İcarə',            expiry:'30.04.2026', daysLeft:0,  monthly:'₼ 4 050', status:'expired' },
  { code:'ÜM-AG-015', tenant:'Qazaxıstan Trade MMC',   type:'Birgə fəaliyyət',  expiry:'15.07.2026', daysLeft:61, monthly:'₼ 1 500', status:'warning' },
  { code:'ÜM-XK-007', tenant:'EcoClean Tullantı ASC',  type:'Tullantı satışı',  expiry:'01.08.2026', daysLeft:78, monthly:'₼ 800',  status:'ok' },
];

function PortalPropertyExpiryPage() {
  return (
    <div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10, marginBottom:18 }}>
        {[
          { label:'BİTMİŞ MÜQAVİLƏLƏR',  value: EXPIRY_DATA.filter(e => e.status === 'expired').length,  color:'#b91c1c' },
          { label:'90 GÜNDƏ BİTƏCƏK',     value: EXPIRY_DATA.filter(e => e.status === 'warning').length,  color:'#b45309' },
          { label:'AKTİV İZLƏNİLİR',      value: EXPIRY_DATA.filter(e => e.status === 'ok').length,       color:'#15803d' },
        ].map((k, i) => (
          <div key={i} className="kpi-card">
            <div className="kpi-name">{k.label}</div>
            <div className="kpi-value" style={{ fontSize:30, color:k.color }}>{k.value}</div>
          </div>
        ))}
      </div>
      <div className="card" style={{ overflow:'hidden' }}>
        <div style={{ padding:'12px 16px', borderBottom:'1px solid #e5ecf5', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span style={{ fontSize:13, fontWeight:600, color:'#0f1c30' }}>Bitmə Yaxınlaşan və Bitmiş Müqavilələr</span>
          <button style={{ padding:'5px 12px', background:'#fff', border:'1px solid #d0ddef', borderRadius:6, fontSize:11, cursor:'pointer', color:'#4a6888' }}>↓ İxrac</button>
        </div>
        <table className="tbl">
          <thead><tr>
            {['Müq. №','İcarəçi','Növ','Bitmə Tarixi','Qalan Gün','Aylıq','Vəziyyət','Əməliyyat'].map(h => (
              <th key={h} className="tbl-th">{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {EXPIRY_DATA.map((e, i) => (
              <tr key={i} className="tbl-tr">
                <td className="tbl-td" style={{ fontFamily:'IBM Plex Mono,monospace', fontSize:11, color:'#2557d6' }}>{e.code}</td>
                <td className="tbl-td" style={{ fontWeight:500, color:'#0f1c30' }}>{e.tenant}</td>
                <td className="tbl-td" style={{ fontSize:12 }}>{e.type}</td>
                <td className="tbl-td" style={{ fontSize:11, color:'#4a6888', whiteSpace:'nowrap' }}>{e.expiry}</td>
                <td className="tbl-td">
                  <span style={{ fontSize:11, fontWeight:700, padding:'3px 9px', borderRadius:10,
                    background: e.status==='expired'?'#fef2f2':e.status==='warning'?'#fffbeb':'#f0fdf4',
                    color:      e.status==='expired'?'#b91c1c':e.status==='warning'?'#b45309':'#15803d' }}>
                    {e.status==='expired' ? 'Bitib' : `${e.daysLeft} gün`}
                  </span>
                </td>
                <td className="tbl-td" style={{ fontFamily:'IBM Plex Mono,monospace', fontSize:12, fontWeight:700, color:'#0f1c30' }}>{e.monthly}</td>
                <td className="tbl-td">
                  <span className="pill" style={{
                    background: e.status==='expired'?'#fef2f2':e.status==='warning'?'#fffbeb':'#f0fdf4',
                    color:      e.status==='expired'?'#b91c1c':e.status==='warning'?'#b45309':'#15803d', fontSize:10 }}>
                    {e.status==='expired'?'Bitib':e.status==='warning'?'Yaxınlaşır':'Aktiv'}
                  </span>
                </td>
                <td className="tbl-td">
                  <button style={{ padding:'3px 10px', fontSize:11, borderRadius:4, border:'1px solid #c7d9fd', background:'#eff6ff', color:'#1d4ed8', cursor:'pointer', fontWeight:500 }}>Yenilə</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ padding:'10px 16px', borderTop:'1px solid #e5ecf5', fontSize:11, color:'#8aa4c0' }}>
          Avtomatik bildiriş: 90 gün · 30 gün · 7 gün öncədən e-poçt + tətbiq (FR-319)
        </div>
      </div>
    </div>
  );
}

// ── TEXNOZOR (İCRA) PAGE (§C.1.5) ────────────────────────

const TEXNOZOR_DATA = [
  {code:'LYH-XK-001',name:'Xankəndi 5 saylı orta məktəb',   region:'Xankəndi',contractor:'Tikinti MMC №1',current:68},
  {code:'LYH-AG-002',name:'Ağdərə rayon xəstəxanası',       region:'Ağdərə',  contractor:'MedBuild ASC',  current:82},
  {code:'LYH-XL-007',name:'Xocalı-Ağdərə avtomobil yolu',   region:'Xocalı',  contractor:'Yol ASC',       current:45},
  {code:'LYH-XK-008',name:'Xankəndi 3 saylı uşaq bağçası',  region:'Xankəndi',contractor:'—',             current:8},
];

function PortalTexnozorPage() {
  const [pcts,  setPcts]  = React.useState(()=>Object.fromEntries(TEXNOZOR_DATA.map(d=>[d.code,d.current])));
  const [saved, setSaved] = React.useState({});
  const [cust,  setCust]  = React.useState({});
  const quickSet = (code,val)=>{
    setPcts(s=>({...s,[code]:val}));
    setSaved(s=>({...s,[code]:true}));
    setTimeout(()=>setSaved(s=>({...s,[code]:false})),1400);
  };
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:18}}>
        <div style={{fontSize:13,color:'#4a6888'}}>Tikinti davam edən {TEXNOZOR_DATA.length} layihə · tamamlanma faizi yeniləmə</div>
        <div style={{display:'flex',alignItems:'center',gap:7,padding:'6px 12px',background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:8,fontSize:12,color:'#15803d',fontWeight:500}}>● Sinxronizasiya aktiv</div>
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        {TEXNOZOR_DATA.map((obj,i)=>(
          <div key={i} className="card" style={{padding:'16px 18px'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:12}}>
              <div>
                <div style={{display:'flex',gap:8,marginBottom:4}}>
                  <span style={{fontFamily:'monospace',fontSize:10,color:'#8aa4c0'}}>{obj.code}</span>
                  <span className="pill" style={{background:'#eff6ff',color:'#1d4ed8',fontSize:10}}>Tikinti davam edir</span>
                  {saved[obj.code]&&<span style={{fontSize:10,color:'#15803d',fontWeight:600}}>✓ Saxlanıldı</span>}
                </div>
                <div style={{fontSize:14,fontWeight:600,color:'#0f1c30',marginBottom:2}}>{obj.name}</div>
                <div style={{fontSize:11,color:'#4a6888'}}>{obj.region} · {obj.contractor}</div>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontSize:30,fontWeight:700,color:'#0f1c30',fontFamily:'IBM Plex Mono,monospace',lineHeight:1}}>{pcts[obj.code]}%</div>
                <div style={{fontSize:10,color:'#8aa4c0'}}>cari tamamlanma</div>
              </div>
            </div>
            <div style={{height:6,background:'#e5ecf5',borderRadius:3,marginBottom:12,overflow:'hidden'}}>
              <div style={{height:'100%',width:`${pcts[obj.code]}%`,background:'#2557d6',borderRadius:3,transition:'width 0.4s'}}/>
            </div>
            <div style={{display:'flex',gap:6,alignItems:'center',flexWrap:'wrap'}}>
              <span style={{fontSize:11,color:'#8aa4c0',marginRight:2}}>Sürətli yeniləmə:</span>
              {[10,30,50,100].map(v=>(
                <button key={v} onClick={()=>quickSet(obj.code,v)}
                  style={{padding:'6px 14px',borderRadius:8,border:`1px solid ${pcts[obj.code]===v?'#2557d6':'#d0ddef'}`,background:pcts[obj.code]===v?'#2557d6':'#fff',color:pcts[obj.code]===v?'#fff':'#4a6888',fontSize:13,fontWeight:pcts[obj.code]===v?700:400,cursor:'pointer',minWidth:48,transition:'all 120ms'}}>{v}%</button>
              ))}
              <div style={{display:'flex',gap:4,alignItems:'center',marginLeft:4}}>
                <input type="number" min="0" max="100" value={cust[obj.code]||''} onChange={e=>setCust(s=>({...s,[obj.code]:e.target.value}))}
                  style={{width:58,padding:'6px 8px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,outline:'none',textAlign:'center'}} placeholder="%"/>
                <button onClick={()=>{if(cust[obj.code])quickSet(obj.code,parseInt(cust[obj.code]));}}
                  style={{padding:'6px 12px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}}>✓</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── USERS PAGE (İstifadəçilər, §C.6.1) ───────────────────

const USERS_DATA = [
  {name:'Elvin Məmmədov', email:'elvin.m@btix.gov.az',  role:'Sistem Admini',           dept:'İT şöbəsi',    region:'Hamısı',   status:'aktiv',   last:'14.05.2026 09:12',initials:'EM',color:'#2557d6'},
  {name:'Nigar Əliyeva',  email:'nigar.a@btix.gov.az',   role:'Memarlıq — Rəhbər',       dept:'Memarlıq',     region:'Xankəndi', status:'aktiv',   last:'14.05.2026 08:55',initials:'NƏ',color:'#7c3aed'},
  {name:'Rəşad Hüseynov', email:'resad.h@btix.gov.az',   role:'Texnozor',                dept:'Memarlıq',     region:'Xocalı',   status:'aktiv',   last:'13.05.2026 17:20',initials:'RH',color:'#0e7490'},
  {name:'Aysel Quliyeva', email:'aysel.q@btix.gov.az',   role:'Məskunlaşma — Operator',  dept:'Məskunlaşma',  region:'Ağdərə',   status:'aktiv',   last:'13.05.2026 15:10',initials:'AQ',color:'#15803d'},
  {name:'Samir Həsənov',  email:'samir.h@btix.gov.az',   role:'Əmlak — Rəhbər',          dept:'Əmlak',        region:'Hamısı',   status:'aktiv',   last:'12.05.2026 11:34',initials:'SH',color:'#c2410c'},
  {name:'Günel Rzayeva',  email:'gunel.r@btix.gov.az',   role:'Mənzil Fondu — Operator', dept:'Mənzil Fondu', region:'Xocalı',   status:'deaktiv', last:'01.04.2026 14:00',initials:'GR',color:'#6b7280'},
  {name:'Tural Abbasov',  email:'tural.a@btix.gov.az',   role:'Regional İstifadəçi',      dept:'Regional ofis',region:'Ağdərə',   status:'aktiv',   last:'11.05.2026 10:22',initials:'TA',color:'#b45309'},
];
const ROLE_BADGE = {'Sistem Admini':{c:'#1d4ed8',b:'#eff6ff'},'Memarlıq — Rəhbər':{c:'#7c3aed',b:'#f5f3ff'},'Texnozor':{c:'#0e7490',b:'#f0f9ff'},'Məskunlaşma — Operator':{c:'#15803d',b:'#f0fdf4'},'Əmlak — Rəhbər':{c:'#c2410c',b:'#fff7ed'},'Mənzil Fondu — Operator':{c:'#b45309',b:'#fffbeb'},'Regional İstifadəçi':{c:'#6b7280',b:'#f9fafb'}};

function PortalUsersPage() {
  const [search,setSearch]=React.useState('');
  const [reg,setReg]=React.useState('');
  const filtered=USERS_DATA.filter(u=>(!search||u.name.toLowerCase().includes(search.toLowerCase())||u.email.includes(search))&&(!reg||u.region===reg));
  return (
    <div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:18}}>
        {[{label:'ÜMUMİ',value:USERS_DATA.length,color:'#0f1c30'},{label:'AKTİV',value:USERS_DATA.filter(u=>u.status==='aktiv').length,color:'#15803d'},{label:'DEAKTİV',value:USERS_DATA.filter(u=>u.status==='deaktiv').length,color:'#b91c1c'}].map((k,i)=>(
          <div key={i} className="kpi-card"><div className="kpi-name">{k.label}</div><div className="kpi-value" style={{fontSize:30,color:k.color}}>{k.value}</div></div>
        ))}
      </div>
      <div style={{display:'flex',gap:8,marginBottom:14,alignItems:'center'}}>
        <input className="p-input" style={{flex:1,maxWidth:280}} placeholder="Ad, e-poçt axtar…" value={search} onChange={e=>setSearch(e.target.value)}/>
        <select style={{padding:'8px 10px',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,color:'#4a6888',background:'#fff'}} value={reg} onChange={e=>setReg(e.target.value)}>
          <option value="">Bütün bölgələr</option>
          {['Xankəndi','Ağdərə','Xocalı','Hamısı'].map(r=><option key={r}>{r}</option>)}
        </select>
        <div style={{marginLeft:'auto'}}><button className="p-btn p-btn-primary" style={{fontSize:12}}>+ Yeni İstifadəçi</button></div>
      </div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl">
          <thead><tr>{['AD SOYAD','E-POÇT','ROL','ŞÖBƏ','BÖLGƏ','STATUS','SON GİRİŞ',''].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>
            {filtered.map((u,i)=>{const rc=ROLE_BADGE[u.role]||{c:'#6b7280',b:'#f9fafb'};return(
              <tr key={i} className="tbl-tr">
                <td className="tbl-td"><div style={{display:'flex',alignItems:'center',gap:9}}><div style={{width:30,height:30,borderRadius:7,background:u.color,display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,fontWeight:700,color:'#fff',flexShrink:0}}>{u.initials}</div><span style={{fontWeight:600,color:'#0f1c30',fontSize:12}}>{u.name}</span></div></td>
                <td className="tbl-td" style={{fontSize:11,color:'#4a6888'}}>{u.email}</td>
                <td className="tbl-td"><span className="pill" style={{background:rc.b,color:rc.c,fontSize:10}}>{u.role}</span></td>
                <td className="tbl-td" style={{fontSize:12}}>{u.dept}</td>
                <td className="tbl-td" style={{fontSize:12}}>{u.region}</td>
                <td className="tbl-td"><span className="pill" style={{background:u.status==='aktiv'?'#f0fdf4':'#fef2f2',color:u.status==='aktiv'?'#15803d':'#b91c1c',fontSize:10}}>{u.status==='aktiv'?'● Aktiv':'○ Deaktiv'}</span></td>
                <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>{u.last}</td>
                <td className="tbl-td"><button style={{padding:'3px 10px',fontSize:11,borderRadius:4,border:'1px solid #d0ddef',background:'#fff',color:'#4a6888',cursor:'pointer'}}>✏️ Redaktə</button></td>
              </tr>
            );})}
          </tbody>
        </table>
        <div style={{padding:'10px 16px',borderTop:'1px solid #e5ecf5',fontSize:11,color:'#8aa4c0',display:'flex',justifyContent:'space-between'}}>
          <span>SCIM 2.0 provisioning · JIT aktivasiya</span><span>{filtered.length}/{USERS_DATA.length} göstərilir</span>
        </div>
      </div>
    </div>
  );
}

// ── RESETTLEMENT LEASES + REFUSALS ────────────────────────

function PortalResLeasesPage() {
  const data=[
    {code:'İM-XK-001',family:'AİL-XK-001',addr:'Xankəndi, Azadlıq 14/3',start:'01.04.2026',end:'31.03.2027',type:'Sosial',status:'aktiv'},
    {code:'İM-AG-002',family:'AİL-AG-004',addr:'Ağdərə, Zəfər 3/8',     start:'15.03.2026',end:'14.03.2027',type:'Sosial',status:'aktiv'},
    {code:'İM-XL-003',family:'AİL-XL-005',addr:'Xocalı, İstiqlal 5/2',  start:'01.05.2026',end:'30.04.2027',type:'Sosial',status:'aktiv'},
    {code:'İM-XK-004',family:'AİL-XK-002',addr:'—',                     start:'—',         end:'—',         type:'Gözləyir',status:'pending'},
  ];
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:14}}><div style={{fontSize:13,color:'#4a6888'}}>{data.length} icarə müqaviləsi</div><button className="p-btn p-btn-primary" style={{fontSize:12}}>+ Yeni Müqavilə</button></div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl"><thead><tr>{['Müq. №','AİLƏ №','Ünvan','Başlama','Bitmə','Növ','Status'].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>{data.map((l,i)=>(
            <tr key={i} className="tbl-tr">
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{l.code}</td>
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{l.family}</td>
              <td className="tbl-td" style={{fontSize:12}}>{l.addr}</td>
              <td className="tbl-td" style={{fontSize:11,color:'#4a6888'}}>{l.start}</td>
              <td className="tbl-td" style={{fontSize:11,color:'#4a6888'}}>{l.end}</td>
              <td className="tbl-td"><span className="pill" style={{background:'#eff6ff',color:'#1d4ed8',fontSize:10}}>{l.type}</span></td>
              <td className="tbl-td"><span className="pill" style={{background:l.status==='aktiv'?'#f0fdf4':'#fffbeb',color:l.status==='aktiv'?'#15803d':'#b45309',fontSize:10}}>{l.status==='aktiv'?'Aktiv':'Gözləyir'}</span></td>
            </tr>
          ))}</tbody>
        </table>
      </div>
    </div>
  );
}

function PortalRefusalPage() {
  const data=[
    {code:'İMP-001',family:'AİL-XL-007',name:'İsmayılov Fuad', reason:'Alternativ mənzil seçimi',         date:'18.03.2026',officer:'N. Əliyeva', status:'bağlı'},
    {code:'İMP-002',family:'AİL-XK-009',name:'Hüseynli Əsgər', reason:'Ailə üzvlərinin razılıq verməməsi',date:'05.04.2026',officer:'N. Əliyeva', status:'bağlı'},
    {code:'İMP-003',family:'AİL-AG-010',name:'Kərimov Namiq',  reason:'Bölgə uyğunsuzluğu',              date:'20.04.2026',officer:'A. Quliyeva',status:'açıq'},
  ];
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:14}}><div style={{fontSize:13,color:'#4a6888'}}>{data.length} imtina protokolu</div><button className="p-btn p-btn-primary" style={{fontSize:12}}>+ Yeni Protokol</button></div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl"><thead><tr>{['Protokol №','AİLƏ №','Ailə Başçısı','Səbəb','Tarix','Məsul','Status'].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>{data.map((r,i)=>(
            <tr key={i} className="tbl-tr">
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{r.code}</td>
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{r.family}</td>
              <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30'}}>{r.name}</td>
              <td className="tbl-td" style={{fontSize:12,color:'#4a6888'}}>{r.reason}</td>
              <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0'}}>{r.date}</td>
              <td className="tbl-td" style={{fontSize:12}}>{r.officer}</td>
              <td className="tbl-td"><span className="pill" style={{background:r.status==='bağlı'?'#f0fdf4':'#fef2f2',color:r.status==='bağlı'?'#15803d':'#b91c1c',fontSize:10}}>{r.status}</span></td>
            </tr>
          ))}</tbody>
        </table>
      </div>
    </div>
  );
}

// ── APPLICANTS + MONTHLY PAYMENTS (Housing Fund §C.3.3) ──

function PortalApplicantsPage() {
  const data=[
    {code:'MRC-001',name:'Babaxanov Vüsal',members:3,region:'Xankəndi',priority:'yüksək',date:'10.04.2026',status:'gözləyir'},
    {code:'MRC-002',name:'Əsədova Lalə',  members:2,region:'Ağdərə',  priority:'orta',  date:'15.04.2026',status:'yoxlanılır'},
    {code:'MRC-003',name:'Rəhimov Elnur', members:5,region:'Xocalı',  priority:'yüksək',date:'20.04.2026',status:'gözləyir'},
    {code:'MRC-004',name:'Nəcəfova Günay',members:4,region:'Xankəndi',priority:'aşağı', date:'01.05.2026',status:'gözləyir'},
  ];
  const pr={yüksək:{c:'#b91c1c',b:'#fef2f2'},orta:{c:'#b45309',b:'#fffbeb'},aşağı:{c:'#15803d',b:'#f0fdf4'}};
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:14}}><div style={{fontSize:13,color:'#4a6888'}}>{data.length} müraciətçi</div><button className="p-btn p-btn-primary" style={{fontSize:12}}>+ Yeni Müraciət</button></div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl"><thead><tr>{['Kod','Ad','Üzv','Bölgə','Prioritet','Müraciət tarixi','Status','Əməliyyat'].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>{data.map((a,i)=>{const p=pr[a.priority]||{c:'#6b7280',b:'#f9fafb'};return(
            <tr key={i} className="tbl-tr">
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{a.code}</td>
              <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30'}}>{a.name}</td>
              <td className="tbl-td" style={{textAlign:'center'}}>{a.members}</td>
              <td className="tbl-td">{a.region}</td>
              <td className="tbl-td"><span className="pill" style={{background:p.b,color:p.c,fontSize:10}}>{a.priority}</span></td>
              <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0'}}>{a.date}</td>
              <td className="tbl-td"><span className="pill" style={{background:a.status==='yoxlanılır'?'#eff6ff':'#fffbeb',color:a.status==='yoxlanılır'?'#1d4ed8':'#b45309',fontSize:10}}>{a.status}</span></td>
              <td className="tbl-td"><button style={{padding:'3px 10px',fontSize:11,borderRadius:4,border:'1px solid #c7d9fd',background:'#eff6ff',color:'#1d4ed8',cursor:'pointer',fontWeight:500}}>Təhkim et</button></td>
            </tr>
          );})}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function PortalMonthlyPaymentsPage() {
  const data=[
    {code:'MNZ-XK-002',tenant:'Hüseynov R.', month:'May 2026',amount:'₼ 0',type:'Sosial',status:'ödənilib',date:'01.05.2026'},
    {code:'MNZ-AG-011',tenant:'Babayeva G.',  month:'May 2026',amount:'₼ 0',type:'Sosial',status:'ödənilib',date:'02.05.2026'},
    {code:'MNZ-XK-001',tenant:'—',            month:'May 2026',amount:'₼ 0',type:'Boş',   status:'tətbiq edilmir',date:'—'},
    {code:'MNZ-AG-012',tenant:'Gözləyir',     month:'May 2026',amount:'₼ 0',type:'Sosial',status:'gözləyir',date:'—'},
  ];
  return (
    <div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:18}}>
        {[{label:'BU AY CƏMİ',value:'₼ 0',color:'#0f1c30',sub:'Sosial icarə'},{label:'ÖDƏNİLMİŞ',value:2,color:'#15803d',sub:'Bu ay'},{label:'GÖZLƏYİR',value:1,color:'#b45309',sub:'Prosesdə'}].map((k,i)=>(
          <div key={i} className="kpi-card"><div className="kpi-name">{k.label}</div><div className="kpi-value" style={{fontSize:28,color:k.color}}>{k.value}</div><div className="kpi-meta">{k.sub}</div></div>
        ))}
      </div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl"><thead><tr>{['Mənzil','İstifadəçi','Dövr','Məbləğ','Növ','Status','Tarix'].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>{data.map((p,i)=>(
            <tr key={i} className="tbl-tr">
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{p.code}</td>
              <td className="tbl-td" style={{fontWeight:500}}>{p.tenant}</td>
              <td className="tbl-td" style={{fontSize:11,color:'#4a6888'}}>{p.month}</td>
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:12,fontWeight:700}}>{p.amount}</td>
              <td className="tbl-td" style={{fontSize:11}}>{p.type}</td>
              <td className="tbl-td"><span className="pill" style={{background:p.status==='ödənilib'?'#f0fdf4':p.status==='gözləyir'?'#fffbeb':'#f9fafb',color:p.status==='ödənilib'?'#15803d':p.status==='gözləyir'?'#b45309':'#6b7280',fontSize:10}}>{p.status}</span></td>
              <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0'}}>{p.date}</td>
            </tr>
          ))}</tbody>
        </table>
      </div>
    </div>
  );
}

// ── PROPERTY OBJECTS + WASTE SALES (§C.4) ────────────────

function PortalPropertyObjectsPage() {
  const data=[
    {code:'ƏML-XK-001',name:'Xankəndi Bazarı Blok A',   zone:'Kommersiya',region:'Xankəndi',area:'1 200 m²',contracts:3,status:'aktiv'},
    {code:'ƏML-XK-002',name:'Xankəndi Ofis Mərkəzi',    zone:'Ofis',      region:'Xankəndi',area:'480 m²',  contracts:1,status:'aktiv'},
    {code:'ƏML-AG-003',name:'Ağdərə Anbar Kompleksi',   zone:'Anbar',     region:'Ağdərə',  area:'2 400 m²',contracts:2,status:'aktiv'},
    {code:'ƏML-XL-004',name:'Xocalı Tullantı Məntəqəsi',zone:'Xüsusi',   region:'Xocalı',  area:'800 m²',  contracts:1,status:'aktiv'},
    {code:'ƏML-XK-005',name:'Xankəndi Ticarət Mərkəzi', zone:'Kommersiya',region:'Xankəndi',area:'3 200 m²',contracts:0,status:'passiv'},
  ];
  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',marginBottom:14}}><div style={{fontSize:13,color:'#4a6888'}}>{data.length} əmlak obyekti</div><button className="p-btn p-btn-primary" style={{fontSize:12}}>+ Yeni Əmlak</button></div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl"><thead><tr>{['Kod','Ad','Zona','Rayon','Sahə','Müqavilə','Status'].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>{data.map((o,i)=>(
            <tr key={i} className="tbl-tr">
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{o.code}</td>
              <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30'}}>{o.name}</td>
              <td className="tbl-td" style={{fontSize:12}}>{o.zone}</td>
              <td className="tbl-td" style={{fontSize:12}}>{o.region}</td>
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:12}}>{o.area}</td>
              <td className="tbl-td" style={{textAlign:'center',fontWeight:700,color:'#0f1c30',fontFamily:'monospace'}}>{o.contracts}</td>
              <td className="tbl-td"><span className="pill" style={{background:o.status==='aktiv'?'#f0fdf4':'#f9fafb',color:o.status==='aktiv'?'#15803d':'#6b7280',fontSize:10}}>{o.status==='aktiv'?'Aktiv':'Passiv'}</span></td>
            </tr>
          ))}</tbody>
        </table>
      </div>
    </div>
  );
}

function PortalWasteSalesPage() {
  const data=[
    {code:'TLN-001',buyer:'EcoClean Tullantı ASC', type:'Tikinti tullantısı',weight:'12.4 t',price:'₼ 800',  date:'01.03.2026',status:'tamamlandı'},
    {code:'TLN-002',buyer:'Xankəndi Metallurgiya',  type:'Metal qırıntısı',   weight:'3.8 t', price:'₼ 1 140',date:'15.04.2026',status:'tamamlandı'},
    {code:'TLN-003',buyer:'EcoClean Tullantı ASC',  type:'Tikinti tullantısı',weight:'8.2 t', price:'₼ 492', date:'01.05.2026',status:'aktiv'},
    {code:'TLN-004',buyer:'Regional Emal Zavodu',   type:'Ağac tullantısı',   weight:'5.6 t', price:'₼ 280', date:'10.05.2026',status:'gözləyir'},
  ];
  return (
    <div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:18}}>
        {[{label:'CƏMİ SATIŞLAR',value:data.length,color:'#0f1c30'},{label:'ÜMUMI GƏLİR',value:'₼ 2 712',color:'#15803d'},{label:'AKTİV',value:data.filter(w=>w.status==='aktiv'||w.status==='gözləyir').length,color:'#1d4ed8'}].map((k,i)=>(
          <div key={i} className="kpi-card"><div className="kpi-name">{k.label}</div><div className="kpi-value" style={{fontSize:28,color:k.color}}>{k.value}</div></div>
        ))}
      </div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl"><thead><tr>{['Kod','Alıcı','Növ','Çəki','Qiymət','Tarix','Status'].map(h=><th key={h} className="tbl-th">{h}</th>)}</tr></thead>
          <tbody>{data.map((w,i)=>(
            <tr key={i} className="tbl-tr">
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{w.code}</td>
              <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30'}}>{w.buyer}</td>
              <td className="tbl-td" style={{fontSize:12,color:'#4a6888'}}>{w.type}</td>
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:12}}>{w.weight}</td>
              <td className="tbl-td" style={{fontFamily:'monospace',fontSize:13,fontWeight:700,color:'#0f1c30'}}>{w.price}</td>
              <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0'}}>{w.date}</td>
              <td className="tbl-td"><span className="pill" style={{background:w.status==='tamamlandı'?'#f0fdf4':w.status==='aktiv'?'#eff6ff':'#fffbeb',color:w.status==='tamamlandı'?'#15803d':w.status==='aktiv'?'#1d4ed8':'#b45309',fontSize:10}}>{w.status}</span></td>
            </tr>
          ))}</tbody>
        </table>
      </div>
    </div>
  );
}

// ── VDP NEW RECORD FORMS ─────────────────────────────────

function VDPNewForm({ title, badge, badgeColor, fields, onSave }) {
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:16}}>
        <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:badgeColor?.bg||'#eff6ff',color:badgeColor?.color||'#1d4ed8',letterSpacing:'0.06em'}}>{badge}</span>
      </div>
      <div className="card" style={{padding:'24px',maxWidth:640}}>
        <div style={{fontSize:15,fontWeight:700,color:'#0f1c30',marginBottom:18}}>{title}</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:16}}>
          {fields.map((f,i)=>(
            <div key={i} style={f.wide?{gridColumn:'span 2'}:{}}>
              <label style={{display:'block',fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:5}}>
                {f.label}{f.required&&<span style={{color:'#dc2626',marginLeft:2}}>*</span>}
              </label>
              {f.type==='select' ? (
                <select style={{width:'100%',padding:'9px 12px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,fontFamily:'IBM Plex Sans,sans-serif',color:'#0f1c30',background:'#fff',outline:'none'}}>
                  <option value="">Seçin...</option>
                  {f.options?.map(o=><option key={o}>{o}</option>)}
                </select>
              ) : f.type==='textarea' ? (
                <textarea className="p-textarea" rows={3} placeholder={f.placeholder||''}/>
              ) : (
                <input className="p-input" type={f.type||'text'} placeholder={f.placeholder||''}/>
              )}
            </div>
          ))}
        </div>
        <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
          <button className="p-btn p-btn-secondary" style={{fontSize:12}}>Ləğv et</button>
          <button className="p-btn p-btn-primary" style={{fontSize:12}} onClick={onSave}>Saxla →</button>
        </div>
      </div>
    </div>
  );
}

function PortalConstructionNewPage() {
  return <VDPNewForm
    title="Yeni Tikinti Layihəsi"
    badge="VDP-MEMARLIQ" badgeColor={{bg:'#eff6ff',color:'#1d4ed8'}}
    fields={[
      {label:'Layihə adı', required:true, wide:true, placeholder:'Məktəb, xəstəxana, yol...'},
      {label:'Rayon', required:true, type:'select', options:['Xankəndi','Ağdərə','Xocalı']},
      {label:'Növ', required:true, type:'select', options:['Məktəb','Tibb','İnfrastruktur','Yol','İnzibati','İdman','Təhsil']},
      {label:'Büdcə (₼)', required:true, type:'number', placeholder:'0'},
      {label:'Podratçı VÖEN', placeholder:'1234567890'},
      {label:'Planlaşdırılan bitmə', type:'date'},
      {label:'Məsul şəxs', required:true, placeholder:'Ad Soyad'},
      {label:'Qeydlər', type:'textarea', wide:true, placeholder:'Əlavə məlumat...'},
    ]}
  />;
}

function PortalResettlementNewPage() {
  return <VDPNewForm
    title="Yeni Ailə Qeydiyyatı"
    badge="VDP-MƏSKUNLAŞMA" badgeColor={{bg:'#f5f3ff',color:'#7c3aed'}}
    fields={[
      {label:'Ailə başçısı soyadı', required:true, placeholder:'Soyad'},
      {label:'Ailə başçısı adı', required:true, placeholder:'Ad'},
      {label:'Üzv sayı', required:true, type:'number', placeholder:'1'},
      {label:'Rayon', required:true, type:'select', options:['Xankəndi','Ağdərə','Xocalı']},
      {label:'Sənəd növü', type:'select', options:['Şəxsiyyət vəsiqəsi','Pasport','Doğum haqqında şəhadətnamə']},
      {label:'Sənəd nömrəsi', placeholder:'AZE...'},
      {label:'Əlaqə nömrəsi', type:'tel', placeholder:'+994 XX XXX XX XX'},
      {label:'Ünvan', type:'textarea', wide:true, placeholder:'Hazırkı yaşayış ünvanı...'},
    ]}
  />;
}

function PortalHousingNewPage() {
  return <VDPNewForm
    title="Yeni Mənzil Əlavə et"
    badge="VDP-MƏNZİL FONDU" badgeColor={{bg:'#f0fdf4',color:'#15803d'}}
    fields={[
      {label:'Mənzil kodu', required:true, placeholder:'MNZ-XK-001'},
      {label:'Ünvan', required:true, wide:true, placeholder:'Şəhər, küçə, ev, mənzil'},
      {label:'Otaq sayı', required:true, type:'select', options:['1','2','3','4','5+']},
      {label:'Sahə (m²)', required:true, type:'number', placeholder:'0'},
      {label:'Mərtəbə', placeholder:'Məs: 3/9'},
      {label:'Bina növü', type:'select', options:['Panel','Daş','Monolit','Digər']},
      {label:'Rayon', required:true, type:'select', options:['Xankəndi','Ağdərə','Xocalı']},
      {label:'Qeydlər', type:'textarea', wide:true, placeholder:'Texniki vəziyyət, xüsusiyyətlər...'},
    ]}
  />;
}

function PortalPropertyNewPage() {
  return <VDPNewForm
    title="Yeni Əmlak Obyekti"
    badge="VDP-ƏMLAK" badgeColor={{bg:'#fff7ed',color:'#c2410c'}}
    fields={[
      {label:'Əmlak kodu', required:true, placeholder:'ƏML-XK-001'},
      {label:'Əmlak adı', required:true, wide:true, placeholder:'Ofis, anbar, ticarət mərkəzi...'},
      {label:'Zona növü', required:true, type:'select', options:['Kommersiya','Anbar','Ofis','Xüsusi','Digər']},
      {label:'Rayon', required:true, type:'select', options:['Xankəndi','Ağdərə','Xocalı']},
      {label:'Sahə (m²)', required:true, type:'number', placeholder:'0'},
      {label:'Kadastr nömrəsi', placeholder:'XX:XX:XXXXXX:XX'},
      {label:'Qeydlər', type:'textarea', wide:true, placeholder:'Texniki vəziyyət, xüsusiyyətlər...'},
    ]}
  />;
}

// ── HOUSING ASSIGN (Təhkim) ───────────────────────────────

function PortalHousingAssignPage() {
  const [selectedFamily, setSelectedFamily] = React.useState('');
  const [selectedApt,    setSelectedApt]    = React.useState('');
  const [done,           setDone]           = React.useState(false);

  if (done) return (
    <div style={{display:'flex',alignItems:'center',justifyContent:'center',minHeight:300}}>
      <div style={{textAlign:'center'}}>
        <div style={{fontSize:48,marginBottom:12}}>✅</div>
        <div style={{fontSize:18,fontWeight:700,color:'#0f1c30',marginBottom:6}}>Təhkim tamamlandı</div>
        <div style={{fontSize:13,color:'#4a6888'}}>Ailə mənzilə uğurla təhkim edildi · Audit qeydi yaradıldı</div>
      </div>
    </div>
  );

  return (
    <div>
      <div className="card" style={{padding:'24px',maxWidth:580}}>
        <div style={{fontSize:15,fontWeight:700,color:'#0f1c30',marginBottom:4}}>Ailənin Mənzilə Təhkimi</div>
        <div style={{fontSize:12,color:'#4a6888',marginBottom:20}}>Müraciətçi ailəni boş mənzilə təhkim edin</div>
        <div style={{marginBottom:14}}>
          <label style={{display:'block',fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:5}}>Ailə seçin <span style={{color:'#dc2626'}}>*</span></label>
          <select className="p-input" value={selectedFamily} onChange={e=>setSelectedFamily(e.target.value)}>
            <option value="">Ailə seçin...</option>
            <option value="MRC-001">MRC-001 · Babaxanov Vüsal (3 üzv)</option>
            <option value="MRC-002">MRC-002 · Əsədova Lalə (2 üzv)</option>
            <option value="MRC-003">MRC-003 · Rəhimov Elnur (5 üzv)</option>
          </select>
        </div>
        <div style={{marginBottom:14}}>
          <label style={{display:'block',fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:5}}>Boş mənzil seçin <span style={{color:'#dc2626'}}>*</span></label>
          <select className="p-input" value={selectedApt} onChange={e=>setSelectedApt(e.target.value)}>
            <option value="">Mənzil seçin...</option>
            <option value="MNZ-XK-001">MNZ-XK-001 · Xankəndi, Azadlıq 14/3 · 2 otaq · 58 m²</option>
            <option value="MNZ-XK-003">MNZ-XK-003 · Xankəndi, Neftçi 2/1 · 1 otaq · 38 m²</option>
          </select>
        </div>
        {selectedFamily && selectedApt && (
          <div style={{background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:8,padding:'12px 16px',marginBottom:16}}>
            <div style={{fontSize:12,fontWeight:600,color:'#15803d',marginBottom:4}}>Təhkim xülasəsi</div>
            <div style={{fontSize:12,color:'#0f1c30'}}>
              <strong>{selectedFamily}</strong> ailəsi → <strong>{selectedApt}</strong> mənzilinə təhkim ediləcək.
              Bu əməliyyat audit jurnalında qeydə alınacaq.
            </div>
          </div>
        )}
        <div style={{display:'flex',gap:8,justifyContent:'flex-end'}}>
          <button className="p-btn p-btn-secondary" style={{fontSize:12}}>Ləğv et</button>
          <button className="p-btn p-btn-primary" style={{fontSize:12,opacity:selectedFamily&&selectedApt?1:0.5}}
            onClick={()=>{if(selectedFamily&&selectedApt)setDone(true)}}>
            ✓ Təhkimi Təsdiqlə
          </button>
        </div>
      </div>
    </div>
  );
}

// ── PROPERTY PAYMENTS (Ödəmələr) ─────────────────────────

function PortalPropertyPaymentsPage() {
  const payments = [
    {code:'ÜM-XK-001',tenant:'Xankəndi Ticarət MMC',month:'May 2026',amount:'₼ 1 200',due:'05.05.2026',paid:true, paidDate:'03.05.2026'},
    {code:'ÜM-XK-002',tenant:'Qida Anbarı QSC',     month:'May 2026',amount:'₼ 2 900',due:'05.05.2026',paid:false,paidDate:'—'},
    {code:'ÜM-AG-003',tenant:'Əczaxana Şəbəkəsi',   month:'May 2026',amount:'₼ 600', due:'05.05.2026',paid:true, paidDate:'01.05.2026'},
    {code:'ÜM-XK-005',tenant:'IT Xidmətləri Ltd',   month:'May 2026',amount:'₼ 570', due:'05.05.2026',paid:true, paidDate:'02.05.2026'},
    {code:'ÜM-XL-004',tenant:'Avadanlıq İdxalı ASC',month:'Apr 2026',amount:'₼ 4 050',due:'05.04.2026',paid:true, paidDate:'04.04.2026'},
  ];
  return (
    <div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:10,marginBottom:18}}>
        {[
          {label:'BU AY CƏMİ',    value:'₼ 9 320',color:'#0f1c30'},
          {label:'ÖDƏNİLMİŞ',    value:'₼ 6 420',color:'#15803d'},
          {label:'GECIKMIŞ',      value:'₼ 2 900',color:'#b91c1c'},
        ].map((k,i)=>(
          <div key={i} className="kpi-card">
            <div className="kpi-name">{k.label}</div>
            <div className="kpi-value" style={{fontSize:26,color:k.color}}>{k.value}</div>
          </div>
        ))}
      </div>
      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl">
          <thead><tr>
            {['Müq. №','İcarəçi','Dövr','Məbləğ','Son tarix','Ödəniş tarixi','Status','Əməliyyat'].map(h=>(
              <th key={h} className="tbl-th">{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {payments.map((p,i)=>(
              <tr key={i} className="tbl-tr">
                <td className="tbl-td" style={{fontFamily:'monospace',fontSize:11,color:'#2557d6'}}>{p.code}</td>
                <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30'}}>{p.tenant}</td>
                <td className="tbl-td" style={{fontSize:11,color:'#4a6888'}}>{p.month}</td>
                <td className="tbl-td" style={{fontFamily:'IBM Plex Mono,monospace',fontSize:13,fontWeight:700,color:'#0f1c30'}}>{p.amount}</td>
                <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0'}}>{p.due}</td>
                <td className="tbl-td" style={{fontSize:11,color:p.paid?'#15803d':'#8aa4c0'}}>{p.paidDate}</td>
                <td className="tbl-td">
                  <span className="pill" style={{background:p.paid?'#f0fdf4':'#fef2f2',color:p.paid?'#15803d':'#b91c1c',fontSize:10}}>
                    {p.paid?'✓ Ödənilmiş':'✗ Gecikmiş'}
                  </span>
                </td>
                <td className="tbl-td">
                  {!p.paid && <button style={{padding:'3px 10px',fontSize:11,borderRadius:4,border:'1px solid #bbf7d0',background:'#f0fdf4',color:'#15803d',cursor:'pointer',fontWeight:500}}>Ödəniş al</button>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── VDP MODULE REPORTS (Hesabatlar sub-page) ──────────────

function PortalVDPReportsPage({ vdp, setPage }) {
  const templates = {
    construction: [
      {id:'RPT-002',title:'Layihə Status Hesabatı',    desc:'Bütün tikinti layihələrinin vəziyyəti, mərhələ, podratçı.',formats:['PDF','XLSX'],uses:184},
      {id:'RPT-003',title:'Gecikmə Hesabatı',          desc:'Gecikən layihələr, ortalama gecikmə, eskalasiya statusu.', formats:['PDF','XLSX'],uses:76},
      {id:'RPT-004',title:'Tamamlanma Faizi Hesabatı', desc:'Bütün tikinti layihələrinin tamamlanma % paylanması.',      formats:['PDF','PPTX'],uses:92},
    ],
    resettlement: [
      {id:'RPT-005',title:'Məskunlaşma Statistikası',  desc:'Ailə sayı, nəfər, yerləşdirilmiş, gözləyən.',             formats:['PDF','XLSX','CSV'],uses:67},
      {id:'RPT-006',title:'Xüsusi Status Hesabatı',    desc:'Ailə reyestrinin xüsusi statuslara görə siyahısı.',        formats:['PDF','XLSX'],uses:45},
      {id:'RPT-007',title:'Məşğulluq Hesabatı',        desc:'Resettlement prosesinin əmək məşğulluğuna təsiri.',        formats:['PDF'],uses:28},
    ],
    housing: [
      {id:'RPT-008',title:'Mənzil Vəziyyəti Hesabatı', desc:'Mənzil fondunun dolulluq, boş mənzil statistikası.',      formats:['PDF','XLSX'],uses:53},
      {id:'RPT-009',title:'Aktiv Müqavilələr Hesabatı',desc:'Mənzil fondu kirayə müqavilələrinin aktiv siyahısı.',     formats:['PDF','XLSX'],uses:41},
      {id:'RPT-010',title:'Aylıq Ödəniş Hesabatı',    desc:'Mənzil fondu aylıq ödəniş statistikası.',                  formats:['PDF','CSV'],uses:38},
    ],
    property: [
      {id:'RPT-011',title:'Əmlak Müqavilə Hesabatı',   desc:'Kommersiya icarə müqavilələrinin tam siyahısı.',           formats:['PDF','XLSX'],uses:62},
      {id:'RPT-012',title:'Aylıq Gəlir Hesabatı',      desc:'Əmlak modulundan aylıq icarə gəliri analizi.',            formats:['PDF','PPTX'],uses:55},
      {id:'RPT-013',title:'Gecikmiş Ödəniş Hesabatı',  desc:'Ödənilməmiş icarə borcları, risk siyahısı.',              formats:['PDF','XLSX'],uses:44},
    ],
  };
  const [gen, setGen] = React.useState({});
  const [fmt, setFmt] = React.useState({});
  const list = templates[vdp] || templates.construction;
  const badgeColors = {construction:{bg:'#eff6ff',c:'#1d4ed8'}, resettlement:{bg:'#f5f3ff',c:'#7c3aed'}, housing:{bg:'#f0fdf4',c:'#15803d'}, property:{bg:'#fff7ed',c:'#c2410c'}};
  const bc = badgeColors[vdp]||badgeColors.construction;
  const badgeNames = {construction:'VDP-MEMARLIQ', resettlement:'VDP-MƏSKUNLAŞMA', housing:'VDP-MƏNZİL FONDU', property:'VDP-ƏMLAK'};
  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:18}}>
        <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:bc.bg,color:bc.c,letterSpacing:'0.06em'}}>{badgeNames[vdp]||'VDP'}</span>
        <span style={{fontSize:13,color:'#4a6888'}}>Modul hesabatları · May 2026</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
        {list.map((t,i)=>(
          <div key={i} className="card" style={{padding:'18px',display:'flex',flexDirection:'column',gap:12}}>
            <div>
              <div style={{fontSize:10,fontFamily:'monospace',color:'#8aa4c0',marginBottom:4}}>{t.id}</div>
              <div style={{fontSize:14,fontWeight:700,color:'#0f1c30',marginBottom:4}}>{t.title}</div>
              <div style={{fontSize:12,color:'#4a6888',lineHeight:1.5}}>{t.desc}</div>
            </div>
            <div style={{display:'flex',gap:4}}>
              {t.formats.map(f=>(
                <button key={f} onClick={()=>setFmt(p=>({...p,[t.id]:f}))}
                  style={{padding:'4px 10px',borderRadius:6,border:`1px solid ${fmt[t.id]===f?'#2557d6':'#d0ddef'}`,background:fmt[t.id]===f?'#2557d6':'#fff',color:fmt[t.id]===f?'#fff':'#4a6888',fontSize:11,fontWeight:600,cursor:'pointer',transition:'all 120ms'}}>
                  {f}
                </button>
              ))}
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <span style={{fontSize:11,color:'#8aa4c0'}}>{t.uses} dəfə istifadə</span>
              <button
                style={{padding:'7px 16px',background:gen[t.id]?'#f0f4f8':'#2557d6',border:'none',borderRadius:8,fontSize:12,fontWeight:500,cursor:'pointer',color:gen[t.id]?'#4a6888':'#fff',transition:'all 150ms'}}
                onClick={()=>{setGen(p=>({...p,[t.id]:true}));setTimeout(()=>setGen(p=>({...p,[t.id]:false})),2400)}}>
                {gen[t.id]?'⏳ Hazırlanır...':'⬇ Yarat'}
              </button>
            </div>
          </div>
        ))}
      </div>
      <div style={{marginTop:14,padding:'12px 16px',background:'#f0f5ff',border:'1px solid #c7d9fd',borderRadius:8,display:'flex',justifyContent:'space-between',alignItems:'center',fontSize:12}}>
        <span style={{color:'#1a4498'}}>Bütün format şablonları üçün Ümumi Hesabatlar bölməsinə baxın</span>
        {setPage && <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',fontWeight:500,padding:0}} onClick={()=>setPage('reports_gallery')}>Ümumi Hesabatlar →</button>}
      </div>
    </div>
  );
}

// ── Updated Export ────────────────────────────────────────
Object.assign(window, {
  DonutChart, GroupedBarChart,
  PortalConstructionDelaysPage, PortalRelocationEventsPage,
  PortalPermissionMatrixPage,   PortalPropertyExpiryPage,
  PortalTexnozorPage,           PortalUsersPage,
  PortalResLeasesPage,          PortalRefusalPage,
  PortalApplicantsPage,         PortalMonthlyPaymentsPage,
  PortalPropertyObjectsPage,    PortalWasteSalesPage,
  PortalConstructionNewPage,    PortalResettlementNewPage,
  PortalHousingNewPage,         PortalPropertyNewPage,
  PortalHousingAssignPage,      PortalPropertyPaymentsPage,
  PortalVDPReportsPage,
});