/* ─────────────────────────────────────────────────────────────────
   AYRA Portal — Core Modules
   Bank Uyğunlaşdırma · GIS Xəritəsi · Sahə İşi · Toplu İdxal
   Təsdiqlər · Ümumi Hesabatlar
   FR-261–275 · FR-283–290 · FR-346–360 · FR-276–282 · FR-411–425
   ───────────────────────────────────────────────────────────────── */

// ── BANK RECONCILIATION (FR-261–274) ─────────────────────

const BANK_TRANSACTIONS = [
  {id:'TXN-001',date:'02.05.2026',payer:'Xankəndi Ticarət MMC',voen:'1234567890',amount:'1 200,00',currency:'AZN',purpose:'İcarə ödənişi, Müq. ÜM-XK-001, May 2026',score:95,match:'tam',contract:'ÜM-XK-001',expected:'1 200,00'},
  {id:'TXN-002',date:'03.05.2026',payer:'Qida Anbarı QSC',     voen:'9876543210',amount:'2 870,00',currency:'AZN',purpose:'İcarə may 2026 ÜM-XK-002',score:72,match:'qismen',contract:'ÜM-XK-002',expected:'2 900,00'},
  {id:'TXN-003',date:'05.05.2026',payer:'Əczaxana Şəbəkəsi',   voen:'5432167890',amount:'600,00', currency:'AZN',purpose:'İcarə may ÜM-AG-003',score:90,match:'tam',contract:'ÜM-AG-003',expected:'600,00'},
  {id:'TXN-004',date:'07.05.2026',payer:'Noname MMC',          voen:'1111111111',amount:'3 400,00',currency:'AZN',purpose:'Xidmət haqqı may 2026',score:28,match:'uygunsuz',contract:'—',expected:'—'},
  {id:'TXN-005',date:'08.05.2026',payer:'IT Xidmətləri Ltd',   voen:'2222222222',amount:'570,00', currency:'AZN',purpose:'Ofis icarəsi may ÜM-XK-005',score:88,match:'tam',contract:'ÜM-XK-005',expected:'570,00'},
  {id:'TXN-006',date:'10.05.2026',payer:'Tikinti Avadanlığı',  voen:'3333333333',amount:'12 000,00',currency:'AZN',purpose:'Avadanlıq alışı',score:15,match:'uygunsuz',contract:'—',expected:'—'},
  {id:'TXN-007',date:'12.05.2026',payer:'Xankəndi Ticarət MMC',voen:'1234567890',amount:'240,00', currency:'AZN',purpose:'Kommunal xərclər may',score:55,match:'qismen',contract:'—',expected:'—'},
  {id:'TXN-008',date:'13.05.2026',payer:'Enerji Şirkəti',      voen:'4444444444',amount:'8 500,00',currency:'AZN',purpose:'Yanacaq may 2026',score:8,match:'uygunsuz',contract:'—',expected:'—'},
];

const MATCH_META = {
  tam:      {label:'Tam Uyğun',     color:'#15803d',bg:'#f0fdf4',border:'#bbf7d0'},
  qismen:   {label:'Qismən Uyğun',  color:'#b45309',bg:'#fffbeb',border:'#fde68a'},
  uygunsuz: {label:'Uyğunsuz',      color:'#b91c1c',bg:'#fef2f2',border:'#fecaca'},
};

function ScoreBar({score}) {
  const color = score >= 85 ? '#16a34a' : score >= 50 ? '#f59e0b' : '#dc2626';
  return (
    <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:`${score}%`,background:color,borderRadius:3}}/>
      </div>
      <span style={{fontSize:11,fontFamily:'IBM Plex Mono,monospace',fontWeight:700,color}}>{score}</span>
    </div>
  );
}

