/* ─────────────────────────────────────────────────────────────────
   AYRA Portal — Missing Pages v0.6
   Arxiv · Tədbirlər · Tövsiyələr · Sübutlar · Kömək · Profilim · Bildirişlər
   FR refs: §11.1, §12 (FR-306–330), IA §22.1
   ───────────────────────────────────────────────────────────────── */

// ── ARCHIVE PAGE (FR-315, FR-325–327) ─────────────────────

const ALL_ARCHIVE_REPORTS = [
  {id:'HSB-2026-0140',title:'Aprel 2026 — Aylıq Hesabat',   dept:'Büdcə Şöbəsi',      period:'04.2026',submitted:'05.05.2026',approved:'08.05.2026',approver:'F. Quliyev', classification:'Məxfi'},
  {id:'HSB-2026-0139',title:'Mart 2026 — Aylıq Hesabat',    dept:'Büdcə Şöbəsi',      period:'03.2026',submitted:'04.04.2026',approved:'06.04.2026',approver:'F. Quliyev', classification:'Məxfi'},
  {id:'HSB-2026-0138',title:'Fevral 2026 — Aylıq Hesabat',  dept:'Büdcə Şöbəsi',      period:'02.2026',submitted:'05.03.2026',approved:'07.03.2026',approver:'N. Babayev', classification:'Daxili'},
  {id:'HSB-2026-0137',title:'Yanvar 2026 — Aylıq Hesabat',  dept:'Büdcə Şöbəsi',      period:'01.2026',submitted:'04.02.2026',approved:'06.02.2026',approver:'N. Babayev', classification:'Daxili'},
  {id:'HSB-2025-0136',title:'Dekabr 2025 — Aylıq Hesabat',  dept:'Büdcə Şöbəsi',      period:'12.2025',submitted:'06.01.2026',approved:'08.01.2026',approver:'F. Quliyev', classification:'Daxili'},
  {id:'HSB-2025-0135',title:'Noyabr 2025 — Aylıq Hesabat',  dept:'Büdcə Şöbəsi',      period:'11.2025',submitted:'05.12.2025',approved:'07.12.2025',approver:'F. Quliyev', classification:'Daxili'},
  {id:'HSB-2025-0130',title:'Oktyabr 2025 — Aylıq Hesabat', dept:'Büdcə Şöbəsi',      period:'10.2025',submitted:'04.11.2025',approved:'06.11.2025',approver:'N. Babayev', classification:'Daxili'},
  {id:'HSB-2026-0141',title:'Aprel 2026 — Aylıq Hesabat',   dept:'Vergi Siyasəti Şöb.',period:'04.2026',submitted:'06.05.2026',approved:'09.05.2026',approver:'F. Quliyev', classification:'Məxfi'},
];

const ARCH_CLASS_STYLE = {
  Məxfi: {color:'#b91c1c',bg:'#fef2f2'},
  Daxili:{color:'#1d4ed8',bg:'#eff6ff'},
  Açıq:  {color:'#15803d',bg:'#f0fdf4'},
};

function PortalArchivePage() {
  const [search,     setSearch]     = React.useState('');
  const [yearFilter, setYearFilter] = React.useState('');
  const [dlState,    setDlState]    = React.useState({});

  const filtered = ALL_ARCHIVE_REPORTS.filter(r =>
    (!search      || r.title.toLowerCase().includes(search.toLowerCase()) || r.id.toLowerCase().includes(search.toLowerCase())) &&
    (!yearFilter  || r.period.includes(yearFilter))
  );

  const download = (id, fmt) => {
    setDlState(s => ({...s, [`${id}-${fmt}`]: true}));
    setTimeout(() => setDlState(s => ({...s, [`${id}-${fmt}`]: false})), 1600);
  };

  return (
    <div>
      {/* Stats strip */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:18}}>
        {[
          {label:'Cəmi Arxiv',       value: ALL_ARCHIVE_REPORTS.length, color:'#0f1c30'},
          {label:'Bu il (2026)',      value: ALL_ARCHIVE_REPORTS.filter(r=>r.period.includes('2026')).length, color:'#1d4ed8'},
          {label:'Keçən il (2025)',   value: ALL_ARCHIVE_REPORTS.filter(r=>r.period.includes('2025')).length, color:'#4a6888'},
          {label:'Məxfi sənədlər',   value: ALL_ARCHIVE_REPORTS.filter(r=>r.classification==='Məxfi').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>

      {/* Filters */}
      <div style={{display:'flex',gap:8,marginBottom:14,alignItems:'center',flexWrap:'wrap'}}>
        <input className="p-input" style={{flex:1,maxWidth:300}} placeholder="Hesabat axtar: ad, kod..."
          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={yearFilter} onChange={e=>setYearFilter(e.target.value)}>
          <option value="">Bütün illər</option>
          <option value="2026">2026</option>
          <option value="2025">2025</option>
        </select>
        <div style={{marginLeft:'auto',fontSize:12,color:'#8aa4c0'}}>{filtered.length} hesabat</div>
        <button style={{padding:'7px 14px',background:'#fff',border:'1px solid #d0ddef',borderRadius:8,fontSize:12,cursor:'pointer',color:'#4a6888'}}>↓ Toplu İxrac</button>
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl">
          <thead>
            <tr>
              {['Kodu','Ad','Dövr','Departament','Təqdim','Təsdiqləndi','Təsdiqçi','Sinif','Yüklə'].map(h => (
                <th key={h} className="tbl-th">{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtered.map((r,i) => {
              const cs = ARCH_CLASS_STYLE[r.classification] || {color:'#6b7280',bg:'#f9fafb'};
              return (
                <tr key={i} className="tbl-tr">
                  <td className="tbl-td" style={{fontFamily:'IBM Plex Mono,monospace',fontSize:11,color:'#4a6888',whiteSpace:'nowrap'}}>{r.id}</td>
                  <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30',minWidth:180,maxWidth:220}}>
                    <div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{r.title}</div>
                  </td>
                  <td className="tbl-td" style={{fontFamily:'IBM Plex Mono,monospace',fontSize:11,whiteSpace:'nowrap'}}>{r.period}</td>
                  <td className="tbl-td" style={{fontSize:12}}>{r.dept}</td>
                  <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>{r.submitted}</td>
                  <td className="tbl-td" style={{fontSize:11,color:'#15803d',whiteSpace:'nowrap'}}>{r.approved}</td>
                  <td className="tbl-td" style={{fontSize:12}}>{r.approver}</td>
                  <td className="tbl-td">
                    <span className="pill" style={{background:cs.bg,color:cs.color,fontSize:10}}>{r.classification}</span>
                  </td>
                  <td className="tbl-td">
                    <div style={{display:'flex',gap:4}}>
                      {['PDF','DOCX'].map(fmt => {
                        const key = `${r.id}-${fmt}`;
                        return (
                          <button key={fmt} onClick={()=>download(r.id,fmt)}
                            style={{padding:'3px 8px',fontSize:10,fontWeight:600,borderRadius:4,border:'1px solid #d0ddef',background:dlState[key]?'#2557d6':'#fff',color:dlState[key]?'#fff':'#4a6888',cursor:'pointer',transition:'all 120ms',whiteSpace:'nowrap'}}>
                            {dlState[key] ? '⏳' : fmt}
                          </button>
                        );
                      })}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div style={{padding:'10px 16px',borderTop:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',fontSize:11,color:'#8aa4c0'}}>
          <span>Saxlanma müddəti: Məxfi 5 il · Daxili 3 il · Açıq 1 il (FR-327)</span>
          <span>Immutable arxiv · SHA-256 hash zənciri (FR-315)</span>
        </div>
      </div>
    </div>
  );
}

// ── ACTIONS PAGE — Düzəldici Tədbirlər Planı ─────────────

const ACTIONS_DATA = [
  {id:'TDB-001',title:'Büdcə məsrəflərinin optimallaşdırılması',     linkedRisk:'RSK-048',owner:'N. Əliyeva', dept:'Büdcə Şöbəsi',    due:'30.06.2026',priority:'high',  status:'progress',  pct:40, created:'10.05.2026'},
  {id:'TDB-002',title:'Texniki mütəxəssis işə qəbulu kampaniyası',   linkedRisk:'RSK-046',owner:'L. Hüseynova',dept:'İnsan Resursları', due:'01.06.2026',priority:'medium',status:'completed', pct:100,created:'01.05.2026'},
  {id:'TDB-003',title:'Sistem yedəkləmə planının hazırlanması',       linkedRisk:'RSK-047',owner:'A. Məmmədov', dept:'RİA',             due:'22.05.2026',priority:'high',  status:'overdue',   pct:20, created:'08.05.2026'},
  {id:'TDB-004',title:'KPI-004 xidmət səviyyəsinin artırılması',      linkedKPI:'KPI-004', owner:'T. Hüseynov', dept:'Rəqəmsal Xidm.', due:'31.07.2026',priority:'medium',status:'planned',   pct:0,  created:'14.05.2026'},
  {id:'TDB-005',title:'Kadr məsrəfləri büdcəsinin yenidən bölüşdürülməsi',linkedRisk:'RSK-048',owner:'F. Quliyev',dept:'Maliyyə',       due:'15.06.2026',priority:'high',  status:'progress',  pct:60, created:'12.05.2026'},
  {id:'TDB-006',title:'E-xidmət portalı SLA monitorinqi qurulması',  linkedKPI:'KPI-004', owner:'A. Məmmədov', dept:'RİA',             due:'15.07.2026',priority:'medium',status:'planned',   pct:0,  created:'13.05.2026'},
];

const ACT_STATUS = {
  planned:   {label:'Planlaşdırılmış',color:'#4b5563',bg:'#f9fafb'},
  progress:  {label:'İcrada',         color:'#1d4ed8',bg:'#eff6ff'},
  completed: {label:'Tamamlandı',     color:'#15803d',bg:'#f0fdf4'},
  overdue:   {label:'Gecikmiş',       color:'#b91c1c',bg:'#fef2f2'},
};

function PortalActionsPage() {
  const [filter,    setFilter]   = React.useState('all');
  const [showForm,  setShowForm] = React.useState(false);
  const [aiExpanded,setAiExp]   = React.useState(false);

  const counts = {
    all:       ACTIONS_DATA.length,
    progress:  ACTIONS_DATA.filter(a=>a.status==='progress').length,
    overdue:   ACTIONS_DATA.filter(a=>a.status==='overdue').length,
    completed: ACTIONS_DATA.filter(a=>a.status==='completed').length,
    planned:   ACTIONS_DATA.filter(a=>a.status==='planned').length,
  };

  const filtered = filter === 'all' ? ACTIONS_DATA : ACTIONS_DATA.filter(a => a.status === filter);

  return (
    <div>
      {/* KPI strip */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:18}}>
        {[
          {label:'Cəmi Tədbirlər', value:counts.all,       color:'#0f1c30'},
          {label:'İcrada',         value:counts.progress,  color:'#1d4ed8'},
          {label:'Gecikmiş',       value:counts.overdue,   color:'#b91c1c'},
          {label:'Tamamlandı',     value:counts.completed, 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>

      {/* AI recommendation box */}
      <div className="ai-box" style={{marginBottom:16,cursor:'pointer'}} onClick={()=>setAiExp(v=>!v)}>
        <div className="ai-label"><div className="ai-dot"/>AYRA AI — Tədbirlər Analizi
          <span style={{marginLeft:'auto',fontSize:10,color:'#3b72f6'}}>{aiExpanded ? '∧ Bağla' : '∨ Aç'}</span>
        </div>
        {aiExpanded && (
          <div className="ai-text">
            TDB-003 (Sistem yedəkləmə planı) RSK-047 ilə bağlı <strong>gecikib</strong> — son tarix 22.05.2026. 
            Dərhal A. Məmmədovla əlaqə saxlamaq tövsiyə edilir. TDB-001 isə RSK-048-in baş verməsinin 
            ehtimalını 40%-dən 22%-ə endirə bilər — cari irəliləyiş 40%.
          </div>
        )}
      </div>

      {/* Controls */}
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12,gap:8,flexWrap:'wrap'}}>
        <div style={{display:'flex',gap:1,background:'#f0f4f8',borderRadius:8,padding:2}}>
          {[
            ['all',`Hamısı (${counts.all})`],
            ['progress',`İcrada (${counts.progress})`],
            ['overdue',`Gecikmiş (${counts.overdue})`],
            ['planned',`Planlaşdırılmış (${counts.planned})`],
            ['completed',`Tamamlandı (${counts.completed})`],
          ].map(([k,v]) => (
            <button key={k} onClick={()=>setFilter(k)} style={{padding:'5px 11px',borderRadius:6,border:'none',cursor:'pointer',fontSize:11,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'}}>{v}</button>
          ))}
        </div>
        <button className="p-btn p-btn-primary" style={{fontSize:12}} onClick={()=>setShowForm(v=>!v)}>
          {showForm ? '✕ Bağla' : '+ Yeni Tədbir'}
        </button>
      </div>

      {/* New action form */}
      {showForm && (
        <div className="card card-padded" style={{marginBottom:14,borderLeft:'3px solid #2557d6'}}>
          <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:12}}>Yeni Düzəldici Tədbir</div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginBottom:12}}>
            {[
              {label:'Başlıq',       ph:'Tədbirin adı...',      span:2},
              {label:'Sahib',        ph:'Məsul şəxs...'},
              {label:'Son tarix',    ph:'gg.aa.iiii'},
            ].map((f,i) => (
              <div key={i} style={f.span ? {gridColumn:`span ${f.span}`} : {}}>
                <label style={{display:'block',fontSize:12,fontWeight:500,color:'#0f1c30',marginBottom:5}}>{f.label}</label>
                <input className="p-input" placeholder={f.ph}/>
              </div>
            ))}
            <div>
              <label style={{display:'block',fontSize:12,fontWeight:500,color:'#0f1c30',marginBottom:5}}>Prioritet</label>
              <select style={{width:'100%',padding:'9px 12px',border:'1px solid #d0ddef',borderRadius:8,fontSize:13,fontFamily:'inherit'}}>
                <option>Yüksək</option><option>Orta</option><option>Aşağı</option>
              </select>
            </div>
          </div>
          <div style={{marginBottom:12}}>
            <label style={{display:'block',fontSize:12,fontWeight:500,color:'#0f1c30',marginBottom:5}}>Əlaqəli Risk / KPI (ixtiyari)</label>
            <input className="p-input" placeholder="RSK-... və ya KPI-..."/>
          </div>
          <div style={{display:'flex',gap:8}}>
            <button className="p-btn p-btn-secondary" style={{fontSize:12}} onClick={()=>setShowForm(false)}>Ləğv Et</button>
            <button className="p-btn p-btn-primary"   style={{fontSize:12}} onClick={()=>setShowForm(false)}>Saxla</button>
          </div>
        </div>
      )}

      {/* Action cards */}
      <div style={{display:'flex',flexDirection:'column',gap:8}}>
        {filtered.map((a,i) => {
          const sm = ACT_STATUS[a.status];
          const prColor = a.priority==='high' ? '#dc2626' : a.priority==='medium' ? '#f59e0b' : '#d1d5db';
          return (
            <div key={i} className="card" style={{padding:'14px 18px',borderLeft:`3px solid ${prColor}`}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12}}>
                <div style={{flex:1}}>
                  <div style={{display:'flex',alignItems:'center',gap:7,marginBottom:5,flexWrap:'wrap'}}>
                    <span style={{fontFamily:'IBM Plex Mono,monospace',fontSize:10,color:'#8aa4c0'}}>{a.id}</span>
                    <span className="pill" style={{background:sm.bg,color:sm.color,fontSize:10}}>{sm.label}</span>
                    {a.linkedRisk && <span style={{fontSize:10,padding:'2px 7px',borderRadius:4,background:'#fef2f2',color:'#b91c1c',fontFamily:'monospace'}}>⊡ {a.linkedRisk}</span>}
                    {a.linkedKPI  && <span style={{fontSize:10,padding:'2px 7px',borderRadius:4,background:'#eff6ff',color:'#1d4ed8',fontFamily:'monospace'}}>◉ {a.linkedKPI}</span>}
                    <span style={{fontSize:10,padding:'2px 7px',borderRadius:4,background:a.priority==='high'?'#fef2f2':a.priority==='medium'?'#fffbeb':'#f9fafb',color:prColor,fontWeight:600}}>
                      {a.priority==='high'?'Yüksək':a.priority==='medium'?'Orta':'Aşağı'} prioritet
                    </span>
                  </div>
                  <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:4}}>{a.title}</div>
                  <div style={{fontSize:11,color:'#4a6888'}}>Sahib: {a.owner} · {a.dept} · Son tarix: <strong style={{color:a.status==='overdue'?'#b91c1c':'#4a6888'}}>{a.due}</strong></div>
                </div>
                <div style={{flexShrink:0,minWidth:110,textAlign:'right'}}>
                  <div style={{fontSize:22,fontWeight:700,color:a.status==='overdue'?'#b91c1c':a.status==='completed'?'#15803d':'#0f1c30',fontFamily:'IBM Plex Mono,monospace',lineHeight:1,marginBottom:5}}>{a.pct}%</div>
                  <div style={{height:5,background:'#e5ecf5',borderRadius:3,overflow:'hidden'}}>
                    <div style={{height:'100%',width:`${a.pct}%`,background:a.status==='overdue'?'#dc2626':a.status==='completed'?'#16a34a':'#2557d6',borderRadius:3,transition:'width 0.5s'}}/>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── RECOMMENDATIONS PAGE — Tövsiyələr ────────────────────

const RECOM_DATA = [
  {id:'TCR-001',title:'Büdcə icrası strategiyasının yenidən baxılması',  source:'AI',skill:'analyzing-kpi-variance',        dept:'Maliyyə Naz.',    priority:'high',  status:'review',   date:'14.05.2026',text:'KPI-001 (Büdcə İcrası) son 3 ayda hədəfin altındadır (85.3% → 87.4%). Məsrəf strukturunu analiz edərək Q3 planını 88%+ hədəfinə uyğunlaşdırmaq tövsiyə olunur. Xüsusilə kadr məsrəfləri maddəsini nəzərdən keçirin.'},
  {id:'TCR-002',title:'Xidmət göstəricisi SLA-nın yenidən müəyyən edilməsi', source:'AI',skill:'suggesting-corrective-actions',  dept:'Rəqəmsal Xidm.', priority:'high',  status:'accepted', date:'13.05.2026',text:'KPI-004 (Xidmət Göstəricisi) 78.1%-lə hədəfin (85%) əhəmiyyətli dərəcədə altındadır. Sistem yenilənməsi prosedurunun optimallaşdırılması tövsiyə olunur — texniki dayanma müddətini 4 saatdan 1 saata endirmək mümkündür.'},
  {id:'TCR-003',title:'Kadr inkişafı proqramının genişləndirilməsi',       source:'Manual',                                    dept:'İnsan Resursları',priority:'medium', status:'new',      date:'12.05.2026',text:'KPI-003 müsbət dinamika göstərsə də, texniki kadr boşluğunu doldurmaq üçün əlavə sertifikasiya proqramı (CISSP, PMP, ASAN) tövsiyə olunur. 2026 H2-ci yarısı üçün büdcə ayrılması lazımdır.'},
  {id:'TCR-004',title:'Sənəd dövriyyəsinin e-imza ilə avtomatlaşdırılması', source:'AI',skill:'detecting-evidence-gaps',          dept:'Bütün şöbələr',  priority:'low',   status:'declined', date:'10.05.2026',text:'Sənəd axını 102% göstəricisinə çatıb. SIMA İmza inteqrasiyasını genişləndirərək kağız dövriyyəsini 60%-ə qədər azaltmaq mümkündür. Bu fəaliyyət Phase 3 üçün nəzərdə tutulub.'},
];

const REC_STATUS = {
  new:      {label:'Yeni',             color:'#1d4ed8',bg:'#eff6ff'},
  review:   {label:'Nəzərdən Keçirilir',color:'#b45309',bg:'#fffbeb'},
  accepted: {label:'Qəbul Edildi',     color:'#15803d',bg:'#f0fdf4'},
  declined: {label:'Rədd Edildi',      color:'#6b7280',bg:'#f9fafb'},
};

function PortalRecommendationsPage() {
  const [expanded, setExpanded] = React.useState(null);
  const [statuses, setStatuses] = React.useState({});

  const getStatus = (r) => statuses[r.id] || r.status;

  const changeStatus = (id, newStatus) => setStatuses(s => ({...s, [id]: newStatus}));

  return (
    <div>
      {/* Strip */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:18}}>
        {[
          {label:'Cəmi Tövsiyə', value:RECOM_DATA.length,                                        color:'#0f1c30'},
          {label:'Yeni / Baxılan',value:RECOM_DATA.filter(r=>['new','review'].includes(getStatus(r))).length, color:'#b45309'},
          {label:'Qəbul Edilmiş', value:RECOM_DATA.filter(r=>getStatus(r)==='accepted').length,   color:'#15803d'},
          {label:'AI Mənbəli',   value:RECOM_DATA.filter(r=>r.source==='AI').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:30,color:k.color}}>{k.value}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:10}}>
        {RECOM_DATA.map((r,i) => {
          const st  = getStatus(r);
          const sm  = REC_STATUS[st];
          const isExp = expanded === r.id;
          const prColor = r.priority==='high'?'#dc2626':r.priority==='medium'?'#f59e0b':'#d1d5db';
          const actionable = st === 'new' || st === 'review';
          return (
            <div key={i} className="card" style={{padding:'16px 18px',borderLeft:`3px solid ${prColor}`,transition:'box-shadow 150ms'}}
              onMouseEnter={e=>e.currentTarget.style.boxShadow='0 2px 10px rgba(15,28,48,0.10)'}
              onMouseLeave={e=>e.currentTarget.style.boxShadow=''}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:12}}>
                <div style={{flex:1}}>
                  <div style={{display:'flex',alignItems:'center',gap:7,marginBottom:5,flexWrap:'wrap'}}>
                    <span style={{fontFamily:'IBM Plex Mono,monospace',fontSize:10,color:'#8aa4c0'}}>{r.id}</span>
                    <span className="pill" style={{background:sm.bg,color:sm.color,fontSize:10}}>{sm.label}</span>
                    <span style={{fontSize:10,padding:'2px 7px',borderRadius:4,background:r.source==='AI'?'#f0fdf4':'#f0f4f8',color:r.source==='AI'?'#15803d':'#4a6888',fontWeight:600}}>
                      {r.source==='AI' ? '🤖 AYRA AI' : '✎ Manual'}
                    </span>
                    {r.skill && <span style={{fontSize:10,padding:'2px 7px',borderRadius:4,background:'#f5f3ff',color:'#7c3aed',fontFamily:'monospace'}}>{r.skill}</span>}
                  </div>
                  <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:3}}>{r.title}</div>
                  <div style={{fontSize:11,color:'#4a6888'}}>{r.dept} · {r.date}</div>
                  {isExp && (
                    <div style={{marginTop:10,fontSize:12,color:'#0f1c30',lineHeight:1.7,background:'#f8fafd',padding:'10px 12px',borderRadius:8,borderLeft:'2px solid #c7d9fd'}}>{r.text}</div>
                  )}
                </div>
                <div style={{display:'flex',gap:6,flexShrink:0,alignItems:'flex-start',flexWrap:'wrap'}}>
                  <button onClick={()=>setExpanded(isExp ? null : r.id)}
                    style={{padding:'5px 10px',background:'#f0f4f8',border:'1px solid #e5ecf5',borderRadius:6,fontSize:11,cursor:'pointer',color:'#4a6888'}}>
                    {isExp ? 'Bağla' : 'Bax'}
                  </button>
                  {actionable && <>
                    <button onClick={()=>changeStatus(r.id,'accepted')}
                      style={{padding:'5px 10px',background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:6,fontSize:11,cursor:'pointer',color:'#15803d',fontWeight:600}}>✓ Qəbul</button>
                    <button onClick={()=>changeStatus(r.id,'declined')}
                      style={{padding:'5px 10px',background:'#fff',border:'1px solid #e5ecf5',borderRadius:6,fontSize:11,cursor:'pointer',color:'#6b7280'}}>✕ Rədd</button>
                  </>}
                  {st === 'accepted' && (
                    <button style={{padding:'5px 10px',background:'#eff6ff',border:'1px solid #c7d9fd',borderRadius:6,fontSize:11,cursor:'pointer',color:'#1d4ed8',fontWeight:600}}>→ Tədbir Yarat</button>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── EVIDENCE PAGE — Sübutlar (FR-306, FR-325) ─────────────

const EVIDENCE_DATA = [
  {id:'SBT-001',name:'Büdcə İcra Sertifikatı — Aprel 2026.pdf', type:'PDF', size:'1.2 MB', classification:'Məxfi', linked:'HSB-2026-0140', uploaded:'08.05.2026', uploader:'N. Əliyeva',   verified:true},
  {id:'SBT-002',name:'Texnozor Protokolu — LYH-XL-003.pdf',     type:'PDF', size:'840 KB', classification:'Daxili',linked:'LYH-XL-003',    uploaded:'12.05.2026', uploader:'A. Məmmədov', verified:true},
  {id:'SBT-003',name:'KPI Hesablaması — May 2026.xlsx',          type:'XLSX',size:'320 KB', classification:'Daxili',linked:'KPI-001',        uploaded:'14.05.2026', uploader:'N. Əliyeva',   verified:false},
  {id:'SBT-004',name:'Bank Uyğunlaşdırma Aktı — May 2026.pdf',  type:'PDF', size:'560 KB', classification:'Məxfi', linked:'REKON-05-2026',  uploaded:'14.05.2026', uploader:'F. Quliyev',   verified:true},
  {id:'SBT-005',name:'Şöbə Rəhbəri Təsdiqi — May 2026.docx',    type:'DOCX',size:'180 KB', classification:'Daxili',linked:'HSB-2026-0142',  uploaded:'13.05.2026', uploader:'F. Quliyev',   verified:false},
  {id:'SBT-006',name:'Risk Azaldılma Hesabatı — RSK-048.pdf',   type:'PDF', size:'290 KB', classification:'Daxili',linked:'RSK-048',        uploaded:'10.05.2026', uploader:'N. Əliyeva',   verified:true},
];

const EV_CLASS = {
  Məxfi: {color:'#b91c1c',bg:'#fef2f2'},
  Daxili:{color:'#1d4ed8',bg:'#eff6ff'},
  Açıq:  {color:'#15803d',bg:'#f0fdf4'},
};
const EV_TYPE_ICON = {PDF:'📄',XLSX:'📊',DOCX:'📝',PNG:'🖼',CSV:'📋'};

function PortalEvidencePage() {
  const [dragOver,  setDragOver]  = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [search,    setSearch]    = React.useState('');

  const filtered = EVIDENCE_DATA.filter(e =>
    !search || e.name.toLowerCase().includes(search.toLowerCase()) ||
    e.linked.toLowerCase().includes(search.toLowerCase())
  );

  const doUpload = () => {
    setUploading(true);
    setTimeout(() => setUploading(false), 1600);
  };

  return (
    <div>
      {/* Stats */}
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:10,marginBottom:18}}>
        {[
          {label:'Cəmi Sübut',    value:EVIDENCE_DATA.length,                            color:'#0f1c30'},
          {label:'Yoxlanılmış',   value:EVIDENCE_DATA.filter(e=>e.verified).length,       color:'#15803d'},
          {label:'Gözləyən',      value:EVIDENCE_DATA.filter(e=>!e.verified).length,      color:'#b45309'},
          {label:'Məxfi sənəd',   value:EVIDENCE_DATA.filter(e=>e.classification==='Məxfi').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>

      {/* Upload zone */}
      <div
        style={{border:`2px dashed ${dragOver?'#2557d6':'#d0ddef'}`,borderRadius:12,padding:'22px',textAlign:'center',marginBottom:18,background:dragOver?'#f0f5ff':'#fafbfc',transition:'all 150ms',cursor:'pointer'}}
        onDragOver={e=>{e.preventDefault();setDragOver(true)}}
        onDragLeave={()=>setDragOver(false)}
        onDrop={e=>{e.preventDefault();setDragOver(false);doUpload()}}
        onClick={doUpload}>
        <div style={{fontSize:26,marginBottom:6}}>📎</div>
        <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:4}}>Sübut sənədini yükləyin</div>
        <div style={{fontSize:11,color:'#4a6888',marginBottom:12}}>PDF, DOCX, XLSX, PNG · Maks 25 MB · Antivirus skanı (FR-261)</div>
        <button className="p-btn p-btn-primary" style={{fontSize:12}} onClick={e=>{e.stopPropagation();doUpload()}}>
          {uploading ? '⏳ Yüklənir...' : 'Fayl Seç'}
        </button>
      </div>

      {/* Table */}
      <div style={{display:'flex',gap:8,marginBottom:12,alignItems:'center'}}>
        <input className="p-input" style={{flex:1,maxWidth:300}} placeholder="Sənəd adı, əlaqəli qeyd..."
          value={search} onChange={e=>setSearch(e.target.value)}/>
        <div style={{marginLeft:'auto',fontSize:12,color:'#8aa4c0'}}>{filtered.length} sənəd</div>
      </div>

      <div className="card" style={{overflow:'hidden'}}>
        <table className="tbl">
          <thead><tr>
            {['','Ad','Növ','Həcm','Sinifləndirmə','Əlaqəli qeyd','Yükləndi','Vəziyyət'].map(h => (
              <th key={h} className="tbl-th">{h}</th>
            ))}
          </tr></thead>
          <tbody>
            {filtered.map((e,i) => {
              const cs = EV_CLASS[e.classification] || {color:'#6b7280',bg:'#f9fafb'};
              return (
                <tr key={i} className="tbl-tr">
                  <td className="tbl-td" style={{fontSize:18,textAlign:'center',paddingRight:4}}>{EV_TYPE_ICON[e.type] || '📎'}</td>
                  <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30',maxWidth:200}}>
                    <div style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{e.name}</div>
                  </td>
                  <td className="tbl-td"><span style={{fontFamily:'IBM Plex Mono,monospace',fontSize:10,fontWeight:700,color:'#4a6888'}}>{e.type}</span></td>
                  <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>{e.size}</td>
                  <td className="tbl-td"><span className="pill" style={{background:cs.bg,color:cs.color,fontSize:10}}>{e.classification}</span></td>
                  <td className="tbl-td" style={{fontFamily:'IBM Plex Mono,monospace',fontSize:11,color:'#2557d6'}}>{e.linked}</td>
                  <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0',whiteSpace:'nowrap'}}>
                    <div>{e.uploaded}</div>
                    <div style={{fontSize:10}}>{e.uploader}</div>
                  </td>
                  <td className="tbl-td">
                    {e.verified
                      ? <span className="pill" style={{background:'#f0fdf4',color:'#15803d',fontSize:10}}>✓ Yoxlanılmış</span>
                      : <span className="pill" style={{background:'#fffbeb',color:'#b45309',fontSize:10}}>⏳ Gözləyir</span>}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div style={{padding:'10px 16px',borderTop:'1px solid #e5ecf5',fontSize:11,color:'#8aa4c0',display:'flex',justifyContent:'space-between'}}>
          <span>SHA-256 hash yoxlaması aktiv · C2PA provenans qeydiyyatı (FR-316)</span>
          <span>Fayl sanitizasiyası (FR-261)</span>
        </div>
      </div>
    </div>
  );
}

// ── HELP PAGE — Kömək ─────────────────────────────────────

function PortalHelpPage() {
  const [expanded, setExpanded] = React.useState(null);

  const faqs = [
    {q:'Aylıq hesabatı necə doldurmaq olar?', a:'Sol menyudan "Hesabat Doldur" seçin. 4 addımlı sehrbaz rəhbərlik edəcək: Əsas Məlumat → KPI Dəyərləri → Şərh & Risklər → Nəzərdən Keçir. Hər mərhələdə AYRA AI tövsiyələr verir; avtomatik saxlanma aktivdir.'},
    {q:'Təqdim edilmiş hesabatı düzəltmək olarmı?', a:'Meneceriniz hesabatı geri qaytararsa, siz onu redaktə edib yenidən təqdim edə bilərsiniz. Əks halda, menecer tərəfindən təsdiqlənmiş hesabatlar immutable statusuna keçir (FR-315).'},
    {q:'AYRA AI tövsiyələrini aktivləşdirmək üçün nə etmək lazımdır?', a:'Tweaks panelindən (sağ alt küncdəki düymə) "AI Tövsiyələri" seçimini aktiv edin. AI köməkçisi hesabat doldurmaq, risk müəyyən etmək, KPI sapmasını analiz etmək üçün əlçatandır.'},
    {q:'Bank çıxarışını necə yükləmək olar?', a:'"Bank Uyğunlaşdırma" bölməsinə keçin. Excel (.xlsx), PDF və ya MT940 formatında faylı sürükleyib buraxın. Sistem multi-kriterli avtomatik uyğunluq xalı hesablayacaq (FR-263).'},
    {q:'GIS xəritəsi niyə şematik göstərilir?', a:'Bu portal demo versiyasıdır. İstehsal versiyasında WGS84 koordinatları ilə real tile serveri qoşulacaq (FR-283, FR-304). Sxematik versiya "Sxematik Demo" kimi işarələnib.'},
    {q:'Sübut sənədi yükləmək üçün hansı formatlar qəbul edilir?', a:'"Sübutlar" bölməsinə keçin. PDF, DOCX, XLSX, PNG formatları dəstəklənir (maks 25 MB). Hər fayl SHA-256 ilə yoxlanılır, antivirus skanından keçirilir.'},
    {q:'Bildirişlər necə idarə edilir?', a:'Yuxarı paneldəki zəng işarəsini sıxın — son bildirişlər göstəriləcək. E-poçt bildirişi parametrlərini "Profilim → Bildiriş Parametrləri" bölməsindən tənzimləmək olar.'},
  ];

  return (
    <div>
      {/* Search bar */}
      <div style={{position:'relative',marginBottom:22}}>
        <input className="p-input" style={{paddingLeft:38,fontSize:14,padding:'12px 14px 12px 38px'}} placeholder="Sual, mövzu axtar..."/>
        <span style={{position:'absolute',left:13,top:'50%',transform:'translateY(-50%)',fontSize:15,color:'#8aa4c0',pointerEvents:'none'}}>🔍</span>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:16}}>
        {/* FAQ */}
        <div>
          <div className="sec-title" style={{marginBottom:12}}>Tez-tez Verilən Suallar</div>
          <div style={{display:'flex',flexDirection:'column',gap:6}}>
            {faqs.map((f,i) => (
              <div key={i} className="card" style={{padding:'12px 16px',cursor:'pointer'}} onClick={()=>setExpanded(expanded===i?null:i)}>
                <div style={{display:'flex',justifyContent:'space-between',gap:8}}>
                  <span style={{fontSize:12,fontWeight:600,color:'#0f1c30',lineHeight:1.5,flex:1}}>{f.q}</span>
                  <span style={{color:'#8aa4c0',fontSize:14,flexShrink:0,marginTop:1}}>{expanded===i ? '∧' : '∨'}</span>
                </div>
                {expanded===i && (
                  <div style={{fontSize:12,color:'#4a6888',lineHeight:1.7,marginTop:8,paddingTop:8,borderTop:'1px solid #f0f4f8'}}>{f.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>

        <div style={{display:'flex',flexDirection:'column',gap:14}}>
          {/* Quick links */}
          <div>
            <div className="sec-title" style={{marginBottom:12}}>Sürətli Bağlantılar</div>
            <div style={{display:'flex',flexDirection:'column',gap:6}}>
              {[
                {icon:'📖',label:'İstifadəçi Bələdçisi',   sub:'Tam portal sənədləri'},
                {icon:'🎓',label:'Video Dərsliklər',        sub:'Başlanğıc üçün 5 video'},
                {icon:'📋',label:'AYRA v0.6 Texniki TZ',   sub:'FR-001 … FR-425'},
                {icon:'🔒',label:'Gizlilik Siyasəti (PDPL)',sub:'Qanun #998-IIIQ'},
              ].map((l,i) => (
                <div key={i} className="card" style={{padding:'10px 14px',display:'flex',alignItems:'center',gap:10,cursor:'pointer'}}
                  onMouseEnter={e=>e.currentTarget.style.borderColor='#c7d9fd'}
                  onMouseLeave={e=>e.currentTarget.style.borderColor='#e5ecf5'}>
                  <span style={{fontSize:20,flexShrink:0}}>{l.icon}</span>
                  <div style={{flex:1}}>
                    <div style={{fontSize:12,fontWeight:600,color:'#0f1c30'}}>{l.label}</div>
                    <div style={{fontSize:10,color:'#8aa4c0'}}>{l.sub}</div>
                  </div>
                  <span style={{color:'#8aa4c0',flexShrink:0}}>›</span>
                </div>
              ))}
            </div>
          </div>

          {/* Keyboard shortcuts */}
          <div>
            <div className="sec-title" style={{marginBottom:12}}>Klaviatura Qısayolları</div>
            <div className="card card-padded">
              {[
                {key:'Ctrl+S',   desc:'Hesabatı saxla'},
                {key:'Esc',      desc:'Dialoqu bağla'},
                {key:'←  →',     desc:'Sehrbaz addımları'},
                {key:'Tab',      desc:'Sahə keçidi (WCAG 2.2)'},
              ].map((s,i,arr) => (
                <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'6px 0',borderBottom:i<arr.length-1?'1px solid #f0f4f8':undefined}}>
                  <span style={{fontSize:12,color:'#4a6888'}}>{s.desc}</span>
                  <kbd style={{padding:'2px 8px',background:'#f0f4f8',border:'1px solid #d0ddef',borderRadius:4,fontSize:11,fontFamily:'IBM Plex Mono,monospace',color:'#0f1c30'}}>{s.key}</kbd>
                </div>
              ))}
            </div>
          </div>

          {/* Support contact */}
          <div className="card card-padded" style={{background:'#f0f5ff',border:'1px solid #c7d9fd'}}>
            <div style={{fontSize:13,fontWeight:600,color:'#1a4498',marginBottom:8}}>Texniki Dəstək</div>
            <div style={{fontSize:12,color:'#1a4498',marginBottom:6}}>📧 support@ayra.gov.az</div>
            <div style={{fontSize:12,color:'#1a4498',marginBottom:6}}>📞 +994 12 XXX XX XX</div>
            <div style={{fontSize:11,color:'#4b6b9a',paddingTop:6,borderTop:'1px solid #c7d9fd'}}>
              İş saatları: B.e. – Cüm. 09:00 – 18:00
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── PROFILE PAGE — Profilim ───────────────────────────────

function PortalProfilePage() {
  const [tab, setTab] = React.useState('info');

  return (
    <div style={{maxWidth:720}}>
      {/* Tabs */}
      <div style={{display:'flex',gap:0,borderBottom:'1px solid #e5ecf5',marginBottom:18}}>
        {[['info','Şəxsi Məlumat'],['security','Təhlükəsizlik'],['sessions','Sessiyalar'],['notif','Bildiriş Parametrləri']].map(([k,v]) => (
          <button key={k} onClick={()=>setTab(k)} style={{padding:'9px 16px',background:'none',border:'none',borderBottom:`2px solid ${tab===k?'#2557d6':'transparent'}`,color:tab===k?'#2557d6':'#4a6888',fontSize:13,fontWeight:tab===k?600:400,cursor:'pointer',marginBottom:-1,transition:'all 120ms'}}>{v}</button>
        ))}
      </div>

      {tab === 'info' && (
        <div className="card card-padded">
          <div style={{display:'flex',alignItems:'center',gap:16,marginBottom:20,paddingBottom:16,borderBottom:'1px solid #e5ecf5'}}>
            <div style={{width:56,height:56,borderRadius:12,background:'linear-gradient(135deg,#2563d8,#7c3aed)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:20,fontWeight:700,color:'#fff',flexShrink:0}}>NƏ</div>
            <div>
              <div style={{fontSize:16,fontWeight:700,color:'#0f1c30'}}>Nigar Əliyeva</div>
              <div style={{fontSize:12,color:'#4a6888'}}>Büdcə Şöbəsi · Menecer · Maliyyə Nazirliyi</div>
              <div style={{fontSize:11,color:'#8aa4c0',marginTop:2}}>nigar.aliyeva@maliyye.gov.az</div>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            {[
              {label:'Ad',        val:'Nigar'},
              {label:'Soyad',     val:'Əliyeva'},
              {label:'Şöbə',      val:'Maliyyə Naz. — Büdcə Şöbəsi', ro:true},
              {label:'Vəzifə',    val:'Menecer', ro:true},
              {label:'E-poçt',    val:'nigar.aliyeva@maliyye.gov.az'},
              {label:'VÖEN / FİN',val:'ASAN Login vasitəsilə yoxlanılıb', ro:true},
            ].map((f,i) => (
              <div key={i}>
                <label style={{display:'block',fontSize:11,fontWeight:700,color:'#8aa4c0',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:5}}>{f.label}</label>
                <input className="p-input" defaultValue={f.val} readOnly={!!f.ro} style={f.ro?{background:'#f8fafd',color:'#4a6888'}:{}}/>
              </div>
            ))}
          </div>
          <div style={{marginTop:16,display:'flex',justifyContent:'flex-end'}}>
            <button className="p-btn p-btn-primary" style={{fontSize:12}}>Yadda Saxla</button>
          </div>
        </div>
      )}

      {tab === 'security' && (
        <div style={{display:'flex',flexDirection:'column',gap:12}}>
          <div className="card card-padded">
            <div style={{fontSize:13,fontWeight:600,color:'#0f1c30',marginBottom:12}}>Giriş Metodu</div>
            <div style={{display:'flex',alignItems:'center',gap:12,padding:'12px 14px',background:'#f0fdf4',border:'1px solid #bbf7d0',borderRadius:8}}>
              <span style={{fontSize:22}}>🔐</span>
              <div>
                <div style={{fontSize:13,fontWeight:600,color:'#15803d'}}>ASAN Login — aktiv (SSO)</div>
                <div style={{fontSize:11,color:'#4b9063'}}>OIDC · AAL2 · Son giriş: 14.05.2026 09:12 · Bakı, AZ</div>
              </div>
              <span className="pill" style={{background:'#f0fdf4',color:'#15803d',marginLeft:'auto'}}>✓ Aktiv</span>
            </div>
          </div>
          <div className="card card-padded">
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
              <div style={{fontSize:13,fontWeight:600,color:'#0f1c30'}}>Çoxfaktorlu Autentifikasiya (MFA)</div>
              <span className="pill" style={{background:'#f0fdf4',color:'#15803d'}}>✓ Aktiv</span>
            </div>
            {[
              {icon:'📱',label:'SIMA İmza',              status:'Qeydiyyatda',  date:'15.03.2026'},
              {icon:'🔑',label:'TOTP Authenticator App', status:'Qeydiyyatda',  date:'20.03.2026'},
            ].map((m,i) => (
              <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'9px 0',borderBottom:'1px solid #f0f4f8'}}>
                <span style={{fontSize:18}}>{m.icon}</span>
                <div style={{flex:1}}>
                  <div style={{fontSize:12,fontWeight:500,color:'#0f1c30'}}>{m.label}</div>
                  <div style={{fontSize:10,color:'#8aa4c0'}}>Qeydiyyat tarixi: {m.date}</div>
                </div>
                <span style={{fontSize:11,color:'#15803d',fontWeight:500}}>{m.status}</span>
              </div>
            ))}
            <div style={{marginTop:10,padding:'8px 12px',background:'#fffbeb',border:'1px solid #fde68a',borderRadius:6,fontSize:11,color:'#b45309'}}>
              Məsul vəzifə — AAL3 üçün FIDO2/WebAuthn hardware token tövsiyə olunur (FR-302)
            </div>
          </div>
        </div>
      )}

      {tab === 'sessions' && (
        <div className="card" style={{overflow:'hidden'}}>
          <div style={{padding:'12px 16px',borderBottom:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span className="sec-title">Aktiv Sessiyalar</span>
            <button style={{padding:'5px 12px',background:'#fef2f2',border:'1px solid #fecaca',borderRadius:6,fontSize:11,cursor:'pointer',color:'#b91c1c',fontWeight:500}}>Bütün başqa sessiyaları bitir</button>
          </div>
          <table className="tbl">
            <thead><tr>
              {['Cihaz / Brauzer','IP Ünvan','Yer','Başlandı','Vəziyyət'].map(h=><th key={h} className="tbl-th">{h}</th>)}
            </tr></thead>
            <tbody>
              {[
                {device:'Chrome 124 / macOS 14', ip:'192.168.1.45', loc:'Bakı, AZ', started:'14.05.2026 09:12', current:true},
                {device:'Firefox 125 / Windows 11', ip:'10.1.2.33', loc:'Bakı, AZ', started:'13.05.2026 14:22', current:false},
              ].map((s,i) => (
                <tr key={i} className="tbl-tr">
                  <td className="tbl-td" style={{fontWeight:500,color:'#0f1c30'}}>{s.device}{s.current&&<span style={{marginLeft:6,fontSize:10,padding:'1px 6px',background:'#eff6ff',color:'#1d4ed8',borderRadius:4,fontWeight:600}}>Cari</span>}</td>
                  <td className="tbl-td" style={{fontFamily:'IBM Plex Mono,monospace',fontSize:11}}>{s.ip}</td>
                  <td className="tbl-td">{s.loc}</td>
                  <td className="tbl-td" style={{fontSize:11,color:'#8aa4c0'}}>{s.started}</td>
                  <td className="tbl-td">
                    {s.current
                      ? <span style={{fontSize:11,color:'#15803d',fontWeight:500}}>● Aktiv</span>
                      : <button style={{padding:'3px 10px',fontSize:11,borderRadius:4,border:'1px solid #fecaca',background:'#fef2f2',color:'#b91c1c',cursor:'pointer'}}>Bitir</button>
                    }
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'notif' && (
        <div className="card card-padded">
          <div className="sec-title" style={{marginBottom:14}}>Bildiriş Parametrləri</div>
          {[
            {label:'Hesabat təqdimat bildirişi',     email:true,  inapp:true},
            {label:'Hesabat geri qaytarıldı',        email:true,  inapp:true},
            {label:'KPI hədəf aşıldı / aşağı düşdü',email:false, inapp:true},
            {label:'Yeni risk qeydiyyatı',           email:true,  inapp:true},
            {label:'Tədbirlər SLA gecikməsi',        email:true,  inapp:true},
            {label:'Tövsiyə yeni / yeniləndi',       email:false, inapp:true},
            {label:'Sistem / texniki bildirişlər',   email:false, inapp:false},
          ].map((n,i,arr) => (
            <div key={i} style={{display:'flex',alignItems:'center',gap:12,padding:'9px 0',borderBottom:i<arr.length-1?'1px solid #f0f4f8':undefined}}>
              <span style={{flex:1,fontSize:12,color:'#0f1c30'}}>{n.label}</span>
              <label style={{display:'flex',alignItems:'center',gap:5,fontSize:11,color:'#4a6888',cursor:'pointer',userSelect:'none'}}>
                <input type="checkbox" defaultChecked={n.email}/> E-poçt
              </label>
              <label style={{display:'flex',alignItems:'center',gap:5,fontSize:11,color:'#4a6888',cursor:'pointer',userSelect:'none'}}>
                <input type="checkbox" defaultChecked={n.inapp}/> Tətbiq
              </label>
            </div>
          ))}
          <div style={{marginTop:14,display:'flex',justifyContent:'flex-end'}}>
            <button className="p-btn p-btn-primary" style={{fontSize:12}}>Yadda Saxla</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ── NOTIFICATIONS PANEL ───────────────────────────────────

const NOTIF_INITIAL = [
  {id:1,type:'approval', icon:'✓', title:'Hesabat təsdiqləndi',          body:'HSB-2026-0140 — Aprel 2026 hesabatınız F. Quliyev tərəfindən təsdiqləndi.',          time:'14.05.2026 10:15', read:false, link:'archive'},
  {id:2,type:'return',   icon:'↩', title:'Hesabat geri qaytarıldı',       body:'HSB-2026-0138 — Şərhə baxın və düzəliş edin.',                                      time:'12.05.2026 15:30', read:false, link:'reports'},
  {id:3,type:'risk',     icon:'⚠', title:'AI: Yeni risk aşkarlandı',      body:'AYRA AI RSK-049 potensial risk müəyyən etdi. Risk reyestrinə baxın.',               time:'11.05.2026 11:00', read:false, link:'risks'},
  {id:4,type:'kpi',      icon:'↓', title:'KPI hədəf xəbərdarlığı',        body:'KPI-004 (Xidmət Göstəricisi) 3 ardıcıl ay hədəfin altında qalır.',                  time:'10.05.2026 09:00', read:true,  link:'kpi'},
  {id:5,type:'action',   icon:'⏰', title:'Tədbir gecikib: TDB-003',       body:'Sistem yedəkləmə planı son tarixi keçib (22.05.2026). Dərhal cavab tələb olunur.', time:'09.05.2026 14:00', read:true,  link:'actions'},
  {id:6,type:'system',   icon:'ℹ', title:'AYRA Portal v0.6 yeniləndi',    body:'Yeni funksiyalar: Tövsiyələr, Sübutlar, Profilim, Bildirişlər paneli.',             time:'09.05.2026 08:00', read:true,  link:null},
];

const NOTIF_TYPE_STYLE = {
  approval:{color:'#15803d',bg:'#f0fdf4'},
  return:  {color:'#b45309',bg:'#fffbeb'},
  risk:    {color:'#b91c1c',bg:'#fef2f2'},
  kpi:     {color:'#1d4ed8',bg:'#eff6ff'},
  action:  {color:'#7c3aed',bg:'#f5f3ff'},
  system:  {color:'#6b7280',bg:'#f9fafb'},
};

function NotificationsPanel({onClose, setPage}) {
  const [notifs, setNotifs] = React.useState(NOTIF_INITIAL);
  const unread = notifs.filter(n => !n.read).length;

  const markRead = (id) => setNotifs(ns => ns.map(n => n.id===id ? {...n, read:true} : n));
  const markAll  = ()  => setNotifs(ns => ns.map(n => ({...n, read:true})));

  return (
    <div style={{position:'fixed',top:0,right:0,height:'100vh',width:360,background:'#fff',boxShadow:'-4px 0 24px rgba(0,0,0,0.13)',zIndex:9999,display:'flex',flexDirection:'column',borderLeft:'1px solid #e5ecf5'}}>
      {/* Header */}
      <div style={{padding:'16px 20px',borderBottom:'1px solid #e5ecf5',display:'flex',justifyContent:'space-between',alignItems:'center',flexShrink:0}}>
        <div>
          <div style={{fontSize:15,fontWeight:700,color:'#0f1c30'}}>Bildirişlər</div>
          {unread > 0 && <div style={{fontSize:11,color:'#8aa4c0'}}>{unread} oxunmamış</div>}
        </div>
        <div style={{display:'flex',gap:8,alignItems:'center'}}>
          {unread > 0 && (
            <button style={{background:'none',border:'none',color:'#2557d6',fontSize:12,cursor:'pointer',fontWeight:500,padding:0}} onClick={markAll}>
              Hamısını oxu
            </button>
          )}
          <button style={{background:'none',border:'none',fontSize:20,cursor:'pointer',color:'#8aa4c0',padding:'0 4px',lineHeight:1}} onClick={onClose}>✕</button>
        </div>
      </div>

      {/* List */}
      <div style={{flex:1,overflowY:'auto'}}>
        {notifs.map((n,i) => {
          const ts = NOTIF_TYPE_STYLE[n.type] || NOTIF_TYPE_STYLE.system;
          return (
            <div key={i}
              style={{padding:'13px 18px',borderBottom:'1px solid #f0f4f8',background:n.read?'#fff':'#fafbff',cursor:'pointer',transition:'background 120ms'}}
              onMouseEnter={e=>e.currentTarget.style.background='#f8fafd'}
              onMouseLeave={e=>e.currentTarget.style.background=n.read?'#fff':'#fafbff'}
              onClick={()=>{markRead(n.id); if(n.link){setPage(n.link); onClose();}}}>
              <div style={{display:'flex',gap:10}}>
                <div style={{width:34,height:34,borderRadius:8,background:ts.bg,color:ts.color,display:'flex',alignItems:'center',justifyContent:'center',fontSize:14,flexShrink:0,fontWeight:700}}>{n.icon}</div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:4}}>
                    <span style={{fontSize:12,fontWeight:n.read?500:700,color:'#0f1c30',lineHeight:1.3}}>{n.title}</span>
                    {!n.read && <div style={{width:7,height:7,borderRadius:'50%',background:'#2557d6',flexShrink:0,marginTop:4,marginLeft:4}}/>}
                  </div>
                  <div style={{fontSize:11,color:'#4a6888',lineHeight:1.5,marginTop:2,marginBottom:3}}>{n.body}</div>
                  <div style={{fontSize:10,color:'#8aa4c0'}}>{n.time}</div>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div style={{padding:'11px 18px',borderTop:'1px solid #e5ecf5',fontSize:11,color:'#8aa4c0',flexShrink:0}}>
        Bildirişlər 30 gün saxlanılır · E-poçt parametrləri Profilim bölməsindədir
      </div>
    </div>
  );
}

// ── Export to global scope ────────────────────────────────
Object.assign(window, {
  PortalArchivePage,
  PortalActionsPage,
  PortalRecommendationsPage,
  PortalEvidencePage,
  PortalHelpPage,
  PortalProfilePage,
  NotificationsPanel,
});