function PortalBankReconciliationPage() {
  const [uploaded, setUploaded] = React.useState(true);
  const [selected, setSelected] = React.useState([]);
  const [filter, setFilter] = React.useState('all');
  const [dragOver, setDragOver] = React.useState(false);

  const tam = BANK_TRANSACTIONS.filter(t=>t.match==='tam').length;
  const qismen = BANK_TRANSACTIONS.filter(t=>t.match==='qismen').length;
  const uygunsuz = BANK_TRANSACTIONS.filter(t=>t.match==='uygunsuz').length;
  const filtered = filter === 'all' ? BANK_TRANSACTIONS : BANK_TRANSACTIONS.filter(t=>t.match===filter);

  return (
    <div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:18}}>Bank Uyğunlaşdırma Modulu · May 2026 · FR-261–274</div>

      {/* KPI Strip (FR-264) */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:20}}>
        {[
          {label:'ÜMUMİ SƏTİR',  value:BANK_TRANSACTIONS.length, color:'#0f1c30', sub:'Cəmi əməliyyat'},
          {label:'TAM UYĞUN',    value:tam,       color:'#15803d', sub:`Xal ≥ 85 · ${Math.round(tam/BANK_TRANSACTIONS.length*100)}%`, bar:Math.round(tam/BANK_TRANSACTIONS.length*100)},
          {label:'QİSMƏN UYĞUN',value:qismen,    color:'#b45309', sub:`Xal 50–84 · ${Math.round(qismen/BANK_TRANSACTIONS.length*100)}%`, bar:Math.round(qismen/BANK_TRANSACTIONS.length*100)},
          {label:'UYĞUNSUZ',    value:uygunsuz,  color:'#b91c1c', sub:`Xal < 50 · ${Math.round(uygunsuz/BANK_TRANSACTIONS.length*100)}%`, bar:Math.round(uygunsuz/BANK_TRANSACTIONS.length*100)},
        ].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:30,fontWeight:700,color:k.color,fontFamily:'IBM Plex Mono,monospace',lineHeight:1}}>{k.value}</div>
            {k.sub && <div style={{fontSize:11,color:'#8aa4c0',marginTop:5}}>{k.sub}</div>}
            {k.bar != null && <div style={{marginTop:8,height:3,background:'#e5ecf5',borderRadius:2}}><div style={{height:'100%',width:`${k.bar}%`,background:k.color,borderRadius:2}}/></div>}
          </div>
        ))}
      </div>

      {/* Upload area (FR-261) */}
      {!uploaded && (
        <div
          style={{border:`2px dashed ${dragOver?'#2557d6':'#d0ddef'}`,borderRadius:12,padding:'32px',textAlign:'center',marginBottom:20,background:dragOver?'#f0f5ff':'#fafbfc',transition:'all 150ms',cursor:'pointer'}}
          onDragOver={e=>{e.preventDefault();setDragOver(true)}}
          onDragLeave={()=>setDragOver(false)}
          onDrop={e=>{e.preventDefault();setDragOver(false);setUploaded(true)}}>
          <div style={{fontSize:32,marginBottom:8}}>📂</div>
          <div style={{fontSize:14,fontWeight:600,color:'#0f1c30',marginBottom:4}}>Bank çıxarışını buraya sürükləyin</div>
          <div style={{fontSize:12,color:'#4a6888',marginBottom:16}}>Excel (.xlsx), PDF, MT940 · Maks 50 MB</div>
          <div style={{display:'flex',gap:8,justifyContent:'center'}}>
            <button style={{padding:'8px 18px',background:'#2557d6',border:'none',borderRadius:8,fontSize:13,fontWeight:500,cursor:'pointer',color:'#fff'}} onClick={()=>setUploaded(true)}>Fayl Seç</button>
            <button style={{padding:'8px 18px',background:'#fff',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,cursor:'pointer',color:'#4a6888'}}>↓ Şablon Yüklə</button>
          </div>
        </div>
      )}

      {/* Controls */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12,gap:8}}>
        <div style={{display:'flex',gap:1,background:'#f0f4f8',borderRadius:8,padding:2}}>
          {[['all','Hamısı'],['tam','Tam Uyğun'],['qismen','Qismən'],['uygunsuz','Uyğunsuz']].map(([k,v])=>(
            <button key={k} style={{padding:'5px 12px',borderRadius:6,border:'none',cursor:'pointer',fontSize:12,fontWeight:filter===k?600:400,background:filter===k?'#fff':'transparent',color:filter===k?'#0f1c30':'#4a6888',boxShadow:filter===k?'0 1px 3px rgba(0,0,0,0.1)':undefined,transition:'all 120ms'}} onClick={()=>setFilter(k)}>{v}</button>
          ))}
        </div>
        <div style={{display:'flex',gap:8}}>
          {selected.length > 0 && (
            <button style={{padding:'7px 16px',background:'#16a34a',border:'none',borderRadius:8,fontSize:12,fontWeight:600,cursor:'pointer',color:'#fff'}}>
              ✓ Seçilmişləri Təsdiqlə ({selected.length})
            </button>
          )}
          <button style={{padding:'7px 14px',background:'#fff',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}} onClick={()=>setUploaded(false)}>↑ Yeni Yüklə</button>
        </div>
      </div>

      {/* Transactions table */}
      <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
        <table style={{width:'100%',borderCollapse:'collapse'}}>
          <thead>
            <tr style={{background:'#f8fafd'}}>
              <th style={{padding:'9px 12px',textAlign:'center',width:36}}>
                <input type="checkbox" onChange={e=>setSelected(e.target.checked?filtered.map(t=>t.id):[])} checked={selected.length===filtered.length&&filtered.length>0}/>
              </th>
              {['Tarix','Ödəyən','VÖEN','Məbləğ','Məqsəd','Avtomatik Xal','Uyğunluq','Müqavilə'].map(h=>(
                <th key={h} style={{textAlign:'left',fontSize:10,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.06em',padding:'9px 12px',borderBottom:'1px solid #e5ecf5'}}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtered.map((t,i)=>{
              const mm = MATCH_META[t.match];
              const isSelected = selected.includes(t.id);
              return (
                <tr key={i} style={{borderBottom:'1px solid #f0f4f8',background:isSelected?'#f0f5ff':undefined,transition:'background 100ms'}}
                  onMouseEnter={e=>{if(!isSelected) e.currentTarget.style.background='#f8fafd'}}
                  onMouseLeave={e=>{if(!isSelected) e.currentTarget.style.background='transparent'}}>
                  <td style={{padding:'10px 12px',textAlign:'center'}}>
                    <input type="checkbox" checked={isSelected} onChange={e=>setSelected(s=>e.target.checked?[...s,t.id]:s.filter(x=>x!==t.id))}/>
                  </td>
                  <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888',whiteSpace:'nowrap'}}>{t.date}</td>
                  <td style={{padding:'10px 12px',fontSize:13,fontWeight:500,color:'#0f1c30',maxWidth:160}}><div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{t.payer}</div></td>
                  <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{t.voen}</td>
                  <td style={{padding:'10px 12px',fontFamily:'IBM Plex Mono,monospace',fontSize:13,fontWeight:700,color:'#0f1c30',whiteSpace:'nowrap'}}>{t.amount} {t.currency}</td>
                  <td style={{padding:'10px 12px',fontSize:12,color:'#4a6888',maxWidth:180}}><div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{t.purpose}</div></td>
                  <td style={{padding:'10px 12px'}}><ScoreBar score={t.score}/></td>
                  <td style={{padding:'10px 12px'}}><span style={{fontSize:11,fontWeight:600,padding:'3px 9px',borderRadius:10,background:mm.bg,color:mm.color,border:`1px solid ${mm.border}`}}>{mm.label}</span></td>
                  <td style={{padding:'10px 12px',fontFamily:'monospace',fontSize:11,color:'#4a6888'}}>{t.contract}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div style={{padding:'10px 16px',borderTop:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',fontSize:11,color:'#8aa4c0'}}>
          <span>AI Uyğunlaşdırma Köməkçisi: <button style={{background:'none',border:'none',color:'#2557d6',fontSize:11,cursor:'pointer',padding:0}}>3 uyğunsuz əməliyyat üçün analiz aç →</button></span>
          <span>Son yenilənmə: 14.05.2026 14:22</span>
        </div>
      </div>
    </div>
  );
}

// ── GIS MAP PAGE (FR-283–290) ─────────────────────────────

const GIS_MARKERS = [
  {code:'LYH-XK-001',x:195,y:155,status:'active',    label:'Məktəb',    region:'Xankəndi'},
  {code:'LYH-XK-004',x:210,y:175,status:'tender',    label:'Su şəbəkəsi',region:'Xankəndi'},
  {code:'LYH-XK-006',x:180,y:145,status:'completed', label:'İdman kompleksi',region:'Xankəndi'},
  {code:'LYH-XK-008',x:205,y:160,status:'prep',      label:'Uşaq bağçası',region:'Xankəndi'},
  {code:'LYH-AG-002',x:320,y:98, status:'active',    label:'Xəstəxana',  region:'Ağdərə'},
  {code:'LYH-AG-005',x:305,y:108,status:'docs',      label:'Körpü',      region:'Ağdərə'},
  {code:'LYH-XL-003',x:235,y:200,status:'texnozor',  label:'İnzibati',   region:'Xocalı'},
  {code:'LYH-XL-007',x:250,y:190,status:'construction',label:'Yol',      region:'Xocalı'},
];

const GIS_STATUS_COLORS = {
  active:'#2557d6', tender:'#0e7490', completed:'#16a34a',
  prep:'#6b7280', docs:'#9ca3af', texnozor:'#b45309',
  construction:'#7c3aed',
};

function PortalGISPage() {
  const [activeMarker, setActiveMarker] = React.useState(null);
  const [layers, setLayers] = React.useState({tikinti:true,inzibati:true,yol:false});

  return (
    <div>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:4}}>
        <span style={{fontSize:11,fontWeight:700,padding:'3px 8px',borderRadius:4,background:'#f0f9ff',color:'#0e7490',letterSpacing:'0.06em'}}>GIS XƏRİTƏSİ</span>
        <span style={{fontSize:11,padding:'3px 8px',borderRadius:4,background:'#fffbeb',color:'#b45309',border:'1px solid #fde68a'}}>Sxematik Demo — İstehsalatda WGS84 + real tiles (FR-304)</span>
      </div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:16}}>Layihə Obyektlərinin Coğrafi Yayılması · Xankəndi · Ağdərə · Xocalı</div>

      <div style={{display:'grid',gridTemplateColumns:'1fr 280px',gap:14}}>
        {/* Map */}
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,overflow:'hidden',boxShadow:'0 1px 4px rgba(15,28,48,0.08)'}}>
          {/* Controls bar */}
          <div style={{padding:'10px 14px',borderBottom:'1px solid #e5ecf5',display:'flex',gap:10,alignItems:'center',flexWrap:'wrap'}}>
            <span style={{fontSize:11,fontWeight:600,color:'#0f1c30'}}>Qatlar:</span>
            {[['tikinti','Tikinti'],['inzibati','İnzibati'],['yol','Yol']].map(([k,v])=>(
              <label key={k} style={{display:'flex',alignItems:'center',gap:5,fontSize:12,color:'#4a6888',cursor:'pointer'}}>
                <input type="checkbox" checked={layers[k]} onChange={e=>setLayers(l=>({...l,[k]:e.target.checked}))}/>
                {v}
              </label>
            ))}
            <div style={{marginLeft:'auto',display:'flex',gap:6}}>
              <button style={{padding:'4px 10px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:6,fontSize:11,cursor:'pointer',color:'#4a6888'}}>🔍 +</button>
              <button style={{padding:'4px 10px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:6,fontSize:11,cursor:'pointer',color:'#4a6888'}}>🔍 −</button>
              <button style={{padding:'4px 10px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:6,fontSize:11,cursor:'pointer',color:'#4a6888'}}>↓ PNG</button>
            </div>
          </div>
          {/* SVG Map */}
          <div style={{position:'relative'}}>
            <svg width="100%" viewBox="0 0 520 320" style={{display:'block',background:'#f0f4f8'}}>
              {/* Grid */}
              <defs>
                <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
                  <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#dde8f7" strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="520" height="320" fill="url(#grid)"/>
              {/* Region outlines (schematic) */}
              <path d="M 120,80 Q 180,50 280,70 Q 380,60 440,100 Q 460,160 420,220 Q 360,260 280,270 Q 200,275 140,240 Q 80,200 100,140 Z" fill="#e8f0fb" stroke="#c7d9fd" strokeWidth="1.5"/>
              {/* Sub-regions */}
              <path d="M 140,100 Q 200,80 260,110 Q 240,160 200,180 Q 160,165 140,140 Z" fill="#dce8f8" stroke="#b8cde4" strokeWidth="1" strokeDasharray="3,2"/>
              <path d="M 260,75 Q 360,70 420,120 Q 400,170 360,180 Q 300,175 265,150 Z" fill="#dce8f8" stroke="#b8cde4" strokeWidth="1" strokeDasharray="3,2"/>
              <path d="M 200,180 Q 260,165 320,180 Q 310,240 260,255 Q 210,255 195,230 Z" fill="#dce8f8" stroke="#b8cde4" strokeWidth="1" strokeDasharray="3,2"/>
              {/* Region labels */}
              <text x="192" y="138" fontSize="11" fontWeight="600" fill="#4a6888" textAnchor="middle" fontFamily="IBM Plex Sans,sans-serif">Xankəndi</text>
              <text x="340" y="130" fontSize="11" fontWeight="600" fill="#4a6888" textAnchor="middle" fontFamily="IBM Plex Sans,sans-serif">Ağdərə</text>
              <text x="258" y="222" fontSize="11" fontWeight="600" fill="#4a6888" textAnchor="middle" fontFamily="IBM Plex Sans,sans-serif">Xocalı</text>
              {/* Markers */}
              {GIS_MARKERS.map((m,i) => {
                const color = GIS_STATUS_COLORS[m.status] || '#6b7280';
                const isActive = activeMarker === m.code;
                return (
                  <g key={i} style={{cursor:'pointer'}} onClick={()=>setActiveMarker(isActive ? null : m.code)}>
                    <circle cx={m.x} cy={m.y} r={isActive?10:7} fill={color} opacity={isActive?1:0.85} stroke="#fff" strokeWidth={isActive?2.5:1.5}/>
                    {isActive && (
                      <g>
                        <rect x={m.x+12} y={m.y-22} width={110} height={44} rx={4} fill="#fff" stroke="#d0ddef" strokeWidth={1}/>
                        <text x={m.x+17} y={m.y-8} fontSize="10" fill="#0f1c30" fontWeight="600" fontFamily="IBM Plex Sans,sans-serif">{m.code}</text>
                        <text x={m.x+17} y={m.y+4} fontSize="9" fill="#4a6888" fontFamily="IBM Plex Sans,sans-serif">{m.label}</text>
                        <text x={m.x+17} y={m.y+16} fontSize="9" fill="#8aa4c0" fontFamily="IBM Plex Sans,sans-serif">{m.region}</text>
                      </g>
                    )}
                  </g>
                );
              })}
            </svg>
          </div>
          {/* Legend */}
          <div style={{padding:'10px 14px',borderTop:'1px solid #e5ecf5',display:'flex',gap:12,flexWrap:'wrap'}}>
            {Object.entries(GIS_STATUS_COLORS).map(([k,c])=>(
              <div key={k} style={{display:'flex',alignItems:'center',gap:5,fontSize:11,color:'#4a6888'}}>
                <div style={{width:10,height:10,borderRadius:'50%',background:c}}/>
                <span style={{textTransform:'capitalize'}}>{OBJ_STATUS?.[k]?.label || k}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Side panel */}
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {/* Stats */}
          <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,padding:'14px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
            <div style={{fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:10}}>Xəritə Statistikası</div>
            {[
              {label:'Xankəndi',count:4,color:'#2557d6'},
              {label:'Ağdərə',  count:2,color:'#15803d'},
              {label:'Xocalı',  count:2,color:'#7c3aed'},
            ].map((r,i)=>(
              <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'5px 0',borderBottom:'1px solid #f0f4f8'}}>
                <div style={{display:'flex',alignItems:'center',gap:7}}>
                  <div style={{width:8,height:8,borderRadius:'50%',background:r.color}}/>
                  <span style={{fontSize:12,color:'#0f1c30'}}>{r.label}</span>
                </div>
                <span style={{fontSize:12,fontFamily:'monospace',fontWeight:700,color:'#0f1c30'}}>{r.count}</span>
              </div>
            ))}
          </div>
          {/* Object list */}
          <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,padding:'14px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)',flex:1}}>
            <div style={{fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:10}}>Obyekt Siyahısı</div>
            <div style={{display:'flex',flexDirection:'column',gap:4}}>
              {GIS_MARKERS.map((m,i)=>{
                const color = GIS_STATUS_COLORS[m.status]||'#6b7280';
                const isActive = activeMarker === m.code;
                return (
                  <div key={i} style={{display:'flex',alignItems:'center',gap:8,padding:'6px 8px',borderRadius:6,cursor:'pointer',background:isActive?'#eff6ff':undefined,transition:'background 120ms'}}
                    onClick={()=>setActiveMarker(isActive?null:m.code)}
                    onMouseEnter={e=>{if(!isActive)e.currentTarget.style.background='#f8fafd'}}
                    onMouseLeave={e=>{if(!isActive)e.currentTarget.style.background='transparent'}}>
                    <div style={{width:8,height:8,borderRadius:'50%',background:color,flexShrink:0}}/>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{fontSize:11,fontWeight:500,color:'#0f1c30',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{m.label}</div>
                      <div style={{fontSize:10,color:'#8aa4c0'}}>{m.code}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── FIELD OPERATIONS (FR-346–360) ────────────────────────

function PortalFieldOpsPage() {
  const [syncStatus, setSyncStatus] = React.useState('synced');
  const [pct, setPct] = React.useState(null);
  const [customPct, setCustomPct] = React.useState('');
  const [photos, setPhotos] = React.useState([]);
  const [gps, setGps] = React.useState('39.8231° N, 46.7524° E');
  const assignments = [
    {code:'LYH-XK-001',name:'Xankəndi 5 saylı məktəb',task:'Tamamlanma yenilənməsi',deadline:'15.05.2026',current:68},
    {code:'LYH-XK-008',name:'Xankəndi 3 saylı bağça', task:'Foto çəkilişi + protokol',deadline:'16.05.2026',current:8},
    {code:'LYH-XL-007',name:'Xocalı-Ağdərə yolu',     task:'Yol örtüyü yoxlaması',  deadline:'18.05.2026',current:45},
  ];
  const handleUpdate = (val) => {
    setPct(val);
    setSyncStatus('pending');
    setTimeout(()=>setSyncStatus('synced'),1500);
  };
  return (
    <div>
      {/* Sync status bar */}
      <div style={{display:'flex',alignItems:'center',gap:8,background:syncStatus==='synced'?'#f0fdf4':syncStatus==='pending'?'#fffbeb':'#fef2f2',border:`1px solid ${syncStatus==='synced'?'#bbf7d0':syncStatus==='pending'?'#fde68a':'#fecaca'}`,borderRadius:8,padding:'8px 14px',marginBottom:16}}>
        <div style={{width:8,height:8,borderRadius:'50%',background:syncStatus==='synced'?'#16a34a':syncStatus==='pending'?'#f59e0b':'#dc2626',animation:syncStatus==='pending'?'pulse 1s infinite':undefined}}/>
        <span style={{fontSize:12,fontWeight:500,color:syncStatus==='synced'?'#15803d':syncStatus==='pending'?'#b45309':'#b91c1c'}}>
          {syncStatus==='synced'?'✓ Bütün yeniləmələr sinxronlaşdırıldı':syncStatus==='pending'?'Sinxronizasiya gözlənilir...':'Sinxronizasiya xətası — yenidən cəhd'}
        </span>
        <div style={{marginLeft:'auto',fontSize:11,color:'#8aa4c0'}}>GPS: {gps}</div>
      </div>

      {/* My assignments */}
      <div style={{marginBottom:20}}>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:12}}>Tapşırıqlarım</div>
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          {assignments.map((a,i)=>(
            <div key={i} style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,padding:'16px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:10}}>
                <div>
                  <div style={{display:'flex',gap:6,alignItems:'center',marginBottom:3}}>
                    <span style={{fontFamily:'monospace',fontSize:10,color:'#8aa4c0'}}>{a.code}</span>
                    <span style={{fontSize:10,fontWeight:600,padding:'2px 7px',borderRadius:4,background:'#fffbeb',color:'#b45309'}}>Son tarix: {a.deadline}</span>
                  </div>
                  <div style={{fontSize:14,fontWeight:600,color:'#0f1c30',marginBottom:2}}>{a.name}</div>
                  <div style={{fontSize:12,color:'#4a6888'}}>{a.task}</div>
                </div>
                <div style={{textAlign:'right',flexShrink:0,marginLeft:16}}>
                  <div style={{fontSize:24,fontWeight:700,color:'#0f1c30',fontFamily:'monospace',lineHeight:1}}>{pct && i===0 ? pct : a.current}%</div>
                  <div style={{fontSize:10,color:'#8aa4c0'}}>cari</div>
                </div>
              </div>
              <div style={{height:5,background:'#e5ecf5',borderRadius:3,marginBottom:12,overflow:'hidden'}}>
                <div style={{height:'100%',width:`${pct&&i===0?pct:a.current}%`,background:'#2557d6',borderRadius:3,transition:'width 0.5s'}}/>
              </div>
              {/* Quick-action buttons (FR-351) */}
              {i === 0 && (
                <div>
                  <div style={{fontSize:11,color:'#8aa4c0',marginBottom:8}}>Sürətli yeniləmə:</div>
                  <div style={{display:'flex',gap:6,flexWrap:'wrap'}}>
                    {[10,25,50,75,90,100].map(v=>(
                      <button key={v} style={{padding:'7px 14px',borderRadius:8,border:`1px solid ${pct===v?'#2557d6':'#d0ddef'}`,background:pct===v?'#2557d6':'#fff',color:pct===v?'#fff':'#4a6888',fontSize:13,fontWeight:pct===v?700:400,cursor:'pointer',minWidth:48,transition:'all 120ms'}} onClick={()=>handleUpdate(v)}>{v}%</button>
                    ))}
                    <div style={{display:'flex',gap:4,alignItems:'center'}}>
                      <input type="number" style={{width:60,padding:'6px 8px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,outline:'none'}} placeholder="%" min="0" max="100" value={customPct} onChange={e=>setCustomPct(e.target.value)}/>
                      <button style={{padding:'6px 12px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}} onClick={()=>{if(customPct)handleUpdate(parseInt(customPct))}}>✓</button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>

      {/* Photo upload (FR-347) */}
      <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,padding:'18px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)'}}>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:4}}>Foto Əlavə Et — LYH-XK-001</div>
        <div style={{fontSize:11,color:'#8aa4c0',marginBottom:12}}>EXIF meta-məlumatları (koord., vaxt) saxlanılır · PII silinir (FR-347)</div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:8,marginBottom:12}}>
          {photos.map((p,i)=>(
            <div key={i} style={{border:'1px solid #e5ecf5',borderRadius:8,overflow:'hidden'}}>
              <div style={{height:70,background:'#f0f4f8',display:'flex',alignItems:'center',justifyContent:'center',fontSize:10,color:'#8aa4c0'}}>foto {i+1}</div>
            </div>
          ))}
          <div style={{border:'2px dashed #d0ddef',borderRadius:8,height:photos.length?undefined:88,display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',flexDirection:'column',gap:4,padding:12,transition:'all 150ms'}}
            onClick={()=>{setPhotos(p=>[...p,Date.now()]);setSyncStatus('pending');setTimeout(()=>setSyncStatus('synced'),1000)}}
            onMouseEnter={e=>e.currentTarget.style.borderColor='#2557d6'}
            onMouseLeave={e=>e.currentTarget.style.borderColor='#d0ddef'}>
            <span style={{fontSize:20,color:'#8aa4c0'}}>📷</span>
            <span style={{fontSize:11,color:'#4a6888',fontWeight:500}}>Kamera / Fayl</span>
          </div>
        </div>
        {photos.length > 0 && (
          <div style={{fontSize:11,color:'#4a6888'}}>{photos.length} foto əlavə edildi · GPS teqli · Sinxronizasiya gözlənilir</div>
        )}
      </div>
    </div>
  );
}

// ── BULK IMPORT (FR-276–282) ──────────────────────────────

function PortalBulkImportPage() {
  const [stage, setStage] = React.useState('upload');
  const [dragOver, setDragOver] = React.useState(false);
  const preview = {total:47,valid:44,errors:3,warnings:1};
  const errors = [
    {row:12,col:'VÖEN',msg:'Etibarsız VÖEN formatı: "12345"'},
    {row:23,col:'Büdcə',msg:'Rəqəm gözlənilir, mətn tapıldı: "bilinmir"'},
    {row:38,col:'Başlanğıc tarixi',msg:'Tarix formatı yanlışdır: "2026/03/15" → "15.03.2026" olmalıdır'},
  ];
  return (
    <div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:18}}>Toplu İdxal — Layihə Obyektlərini Excel/CSV ilə idxal edin</div>

      {/* Progress steps */}
      <div style={{display:'flex',gap:0,marginBottom:20,background:'#fff',border:'1px solid #e5ecf5',borderRadius:10,overflow:'hidden'}}>
        {[['upload','Fayl Yüklə'],['validate','Yoxla'],['preview','Önbaxış'],['commit','Tətbiq Et']].map(([k,v],i,arr)=>{
          const idx = ['upload','validate','preview','commit'].indexOf(stage);
          const thisIdx = i;
          const done = thisIdx < idx;
          const active = thisIdx === idx;
          return (
            <div key={k} style={{flex:1,padding:'11px 8px',textAlign:'center',background:active?'#eff6ff':done?'#f0fdf4':'#fff',borderRight:i<arr.length-1?'1px solid #e5ecf5':undefined}}>
              <div style={{fontSize:10,fontWeight:700,color:active?'#2557d6':done?'#16a34a':'#8aa4c0'}}>{done?'✓ ':''}{v}</div>
            </div>
          );
        })}
      </div>

      {stage === 'upload' && (
        <div>
          <div
            style={{border:`2px dashed ${dragOver?'#2557d6':'#d0ddef'}`,borderRadius:12,padding:'40px 24px',textAlign:'center',background:dragOver?'#f0f5ff':'#fafbfc',transition:'all 150ms',cursor:'pointer',marginBottom:16}}
            onDragOver={e=>{e.preventDefault();setDragOver(true)}}
            onDragLeave={()=>setDragOver(false)}
            onDrop={e=>{e.preventDefault();setDragOver(false);setStage('validate')}}>
            <div style={{fontSize:36,marginBottom:10}}>📤</div>
            <div style={{fontSize:15,fontWeight:600,color:'#0f1c30',marginBottom:6}}>Faylı bura sürükləyin və ya seçin</div>
            <div style={{fontSize:12,color:'#4a6888',marginBottom:20}}>Excel (.xlsx, .xls), CSV · Maksimum 10 MB</div>
            <div style={{display:'flex',gap:8,justifyContent:'center'}}>
              <button style={{padding:'9px 22px',background:'#2557d6',border:'none',borderRadius:8,fontSize:13,fontWeight:500,cursor:'pointer',color:'#fff'}} onClick={()=>setStage('validate')}>Fayl Seç</button>
              <button style={{padding:'9px 22px',background:'#fff',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,cursor:'pointer',color:'#4a6888'}}>↓ Şablon Yüklə</button>
            </div>
          </div>
          <div style={{background:'#f0f9ff',border:'1px solid #bae6fd',borderRadius:8,padding:'12px 16px',fontSize:12,color:'#0e7490'}}>
            <strong>Şablon sütunları:</strong> Kodu · Ad · Rayon · Növ · Büdcə (₼) · Podratçı VÖEN · Başlanğıc tarixi · Planlaşdırılan tamamlanma · Məsul şəxs
          </div>
        </div>
      )}

      {(stage === 'validate' || stage === 'preview') && (
        <div>
          {/* Validation results */}
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:16}}>
            {[
              {label:'Cəmi Sətir',  value:preview.total,  color:'#0f1c30'},
              {label:'Etibarlı',    value:preview.valid,   color:'#15803d'},
              {label:'Xəta',        value:preview.errors,  color:'#b91c1c'},
              {label:'Xəbərdarlıq',value:preview.warnings,color:'#b45309'},
            ].map((s,i)=>(
              <div key={i} style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,padding:'12px',textAlign:'center'}}>
                <div style={{fontSize:10,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:4}}>{s.label}</div>
                <div style={{fontSize:26,fontWeight:700,fontFamily:'monospace',color:s.color}}>{s.value}</div>
              </div>
            ))}
          </div>
          {preview.errors > 0 && (
            <div style={{background:'#fff',border:'1px solid #fecaca',borderRadius:10,overflow:'hidden',marginBottom:14}}>
              <div style={{padding:'10px 14px',background:'#fef2f2',borderBottom:'1px solid #fecaca',fontSize:12,fontWeight:600,color:'#b91c1c'}}>{preview.errors} Xəta — Tətbiq etmədən əvvəl düzəldin</div>
              {errors.map((e,i)=>(
                <div key={i} style={{padding:'9px 14px',borderBottom:'1px solid #fef2f2',fontSize:12,display:'flex',gap:10}}>
                  <span style={{fontFamily:'monospace',color:'#8aa4c0',whiteSpace:'nowrap'}}>Sətir {e.row}, {e.col}:</span>
                  <span style={{color:'#b91c1c'}}>{e.msg}</span>
                </div>
              ))}
            </div>
          )}
          <div style={{display:'flex',gap:8}}>
            <button style={{padding:'9px 20px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,fontSize:13,cursor:'pointer',color:'#4a6888'}} onClick={()=>setStage('upload')}>← Geri</button>
            {stage === 'validate' && <button style={{padding:'9px 20px',background:'#2557d6',border:'none',borderRadius:8,fontSize:13,fontWeight:500,cursor:'pointer',color:'#fff'}} onClick={()=>setStage('preview')}>Önbaxışa Keç →</button>}
            {stage === 'preview' && (
              <>
                <button style={{padding:'9px 20px',background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',color:'#15803d'}} onClick={()=>setStage('upload')}>✓ {preview.valid} obyekti tətbiq et</button>
              </>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

// ── APPROVALS QUEUE (FR-411–425) ─────────────────────────

const APPROVAL_ITEMS = [
  {id:'TSD-2026-0088',type:'Aylıq Hesabat',title:'Büdcə Şöbəsi — May 2026',author:'Nigar Əliyeva',submitted:'14.05.2026 08:55',classification:'Məxfi',parallel:['Menecer','Mərkəzi Analitik'],myRole:'Menecer',urgent:true,sla:'16.05.2026'},
  {id:'TSD-2026-0087',type:'Risk Bildirişi',title:'Büdcə kəsiri riski Q3 2026',author:'T. Hüseynov',submitted:'13.05.2026 17:20',classification:'Daxili',parallel:['Menecer'],myRole:'Menecer',urgent:false,sla:'17.05.2026'},
  {id:'TSD-2026-0086',type:'Aylıq Hesabat',title:'Vergi Siyasəti Şöbəsi — May 2026',author:'Elnur Hüseynov',submitted:'13.05.2026 15:10',classification:'Məxfi',parallel:['Menecer','DPO'],myRole:'Menecer',urgent:false,sla:'18.05.2026'},
  {id:'TSD-2026-0085',type:'KPI Dəyişikliyi',title:'KPI-003 Hədəf Yenilənməsi',author:'L. Hüseynova',submitted:'12.05.2026 11:00',classification:'Daxili',parallel:['Menecer','Analitik','Müdir'],myRole:'Analitik',urgent:false,sla:'20.05.2026'},
];

function PortalApprovalsQueuePage() {
  const [selected, setSelected] = React.useState(null);
  const [action, setAction] = React.useState(null);
  const [comment, setComment] = React.useState('');
  const [bulkSelected, setBulkSelected] = React.useState([]);

  if (selected && action) {
    const mm = APPROVAL_ITEMS.find(a=>a.id===selected);
    return (
      <div style={{maxWidth:600}}>
        <button style={{background:'none',border:'none',color:'#2557d6',fontSize:13,cursor:'pointer',padding:0,marginBottom:16,display:'flex',alignItems:'center',gap:4}} onClick={()=>{setAction(null);setSelected(null)}}>← Geri dön</button>
        <div style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,padding:'24px',boxShadow:'0 1px 4px rgba(15,28,48,0.08)'}}>
          <div style={{fontSize:11,fontFamily:'monospace',color:'#8aa4c0',marginBottom:4}}>{mm.id}</div>
          <div style={{fontSize:16,fontWeight:700,color:'#0f1c30',marginBottom:4}}>{mm.title}</div>
          <div style={{fontSize:12,color:'#4a6888',marginBottom:20}}>Müəllif: {mm.author} · {mm.submitted} · Sinif: {mm.classification}</div>
          {/* Parallel approval routes visualizer */}
          <div style={{background:'#f8fafd',border:'1px solid #e5ecf5',borderRadius:8,padding:'12px 16px',marginBottom:20}}>
            <div style={{fontSize:11,fontWeight:600,color:'#0f1c30',marginBottom:8}}>Paralel Təsdiq Marşrutu (FR-411)</div>
            <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
              {mm.parallel.map((r,i)=>(
                <div key={i} style={{display:'flex',alignItems:'center',gap:6,padding:'5px 10px',borderRadius:6,background:r===mm.myRole?'#eff6ff':'#f0fdf4',border:`1px solid ${r===mm.myRole?'#c7d9fd':'#bbf7d0'}`}}>
                  <div style={{width:8,height:8,borderRadius:'50%',background:r===mm.myRole?'#2557d6':'#16a34a'}}/>
                  <span style={{fontSize:11,fontWeight:r===mm.myRole?600:400,color:r===mm.myRole?'#1d4ed8':'#15803d'}}>{r} {r===mm.myRole?'(Siz)':''}</span>
                </div>
              ))}
            </div>
          </div>
          <div style={{marginBottom:16}}>
            <label style={{display:'block',fontSize:12,fontWeight:600,color:'#0f1c30',marginBottom:6}}>
              {action==='approve'?'Əlavə qeyd (ixtiyari)':'Geri qaytarılma səbəbi'} {action==='return'&&<span style={{color:'#dc2626'}}>*</span>}
            </label>
            <textarea style={{width:'100%',padding:'10px 12px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,fontFamily:'IBM Plex Sans,sans-serif',resize:'vertical',outline:'none',lineHeight:1.6}} rows={4} value={comment} onChange={e=>setComment(e.target.value)} placeholder={action==='approve'?'İstəyə bağlı qeyd...':'Düzəliş tələbi şərhi...'}/>
          </div>
          {action==='approve' && mm.classification==='Məxfi' && (
            <div style={{background:'#f0f9ff',border:'1px solid #bae6fd',borderRadius:8,padding:'10px 14px',marginBottom:16,fontSize:12,color:'#0e7490'}}>
              <strong>Məxfi sənəd:</strong> SIMA rəqəmsal imzası tələb olunur (FR-424). Əməliyyat imzalanacaq.
            </div>
          )}
          <div style={{display:'flex',gap:8}}>
            <button style={{padding:'9px 18px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,fontSize:13,cursor:'pointer',color:'#4a6888'}} onClick={()=>setAction(null)}>Ləğv Et</button>
            <button disabled={action==='return'&&!comment} style={{padding:'9px 24px',background:action==='approve'?'#16a34a':'#dc2626',border:'none',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',color:'#fff',opacity:action==='return'&&!comment?0.5:1}}>
              {action==='approve'?'✓ Təsdiqlə':'↩ Geri Qaytar'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16,gap:8,flexWrap:'wrap'}}>
        <div style={{fontSize:13,color:'#4a6888'}}>
          {APPROVAL_ITEMS.length} gözləyən · {APPROVAL_ITEMS.filter(a=>a.urgent).length} təcili
        </div>
        {bulkSelected.length > 0 && (
          <button style={{padding:'8px 18px',background:'#16a34a',border:'none',borderRadius:8,fontSize:13,fontWeight:600,cursor:'pointer',color:'#fff'}} onClick={()=>setBulkSelected([])}>
            ✓ Toplu Təsdiqlə ({bulkSelected.length})
          </button>
        )}
      </div>
      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {APPROVAL_ITEMS.map((a,i)=>(
          <div key={i} style={{background:'#fff',border:`1px solid ${a.urgent?'#fecaca':'#e5ecf5'}`,borderLeft:`4px solid ${a.urgent?'#dc2626':'#2557d6'}`,borderRadius:10,padding:'14px 16px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)',transition:'all 150ms'}}
            onMouseEnter={e=>e.currentTarget.style.boxShadow='0 2px 10px rgba(15,28,48,0.12)'}
            onMouseLeave={e=>e.currentTarget.style.boxShadow='0 1px 4px rgba(15,28,48,0.07)'}>
            <div style={{display:'flex',gap:10,alignItems:'flex-start'}}>
              <input type="checkbox" style={{marginTop:2,flexShrink:0}} checked={bulkSelected.includes(a.id)} onChange={e=>setBulkSelected(s=>e.target.checked?[...s,a.id]:s.filter(x=>x!==a.id))} onClick={e=>e.stopPropagation()}/>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:'flex',alignItems:'center',gap:6,marginBottom:4,flexWrap:'wrap'}}>
                  <span style={{fontFamily:'monospace',fontSize:10,color:'#8aa4c0'}}>{a.id}</span>
                  <span style={{fontSize:10,fontWeight:600,padding:'2px 7px',borderRadius:4,background:'#f0f4f8',color:'#4a6888'}}>{a.type}</span>
                  <span style={{fontSize:10,fontWeight:600,padding:'2px 7px',borderRadius:4,background:'#eff6ff',color:'#1d4ed8'}}>{a.classification}</span>
                  {a.urgent && <span style={{fontSize:9,fontWeight:700,padding:'2px 6px',borderRadius:4,background:'#fef2f2',color:'#b91c1c'}}>TƏCİLİ</span>}
                </div>
                <div style={{fontSize:14,fontWeight:600,color:'#0f1c30',marginBottom:4}}>{a.title}</div>
                <div style={{fontSize:12,color:'#4a6888',marginBottom:8}}>{a.author} · {a.submitted}</div>
                {/* Parallel routes */}
                <div style={{display:'flex',gap:5,flexWrap:'wrap',marginBottom:4}}>
                  {a.parallel.map((r,j)=>(
                    <span key={j} style={{fontSize:10,padding:'2px 7px',borderRadius:4,background:r===a.myRole?'#eff6ff':'#f0fdf4',color:r===a.myRole?'#1d4ed8':'#4b5563',fontWeight:r===a.myRole?600:400}}>
                      {r}{r===a.myRole?' (siz)':''}
                    </span>
                  ))}
                  <span style={{fontSize:10,color:'#8aa4c0',padding:'2px 0'}}>SLA: {a.sla}</span>
                </div>
              </div>
              <div style={{display:'flex',gap:6,flexShrink:0}}>
                <button style={{padding:'7px 14px',background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:8,fontSize:12,fontWeight:600,cursor:'pointer',color:'#15803d'}} onClick={()=>{setSelected(a.id);setAction('approve')}}>✓ Təsdiqlə</button>
                <button style={{padding:'7px 14px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}} onClick={()=>{setSelected(a.id);setAction('return')}}>↩ Geri</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── REPORTS GALLERY (FR-306–330) ─────────────────────────

const REPORT_TEMPLATES = [
  {id:'RPT-001',title:'Aylıq İcra Hesabatı',              desc:'Bütün KPI-lar, risklər, tədbirlər. Rəhbərliyə təqdimat.',             formats:['PDF','DOCX','PPTX'],module:'Horizontal',      uses:428,updated:'01.05.2026',badge:'Populyar'},
  {id:'RPT-002',title:'Layihə Status Hesabatı',           desc:'Memarlıq layihələrinin cari vəziyyəti, mərhələ, podratçı.',            formats:['PDF','XLSX'],        module:'VDP-Memarlıq',    uses:184,updated:'10.04.2026',badge:'VDP'},
  {id:'RPT-003',title:'Gecikmə Hesabatı',                 desc:'Gecikən layihələr, ortalama gecikmə, eskalasiya statusu.',             formats:['PDF','XLSX'],        module:'VDP-Memarlıq',    uses:76, updated:'12.04.2026',badge:'VDP'},
  {id:'RPT-004',title:'Tamamlanma Faizi Hesabatı',        desc:'Bütün tikinti layihələrinin tamamlanma % paylanması.',                 formats:['PDF','PPTX'],        module:'VDP-Memarlıq',    uses:92, updated:'08.04.2026',badge:'VDP'},
  {id:'RPT-005',title:'Məskunlaşma Ümumi Statistika',     desc:'Ailə sayı, nəfər sayı, yerləşdirilmiş, gözləyən.',                   formats:['PDF','XLSX','CSV'],  module:'VDP-Məskunlaşma', uses:67, updated:'12.04.2026',badge:'VDP'},
  {id:'RPT-006',title:'Xüsusi Status Hesabatı',           desc:'Ailə reyestrinin xüsusi statuslara görə süzülmüş siyahısı.',          formats:['PDF','XLSX'],        module:'VDP-Məskunlaşma', uses:45, updated:'05.04.2026',badge:'VDP'},
  {id:'RPT-007',title:'Məşğulluq Hesabatı',               desc:'Resettlement prosesinin əmək məşğulluğuna təsiri.',                   formats:['PDF'],               module:'VDP-Məskunlaşma', uses:28, updated:'01.04.2026',badge:'VDP'},
  {id:'RPT-008',title:'Mənzil Vəziyyəti Hesabatı',        desc:'Mənzil fondunun dolulluq, boş mənzil statistikası.',                  formats:['PDF','XLSX'],        module:'VDP-Mənzil Fondu',uses:53, updated:'15.04.2026',badge:'VDP'},
  {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'],        module:'VDP-Mənzil Fondu',uses:41, updated:'10.04.2026',badge:'VDP'},
  {id:'RPT-010',title:'Aylıq Ödəniş Hesabatı',           desc:'Mənzil fondu aylıq ödəniş statistikası.',                             formats:['PDF','CSV'],         module:'VDP-Mənzil Fondu',uses:38, updated:'01.05.2026',badge:'VDP'},
  {id:'RPT-011',title:'Əmlak Müqavilə Hesabatı',          desc:'Kommersiya icarə müqavilələrinin tam siyahısı.',                      formats:['PDF','XLSX'],        module:'VDP-Əmlak',       uses:62, updated:'12.04.2026',badge:'VDP'},
  {id:'RPT-012',title:'Əmlak Aylıq Gəlir Hesabatı',       desc:'Əmlak modulundan aylıq icarə gəliri analizi.',                        formats:['PDF','PPTX'],        module:'VDP-Əmlak',       uses:55, updated:'01.05.2026',badge:'VDP'},
  {id:'RPT-013',title:'Gecikmiş Ödəniş Hesabatı',         desc:'Ödənilməmiş icarə borcları, risk siyahısı.',                          formats:['PDF','XLSX'],        module:'VDP-Əmlak',       uses:44, updated:'10.04.2026',badge:'VDP'},
  {id:'RPT-014',title:'Bank Uyğunlaşdırma Sertifikatı',   desc:'Dövrün bank əməliyyatlarının tam audit sertifikatı.',                 formats:['PDF'],               module:'Bank',            uses:92, updated:'15.04.2026',badge:'Audit'},
  {id:'RPT-013',title:'Gecikmiş Ödəniş Hesabatı',   desc:'Ödənilməmiş icarə borcları, risk siyahısı.',              formats:['PDF','XLSX'],        module:'VDP-Əmlak',       uses:44,  updated:'10.04.2026',badge:'VDP'},
  {id:'RPT-014',title:'KPI Hesabatı',              desc:'Bütün departamentlər üzrə KPI göstəriciləri hesabatı.',   formats:['PDF','XLSX','PPTX'], module:'Sistem',          uses:156, updated:'01.05.2026',badge:'Sistem'},
  {id:'RPT-015',title:'Tullantı Satışı Hesabatı', desc:'Əmlak tullantı satışlarının tam hesabatı.',               formats:['PDF','XLSX'],        module:'VDP-Əmlak',       uses:28,  updated:'15.04.2026',badge:'VDP'},
  {id:'RPT-016',title:'Audit Jurnal Hesabatı',    desc:'Sistem audit jurnalının çıxarışı. Hesablama Palatası üçün.',formats:['PDF','CSV'],        module:'Sistem',          uses:33,  updated:'01.03.2026',badge:'Audit'},
];

function PortalReportsGalleryPage() {
  const [generating, setGenerating] = React.useState(null);
  const [format, setFormat] = React.useState({});
  const badgeStyle = {
    Populyar:{background:'#eff6ff',color:'#1d4ed8'},
    VDP:     {background:'#f5f3ff',color:'#7c3aed'},
    Audit:   {background:'#fffbeb',color:'#b45309'},
    AI:      {background:'#f0fdf4',color:'#15803d'},
  };
  return (
    <div>
      <div style={{fontSize:13,color:'#4a6888',marginBottom:18}}>Hesabat Şablonları Kataloqu · May 2026 · FR-306–330</div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:12}}>
        {REPORT_TEMPLATES.map((t,i)=>(
          <div key={i} style={{background:'#fff',border:'1px solid #e5ecf5',borderRadius:12,padding:'18px',boxShadow:'0 1px 4px rgba(15,28,48,0.07)',display:'flex',flexDirection:'column',gap:12}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start'}}>
              <div style={{flex:1}}>
                <div style={{display:'flex',gap:6,marginBottom:6,flexWrap:'wrap'}}>
                  <span style={{fontFamily:'monospace',fontSize:10,color:'#8aa4c0'}}>{t.id}</span>
                  {t.badge && <span style={{fontSize:10,fontWeight:600,padding:'2px 7px',borderRadius:4,...(badgeStyle[t.badge]||{background:'#f0f4f8',color:'#4a6888'})}}>{t.badge}</span>}
                </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>
            <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
              {t.formats.map(f=>(
                <button key={f} style={{padding:'4px 10px',borderRadius:6,border:`1px solid ${format[t.id]===f?'#2557d6':'#d0ddef'}`,background:format[t.id]===f?'#2557d6':format[t.id]&&format[t.id]!==f?'#f0f4f8':'#fff',color:format[t.id]===f?'#fff':'#4a6888',fontSize:11,fontWeight:600,cursor:'pointer',transition:'all 120ms'}} onClick={()=>setFormat(prev=>({...prev,[t.id]:f}))}>{f}</button>
              ))}
            </div>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div style={{fontSize:11,color:'#8aa4c0'}}>{t.uses} dəfə istifadə · Yeniləndi: {t.updated}</div>
              <button
                style={{padding:'7px 16px',background:generating===t.id?'#f0f4f8':'#2557d6',border:`1px solid ${generating===t.id?'#d0ddef':'transparent'}`,borderRadius:8,fontSize:12,fontWeight:500,cursor:'pointer',color:generating===t.id?'#4a6888':'#fff',transition:'all 150ms'}}
                onClick={()=>{setGenerating(t.id);setTimeout(()=>setGenerating(null),2400)}}>
                {generating===t.id?'⏳ Hazırlanır...':'⬇ Yarat'}
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// Expose globally  
const OBJ_STATUS = window.OBJ_STATUS || {
  active:{label:'Aktiv',color:'#1d4ed8',bg:'#eff6ff'},
  texnozor:{label:'Texnozor',color:'#b45309',bg:'#fffbeb'},
  tender:{label:'Tenderdə',color:'#0e7490',bg:'#f0f9ff'},
  docs:{label:'Sənədləşmə',color:'#4b5563',bg:'#f9fafb'},
  construction:{label:'Tikilir',color:'#7c3aed',bg:'#f5f3ff'},
  completed:{label:'Tamamlandı',color:'#15803d',bg:'#f0fdf4'},
  prep:{label:'Hazırlıqda',color:'#4b5563',bg:'#f9fafb'},
};

Object.assign(window, {
  PortalBankReconciliationPage,
  PortalGISPage,
  PortalFieldOpsPage,
  PortalBulkImportPage,
  PortalApprovalsQueuePage,
  PortalReportsGalleryPage,
});