/* ===== Admin panel ===== */
const D6 = window.DATA;
const API_BASE = 'api';
// Снапшот demo-FAQ снимается синхронно при парсинге файла — до того как bootstrap.php
// перезапишет window.DATA через Object.assign и обнулит faq из пустой БД.
const _DEMO_FAQ_SNAPSHOT = (window.DATA?.faq || []).map(x => ({...x}));

async function apiFetch(path, options={}){
  const res = await fetch(`${API_BASE}${path}`, {
    credentials:'same-origin',
    ...options,
    headers: {'Content-Type':'application/json', ...(options.headers||{})},
  });
  const data = await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
  if(!res.ok || data.ok===false) throw new Error(data.error || `HTTP ${res.status}`);
  return data;
}

async function uploadAdminFile(file){
  if(!file) throw new Error('Файл не выбран');
  const form = new FormData();
  form.append('file', file);
  form.append('purpose', 'admin-content');
  const res = await fetch(`${API_BASE}/upload.php`, {method:'POST', credentials:'same-origin', body:form});
  const data = await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
  if(!res.ok || data.ok===false) throw new Error(data.error || `HTTP ${res.status}`);
  return data.path;
}

async function refreshBootstrapData(){
  const res = await fetch(`${API_BASE}/bootstrap.php`, {credentials:'same-origin'});
  const data = await res.json().catch(()=>({ok:false,error:'Пустой ответ сервера'}));
  if(!res.ok || data.ok===false || !data.data) throw new Error(data.error || `HTTP ${res.status}`);
  Object.assign(window.DATA, data.data);
  return data.data;
}

function downloadAdminExport(format){
  const link = document.createElement('a');
  link.href = `${API_BASE}/backup.php?format=${encodeURIComponent(format)}`;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

function downloadAdminFile(path){
  const link = document.createElement('a');
  link.href = `${API_BASE}${path}`;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

function readFileText(file){
  return new Promise((resolve,reject)=>{
    if(!file){
      reject(new Error('Файл не выбран'));
      return;
    }
    const reader = new FileReader();
    reader.onload = ()=>resolve(String(reader.result || ''));
    reader.onerror = ()=>reject(new Error('Не удалось прочитать файл'));
    reader.readAsText(file, 'utf-8');
  });
}

function TinyEditor({ value, onChange, placeholder='', minHeight=320 }){
  const textareaRef = useRef(null);
  const editorRef = useRef(null);
  const editorIdRef = useRef(`tiny-${Math.random().toString(36).slice(2)}`);
  const readyRef = useRef(false);
  const syncingRef = useRef(false);
  const [ready,setReady] = useState(!!window.tinymce);

  useEffect(()=>{
    if(!window.tinymce || !textareaRef.current){
      setReady(false);
      return;
    }
    let removed = false;
    const existing = window.tinymce.get(editorIdRef.current);
    if(existing){
      try{ existing.remove(); }catch(e){}
    }
    const target = textareaRef.current;
    target.id = editorIdRef.current;

    window.tinymce.init({
      target: textareaRef.current,
      license_key: 'gpl',
      menubar: false,
      branding: false,
      promotion: false,
      min_height: minHeight,
      plugins: 'autolink lists link table code autoresize preview',
      toolbar: 'undo redo | blocks | bold italic underline | bullist numlist | alignleft aligncenter alignright | link table | removeformat code preview',
      placeholder,
      setup(editor){
        editorRef.current = editor;
        editor.on('init', ()=>{
          if(removed) return;
          readyRef.current = true;
          try{
            syncingRef.current = true;
            editor.setContent(value || '');
          }catch(e){
            console.error('TinyMCE init error', e);
          }finally{
            syncingRef.current = false;
          }
        });
        editor.on('remove', ()=>{
          readyRef.current = false;
          if(editorRef.current === editor) editorRef.current = null;
        });
        editor.on('change input undo redo keyup setcontent', ()=>{
          if(syncingRef.current || !readyRef.current) return;
          try{
            onChange(editor.getContent({format:'html'}));
          }catch(e){
            console.error('TinyMCE change error', e);
          }
        });
      },
    }).catch(err=>{
      console.error('TinyMCE load error', err);
      setReady(false);
    });
    return ()=>{
      removed = true;
      readyRef.current = false;
      const editor = editorRef.current;
      editorRef.current = null;
      if(editor){
        try{ editor.remove(); }catch(e){}
      }
    };
  },[]);

  useEffect(()=>{
    if(editorRef.current && readyRef.current){
      try{
        const current = editorRef.current.getContent({format:'html'});
        if(current !== (value || '')){
          syncingRef.current = true;
          editorRef.current.setContent(value || '');
          syncingRef.current = false;
        }
      }catch(e){
        console.error('TinyMCE sync error', e);
      }
    }
  },[value]);

  if(!ready){
    return <textarea ref={textareaRef} className="textarea" value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} style={{minHeight}}/>;
  }
  return <textarea ref={textareaRef} defaultValue={value} />;
}

const ADMIN_TABS = ['users','staff','courses','services','payments','news','races','league-rating','league-infrastructure','league-discounts','league-pilots','league-support','media','ads','content','contacts','questions','faq','history','settings'];
const STAFF_TAB_ACCESS = {
  admin: ADMIN_TABS,
  manager: ['users','staff','courses','services','payments','news','races','league-rating','league-infrastructure','league-discounts','league-pilots','league-support','media','ads','content','contacts','questions','faq','history'],
  editor: ['courses','services','news','races','league-rating','league-discounts','league-pilots','media','ads','content','faq'],
  league_sport: ['league-rating','league-pilots'],
  league_infrastructure: ['league-infrastructure'],
  league_partners: ['league-discounts'],
  league_support: ['league-support'],
};
const ROLE_META = {
  user:{label:'Студент', badge:'gray'},
  admin:{label:'Администратор', badge:'navy'},
  manager:{label:'Менеджер', badge:'green'},
  editor:{label:'Редактор', badge:'amber'},
  league_sport:{label:'Спортивный администратор',badge:'navy'},
  league_infrastructure:{label:'Администратор инфраструктуры',badge:'green'},
  league_partners:{label:'Менеджер партнёров',badge:'amber'},
  league_support:{label:'Технический специалист',badge:'gray'},
};

function allowedAdminTabs(role){
  return STAFF_TAB_ACCESS[String(role || '')] || [];
}

function isStaffRoleUi(role){
  return ['admin','manager','editor','league_sport','league_infrastructure','league_partners','league_support'].includes(String(role || ''));
}

function parseAdminState(state){
  const parts = String(state || '').split('/').filter(Boolean);
  const legacyTab = parts[0] === 'league' || parts[0] === 'pilot-rating' ? 'races' : parts[0];
  const tab = ADMIN_TABS.includes(legacyTab) ? legacyTab : 'users';
  return {tab, action:parts[1] || null, entityId:parts[2] || null, extraId:parts[3] || null};
}

function buildAdminState(...parts){
  return parts.filter(part=>part!==null && part!==undefined && part!=='').join('/');
}

function moveItem(list, fromIndex, toIndex){
  const next = [...list];
  const [item] = next.splice(fromIndex, 1);
  next.splice(toIndex, 0, item);
  return next.map((entry, index)=>({...entry, sort_order:(index + 1) * 10}));
}

function AdminApiNotice({ loading, error, showingDemoData=true }){
  if(loading) return null;
  if(error) return (
    <div className="note" style={{margin:'16px 0'}}>
      {showingDemoData
        ? <>PHP/MySQL пока недоступны: {error}. Показываю демо-данные.</>
        : error}
    </div>
  );
  return null;
}

function AdminStatsSkeleton({ count=4 }){
  return (
    <div className={`grid ${count===4 ? 'g4' : 'g3'}`} style={{margin:'22px 0'}}>
      {Array.from({length:count}).map((_,index)=>(
        <div key={index} className="kpi card admin-skeleton-card">
          <div className="admin-skeleton admin-skeleton--icon"></div>
          <div style={{flex:1}}>
            <div className="admin-skeleton admin-skeleton--title" style={{maxWidth:56}}></div>
            <div className="admin-skeleton admin-skeleton--text" style={{maxWidth:92,marginTop:10}}></div>
          </div>
        </div>
      ))}
    </div>
  );
}

function AdminTableSkeleton({ rows=4 }){
  return (
    <div className="card table admin-skeleton-card">
      {Array.from({length:rows}).map((_,index)=>(
        <div key={index} className="table__row" style={{gridTemplateColumns:'1.8fr 1fr 1fr 1fr 120px'}}>
          <div className="stack" style={{gap:8}}>
            <div className="admin-skeleton admin-skeleton--title" style={{maxWidth:index % 2 ? 220 : 180}}></div>
            <div className="admin-skeleton admin-skeleton--text" style={{maxWidth:index % 2 ? 160 : 140}}></div>
          </div>
          <div className="admin-skeleton admin-skeleton--pill"></div>
          <div className="admin-skeleton admin-skeleton--text" style={{maxWidth:120}}></div>
          <div className="admin-skeleton admin-skeleton--text" style={{maxWidth:90}}></div>
          <div className="row gap8" style={{justifyContent:'flex-end'}}>
            <div className="admin-skeleton admin-skeleton--button"></div>
            <div className="admin-skeleton admin-skeleton--button"></div>
          </div>
        </div>
      ))}
    </div>
  );
}

function AdminFormSkeleton({ blocks=3 }){
  return (
    <div className="stack" style={{gap:16,marginTop:22}}>
      {Array.from({length:blocks}).map((_,index)=>(
        <div key={index} className="card admin-skeleton-card" style={{padding:24}}>
          <div className="admin-skeleton admin-skeleton--title" style={{maxWidth:index===0 ? 220 : 180}}></div>
          <div className="admin-skeleton admin-skeleton--text" style={{maxWidth:260,marginTop:10}}></div>
          <div className="stack" style={{gap:12,marginTop:18}}>
            <div className="admin-skeleton admin-skeleton--field"></div>
            <div className="admin-skeleton admin-skeleton--field"></div>
            {index===blocks-1 ? <div className="admin-skeleton admin-skeleton--area"></div> : null}
          </div>
        </div>
      ))}
    </div>
  );
}

function AdminStatusQuickFilter({ value, onChange, counts }){
  const options = [
    {key:'all', label:'Все', count:counts.all},
    {key:'active', label:'Включённые', count:counts.active},
    {key:'hidden', label:'Скрытые', count:counts.hidden},
  ];
  return (
    <div className="row gap10 wrapf" style={{marginTop:16}}>
      {options.map(option=>(
        <button
          key={option.key}
          className={`btn ${value===option.key ? 'btn-primary' : 'btn-ghost'} btn-sm`}
          onClick={()=>onChange(option.key)}
        >
          {option.label} <span style={{opacity:.75}}>({option.count})</span>
        </button>
      ))}
    </div>
  );
}

function adminFileMeta(fileName=''){
  const ext = String(fileName || '').split('.').pop()?.toLowerCase() || '';
  if(['png','jpg','jpeg','webp','gif','svg'].includes(ext)) return {icon:'qr', label:'Изображение'};
  if(['mp4','webm','mov','avi','mkv'].includes(ext)) return {icon:'video', label:'Видео'};
  if(['pdf'].includes(ext)) return {icon:'doc', label:'PDF'};
  if(['zip','rar','7z'].includes(ext)) return {icon:'book', label:'Архив'};
  if(['json'].includes(ext)) return {icon:'doc', label:'JSON'};
  return {icon:'doc', label:'Файл'};
}

function AdminFilePicker({ accept='', onSelect=()=>{}, buttonLabel='Выберите файл', fileName='', placeholder='Файл не выбран', style={} }){
  const inputRef = useRef(null);
  const [label,setLabel] = useState(fileName || placeholder);
  const [dragActive,setDragActive] = useState(false);
  const meta = adminFileMeta(label===placeholder ? '' : label);

  useEffect(()=>{
    setLabel(fileName || placeholder);
  },[fileName, placeholder]);

  function applyFile(file){
    setLabel(file?.name || placeholder);
    onSelect(file);
  }
  function handleChange(event){
    applyFile(event.target.files?.[0] || null);
  }
  function handleDragOver(event){
    event.preventDefault();
    setDragActive(true);
  }
  function handleDragLeave(event){
    event.preventDefault();
    const nextTarget = event.relatedTarget;
    if(nextTarget && event.currentTarget.contains(nextTarget)) return;
    setDragActive(false);
  }
  function handleDrop(event){
    event.preventDefault();
    setDragActive(false);
    const file = event.dataTransfer?.files?.[0] || null;
    if(!file) return;
    applyFile(file);
  }

  return (
    <div
      className={`admin-filepicker ${dragActive ? 'is-drag' : ''}`}
      style={style}
      onDragOver={handleDragOver}
      onDragEnter={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        className="admin-filepicker__input"
        onChange={handleChange}
      />
      <button
        type="button"
        className="btn btn-ghost btn-sm admin-filepicker__button"
        onClick={()=>inputRef.current?.click()}
      >
        <Icon name="doc" size={14}/> {buttonLabel}
      </button>
      <span className={`badge navy admin-filepicker__badge ${label===placeholder ? 'is-empty' : ''}`}>
        <Icon name={meta.icon} size={13}/> {meta.label}
      </span>
      <span className={`admin-filepicker__name ${label===placeholder ? 'is-empty' : ''}`}>{label}</span>
      <span className="admin-filepicker__hint">или перетащите файл сюда</span>
    </div>
  );
}

function readCollapsibleSectionState(storageKey, defaultOpen){
  if(!storageKey) return !!defaultOpen;
  try{
    const raw = localStorage.getItem(storageKey);
    if(raw==null) return !!defaultOpen;
    return raw === '1';
  }catch(err){
    return !!defaultOpen;
  }
}

function CollapsibleAdminSection({ title, subtitle='', actions=null, defaultOpen=false, children, style={}, storageKey='' }){
  const [open,setOpen] = useState(()=>readCollapsibleSectionState(storageKey, defaultOpen));
  useEffect(()=>{
    setOpen(readCollapsibleSectionState(storageKey, defaultOpen));
  },[storageKey, defaultOpen]);
  useEffect(()=>{
    if(!storageKey) return;
    try{
      localStorage.setItem(storageKey, open ? '1' : '0');
    }catch(err){}
  },[storageKey, open]);
  return (
    <div className="card admin-section" style={{padding:24,marginTop:18,maxWidth:820,...style}}>
      <div className="spread wrapf" style={{gap:12}}>
        <button
          className="admin-section__toggle"
          onClick={()=>setOpen(v=>!v)}
          style={{display:'flex',alignItems:'center',gap:12,flex:1,justifyContent:'flex-start',padding:0,border:'none',background:'transparent'}}
        >
          <span style={{display:'inline-flex',transform:open?'rotate(0deg)':'rotate(-90deg)',transition:'transform .2s ease'}}>
            <Icon name="chevDown" size={18}/>
          </span>
          <span style={{textAlign:'left'}}>
            <b style={{fontSize:18,display:'block'}}>{title}</b>
            {subtitle ? <span className="muted" style={{fontSize:13.5,display:'block',marginTop:6}}>{subtitle}</span> : null}
          </span>
        </button>
        {actions}
      </div>
      {open && <div style={{marginTop:16}}>{children}</div>}
    </div>
  );
}

function Admin({ go, onLogout, activeTab, currentUser, onCurrentUserChange=()=>{} }){
  const routeState = parseAdminState(activeTab);
  const [schemaInfo,setSchemaInfo]=useState(null);
  const [schemaBusy,setSchemaBusy]=useState(false);
  const [schemaMessage,setSchemaMessage]=useState('');
  const [refreshVersion,setRefreshVersion]=useState(0);
  const [pendingPaymentsCount,setPendingPaymentsCount]=useState(0);
  const [hiddenNewsCount,setHiddenNewsCount]=useState(0);
  const [hiddenRacesCount,setHiddenRacesCount]=useState(0);
  const [hiddenMediaCount,setHiddenMediaCount]=useState(0);
  const [menuOpen,setMenuOpen]=useState(false);
  const [leagueMenuOpen,setLeagueMenuOpen]=useState(()=>String(activeTab || '').startsWith('league-'));
  const availableTabs = allowedAdminTabs(currentUser?.role);
  const items=[
    {k:'users',t:'Пользователи',i:'users'},
    {k:'staff',t:'Сотрудники',i:'shield'},
    {k:'courses',t:'Курсы',i:'book'},
    {k:'services',t:'Услуги',i:'layers'},
    {k:'payments',t:'Оплаты',i:'card'},
    {k:'news',t:'Новости',i:'doc'},
    {k:'races',t:'Гонки',i:'trophy'},
    {k:'media',t:'Медиа',i:'video'},
    {k:'ads',t:'Реклама',i:'layers'},
    {k:'content',t:'Контент',i:'doc'},
    {k:'contacts',t:'Контакты',i:'phone'},
    {k:'questions',t:'Тесты и вопросы',i:'doc'},
    {k:'faq',t:'FAQ',i:'doc'},
    {k:'history',t:'История',i:'history'},
    {k:'settings',t:'Настройки',i:'wrench'},
  ];
  const leagueItems=[
    {k:'league-rating',t:'Рейтинг',i:'trophy'},
    {k:'league-infrastructure',t:'Инфраструктура',i:'pin'},
    {k:'league-discounts',t:'Скидки',i:'star'},
    {k:'league-pilots',t:'Пилоты',i:'award'},
    {k:'league-support',t:'Поддержка',i:'wrench'},
  ];
  const visibleItems = items.filter(item=>availableTabs.includes(item.k));
  const visibleLeagueItems = leagueItems.filter(item=>availableTabs.includes(item.k));
  const leagueInsertIndex = items.findIndex(item=>item.k==='races');
  const beforeLeagueItems = visibleItems.filter(item=>items.indexOf(item)<=leagueInsertIndex);
  const afterLeagueItems = visibleItems.filter(item=>items.indexOf(item)>leagueInsertIndex);
  const roleMeta = ROLE_META[currentUser?.role] || ROLE_META.user;

  useEffect(()=>{ loadSchemaStatus(); },[]);
  useEffect(()=>{ loadSidebarCounters(); },[currentUser?.role]);
  useEffect(()=>{
    if(availableTabs.length && !availableTabs.includes(routeState.tab)){
      go('admin', availableTabs[0]);
    }
  },[routeState.tab, availableTabs.join('|')]);
  useEffect(()=>{
    if(routeState.tab.startsWith('league-')) setLeagueMenuOpen(true);
  },[routeState.tab]);

  function loadSchemaStatus(){
    setSchemaMessage('');
    apiFetch('/schema.php')
      .then(data=>setSchemaInfo(data))
      .catch(err=>setSchemaMessage(err.message));
  }

  function loadPendingPaymentsCount(){
    if(!availableTabs.includes('payments')){
      setPendingPaymentsCount(0);
      return;
    }
    apiFetch('/payments.php')
      .then(data=>setPendingPaymentsCount((data.payments || []).filter(item=>item.status==='pending').length))
      .catch(()=>setPendingPaymentsCount(0));
  }

  function loadHiddenNewsCount(){
    if(!availableTabs.includes('news')){
      setHiddenNewsCount(0);
      return;
    }
    apiFetch('/content.php?type=news')
      .then(data=>setHiddenNewsCount((data.news || []).filter(item=>!item.active).length))
      .catch(()=>setHiddenNewsCount(0));
  }

  function loadHiddenRacesCount(){
    if(!availableTabs.includes('races')){
      setHiddenRacesCount(0);
      return;
    }
    apiFetch('/content.php?type=races')
      .then(data=>setHiddenRacesCount((data.races || []).filter(item=>!item.active).length))
      .catch(()=>setHiddenRacesCount(0));
  }

  function loadHiddenMediaCount(){
    if(!availableTabs.includes('media')){
      setHiddenMediaCount(0);
      return;
    }
    apiFetch('/content.php?type=media')
      .then(data=>setHiddenMediaCount((data.media || []).filter(item=>!item.active).length))
      .catch(()=>setHiddenMediaCount(0));
  }

  function loadSidebarCounters(){
    loadPendingPaymentsCount();
    loadHiddenNewsCount();
    loadHiddenRacesCount();
    loadHiddenMediaCount();
  }

  async function reloadSiteData(){
    await refreshBootstrapData();
    setRefreshVersion(v=>v+1);
    loadSidebarCounters();
  }

  function applySchema(){
    setSchemaBusy(true);
    setSchemaMessage('');
    apiFetch('/schema.php',{method:'POST',body:JSON.stringify({action:'migrate'})})
      .then(async data=>{
        setSchemaInfo(data);
        try{
          await reloadSiteData();
        }catch(err){
          setSchemaMessage(`Структура БД обновлена, но кеш данных не обновился: ${err.message}`);
          return;
        }
        setSchemaMessage(data.applied?.length ? 'Структура БД обновлена.' : 'Структура БД уже актуальна.');
      })
      .catch(err=>setSchemaMessage(err.message))
      .finally(()=>setSchemaBusy(false));
  }

  const missingSchema = (schemaInfo?.checks || []).filter(item=>!item.exists);
  function navTo(tab){
    go('admin', tab);
    setMenuOpen(false);
  }
  function renderNavItem(it){
    return (
      <button key={it.k} className={`cab__link ${routeState.tab===it.k?'on':''}`} onClick={()=>navTo(it.k)} title={it.t}>
        <Icon name={it.i} size={19}/>
        <span className="cab__link-label">{it.t}</span>
        {it.k==='payments' && pendingPaymentsCount>0 && <span className="cab__nav-badge badge amber">{pendingPaymentsCount}</span>}
        {it.k==='news' && hiddenNewsCount>0 && <span className="cab__nav-badge badge gray">{hiddenNewsCount}</span>}
        {it.k==='races' && hiddenRacesCount>0 && <span className="cab__nav-badge badge gray">{hiddenRacesCount}</span>}
        {it.k==='media' && hiddenMediaCount>0 && <span className="cab__nav-badge badge gray">{hiddenMediaCount}</span>}
      </button>
    );
  }
  return (
    <div className="cab admin">
      <aside className={`cab__side${menuOpen?' is-open':''}`}>
        <div className="cab__brand" onClick={()=>{ go('home'); setMenuOpen(false); }}><Logo variant="mark" height={36}/><div><b style={{fontSize:14}}>Админ-панель</b><div className="muted" style={{fontSize:12}}>Лаборатория БПЛА</div></div></div>
        <nav className="cab__nav">
          <button className="cab__link cab__link--site" onClick={()=>{ go('home'); setMenuOpen(false); }} title="Перейти на сайт">
            <Icon name="globe" size={19}/>
            <span className="cab__link-label">На сайт</span>
          </button>
          {beforeLeagueItems.map(renderNavItem)}
          {visibleLeagueItems.length>0 && (
            <div className={`cab__nav-group ${leagueMenuOpen?'is-open':''}`}>
              <button
                className={`cab__link cab__nav-group-toggle ${routeState.tab.startsWith('league-')?'on':''}`}
                onClick={()=>setLeagueMenuOpen(v=>!v)}
                title="Лига"
                aria-expanded={leagueMenuOpen}
              >
                <Icon name="drone" size={19}/>
                <span className="cab__link-label">Лига</span>
                <span className="cab__nav-group-chevron"><Icon name="chevDown" size={15}/></span>
              </button>
              {leagueMenuOpen && (
                <div className="cab__nav-submenu">
                  {visibleLeagueItems.map(it=>(
                    <button
                      key={it.k}
                      className={`cab__link cab__link--sub ${routeState.tab===it.k?'on':''}`}
                      onClick={()=>navTo(it.k)}
                      title={it.t}
                    >
                      <Icon name={it.i} size={17}/>
                      <span className="cab__link-label">{it.t}</span>
                    </button>
                  ))}
                </div>
              )}
            </div>
          )}
          {afterLeagueItems.map(renderNavItem)}
        </nav>
        <div className="cab__user">
          <Avatar name={currentUser?.name || 'Сотрудник'} color="var(--navy)"/>
          <div style={{flex:1,minWidth:0}}><b style={{fontSize:14}}>{currentUser?.name || 'Сотрудник'}</b><div className="muted" style={{fontSize:12}}>{roleMeta.label}</div></div>
          <button className="cab__logout" onClick={onLogout}><Icon name="logout" size={18}/></button>
        </div>
      </aside>
      <div className={`cab__overlay${menuOpen?' is-open':''}`} onClick={()=>setMenuOpen(false)}/>
      <main className="cab__main scroll">
        <div className="cab__topbar">
          <div className="cab__topbar-brand" onClick={()=>go('home')}>
            <Logo variant="mark" height={32}/>
            <b style={{fontSize:14}}>Админ-панель</b>
          </div>
          <div className="cab__topbar-actions">
            <button className="cab__site-btn" onClick={()=>go('home')} aria-label="Перейти на сайт">
              <Icon name="globe" size={17}/>
              <span>На сайт</span>
            </button>
            <button className="cab__burger" onClick={()=>setMenuOpen(v=>!v)} aria-label="Меню">
              <Icon name={menuOpen?'close':'menu'} size={20}/>
            </button>
          </div>
        </div>
        {routeState.tab==='users' && availableTabs.includes('users') && <AdminUsers go={go} adminState={routeState} currentUser={currentUser}/>}
        {routeState.tab==='staff' && availableTabs.includes('staff') && <AdminUsers go={go} adminState={routeState} currentUser={currentUser} mode="staff"/>}
        {routeState.tab==='courses' && <AdminCourses go={go} adminState={routeState} refreshVersion={refreshVersion}/>}
        {routeState.tab==='services' && <AdminServices go={go} adminState={routeState} refreshVersion={refreshVersion}/>}
        {routeState.tab==='payments' && availableTabs.includes('payments') && <AdminPayments onPendingCountChange={setPendingPaymentsCount}/>}
        {routeState.tab==='news' && <AdminNews go={go} adminState={routeState} refreshVersion={refreshVersion} onHiddenCountChange={setHiddenNewsCount}/>}
        {routeState.tab==='races' && <AdminRaces go={go} adminState={routeState} refreshVersion={refreshVersion} onHiddenCountChange={setHiddenRacesCount}/>}
        {routeState.tab.startsWith('league-') && availableTabs.includes(routeState.tab) && <AdminLeague module={routeState.tab}/>}
        {routeState.tab==='media' && <AdminMedia go={go} adminState={routeState} refreshVersion={refreshVersion} onHiddenCountChange={setHiddenMediaCount}/>}
        {routeState.tab==='ads' && <AdminAds refreshVersion={refreshVersion}/>}
        {routeState.tab==='content' && availableTabs.includes('content') && <AdminContentPages refreshVersion={refreshVersion} onReloadSiteData={reloadSiteData}/>}
        {routeState.tab==='contacts' && availableTabs.includes('contacts') && <AdminContacts refreshVersion={refreshVersion}/>}
        {routeState.tab==='questions' && availableTabs.includes('questions') && <AdminQuestions go={go} adminState={routeState}/>}
        {routeState.tab==='faq' && availableTabs.includes('faq') && <AdminFaq/>}
        {routeState.tab==='history' && availableTabs.includes('history') && <AdminHistory/>}
        {routeState.tab==='settings' && availableTabs.includes('settings') && <AdminSettings currentUser={currentUser} schemaInfo={schemaInfo} schemaBusy={schemaBusy} schemaMessage={schemaMessage} missingSchema={missingSchema} onRefreshSchema={loadSchemaStatus} onApplySchema={applySchema} onReloadSiteData={reloadSiteData} onCurrentUserChange={onCurrentUserChange}/>}
      </main>
    </div>
  );
}

function AdminSettings({ currentUser, schemaInfo, schemaBusy, schemaMessage, missingSchema, onRefreshSchema, onApplySchema, onReloadSiteData, onCurrentUserChange=()=>{} }){
  const [importFile,setImportFile]=useState(null);
  const [importBusy,setImportBusy]=useState(false);
  const [importMessage,setImportMessage]=useState('');
  const [smtpSettings,setSmtpSettings]=useState({enabled:false,host:'',port:465,encryption:'ssl',username:'',password:'',from_email:'',from_name:'Лаборатория БПЛА КРСУ',reply_to:''});
  const [smtpBusy,setSmtpBusy]=useState(false);
  const [smtpMessage,setSmtpMessage]=useState('');
  const [profileDraft,setProfileDraft]=useState({name:currentUser?.name || '', email:currentUser?.email || '', currentPassword:''});
  const [profileBusy,setProfileBusy]=useState(false);
  const [profileMessage,setProfileMessage]=useState('');
  const [passwordDraft,setPasswordDraft]=useState({current:'',next:'',repeat:''});
  const [passwordBusy,setPasswordBusy]=useState(false);
  const [passwordMessage,setPasswordMessage]=useState('');

  useEffect(()=>{
    setProfileDraft(v=>({...v, name:currentUser?.name || '', email:currentUser?.email || ''}));
  },[currentUser?.name, currentUser?.email]);

  useEffect(()=>{
    apiFetch('/content.php?type=smtp')
      .then(data=>{ if(data.smtp) setSmtpSettings(data.smtp); })
      .catch(err=>setSmtpMessage(err.message));
  },[]);

  async function importJsonBackup(){
    if(!importFile){
      setImportMessage('Сначала выберите JSON-файл резервной копии.');
      return;
    }
    setImportBusy(true);
    setImportMessage('');
    try{
      const raw = await readFileText(importFile);
      const payload = JSON.parse(raw);
      const result = await apiFetch('/import.php',{method:'POST',body:JSON.stringify(payload)});
      await onReloadSiteData();
      onRefreshSchema();
      const summary = Object.entries(result.imported || {}).map(([table,count])=>`${table}: ${count}`).join(', ');
      setImportMessage(summary ? `Импорт завершён. ${summary}` : 'Импорт завершён.');
      setImportFile(null);
    }catch(err){
      setImportMessage(err.message || 'Не удалось импортировать JSON');
    }finally{
      setImportBusy(false);
    }
  }

  async function changeOwnPassword(){
    if(!passwordDraft.current || !passwordDraft.next){
      setPasswordMessage('Введите текущий и новый пароль.');
      return;
    }
    if(passwordDraft.next !== passwordDraft.repeat){
      setPasswordMessage('Новый пароль и повтор не совпадают.');
      return;
    }
    setPasswordBusy(true);
    setPasswordMessage('');
    try{
      await apiFetch('/auth.php',{method:'POST',body:JSON.stringify({action:'change_password', current_password:passwordDraft.current, new_password:passwordDraft.next})});
      setPasswordDraft({current:'',next:'',repeat:''});
      setPasswordMessage('Пароль успешно обновлён.');
    }catch(err){
      setPasswordMessage(err.message);
    }finally{
      setPasswordBusy(false);
    }
  }

  async function changeOwnProfile(){
    const nextName = String(profileDraft.name || '').trim();
    const nextEmail = String(profileDraft.email || '').trim().toLowerCase();
    if(!nextName || !nextEmail || !profileDraft.currentPassword){
      setProfileMessage('Введите имя, логин и текущий пароль.');
      return;
    }
    setProfileBusy(true);
    setProfileMessage('');
    try{
      const result = await apiFetch('/auth.php',{method:'POST',body:JSON.stringify({action:'change_profile', new_name:nextName, new_email:nextEmail, current_password:profileDraft.currentPassword})});
      if(result.user) onCurrentUserChange(result.user);
      setProfileDraft({name:result.user?.name || nextName, email:result.user?.email || nextEmail, currentPassword:''});
      setProfileMessage('Профиль успешно обновлён.');
    }catch(err){
      setProfileMessage(err.message);
    }finally{
      setProfileBusy(false);
    }
  }

  function updateSmtp(field, value){
    setSmtpSettings(current=>({...current, [field]:value}));
  }

  async function saveSmtp(){
    setSmtpBusy(true);
    setSmtpMessage('');
    try{
      await apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'smtp', smtp:{...smtpSettings, port:Number(smtpSettings.port)||0, enabled:!!smtpSettings.enabled}})});
      setSmtpMessage('SMTP-настройки сохранены.');
    }catch(err){
      setSmtpMessage(err.message);
    }finally{
      setSmtpBusy(false);
    }
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf">
        <div>
          <h1 style={{fontSize:28}}>Настройки</h1>
          <p className="muted">Служебные настройки админки и обслуживание структуры базы данных.</p>
        </div>
      </div>
      <CollapsibleAdminSection
        title="Структура базы данных"
        subtitle={missingSchema?.length ? `Нужно обновить: ${missingSchema.map(item=>item.label).join(', ')}` : 'Структура БД актуальна'}
        actions={<div className="row gap10"><button className="btn btn-ghost btn-sm" onClick={onRefreshSchema} disabled={schemaBusy}><Icon name="clock" size={14}/> Проверить</button><button className="btn btn-green btn-sm" onClick={onApplySchema} disabled={schemaBusy}><Icon name="wrench" size={14}/> {schemaBusy ? 'Обновляю БД…' : 'Проверить / обновить БД'}</button></div>}
        storageKey="krsu-settings:db"
      >
        <div className="stack" style={{gap:10}}>
          {(schemaInfo?.checks || []).map(item=>(
            <div key={item.key} className="spread wrapf" style={{gap:12,padding:'12px 14px',border:'1px solid rgba(10,60,80,.1)',borderRadius:16,background:'#fff'}}>
              <div>
                <b style={{fontSize:14.5}}>{item.label}</b>
                <div className="muted" style={{fontSize:12.5,marginTop:4}}>{item.table}.{item.column}</div>
              </div>
              <span className={`badge ${item.exists ? 'green' : 'amber'}`}>{item.exists ? 'Готово' : 'Нужно добавить'}</span>
            </div>
          ))}
          {!(schemaInfo?.checks || []).length && <div className="muted" style={{fontSize:13.5}}>Проверка структуры ещё не выполнена.</div>}
        </div>
        <div className="note" style={{margin:'16px 0 0'}}>
          После обновления структуры админка сама перечитает данные сайта, чтобы картинки новостей, курсов и гонок подтянулись без ручного переоткрытия разделов.
        </div>
        {schemaMessage && <div className="note" style={{margin:'12px 0 0'}}>{schemaMessage}</div>}
      </CollapsibleAdminSection>
      <CollapsibleAdminSection
        title="Профиль администратора"
        subtitle={`Имя: ${currentUser?.name || ''} · Логин: ${currentUser?.email || ''}`}
        actions={<button className="btn btn-green btn-sm" onClick={changeOwnProfile} disabled={profileBusy}><Icon name="user" size={14}/> {profileBusy ? 'Сохраняю…' : 'Сохранить профиль'}</button>}
        storageKey="krsu-settings:profile"
      >
        <div className="card" style={{padding:18,marginBottom:16,background:'linear-gradient(135deg, rgba(10,60,80,.04), rgba(90,190,130,.08))',border:'1px solid rgba(10,60,80,.08)'}}>
          <div className="row gap12" style={{alignItems:'center'}}>
            <Avatar name={currentUser?.name || 'Администратор'} size={56} color="var(--navy)"/>
            <div style={{minWidth:0}}>
              <b style={{fontSize:18,display:'block'}}>{currentUser?.name || 'Администратор'}</b>
              <span className="muted" style={{fontSize:14,display:'block',marginTop:4}}>{currentUser?.email || ''}</span>
              <span className="badge navy" style={{marginTop:8}}>Админ-профиль</span>
            </div>
          </div>
        </div>
        <div className="grid g2" style={{gap:14}}>
          <div className="field"><label>Имя</label><input className="input" value={profileDraft.name} onChange={e=>setProfileDraft(v=>({...v,name:e.target.value}))} placeholder="Имя и фамилия"/></div>
          <div className="field"><label>Логин</label><input className="input" type="email" value={profileDraft.email} onChange={e=>setProfileDraft(v=>({...v,email:e.target.value}))} placeholder="admin@krsu.local"/></div>
        </div>
        <div className="field" style={{marginTop:14}}><label>Текущий пароль</label><input className="input" type="password" value={profileDraft.currentPassword} onChange={e=>setProfileDraft(v=>({...v,currentPassword:e.target.value}))}/></div>
        {profileMessage && <div className="note" style={{margin:'12px 0 0'}}>{profileMessage}</div>}
      </CollapsibleAdminSection>
      <CollapsibleAdminSection
        title="SMTP и письма"
        subtitle="Отправка логина и пароля пользователю после подтверждения оплаты."
        actions={<button className="btn btn-green btn-sm" onClick={saveSmtp} disabled={smtpBusy}><Icon name="mail" size={14}/> {smtpBusy ? 'Сохраняю…' : 'Сохранить SMTP'}</button>}
        storageKey="krsu-settings:smtp"
      >
        <label className="agree" style={{marginTop:0}}><input type="checkbox" checked={!!smtpSettings.enabled} onChange={e=>updateSmtp('enabled', e.target.checked)}/><span>Включить отправку писем</span></label>
        <div className="grid g2" style={{gap:14,marginTop:14}}>
          <div className="field"><label>SMTP host</label><input className="input" value={smtpSettings.host||''} onChange={e=>updateSmtp('host', e.target.value)} placeholder="smtp.example.com"/></div>
          <div className="field"><label>Порт</label><input className="input" type="number" value={smtpSettings.port||''} onChange={e=>updateSmtp('port', e.target.value)} placeholder="465"/></div>
        </div>
        <div className="grid g2" style={{gap:14,marginTop:14}}>
          <div className="field"><label>Шифрование</label><select className="select" value={smtpSettings.encryption||'ssl'} onChange={e=>updateSmtp('encryption', e.target.value)}><option value="ssl">SSL</option><option value="tls">TLS</option><option value="none">Без шифрования</option></select></div>
          <div className="field"><label>Логин SMTP</label><input className="input" value={smtpSettings.username||''} onChange={e=>updateSmtp('username', e.target.value)} placeholder="no-reply@example.com"/></div>
        </div>
        <div className="field" style={{marginTop:14}}><label>Пароль SMTP</label><input className="input" type="password" value={smtpSettings.password||''} onChange={e=>updateSmtp('password', e.target.value)} placeholder="••••••••"/></div>
        <div className="grid g2" style={{gap:14,marginTop:14}}>
          <div className="field"><label>Email отправителя</label><input className="input" type="email" value={smtpSettings.from_email||''} onChange={e=>updateSmtp('from_email', e.target.value)} placeholder="no-reply@example.com"/></div>
          <div className="field"><label>Имя отправителя</label><input className="input" value={smtpSettings.from_name||''} onChange={e=>updateSmtp('from_name', e.target.value)} placeholder="Лаборатория БПЛА КРСУ"/></div>
        </div>
        <div className="field" style={{marginTop:14}}><label>Reply-To</label><input className="input" type="email" value={smtpSettings.reply_to||''} onChange={e=>updateSmtp('reply_to', e.target.value)} placeholder="support@example.com"/></div>
        <div className="note" style={{margin:'16px 0 0'}}>После подтверждения оплаты студенту автоматически уйдёт письмо с логином и доступом в личный кабинет. Пароль генерируется для новых аккаунтов без пароля.</div>
        {smtpMessage && <div className="note" style={{margin:'12px 0 0'}}>{smtpMessage}</div>}
      </CollapsibleAdminSection>
      <CollapsibleAdminSection
        title="Пароль администратора"
        subtitle={`Смена пароля для аккаунта ${currentUser?.email || ''}`}
        actions={<button className="btn btn-green btn-sm" onClick={changeOwnPassword} disabled={passwordBusy}><Icon name="shield" size={14}/> {passwordBusy ? 'Сохраняю…' : 'Сменить пароль'}</button>}
        storageKey="krsu-settings:password"
      >
        <div className="grid g2" style={{gap:14}}>
          <div className="field"><label>Текущий пароль</label><input className="input" type="password" value={passwordDraft.current} onChange={e=>setPasswordDraft(v=>({...v,current:e.target.value}))}/></div>
          <div className="field"><label>Новый пароль</label><input className="input" type="password" value={passwordDraft.next} onChange={e=>setPasswordDraft(v=>({...v,next:e.target.value}))}/></div>
        </div>
        <div className="field" style={{marginTop:14}}><label>Повторите новый пароль</label><input className="input" type="password" value={passwordDraft.repeat} onChange={e=>setPasswordDraft(v=>({...v,repeat:e.target.value}))}/></div>
        {passwordMessage && <div className="note" style={{margin:'12px 0 0'}}>{passwordMessage}</div>}
      </CollapsibleAdminSection>
      <CollapsibleAdminSection
        title="Резервные копии"
        subtitle="Можно скачать текущие данные сайта в JSON или полный дамп базы в SQL."
        actions={<div className="row gap10"><button className="btn btn-ghost btn-sm" onClick={()=>downloadAdminExport('json')}><Icon name="doc" size={14}/> Скачать JSON</button><button className="btn btn-green btn-sm" onClick={()=>downloadAdminExport('sql')}><Icon name="book" size={14}/> Скачать SQL</button></div>}
        storageKey="krsu-settings:backup"
      >
        <div className="note" style={{margin:0}}>
          `JSON` удобно для быстрой резервной копии контента и настроек, а `SQL` подходит для полного переноса или восстановления MySQL-базы.
        </div>
      </CollapsibleAdminSection>
      <CollapsibleAdminSection
        title="Импорт JSON"
        subtitle="Восстанавливает данные из JSON-бэкапа и перезаписывает текущие записи в базе."
        actions={<button className="btn btn-green btn-sm" onClick={importJsonBackup} disabled={importBusy}><Icon name="arrowUpRight" size={14}/> {importBusy ? 'Импортирую…' : 'Импортировать JSON'}</button>}
        storageKey="krsu-settings:import"
      >
        <div className="field">
          <label>Файл резервной копии</label>
          <AdminFilePicker
            accept="application/json,.json"
            fileName={importFile?.name || ''}
            buttonLabel="Выбрать JSON"
            onSelect={file=>setImportFile(file)}
          />
          <div className="muted" style={{fontSize:12,marginTop:8}}>
            Лучше использовать файл, скачанный через кнопку `Скачать JSON` в этом же разделе.
          </div>
        </div>
        <div className="note" style={{margin:'16px 0 0'}}>
          Перед импортом советую скачать свежий `SQL` или `JSON`, чтобы можно было быстро откатиться назад.
        </div>
        {importMessage && <div className="note" style={{margin:'12px 0 0'}}>{importMessage}</div>}
      </CollapsibleAdminSection>
    </div>
  );
}

function AdminUsers({ go, adminState, currentUser, mode='students' }){
  const [users,setUsers]=useState([]);
  const [courses,setCourses]=useState([]);
  const [sel,setSel]=useState(null);
  const [editing,setEditing]=useState(null);
  const [draft,setDraft]=useState(null);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [userFormError,setUserFormError]=useState('');
  const [userSaving,setUserSaving]=useState(false);
  const [showingDemoData,setShowingDemoData]=useState(false);
  const statusMap={active:{t:'Активен',c:'green'},paused:{t:'На паузе',c:'amber'},new:{t:'Новый',c:'navy'}};
  const canManageRoles = currentUser?.role === 'admin';
  const isStaffMode = mode === 'staff';
  const filteredUsers = users.filter(user=>isStaffMode ? isStaffRoleUi(user.role) : !isStaffRoleUi(user.role));
  const pageTitle = isStaffMode ? 'Сотрудники' : 'Пользователи';
  const pageDescription = isStaffMode
    ? 'Отдельный список сотрудников админки: администраторы, менеджеры и редакторы.'
    : 'Управление студентами и доступом к курсам.';
  const createLabel = isStaffMode ? 'Создать сотрудника' : 'Создать кабинет';
  const canCreate = isStaffMode ? canManageRoles : true;

  useEffect(()=>{
    let alive=true;
    loadUsers(alive);
    return ()=>{ alive=false; };
  },[]);

  useEffect(()=>{
    const user = users.find(item=>String(item.id)===String(adminState.entityId||''));
    if(!isStaffMode && adminState.action==='access' && user && (user.role||'user')==='user'){
      setSel(user.id);
      setEditing(null);
      setDraft(null);
      setUserFormError('');
      return;
    }
    if(adminState.action==='edit' && user && (isStaffMode ? isStaffRoleUi(user.role) : !isStaffRoleUi(user.role))){
      setSel(null);
      setEditing(user.id);
      setDraft({...user,password:''});
      setUserFormError('');
      return;
    }
    if(adminState.action==='new'){
      setSel(null);
      setEditing('new');
      setDraft({name:'',email:'',password:'',status:'new',role:isStaffMode ? 'editor' : 'user',leagueMember:false,notifyPayments:false});
      setUserFormError('');
      return;
    }
    setSel(null);
    setEditing(null);
    setDraft(null);
  },[adminState.action, adminState.entityId, users, isStaffMode]);

  function loadUsers(alive=true){
    if(alive) setLoading(true);
    return Promise.all([apiFetch('/users.php'), apiFetch('/courses.php')])
      .then(([userData,courseData])=>{ if(alive){ setUsers(userData.users); setCourses(courseData.courses); setApiError(''); setShowingDemoData(false); } })
      .catch(err=>{
        if(alive){
          setUsers(D6.adminUsers);
          setCourses(D6.courses);
          setApiError(err.message);
          setShowingDemoData(true);
        }
      })
      .finally(()=>{ if(alive) setLoading(false); });
  }
  function setStatus(id,s){
    setUsers(u=>u.map(x=>x.id===id?{...x,status:s}:x));
    apiFetch('/users.php',{method:'PATCH',body:JSON.stringify({id,status:s})}).catch(err=>setApiError(err.message));
  }
  function toggleCourse(uid,cid){
    const user = users.find(x=>x.id===uid);
    if(!user) return;
    const courses = user.courses.includes(cid) ? user.courses.filter(c=>c!==cid) : [...user.courses,cid];
    setUsers(u=>u.map(x=>x.id===uid?{...x,courses}:x));
    apiFetch('/users.php',{method:'PATCH',body:JSON.stringify({id:uid,courses})}).catch(err=>setApiError(err.message));
  }
  function removeUser(id){
    setUsers(us=>us.filter(x=>x.id!==id));
    apiFetch(`/users.php?id=${encodeURIComponent(id)}`,{method:'DELETE'}).catch(err=>setApiError(err.message));
  }
  function startNewUser(){
    go('admin', buildAdminState(isStaffMode ? 'staff' : 'users','new'));
  }
  function startEditUser(user){
    go('admin', buildAdminState(isStaffMode ? 'staff' : 'users','edit', user.id));
  }
  function toggleNotifyPayments(user){
    if(!canManageRoles || !isStaffMode) return;
    const nextValue = !user.notifyPayments;
    setUsers(list=>list.map(item=>item.id===user.id ? {...item, notifyPayments:nextValue} : item));
    apiFetch('/users.php',{method:'PATCH',body:JSON.stringify({id:user.id, notifyPayments:nextValue})})
      .catch(err=>{
        setApiError(err.message);
        loadUsers();
      });
  }
  function updateUserDraft(field,value){
    setUserFormError('');
    setDraft(d=>({...d,[field]:value}));
  }
  async function saveUser(){
    if(!draft || userSaving) return;
    const name = draft.name.trim();
    const email = draft.email.trim();
    const password = String(draft.password || '');
    if(!name){
      setUserFormError('Введите имя и фамилию пользователя.');
      return;
    }
    if(!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)){
      setUserFormError('Введите корректный email.');
      return;
    }
    if(editing==='new' && !password){
      setUserFormError('Задайте пароль для нового пользователя.');
      return;
    }
    if(password && password.length < 10){
      setUserFormError('Пароль должен быть не короче 10 символов.');
      return;
    }
    const payload = {
      id: editing==='new' ? undefined : draft.id,
      name,
      email,
      status: draft.status || 'new',
      leagueMember: !isStaffMode && !!draft.leagueMember,
    };
    if(canManageRoles) payload.role = draft.role || (isStaffMode ? 'editor' : 'user');
    if(canManageRoles && isStaffMode) payload.notifyPayments = !!draft.notifyPayments;
    if(password) payload.password = password;
    setUserSaving(true);
    setUserFormError('');
    try{
      await apiFetch('/users.php',{method:editing==='new'?'POST':'PATCH',body:JSON.stringify(payload)});
      setApiError('');
      await loadUsers();
      go('admin', isStaffMode ? 'staff' : 'users');
    }catch(err){
      setUserFormError(err.message);
    }finally{
      setUserSaving(false);
    }
  }
  const selUser = filteredUsers.find(u=>u.id===sel);
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>{pageTitle}</h1><p className="muted">{pageDescription}</p></div>{canCreate && <button className="btn btn-primary" disabled><Icon name="plus" size={16}/> {createLabel}</button>}</div>
        <AdminStatsSkeleton count={4}/>
        <AdminTableSkeleton rows={4}/>
      </div>
    );
  }
  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>{pageTitle}</h1><p className="muted">{pageDescription}</p></div>{canCreate && <button className="btn btn-primary" onClick={startNewUser}><Icon name="plus" size={16}/> {createLabel}</button>}</div>
      <AdminApiNotice loading={loading} error={apiError} showingDemoData={showingDemoData}/>
      <div className="grid g4" style={{margin:'22px 0'}}>
        <div className="kpi card"><div className="ic-badge"><Icon name={isStaffMode?'shield':'users'} size={18}/></div><div><b>{filteredUsers.length}</b><span>{isStaffMode?'сотрудников':'всего'}</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="checkCircle" size={18}/></div><div><b>{filteredUsers.filter(u=>u.status==='active').length}</b><span>активны</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="pause" size={18}/></div><div><b>{filteredUsers.filter(u=>u.status==='paused').length}</b><span>на паузе</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name={isStaffMode?'mail':'zap'} size={18}/></div><div><b>{isStaffMode ? filteredUsers.filter(u=>u.notifyPayments).length : filteredUsers.filter(u=>u.status==='new').length}</b><span>{isStaffMode?'получают письма':'новых'}</span></div></div>
      </div>
      <div className="card table">
        <div className="table__head tr-u">
          <span>Пользователь</span>
          {isStaffMode && <span>Роль</span>}
          <span>Статус</span>
          <span>{isStaffMode?'Уведомления':'Курсы'}</span>
          <span>Регистрация</span>
          <span></span>
        </div>
        {filteredUsers.map(u=>(
          <div key={u.id} className="table__row tr-u">
            {(()=>{ const editable = canManageRoles || (u.role||'user')==='user';
            return <>
            <div className="row gap12"><Avatar name={u.name} size={38} color={u.status==='paused'?'#9aa':'var(--green-600)'}/><div style={{minWidth:0}}><div className="row gap8 wrapf"><b style={{fontSize:14.5,display:'block'}}>{u.name}</b>{!isStaffMode && u.leagueMember && <span className="badge green admin-league-badge">Лига</span>}</div><span className="muted" style={{fontSize:13}}>{u.email}</span></div></div>
            {isStaffMode && <span className={`badge ${(ROLE_META[u.role||'user'] || ROLE_META.user).badge}`}>{(ROLE_META[u.role||'user'] || ROLE_META.user).label}</span>}
            <span className={`badge ${statusMap[u.status].c}`}>{statusMap[u.status].t}</span>
            <span className="muted">
              {(u.role||'user')==='user'
                ? `${u.courses.length} курс(ов)`
                : <span className="row gap8 wrapf">
                    <span className={`tgl ${u.notifyPayments?'tgl--on':''}`} onClick={()=>toggleNotifyPayments(u)} style={{opacity:canManageRoles?1:.6,cursor:canManageRoles?'pointer':'default'}}><span className="tgl__k"></span></span>
                    <span>{u.notifyPayments?'Получает':'Выключено'}</span>
                  </span>}
            </span>
            <span className="muted" style={{fontSize:13.5}}>{u.joined}</span>
            <div className="row gap8" style={{justifyContent:'flex-end'}}>
              {!isStaffMode && (u.role||'user')==='user' && <button className="ibtn" title="Доступы" onClick={()=>go('admin', buildAdminState('users','access', u.id))}><Icon name="book" size={16}/></button>}
              <button className="ibtn" title={editable?'Редактировать':'Только администратор может менять staff'} onClick={()=>editable && startEditUser(u)} disabled={!editable}><Icon name="edit" size={16}/></button>
              {u.status==='paused'
                ? <button className="ibtn" title={editable?'Возобновить':'Только администратор может менять staff'} onClick={()=>editable && setStatus(u.id,'active')} disabled={!editable}><Icon name="play" size={16}/></button>
                : <button className="ibtn" title={editable?'На паузу':'Только администратор может менять staff'} onClick={()=>editable && setStatus(u.id,'paused')} disabled={!editable}><Icon name="pause" size={16}/></button>}
              <button className="ibtn ibtn--danger" title={editable?'Удалить':'Только администратор может удалять staff'} onClick={()=>editable && removeUser(u.id)} disabled={!editable}><Icon name="trash" size={16}/></button>
            </div>
            </>; })()}
          </div>
        ))}
      </div>

      {selUser && !isStaffMode && (
        <div className="modal" onClick={()=>go('admin', 'users')}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:6}}><h2 style={{fontSize:22}}>Доступ к курсам</h2><button className="ibtn" onClick={()=>go('admin', 'users')}><Icon name="close" size={18}/></button></div>
            <p className="muted" style={{marginBottom:18}}>{selUser.name} · откройте нужные курсы вручную после оплаты.</p>
            <div className="stack" style={{gap:10}}>
              {courses.map(c=>{
                const on=selUser.courses.includes(c.id);
                return (
                  <label key={c.id} className={`acc-row ${on?'on':''}`}>
                    <div className="row gap12" style={{flex:1}}><div className="acc-ic" style={{background:c.color}}><Icon name={c.icon} size={16} style={{color:'#fff'}}/></div><span style={{fontSize:14.5}}>{c.title}</span></div>
                    <span className={`tgl ${on?'tgl--on':''}`} onClick={()=>toggleCourse(selUser.id,c.id)}><span className="tgl__k"></span></span>
                  </label>
                );
              })}
            </div>
            <button className="btn btn-green btn-block" style={{marginTop:20}} onClick={()=>go('admin', 'users')}>Готово</button>
          </div>
        </div>
      )}

      {editing!==null && draft && (
        <div className="modal" onClick={()=>go('admin', isStaffMode ? 'staff' : 'users')}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}><h2 style={{fontSize:22}}>{editing==='new'?(isStaffMode?'Новый сотрудник':'Новый пользователь'):(isStaffMode?'Редактирование сотрудника':'Редактирование пользователя')}</h2><button className="ibtn" onClick={()=>go('admin', isStaffMode ? 'staff' : 'users')}><Icon name="close" size={18}/></button></div>
            <div className="stack" style={{gap:14}}>
              <div className="field"><label>Имя и фамилия</label><input className="input" value={draft.name} onChange={e=>updateUserDraft('name',e.target.value)} placeholder="Айбек Усенов" required/></div>
              <div className="field"><label>Email</label><input className="input" type="email" value={draft.email} onChange={e=>updateUserDraft('email',e.target.value)} placeholder="student@mail.kg" required/></div>
              <div className="grid g2" style={{gap:12}}>
                <div className="field"><label>Статус</label><select className="select" value={draft.status} onChange={e=>updateUserDraft('status',e.target.value)}><option value="new">Новый</option><option value="active">Активен</option><option value="paused">На паузе</option></select></div>
                <div className="field"><label>{editing==='new'?'Пароль':'Новый пароль'}</label><input className="input" type="password" minLength="10" value={draft.password||''} onChange={e=>updateUserDraft('password',e.target.value)} placeholder={editing==='new'?'Не менее 10 символов':'Оставьте пустым без смены'}/></div>
              </div>
              {canManageRoles && (
                <div className="field">
                  <label>Роль доступа</label>
                  <select className="select" value={draft.role||'user'} onChange={e=>updateUserDraft('role',e.target.value)}>
                    {!isStaffMode && <option value="user">Студент</option>}
                    <option value="editor">Редактор</option>
                    <option value="manager">Менеджер</option>
                    <option value="league_sport">Спортивный администратор</option>
                    <option value="league_infrastructure">Администратор инфраструктуры</option>
                    <option value="league_partners">Менеджер партнёров</option>
                    <option value="league_support">Технический специалист</option>
                    <option value="admin">Администратор</option>
                  </select>
                </div>
              )}
              {canManageRoles && isStaffMode && (
                <label className="agree" style={{marginTop:0}}>
                  <input type="checkbox" checked={!!draft.notifyPayments} onChange={e=>updateUserDraft('notifyPayments', e.target.checked)}/>
                  <span>Получать email-уведомления о новых заявках на оплату</span>
                </label>
              )}
              {!isStaffMode && (
                <label className={`agree admin-league-member-toggle ${draft.leagueMember?'is-on':''}`} style={{marginTop:0}}>
                  <input type="checkbox" checked={!!draft.leagueMember} onChange={e=>updateUserDraft('leagueMember',e.target.checked)}/>
                  <span>
                    <b>Участник Лиги Дронов</b>
                    <small>Показывать в кабинете рейтинг, инфраструктуру, скидки, спортивную карточку и техподдержку.</small>
                  </span>
                </label>
              )}
              <div className="note" style={{margin:0}}>
                {(draft.role||'user')==='user'
                  ? 'Доступы к курсам редактируются через кнопку с иконкой книги в таблице.'
                  : 'Для staff-аккаунтов доступы к курсам не назначаются — они входят сразу в админ-панель и при необходимости получают email о новых оплатах.'}
              </div>
              {userFormError && <div className="note" style={{margin:0,color:'#9f2d20',borderColor:'rgba(159,45,32,.25)',background:'rgba(159,45,32,.07)'}}>{userFormError}</div>}
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}><button className="btn btn-ghost" onClick={()=>go('admin', isStaffMode ? 'staff' : 'users')} disabled={userSaving}>Отмена</button><button className="btn btn-green" onClick={saveUser} disabled={userSaving || !draft.name.trim() || !draft.email.trim() || (isStaffMode && !canManageRoles)}>{userSaving?'Сохраняю…':'Сохранить'}</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminCourses({ go, adminState, refreshVersion=0 }){
  const fallbackCourses = D6.courses.map(c=>({...c,active:true}));
  const [courses,setCourses]=useState([]);
  const [statusFilter,setStatusFilter]=useState('all');
  const [editing,setEditing]=useState(null);
  const [draft,setDraft]=useState(null);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [uploadingImage,setUploadingImage]=useState(false);
  const [uploadingMaterial,setUploadingMaterial]=useState('');
  const [uploadingSlide,setUploadingSlide]=useState(false);
  const [draggingId,setDraggingId]=useState(null);
  const [draggingModuleIndex,setDraggingModuleIndex]=useState(null);
  const [draggingLesson,setDraggingLesson]=useState(null);
  const cats = ['Пилот','Оператор','Спорт','Инженер','Аналитик данных','Продакшен','Сельхоз'];
  const levels = ['Начальный','Средний','Продвинутый'];

  useEffect(()=>{
    let alive=true;
    loadCourses(alive);
    return ()=>{ alive=false; };
  },[refreshVersion]);

  useEffect(()=>{
    const course = courses.find(item=>String(item.id)===String(adminState.entityId||''));
    if(adminState.action==='edit' && course){
      setEditing(course.id);
      setDraft(JSON.parse(JSON.stringify(course)));
      return;
    }
    if(adminState.action==='new'){
      setEditing('new');
      setDraft({id:'',title:'',cat:'Пилот',level:'Начальный',duration:'4 недели',lessons:0,price:0,rating:5,students:0,color:'#0A3C50',icon:'book',img:'',short:'',outcomes:[],modules:[],materials:[],slides:[],active:true});
      return;
    }
    setEditing(null);
    setDraft(null);
  },[adminState.action, adminState.entityId, courses]);

  const filteredCourses = courses.filter(course=>{
    if(statusFilter==='active') return !!course.active;
    if(statusFilter==='hidden') return !course.active;
    return true;
  });
  const courseFilterCounts = {
    all: courses.length,
    active: courses.filter(course=>course.active).length,
    hidden: courses.filter(course=>!course.active).length,
  };

  function loadCourses(alive=true){
    if(alive) setLoading(true);
    apiFetch('/courses.php')
      .then(data=>{ if(alive){ setCourses(data.courses); setApiError(''); } })
      .catch(err=>{ if(alive){ setCourses(fallbackCourses); setApiError(err.message); } })
      .finally(()=>{ if(alive) setLoading(false); });
  }
  function toggle(id){
    const current = courses.find(c=>c.id===id);
    if(!current) return;
    const active = !current.active;
    setCourses(cs=>cs.map(c=>c.id===id?{...c,active}:c));
    apiFetch('/courses.php',{method:'PATCH',body:JSON.stringify({id,active})}).catch(err=>setApiError(err.message));
  }
  function removeCourse(id){
    setCourses(cs=>cs.filter(x=>x.id!==id));
    apiFetch(`/courses.php?id=${encodeURIComponent(id)}`,{method:'DELETE'}).catch(err=>setApiError(err.message));
  }
  function duplicateCourse(course){
    apiFetch('/courses.php',{method:'POST',body:JSON.stringify({action:'duplicate',source_id:course.id})})
      .then(()=>{ setApiError(''); loadCourses(); })
      .catch(err=>setApiError(err.message));
  }
  function reorderCourses(targetId){
    if(!draggingId || draggingId===targetId) return;
    const fromIndex = courses.findIndex(item=>item.id===draggingId);
    const toIndex = courses.findIndex(item=>item.id===targetId);
    if(fromIndex<0 || toIndex<0) return;
    const ordered = moveItem(courses, fromIndex, toIndex);
    setCourses(ordered);
    setDraggingId(null);
    apiFetch('/courses.php',{method:'PATCH',body:JSON.stringify({order:ordered.map(item=>item.id)})})
      .catch(err=>{ setApiError(err.message); loadCourses(); });
  }
  function slug(text){
    return text.toLowerCase().replace(/[^a-zа-яё0-9]+/gi,'-').replace(/^-|-$/g,'') || `course-${Date.now()}`;
  }
  function startNew(){
    go('admin', buildAdminState('courses','new'));
  }
  function startEdit(course){
    go('admin', buildAdminState('courses','edit', course.id));
  }
  function updateDraft(field,value){
    setDraft(d=>({...d,[field]:value}));
  }
  function updateOutcome(index,value){
    setDraft(d=>({...d,outcomes:(d.outcomes||[]).map((item,i)=>i===index?value:item)}));
  }
  function addOutcome(){
    setDraft(d=>({...d,outcomes:[...(d.outcomes||[]),'']}));
  }
  function removeOutcome(index){
    setDraft(d=>({...d,outcomes:(d.outcomes||[]).filter((_,i)=>i!==index)}));
  }
  function updateModule(index,field,value){
    setDraft(d=>({...d,modules:(d.modules||[]).map((module,i)=>i===index?{...module,[field]:value}:module)}));
  }
  function addModule(){
    setDraft(d=>({...d,modules:[...(d.modules||[]),{t:'Новый модуль',lessons:['Первый урок']}]}));
  }
  function removeModule(index){
    setDraft(d=>({...d,modules:(d.modules||[]).filter((_,i)=>i!==index)}));
  }
  function reorderModules(targetIndex){
    if(draggingModuleIndex===null || draggingModuleIndex===targetIndex) return;
    setDraft(d=>{
      const modules = [...(d.modules||[])];
      const [moved] = modules.splice(draggingModuleIndex, 1);
      modules.splice(targetIndex, 0, moved);
      return {...d, modules};
    });
    setDraggingModuleIndex(null);
  }
  function normalizeLesson(lesson){
    return typeof lesson==='string' ? {t:lesson,video:'',file:''} : {t:lesson?.t||'',video:lesson?.video||'',file:lesson?.file||''};
  }
  function updateLesson(moduleIndex,lessonIndex,field,value){
    setDraft(d=>({...d,modules:(d.modules||[]).map((module,i)=>i===moduleIndex?{...module,lessons:(module.lessons||[]).map((lesson,j)=>j===lessonIndex?{...normalizeLesson(lesson),[field]:value}:lesson)}:module)}));
  }
  function normalizeMaterial(item){
    return {
      id: item?.id || '',
      title: item?.title || '',
      type: item?.type === 'link' ? 'link' : 'file',
      src: item?.src || '',
      meta: item?.meta || '',
    };
  }
  function updateMaterial(index,field,value){
    setDraft(d=>({...d,materials:(d.materials||[]).map((item,i)=>i===index?{...normalizeMaterial(item),[field]:value}:item)}));
  }
  function addMaterial(){
    setDraft(d=>({...d,materials:[...(d.materials||[]),{id:'',title:'Новый материал',type:'file',src:'',meta:''}]}));
  }
  function removeMaterial(index){
    setDraft(d=>({...d,materials:(d.materials||[]).filter((_,i)=>i!==index)}));
  }
  function addLesson(moduleIndex){
    setDraft(d=>({...d,modules:(d.modules||[]).map((module,i)=>i===moduleIndex?{...module,lessons:[...(module.lessons||[]),{t:'Новый урок',video:'',file:''}]}:module)}));
  }
  function removeLesson(moduleIndex,lessonIndex){
    setDraft(d=>({...d,modules:(d.modules||[]).map((module,i)=>i===moduleIndex?{...module,lessons:(module.lessons||[]).filter((_,j)=>j!==lessonIndex)}:module)}));
  }
  function reorderLessons(moduleIndex,targetLessonIndex){
    if(!draggingLesson || draggingLesson.moduleIndex!==moduleIndex || draggingLesson.lessonIndex===targetLessonIndex) return;
    setDraft(d=>({...d,modules:(d.modules||[]).map((module,i)=>{
      if(i!==moduleIndex) return module;
      const lessons = [...(module.lessons||[])];
      const [moved] = lessons.splice(draggingLesson.lessonIndex, 1);
      lessons.splice(targetLessonIndex, 0, moved);
      return {...module, lessons};
    })}));
    setDraggingLesson(null);
  }
  async function uploadCourseImage(file){
    if(!file) return;
    setUploadingImage(true);
    try{
      const path = await uploadAdminFile(file);
      updateDraft('img', path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingImage(false);
    }
  }
  function addSlideUrl(){
    setDraft(d=>({...d,slides:[...(d.slides||[]),''] }));
  }
  function updateSlide(index,value){
    setDraft(d=>({...d,slides:(d.slides||[]).map((s,i)=>i===index?value:s)}));
  }
  function removeSlide(index){
    setDraft(d=>({...d,slides:(d.slides||[]).filter((_,i)=>i!==index)}));
  }
  async function uploadCarouselSlide(file){
    if(!file) return;
    setUploadingSlide(true);
    try{
      const path = await uploadAdminFile(file);
      setDraft(d=>({...d,slides:[...(d.slides||[]),path]}));
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingSlide(false);
    }
  }
  async function uploadLessonFile(moduleIndex,lessonIndex,field,file){
    if(!file) return;
    try{
      const path = await uploadAdminFile(file);
      updateLesson(moduleIndex,lessonIndex,field,path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }
  }
  async function uploadCourseMaterialFile(index, file){
    if(!file) return;
    setUploadingMaterial(String(index));
    try{
      const path = await uploadAdminFile(file);
      updateMaterial(index,'src',path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingMaterial('');
    }
  }
  async function saveCourse(){
    if(!draft || !draft.title.trim()) return;
    const normalizedModules = (draft.modules || []).map(m=>({
      t:String(m.t||'').trim(),
      lessons:(m.lessons||[]).map(normalizeLesson).map(x=>({t:String(x.t||'').trim(),video:String(x.video||'').trim(),file:String(x.file||'').trim()})).filter(x=>x.t || x.video || x.file)
    })).filter(m=>m.t || m.lessons.length);
    const normalizedMaterials = (draft.materials || [])
      .map(normalizeMaterial)
      .map((item,index)=>({
        id: item.id || `material-${index+1}`,
        title: String(item.title||'').trim(),
        type: item.type === 'link' ? 'link' : 'file',
        src: String(item.src||'').trim(),
        meta: String(item.meta||'').trim(),
      }))
      .filter(item=>item.title && item.src);
    const course = {
      ...draft,
      id: draft.id || slug(draft.title),
      lessons: Number(draft.lessons)||0,
      price: Number(draft.price)||0,
      rating: Number(draft.rating)||5,
      students: Number(draft.students)||0,
      slides: (draft.slides || []).map(x=>String(x).trim()).filter(Boolean),
      outcomes: (draft.outcomes || []).map(x=>String(x).trim()).filter(Boolean),
      modules: normalizedModules,
      materials: normalizedMaterials,
      active: !!draft.active,
    };
    setCourses(cs=>editing==='new' ? [...cs,course] : cs.map(c=>c.id===course.id?course:c));
    go('admin', 'courses');
    try{
      await apiFetch('/courses.php',{method:editing==='new'?'POST':'PATCH',body:JSON.stringify(course)});
      setApiError('');
      loadCourses();
    }catch(err){
      setApiError(err.message);
    }
  }
  const courseSectionKey = editing==='new' ? 'new' : String(draft?.id || adminState.entityId || 'course');
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Курсы</h1><p className="muted">Создание, редактирование и публикация курсов.</p></div><button className="btn btn-primary" disabled><Icon name="plus" size={16}/> Новый курс</button></div>
        <div className="admin-skeleton admin-skeleton--banner" style={{margin:'16px 0'}}></div>
        <AdminTableSkeleton rows={5}/>
      </div>
    );
  }
  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Курсы</h1><p className="muted">Создание, редактирование и публикация курсов.</p></div><button className="btn btn-primary" onClick={startNew}><Icon name="plus" size={16}/> Новый курс</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <AdminStatusQuickFilter value={statusFilter} onChange={setStatusFilter} counts={courseFilterCounts}/>
      <div className="note" style={{margin:'16px 0'}}>Перетаскивайте строки в таблице, чтобы менять порядок курсов на сайте.</div>
      <div className="card table" style={{marginTop:22}}>
        <div className="table__head tr-c"><span>Курс</span><span>Категория</span><span>Стоимость</span><span>Студентов</span><span>Статус</span><span></span></div>
        {filteredCourses.map(c=>(
          <div
            key={c.id}
            className="table__row tr-c"
            draggable
            onDragStart={()=>setDraggingId(c.id)}
            onDragEnd={()=>setDraggingId(null)}
            onDragOver={e=>e.preventDefault()}
            onDrop={()=>reorderCourses(c.id)}
            style={{cursor:'grab', opacity:draggingId===c.id ? .55 : 1}}
            title="Перетащите, чтобы изменить порядок"
          >
            <div className="row gap12">{c.img ? <img src={c.img} alt={c.title} style={{width:44,height:44,objectFit:'cover',borderRadius:14,flexShrink:0}}/> : <div className="acc-ic" style={{background:c.color}}><Icon name={c.icon} size={16} style={{color:'#fff'}}/></div>}<b style={{fontSize:14.5}}>{c.title}</b></div>
            <span className="muted">{c.cat}</span>
            <b style={{fontSize:14.5}}>{D6.fmt(c.price)} сом</b>
            <span className="muted">{c.students}</span>
            <span>
              <button
                className={`badge ${c.active?'green':'gray'}`}
                onClick={()=>toggle(c.id)}
                style={{border:'none',cursor:'pointer'}}
                title={c.active ? 'Нажмите, чтобы выключить курс' : 'Нажмите, чтобы включить курс'}
              >
                {c.active ? 'Включен' : 'Выключен'}
              </button>
            </span>
            <div className="row gap8" style={{justifyContent:'flex-end'}}>
              <button className="ibtn" title="Редактировать" onClick={()=>startEdit(c)}><Icon name="edit" size={16}/></button>
              <button className="ibtn" title="Дублировать" onClick={()=>duplicateCourse(c)}><Icon name="copy" size={16}/></button>
              <button className="ibtn ibtn--danger" title="Удалить" onClick={()=>removeCourse(c.id)}><Icon name="trash" size={16}/></button>
            </div>
          </div>
        ))}
      </div>

      {editing!==null && draft && (
        <div className="modal" onClick={()=>go('admin', 'courses')}>
          <div className="modal__box card" style={{maxWidth:760}} onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}><h2 style={{fontSize:22}}>{editing==='new'?'Новый курс':'Редактирование курса'}</h2><button className="ibtn" onClick={()=>go('admin', 'courses')}><Icon name="close" size={18}/></button></div>
            <div className="stack" style={{gap:14}}>
              <CollapsibleAdminSection title="Основная информация" subtitle="Название, категория, уровень, цена и краткое описание" defaultOpen storageKey={`krsu-course-editor:${courseSectionKey}:main`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="field"><label>Название</label><input className="input" value={draft.title} onChange={e=>updateDraft('title',e.target.value)} placeholder="Название курса" required/></div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Категория</label><select className="select" value={draft.cat} onChange={e=>updateDraft('cat',e.target.value)}>{cats.map(c=><option key={c} value={c}>{c}</option>)}</select></div>
                    <div className="field"><label>Уровень</label><select className="select" value={draft.level} onChange={e=>updateDraft('level',e.target.value)}>{levels.map(l=><option key={l} value={l}>{l}</option>)}</select></div>
                  </div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Длительность</label><input className="input" value={draft.duration} onChange={e=>updateDraft('duration',e.target.value)} placeholder="8 недель"/></div>
                    <div className="field"><label>Стоимость, сом</label><input className="input" type="number" value={draft.price} onChange={e=>updateDraft('price',e.target.value)} min="0"/></div>
                  </div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Уроков</label><input className="input" type="number" value={draft.lessons} onChange={e=>updateDraft('lessons',e.target.value)} min="0"/></div>
                    <div className="field"><label>Студентов</label><input className="input" type="number" value={draft.students} onChange={e=>updateDraft('students',e.target.value)} min="0"/></div>
                  </div>
                  <div className="field"><label>Краткое описание</label><textarea className="textarea" value={draft.short} onChange={e=>updateDraft('short',e.target.value)} placeholder="Описание для карточки курса"/></div>
                </div>
              </CollapsibleAdminSection>

              <CollapsibleAdminSection title="Обложка и публикация" subtitle="Изображение курса и видимость на сайте" defaultOpen storageKey={`krsu-course-editor:${courseSectionKey}:cover`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="field">
                    <label>Изображение курса</label>
                    <input className="input" value={draft.img||''} onChange={e=>updateDraft('img',e.target.value)} placeholder="uploads/course-cover.jpg или https://..."/>
                    <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать изображение" onSelect={uploadCourseImage} style={{marginTop:8}}/>
                    {uploadingImage && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю изображение…</div>}
                    {draft.img && <img src={draft.img} alt="Изображение курса" style={{marginTop:12,width:240,maxWidth:'100%',borderRadius:18,objectFit:'cover'}}/>}
                  </div>
                  <label className="agree" style={{marginTop:0}}>
                    <input type="checkbox" checked={!!draft.active} onChange={e=>updateDraft('active',e.target.checked)}/>
                    <span>Курс опубликован</span>
                  </label>
                </div>
              </CollapsibleAdminSection>

              <CollapsibleAdminSection title="Фото-карусель" subtitle="Несколько фото в шапке курса — заменяют одиночную обложку" defaultOpen={false} storageKey={`krsu-course-editor:${courseSectionKey}:slides`} actions={<button className="btn btn-ghost btn-sm" onClick={addSlideUrl}><Icon name="plus" size={14}/> Добавить URL</button>} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="note" style={{margin:0}}>Если добавлены фото карусели, они отображаются вместо обложки на странице курса. Загружайте фото кнопкой ниже или вставляйте URL вручную.</div>
                  {(draft.slides||[]).map((src,index)=>(
                    <div key={index} className="row gap10" style={{alignItems:'center'}}>
                      {src && <img src={src} alt={`Слайд ${index+1}`} style={{width:56,height:56,objectFit:'cover',borderRadius:10,flexShrink:0,background:'var(--bg-2)'}}/>}
                      <input className="input" value={src} onChange={e=>updateSlide(index,e.target.value)} placeholder="uploads/slide.jpg или https://..."/>
                      <button className="ibtn ibtn--danger" onClick={()=>removeSlide(index)}><Icon name="trash" size={15}/></button>
                    </div>
                  ))}
                  {(draft.slides||[]).length===0 && <div className="empty" style={{padding:16}}>Фото карусели не добавлены. Загрузите изображения или добавьте URL.</div>}
                  <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Загрузить фото в карусель" onSelect={uploadCarouselSlide} style={{marginTop:4}}/>
                  {uploadingSlide && <div className="muted" style={{fontSize:12}}>Загружаю изображение…</div>}
                  {(draft.slides||[]).length > 0 && (
                    <div style={{marginTop:4}}>
                      <div className="muted" style={{fontSize:12,marginBottom:8}}>Превью карусели:</div>
                      <div className="row gap8" style={{flexWrap:'wrap'}}>
                        {draft.slides.filter(Boolean).map((src,i)=>(
                          <img key={i} src={src} alt={`Слайд ${i+1}`} style={{width:80,height:52,objectFit:'cover',borderRadius:10,border:'1px solid var(--line)'}}/>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </CollapsibleAdminSection>

              <CollapsibleAdminSection title="Результаты обучения" subtitle="Что студент получит после прохождения курса" defaultOpen={false} storageKey={`krsu-course-editor:${courseSectionKey}:outcomes`} actions={<button className="btn btn-ghost btn-sm" onClick={addOutcome}><Icon name="plus" size={14}/> Результат</button>} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:10}}>
                  {(draft.outcomes||[]).map((outcome,index)=>(
                    <div key={index} className="row gap10">
                      <input className="input" value={outcome} onChange={e=>updateOutcome(index,e.target.value)} placeholder={`Результат ${index+1}`}/>
                      <button className="ibtn ibtn--danger" onClick={()=>removeOutcome(index)}><Icon name="trash" size={15}/></button>
                    </div>
                  ))}
                  {(draft.outcomes||[]).length===0 && <div className="empty" style={{padding:16}}>Добавьте первый результат обучения.</div>}
                </div>
              </CollapsibleAdminSection>

              <CollapsibleAdminSection title="Материалы курса" subtitle="Файлы и ссылки для раздела «Учебные материалы»" defaultOpen={false} storageKey={`krsu-course-editor:${courseSectionKey}:materials`} actions={<button className="btn btn-ghost btn-sm" onClick={addMaterial}><Icon name="plus" size={14}/> Материал</button>} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:12}}>
                  {(draft.materials||[]).map((material,index)=>{
                    const item = normalizeMaterial(material);
                    return (
                      <div key={index} className="qcard card" style={{padding:16}}>
                        <div className="grid g2" style={{gap:10}}>
                          <div className="field"><label>Название</label><input className="input" value={item.title} onChange={e=>updateMaterial(index,'title',e.target.value)} placeholder="Например, Конспект курса"/></div>
                          <div className="field"><label>Тип</label><select className="select" value={item.type} onChange={e=>updateMaterial(index,'type',e.target.value)}><option value="file">Файл</option><option value="link">Ссылка</option></select></div>
                        </div>
                        <div className="field" style={{marginTop:10}}>
                          <label>{item.type==='link' ? 'Ссылка' : 'Файл'}</label>
                          <input className="input" value={item.src} onChange={e=>updateMaterial(index,'src',e.target.value)} placeholder={item.type==='link' ? 'https://...' : 'uploads/material.pdf'}/>
                          {item.type==='file' && <AdminFilePicker accept=".pdf,.zip,.doc,.docx,.xls,.xlsx,image/png,image/jpeg,image/webp" buttonLabel="Выбрать материал" onSelect={file=>uploadCourseMaterialFile(index,file)} style={{marginTop:8}}/>}
                          {uploadingMaterial===String(index) && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю материал…</div>}
                        </div>
                        <div className="row gap10" style={{marginTop:10}}>
                          <div className="field" style={{flex:1}}><label>Описание</label><input className="input" value={item.meta} onChange={e=>updateMaterial(index,'meta',e.target.value)} placeholder="PDF · 2.4 МБ или краткое описание"/></div>
                          <button className="ibtn ibtn--danger" style={{marginTop:26}} onClick={()=>removeMaterial(index)}><Icon name="trash" size={15}/></button>
                        </div>
                      </div>
                    );
                  })}
                  {(draft.materials||[]).length===0 && <div className="empty" style={{padding:16}}>Добавьте материалы, которые будут доступны студентам в разделе «Учебные материалы».</div>}
                </div>
              </CollapsibleAdminSection>

              <CollapsibleAdminSection title="Программа курса" subtitle="Модули, уроки, видео и вложения" defaultOpen={false} storageKey={`krsu-course-editor:${courseSectionKey}:program`} actions={<button className="btn btn-ghost btn-sm" onClick={addModule}><Icon name="plus" size={14}/> Модуль</button>} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:12}}>
                  <div className="note" style={{margin:0}}>Перетаскивайте модули и уроки, чтобы менять порядок программы.</div>
                  {(draft.modules||[]).map((module,moduleIndex)=>(
                    <div
                      key={moduleIndex}
                      className="qcard card"
                      style={{padding:16,cursor:'grab',opacity:draggingModuleIndex===moduleIndex ? .55 : 1}}
                      draggable
                      onDragStart={()=>setDraggingModuleIndex(moduleIndex)}
                      onDragEnd={()=>setDraggingModuleIndex(null)}
                      onDragOver={e=>e.preventDefault()}
                      onDrop={()=>reorderModules(moduleIndex)}
                      title="Перетащите модуль, чтобы изменить порядок"
                    >
                      <div className="row gap10" style={{marginBottom:12}}>
                        <input className="input" value={module.t||''} onChange={e=>updateModule(moduleIndex,'t',e.target.value)} placeholder={`Модуль ${moduleIndex+1}`}/>
                        <button className="ibtn ibtn--danger" onClick={()=>removeModule(moduleIndex)}><Icon name="trash" size={15}/></button>
                      </div>
                      <div className="stack" style={{gap:8}}>
                        {(module.lessons||[]).map((lesson,lessonIndex)=>{
                          const item = normalizeLesson(lesson);
                          return (
                            <div
                              key={lessonIndex}
                              className="card"
                              style={{padding:12,cursor:'grab',opacity:draggingLesson && draggingLesson.moduleIndex===moduleIndex && draggingLesson.lessonIndex===lessonIndex ? .55 : 1}}
                              draggable
                              onDragStart={()=>setDraggingLesson({moduleIndex,lessonIndex})}
                              onDragEnd={()=>setDraggingLesson(null)}
                              onDragOver={e=>e.preventDefault()}
                              onDrop={()=>reorderLessons(moduleIndex,lessonIndex)}
                              title="Перетащите урок, чтобы изменить порядок"
                            >
                              <div className="row gap10" style={{marginBottom:10}}>
                                <input className="input" value={item.t} onChange={e=>updateLesson(moduleIndex,lessonIndex,'t',e.target.value)} placeholder={`Урок ${lessonIndex+1}`}/>
                                <button className="ibtn ibtn--danger" onClick={()=>removeLesson(moduleIndex,lessonIndex)}><Icon name="trash" size={15}/></button>
                              </div>
                              <div className="grid g2" style={{gap:10}}>
                                <div className="field">
                                  <label>Видео урока</label>
                                  <input className="input" value={item.video} onChange={e=>updateLesson(moduleIndex,lessonIndex,'video',e.target.value)} placeholder="uploads/video.mp4"/>
                                  <AdminFilePicker accept="video/mp4,video/webm" buttonLabel="Выбрать видео" onSelect={file=>uploadLessonFile(moduleIndex,lessonIndex,'video',file)} style={{marginTop:8}}/>
                                </div>
                                <div className="field">
                                  <label>Материал</label>
                                  <input className="input" value={item.file} onChange={e=>updateLesson(moduleIndex,lessonIndex,'file',e.target.value)} placeholder="uploads/material.pdf"/>
                                  <AdminFilePicker accept=".pdf,.zip,image/png,image/jpeg,image/webp" buttonLabel="Выбрать материал" onSelect={file=>uploadLessonFile(moduleIndex,lessonIndex,'file',file)} style={{marginTop:8}}/>
                                </div>
                              </div>
                            </div>
                          );
                        })}
                        <button className="btn btn-ghost btn-sm" style={{alignSelf:'flex-start'}} onClick={()=>addLesson(moduleIndex)}><Icon name="plus" size={14}/> Урок</button>
                      </div>
                    </div>
                  ))}
                  {(draft.modules||[]).length===0 && <div className="empty" style={{padding:16}}>Добавьте первый модуль программы.</div>}
                </div>
              </CollapsibleAdminSection>
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}><button className="btn btn-ghost" onClick={()=>go('admin', 'courses')}>Отмена</button><button className="btn btn-green" onClick={saveCourse} disabled={!draft.title.trim()}>Сохранить</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminServices({ go, adminState, refreshVersion=0 }){
  const [categories,setCategories]=useState([]);
  const [services,setServices]=useState([]);
  const [loading,setLoading]=useState(true);
  const [saving,setSaving]=useState(false);
  const [error,setError]=useState('');
  const [categoryFilter,setCategoryFilter]=useState('all');
  const [statusFilter,setStatusFilter]=useState('all');
  const [draft,setDraft]=useState(null);
  const [uploading,setUploading]=useState('');
  const action=adminState.action || 'list';
  const categoryMode=action==='categories' || action.startsWith('category-');
  const editingCategory=action==='category-new' || action==='category-edit';
  const editingService=action==='new' || action==='edit';

  useEffect(()=>{ load(); },[refreshVersion]);
  useEffect(()=>{
    if(action==='category-new') setDraft({name:'',slug:'',short_description:'',image:'',sort_order:100,is_active:true});
    else if(action==='category-edit') setDraft(categories.find(x=>String(x.id)===String(adminState.entityId)) || null);
    else if(action==='new') setDraft({category_id:categories[0]?.id||'',name:'',slug:'',audience:'',description:'',price:'',duration:'',customer_result:'',main_image:'',gallery:[],sort_order:100,is_active:false,seo_title:'',seo_description:''});
    else if(action==='edit') setDraft(services.find(x=>String(x.id)===String(adminState.entityId)) || null);
    else setDraft(null);
  },[action,adminState.entityId,categories,services]);

  function load(){
    setLoading(true);
    apiFetch('/services.php?admin=1').then(data=>{setCategories(data.categories||[]);setServices(data.services||[]);setError('');}).catch(err=>setError(err.message)).finally(()=>setLoading(false));
  }
  function update(field,value){setDraft(item=>({...item,[field]:value}));}
  function updateName(value){setDraft(item=>({...item,name:value,slug:(!item.id&&!item.slug)?slugifyText(value):item.slug}));}
  async function upload(field,file){
    if(!file)return; setUploading(field);
    try{const path=await uploadAdminFile(file);update(field,path);setError('');}catch(err){setError(err.message);}finally{setUploading('');}
  }
  async function uploadGallery(file){
    if(!file)return; setUploading('gallery');
    try{const path=await uploadAdminFile(file);setDraft(item=>({...item,gallery:[...(item.gallery||[]),{image:path}]}));setError('');}catch(err){setError(err.message);}finally{setUploading('');}
  }
  function moveGallery(index,direction){setDraft(item=>{const gallery=[...(item.gallery||[])];const next=index+direction;if(next<0||next>=gallery.length)return item;[gallery[index],gallery[next]]=[gallery[next],gallery[index]];return {...item,gallery};});}
  async function saveCategory(){
    if(!draft?.name?.trim())return;setSaving(true);setError('');
    try{await apiFetch('/services.php',{method:draft.id?'PATCH':'POST',body:JSON.stringify({...draft,entity:'category',slug:draft.slug||slugifyText(draft.name)})});await load();go('admin','services/categories');}catch(err){setError(err.message);}finally{setSaving(false);}
  }
  async function saveService(){
    if(!draft?.name?.trim()||!draft.category_id)return;setSaving(true);setError('');
    try{await apiFetch('/services.php',{method:draft.id?'PATCH':'POST',body:JSON.stringify({...draft,entity:'service',category_id:Number(draft.category_id),slug:draft.slug||slugifyText(draft.name)})});await load();go('admin','services');}catch(err){setError(err.message);}finally{setSaving(false);}
  }
  async function remove(entity,id){
    if(!window.confirm(entity==='category'?'Удалить категорию?':'Удалить услугу?'))return;
    try{await apiFetch(`/services.php?entity=${entity}&id=${id}`,{method:'DELETE',body:JSON.stringify({entity,id})});load();}catch(err){setError(err.message);}
  }
  async function toggleService(item){
    try{await apiFetch('/services.php',{method:'PATCH',body:JSON.stringify({...item,entity:'service',is_active:!item.is_active})});load();}catch(err){setError(err.message);}
  }
  const filtered=services.filter(item=>(categoryFilter==='all'||String(item.category_id)===categoryFilter)&&(statusFilter==='all'||(statusFilter==='active'?item.is_active:!item.is_active)));
  const nav=<div className="row gap8 wrapf admin-services-tabs"><button className={`tab ${!categoryMode?'tab--on':''}`} onClick={()=>go('admin','services')}>Услуги</button><button className={`tab ${categoryMode?'tab--on':''}`} onClick={()=>go('admin','services/categories')}>Категории услуг</button></div>;
  if(loading&&!categories.length)return <div className="cab-page"><h1>Услуги</h1><AdminTableSkeleton rows={6}/></div>;

  if(editingCategory&&draft)return <div className="cab-page"><div className="spread wrapf"><div><h1>{draft.id?'Редактировать категорию':'Новая категория'}</h1><p className="muted">Направление в каталоге услуг.</p></div></div>{error&&<div className="note">{error}</div>}<div className="card admin-form" style={{marginTop:20}}><div className="grid g2"><div className="field"><label>Название</label><input className="input" value={draft.name} onChange={e=>updateName(e.target.value)}/></div><div className="field"><label>Slug</label><input className="input" value={draft.slug} onChange={e=>update('slug',slugifyText(e.target.value))}/></div></div><div className="field"><label>Краткое описание</label><textarea className="textarea" value={draft.short_description} onChange={e=>update('short_description',e.target.value)}/></div><div className="grid g2"><div className="field"><label>Порядок</label><input type="number" className="input" value={draft.sort_order} onChange={e=>update('sort_order',Number(e.target.value))}/></div><label className="agree"><input type="checkbox" checked={!!draft.is_active} onChange={e=>update('is_active',e.target.checked)}/><span>Активна</span></label></div><div className="field"><label>Изображение</label><input className="input" value={draft.image} onChange={e=>update('image',e.target.value)}/><AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Загрузить" onSelect={file=>upload('image',file)} style={{marginTop:8}}/>{draft.image&&<img src={draft.image} alt="" className="admin-service-preview"/>}{uploading==='image'&&<span className="muted">Загружаю…</span>}</div><div className="row gap12" style={{justifyContent:'flex-end'}}><button className="btn btn-ghost" onClick={()=>go('admin','services/categories')}>Отмена</button><button className="btn btn-green" onClick={saveCategory} disabled={saving}>{saving?'Сохраняю…':'Сохранить'}</button></div></div></div>;

  if(editingService&&draft)return <div className="cab-page"><div><h1>{draft.id?'Редактировать услугу':'Новая услуга'}</h1><p className="muted">Данные сразу появятся в публичном разделе после публикации.</p></div>{error&&<div className="note">{error}</div>}<div className="admin-editor-sections" style={{marginTop:20}}>
    <CollapsibleAdminSection title="Основные данные" defaultOpen><div className="grid g2"><div className="field"><label>Название</label><input className="input" value={draft.name} onChange={e=>updateName(e.target.value)}/></div><div className="field"><label>Slug</label><input className="input" value={draft.slug} onChange={e=>update('slug',slugifyText(e.target.value))}/></div><div className="field"><label>Категория</label><select className="select" value={draft.category_id} onChange={e=>update('category_id',Number(e.target.value))}>{categories.map(x=><option key={x.id} value={x.id}>{x.name}</option>)}</select></div><div className="field"><label>Порядок</label><input type="number" className="input" value={draft.sort_order} onChange={e=>update('sort_order',Number(e.target.value))}/></div></div><div className="field"><label>Для кого</label><textarea className="textarea" value={draft.audience} onChange={e=>update('audience',e.target.value)}/></div></CollapsibleAdminSection>
    <CollapsibleAdminSection title="Описание" defaultOpen={false}><TinyEditor key={`service-${draft.id||'new'}`} value={draft.description||''} onChange={value=>update('description',value)} minHeight={260}/></CollapsibleAdminSection>
    <CollapsibleAdminSection title="Условия и результат" defaultOpen={false}><div className="grid g2"><div className="field"><label>Стоимость</label><input className="input" value={draft.price} onChange={e=>update('price',e.target.value)}/></div><div className="field"><label>Сроки выполнения</label><input className="input" value={draft.duration} onChange={e=>update('duration',e.target.value)}/></div></div><div className="field"><label>Что получает заказчик</label><textarea className="textarea" value={draft.customer_result} onChange={e=>update('customer_result',e.target.value)}/></div></CollapsibleAdminSection>
    <CollapsibleAdminSection title="Изображения" defaultOpen={false}><div className="field"><label>Основное изображение</label><input className="input" value={draft.main_image} onChange={e=>update('main_image',e.target.value)}/><AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Загрузить основное" onSelect={file=>upload('main_image',file)} style={{marginTop:8}}/>{draft.main_image&&<img src={draft.main_image} alt="" className="admin-service-preview"/>}</div><div className="field"><label>Галерея</label><AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Добавить фото" onSelect={uploadGallery}/><div className="admin-service-gallery">{(draft.gallery||[]).map((item,index)=><div key={`${item.image}-${index}`}><img src={item.image} alt=""/><div className="row gap8"><button className="icon-btn" onClick={()=>moveGallery(index,-1)} disabled={index===0}>↑</button><button className="icon-btn" onClick={()=>moveGallery(index,1)} disabled={index===(draft.gallery||[]).length-1}>↓</button><button className="icon-btn danger" onClick={()=>setDraft(d=>({...d,gallery:d.gallery.filter((_,i)=>i!==index)}))}><Icon name="trash" size={15}/></button></div></div>)}</div></div></CollapsibleAdminSection>
    <CollapsibleAdminSection title="SEO и публикация" defaultOpen={false}><div className="field"><label>SEO title</label><input className="input" value={draft.seo_title} onChange={e=>update('seo_title',e.target.value)} maxLength={255}/></div><div className="field"><label>SEO description</label><textarea className="textarea" value={draft.seo_description} onChange={e=>update('seo_description',e.target.value)} maxLength={320}/></div><label className="agree"><input type="checkbox" checked={!!draft.is_active} onChange={e=>update('is_active',e.target.checked)}/><span>Опубликована</span></label></CollapsibleAdminSection>
  </div><div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}><button className="btn btn-ghost" onClick={()=>go('admin','services')}>Отмена</button><button className="btn btn-green" onClick={saveService} disabled={saving}>{saving?'Сохраняю…':'Сохранить'}</button></div></div>;

  return <div className="cab-page"><div className="spread wrapf"><div><h1>Услуги</h1><p className="muted">Категории, карточки услуг и их публикация.</p></div><button className="btn btn-primary" onClick={()=>go('admin',categoryMode?'services/category-new':'services/new')}><Icon name="plus" size={16}/>{categoryMode?'Категория':'Услуга'}</button></div>{nav}{error&&<div className="note">{error}</div>}{categoryMode?<div className="card table admin-services-table"><div className="table__head admin-category-row"><span>Категория</span><span>Slug</span><span>Порядок</span><span>Статус</span><span></span></div>{categories.map(item=><div className="admin-category-row" key={item.id}><span className="row gap10"><img src={item.image} alt=""/><b>{item.name}</b></span><span>{item.slug}</span><span>{item.sort_order}</span><span className={`badge ${item.is_active?'green':'gray'}`}>{item.is_active?'Активна':'Скрыта'}</span><span className="row gap8"><button className="icon-btn" onClick={()=>go('admin',buildAdminState('services','category-edit',item.id))}><Icon name="edit" size={16}/></button><button className="icon-btn danger" onClick={()=>remove('category',item.id)}><Icon name="trash" size={16}/></button></span></div>)}</div>:<><div className="catalog-bar card admin-service-filters"><select className="select" value={categoryFilter} onChange={e=>setCategoryFilter(e.target.value)}><option value="all">Все категории</option>{categories.map(x=><option value={String(x.id)} key={x.id}>{x.name}</option>)}</select><select className="select" value={statusFilter} onChange={e=>setStatusFilter(e.target.value)}><option value="all">Все статусы</option><option value="active">Опубликованы</option><option value="hidden">Не опубликованы</option></select></div><div className="card table admin-services-table"><div className="table__head admin-service-row"><span>Услуга</span><span>Категория</span><span>Стоимость</span><span>Порядок</span><span>Статус</span><span>Обновлено</span><span></span></div>{filtered.map(item=><div className="admin-service-row" key={item.id}><span className="row gap10"><img src={item.main_image} alt=""/><b>{item.name}</b></span><span>{item.category_name}</span><span>{item.price||'—'}</span><span>{item.sort_order}</span><button className={`badge ${item.is_active?'green':'gray'}`} onClick={()=>toggleService(item)}>{item.is_active?'Опубликована':'Не опубликована'}</button><span>{item.updated_at?new Date(item.updated_at.replace(' ','T')).toLocaleDateString('ru-RU'):'—'}</span><span className="row gap8"><button className="icon-btn" onClick={()=>go('admin',buildAdminState('services','edit',item.id))}><Icon name="edit" size={16}/></button><button className="icon-btn danger" onClick={()=>remove('service',item.id)}><Icon name="trash" size={16}/></button></span></div>)}</div></>}</div>;
}

function AdminPayments({ onPendingCountChange=()=>{} }){
  const [payments,setPayments]=useState([]);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [apiMessage,setApiMessage]=useState('');
  const [rejecting,setRejecting]=useState(null);
  const [rejectionReason,setRejectionReason]=useState('');
  const statusMap={
    pending:{t:'Ожидает',c:'amber'},
    approved:{t:'Подтверждена',c:'green'},
    rejected:{t:'Отклонена',c:'gray'},
  };

  function load(){
    setLoading(true);
    apiFetch('/payments.php')
      .then(data=>{ setPayments(data.payments); onPendingCountChange((data.payments || []).filter(p=>p.status==='pending').length); setApiError(''); })
      .catch(err=>setApiError(err.message))
      .finally(()=>setLoading(false));
  }

  useEffect(()=>{ load(); },[]);

  function updateStatus(id,status,options={}){
    setApiMessage('');
    setPayments(ps=>{
      const next = ps.map(p=>p.id===id?{...p,status}:p);
      onPendingCountChange(next.filter(p=>p.status==='pending').length);
      return next;
    });
    apiFetch('/payments.php',{method:'PATCH',body:JSON.stringify({id,status,rejection_reason:status==='rejected' ? rejectionReason.trim() : '', ...options})})
      .then(result=>{
        if(result.warning) setApiMessage(result.warning);
        else if(result.message) setApiMessage(result.message);
        load();
      })
      .catch(err=>setApiError(err.message));
  }

  function openRejectModal(payment){
    setRejecting(payment);
    setRejectionReason(payment?.rejection_reason || '');
  }

  function confirmReject(){
    if(!rejecting) return;
    const targetId = rejecting.id;
    setRejecting(null);
    updateStatus(targetId,'rejected');
  }

  function removePayment(id){
    setApiMessage('');
    setPayments(ps=>ps.filter(p=>p.id!==id));
    const removed = payments.find(p=>p.id===id);
    if(removed?.status === 'pending'){
      onPendingCountChange(Math.max(0, payments.filter(p=>p.status==='pending').length - 1));
    }
    apiFetch(`/payments.php?id=${encodeURIComponent(id)}`,{method:'DELETE'})
      .then(result=>{
        if(result.message) setApiMessage(result.message);
        load();
      })
      .catch(err=>setApiError(err.message));
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf">
          <div><h1 style={{fontSize:28}}>Оплаты</h1><p className="muted">Заявки после кнопки «Я оплатил(а)» и ручное открытие доступа.</p></div>
          <button className="btn btn-ghost" disabled><Icon name="clock" size={16}/> Обновить</button>
        </div>
        <AdminStatsSkeleton count={4}/>
        <AdminTableSkeleton rows={4}/>
      </div>
    );
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf">
        <div><h1 style={{fontSize:28}}>Оплаты</h1><p className="muted">Заявки после кнопки «Я оплатил(а)» и ручное открытие доступа.</p></div>
        <div className="row gap12 wrapf" style={{justifyContent:'flex-end'}}>
          <button className="btn btn-ghost" onClick={()=>downloadAdminFile('/payments.php?format=csv')}><Icon name="download" size={16}/> CSV</button>
          <button className="btn btn-ghost" onClick={()=>downloadAdminFile('/payments.php?format=xls')}><Icon name="download" size={16}/> Excel</button>
          <button className="btn btn-ghost" onClick={load}><Icon name="clock" size={16}/> Обновить</button>
        </div>
      </div>
      <AdminApiNotice loading={loading} error={apiError}/>
      {apiMessage && <div className="note" style={{margin:'16px 0'}}>{apiMessage}</div>}
      <div className="grid g4" style={{margin:'22px 0'}}>
        <div className="kpi card"><div className="ic-badge"><Icon name="card" size={18}/></div><div><b>{payments.length}</b><span>всего</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="clock" size={18}/></div><div><b>{payments.filter(p=>p.status==='pending').length}</b><span>ожидают</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="checkCircle" size={18}/></div><div><b>{payments.filter(p=>p.status==='approved').length}</b><span>подтверждены</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="close" size={18}/></div><div><b>{payments.filter(p=>p.status==='rejected').length}</b><span>отклонены</span></div></div>
      </div>
      <div className="card table">
        <div className="table__head tr-u"><span>Студент</span><span>Статус</span><span>Курс</span><span>Дата</span><span></span></div>
        {payments.map(p=>(
          <div key={p.id} className="table__row tr-u">
            <div style={{minWidth:0}}>
              <b style={{fontSize:14.5,display:'block'}}>{p.student}</b>
              <span className="muted" style={{fontSize:13}}>{p.email} · {D6.fmt(p.amount)} сом</span>
              {p.rejection_reason && <span className="muted" style={{fontSize:12.5,display:'block',marginTop:4}}>Причина: {p.rejection_reason}</span>}
            </div>
            <span className={`badge ${statusMap[p.status].c}`}>{statusMap[p.status].t}</span>
            <span className="muted" style={{fontSize:13.5}}>{p.course}</span>
            <span className="muted" style={{fontSize:13.5}}>{p.created_at}</span>
            <div className="row gap8" style={{justifyContent:'flex-end'}}>
              {p.status!=='approved' && <button className="ibtn" title="Подтвердить" onClick={()=>updateStatus(p.id,'approved')}><Icon name="check" size={16}/></button>}
              {p.status==='approved' && <button className="ibtn" title="Повторно отправить письмо" onClick={()=>updateStatus(p.id,'approved')}><Icon name="mail" size={16}/></button>}
              {p.status==='approved' && <button className="ibtn" title="Выслать новый временный пароль" onClick={()=>{ if(confirm('Сгенерировать новый временный пароль и отправить его пользователю? Старый пароль перестанет работать только если письмо успешно отправится.')) updateStatus(p.id,'approved',{reset_password:true}); }}><Icon name="lock" size={16}/></button>}
              {p.status!=='rejected' && <button className="ibtn ibtn--danger" title="Отклонить" onClick={()=>openRejectModal(p)}><Icon name="close" size={16}/></button>}
              <button className="ibtn ibtn--danger" title="Удалить заявку" onClick={()=>removePayment(p.id)}><Icon name="trash" size={16}/></button>
            </div>
          </div>
        ))}
        {payments.length===0 && !loading && <div className="empty">Заявок пока нет.</div>}
      </div>
      {rejecting && (
        <div className="modal" onClick={()=>setRejecting(null)}>
          <div className="modal__box card" style={{maxWidth:560}} onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}>
              <h2 style={{fontSize:22}}>Причина отклонения</h2>
              <button className="ibtn" onClick={()=>setRejecting(null)}><Icon name="close" size={18}/></button>
            </div>
            <p className="muted" style={{marginBottom:14}}>
              Эта причина попадёт в письмо студенту и в историю действий.
            </p>
            <div className="field">
              <label>Причина</label>
              <textarea
                className="textarea"
                value={rejectionReason}
                onChange={e=>setRejectionReason(e.target.value)}
                placeholder="Например: платёж не найден, сумма не совпадает, нужен повторный чек"
                style={{minHeight:120}}
              />
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}>
              <button className="btn btn-ghost" onClick={()=>setRejecting(null)}>Отмена</button>
              <button className="btn btn-green" onClick={confirmReject}>Отклонить</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminHistory(){
  const [logs,setLogs]=useState([]);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');

  function load(){
    setLoading(true);
    apiFetch('/audit.php')
      .then(data=>{ setLogs(data.logs || []); setApiError(''); })
      .catch(err=>setApiError(err.message))
      .finally(()=>setLoading(false));
  }

  useEffect(()=>{ load(); },[]);

  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf">
          <div><h1 style={{fontSize:28}}>История действий</h1><p className="muted">Кто подтвердил оплату, изменил курс или удалил контент.</p></div>
          <button className="btn btn-ghost" disabled><Icon name="clock" size={16}/> Обновить</button>
        </div>
        <AdminTableSkeleton rows={6}/>
      </div>
    );
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf">
        <div><h1 style={{fontSize:28}}>История действий</h1><p className="muted">Кто подтвердил оплату, изменил курс или удалил контент.</p></div>
        <button className="btn btn-ghost" onClick={load}><Icon name="clock" size={16}/> Обновить</button>
      </div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <div className="card table" style={{marginTop:22}}>
        <div className="table__head" style={{gridTemplateColumns:'1.5fr 1.4fr 1.1fr 1fr'}}>
          <span>Действие</span>
          <span>Объект</span>
          <span>Сотрудник</span>
          <span>Дата</span>
        </div>
        {logs.map(item=>(
          <div key={item.id} className="table__row" style={{gridTemplateColumns:'1.5fr 1.4fr 1.1fr 1fr'}}>
            <div style={{minWidth:0}}>
              <b style={{fontSize:14.5,display:'block'}}>{item.actionLabel}</b>
              {item.meta?.course && <span className="muted" style={{fontSize:12.5}}>Курс: {item.meta.course}</span>}
              {item.meta?.contact && <span className="muted" style={{fontSize:12.5,display:'block'}}>Контакт: {item.meta.contact}</span>}
              {item.meta?.reason && <span className="muted" style={{fontSize:12.5,display:'block'}}>Причина: {item.meta.reason}</span>}
              {item.meta?.message && <span className="muted" style={{fontSize:12.5,display:'block'}}>Сообщение: {item.meta.message}</span>}
            </div>
            <div style={{minWidth:0}}>
              <b style={{fontSize:14.5,display:'block'}}>{item.entityTitle}</b>
              <span className="muted" style={{fontSize:12.5}}>{item.entityType} · {item.entityId || '—'}</span>
            </div>
            <div style={{minWidth:0}}>
              <b style={{fontSize:14.5,display:'block'}}>{item.actorName}</b>
              <span className="muted" style={{fontSize:12.5}}>{item.actorRole || 'system'}{item.actorEmail ? ` · ${item.actorEmail}` : ''}</span>
            </div>
            <span className="muted" style={{fontSize:13.5}}>{item.createdAt}</span>
          </div>
        ))}
        {logs.length===0 && !loading && <div className="empty">История пока пуста.</div>}
      </div>
    </div>
  );
}

function AdminNews({ go, adminState, refreshVersion=0, onHiddenCountChange=()=>{} }){
  const [items,setItems]=useState([]);
  const [statusFilter,setStatusFilter]=useState('all');
  const [editing,setEditing]=useState(null);
  const [draft,setDraft]=useState(null);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [uploadingImage,setUploadingImage]=useState(false);
  const [draggingId,setDraggingId]=useState(null);
  const tags = ['navy','green','amber','gray'];
  const cats = ['Лаборатория БПЛА','Партнёры','Беспилотная Авиация','Гонки','Наука-образование'];

  useEffect(()=>{ loadNews(); },[refreshVersion]);
  useEffect(()=>{
    const item = items.find(entry=>String(entry.id)===String(adminState.entityId||''));
    if(adminState.action==='edit' && item){
      setEditing(item.id);
      setDraft({...item});
      return;
    }
    if(adminState.action==='new'){
      setEditing('new');
      setDraft({cat:'Лаборатория БПЛА',tag:'navy',date:'',title:'',src:'Новости КРСУ',text:'',img:'',active:true});
      return;
    }
    setEditing(null);
    setDraft(null);
  },[adminState.action, adminState.entityId, items]);
  const filteredItems = items.filter(item=>{
    if(statusFilter==='active') return !!item.active;
    if(statusFilter==='hidden') return !item.active;
    return true;
  });
  const filterCounts = {
    all: items.length,
    active: items.filter(item=>item.active).length,
    hidden: items.filter(item=>!item.active).length,
  };
  function loadNews(){
    setLoading(true);
    apiFetch('/content.php?type=news')
      .then(data=>{ setItems(data.news); onHiddenCountChange((data.news || []).filter(item=>!item.active).length); setApiError(''); })
      .catch(err=>{ setItems(D6.news); onHiddenCountChange((D6.news || []).filter(item=>!item.active).length); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }
  function startNew(){ go('admin', buildAdminState('news','new')); }
  function startEdit(item){ go('admin', buildAdminState('news','edit', item.id)); }
  function update(field,value){ setDraft(d=>({...d,[field]:value})); }
  async function uploadImage(file){
    if(!file) return;
    setUploadingImage(true);
    try{
      const path = await uploadAdminFile(file);
      update('img', path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingImage(false);
    }
  }
  async function save(){
    if(!draft.title.trim()) return;
    go('admin', 'news');
    await apiFetch('/content.php',{method:editing==='new'?'POST':'PATCH',body:JSON.stringify({...draft,type:'news'})}).then(()=>{ loadNews(); }).catch(err=>setApiError(err.message));
  }
  function remove(id){
    setItems(list=>list.filter(item=>item.id!==id));
    apiFetch(`/content.php?type=news&id=${encodeURIComponent(id)}`,{method:'DELETE'}).catch(err=>setApiError(err.message));
  }
  function duplicateItem(item){
    apiFetch('/content.php',{method:'POST',body:JSON.stringify({type:'news',action:'duplicate',id:item.id})})
      .then(()=>{ setApiError(''); loadNews(); })
      .catch(err=>setApiError(err.message));
  }
  function reorderItems(targetId){
    if(!draggingId || draggingId===targetId) return;
    const fromIndex = items.findIndex(item=>item.id===draggingId);
    const toIndex = items.findIndex(item=>item.id===targetId);
    if(fromIndex<0 || toIndex<0) return;
    const ordered = moveItem(items, fromIndex, toIndex);
    setItems(ordered);
    setDraggingId(null);
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'news',order:ordered.map(item=>item.id)})})
      .catch(err=>{ setApiError(err.message); loadNews(); });
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Новости</h1><p className="muted">Лента новостей на главной и странице новостей.</p></div><button className="btn btn-primary" disabled><Icon name="plus" size={16}/> Новость</button></div>
        <div className="admin-skeleton admin-skeleton--banner" style={{margin:'16px 0'}}></div>
        <AdminTableSkeleton rows={4}/>
      </div>
    );
  }
  const newsSectionKey = editing==='new' ? 'new' : String(draft?.id || adminState.entityId || 'news');

  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Новости</h1><p className="muted">Лента новостей на главной и странице новостей.</p></div><button className="btn btn-primary" onClick={startNew}><Icon name="plus" size={16}/> Новость</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <AdminStatusQuickFilter value={statusFilter} onChange={setStatusFilter} counts={filterCounts}/>
      <div className="note" style={{margin:'16px 0'}}>Перетаскивайте новости, чтобы задать порядок показа в ленте.</div>
      <div className="card table" style={{marginTop:22}}>
        <div className="table__head tr-u"><span>Новость</span><span>Статус</span><span>Источник</span><span>Дата</span><span></span></div>
        {filteredItems.map(item=>(
          <div
            key={item.id}
            className="table__row tr-u"
            draggable
            onDragStart={()=>setDraggingId(item.id)}
            onDragEnd={()=>setDraggingId(null)}
            onDragOver={e=>e.preventDefault()}
            onDrop={()=>reorderItems(item.id)}
            style={{cursor:'grab', opacity:draggingId===item.id ? .55 : 1}}
            title="Перетащите, чтобы изменить порядок"
          >
            <div className="row gap12" style={{minWidth:0}}>
              {item.img && <img src={item.img} alt={item.title} style={{width:56,height:56,objectFit:'cover',borderRadius:14,flexShrink:0}}/>}
              <div style={{minWidth:0}}><b style={{fontSize:14.5,display:'block'}}>{item.title}</b><span className="muted" style={{fontSize:13}}>{item.cat}</span></div>
            </div>
            <span className={`badge ${item.active?'green':'gray'}`}>{item.active?'Опубликована':'Скрыта'}</span>
            <span className="muted" style={{fontSize:13.5}}>{item.src}</span>
            <span className="muted" style={{fontSize:13.5}}>{item.date}</span>
            <div className="row gap8" style={{justifyContent:'flex-end'}}><button className="ibtn" onClick={()=>startEdit(item)}><Icon name="edit" size={16}/></button><button className="ibtn" title="Дублировать" onClick={()=>duplicateItem(item)}><Icon name="copy" size={16}/></button><button className="ibtn ibtn--danger" onClick={()=>remove(item.id)}><Icon name="trash" size={16}/></button></div>
          </div>
        ))}
      </div>
      {editing!==null && draft && (
        <div className="modal" onClick={()=>go('admin', 'news')}>
          <div className="modal__box card" style={{maxWidth:680}} onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}><h2 style={{fontSize:22}}>{editing==='new'?'Новая новость':'Редактирование новости'}</h2><button className="ibtn" onClick={()=>go('admin', 'news')}><Icon name="close" size={18}/></button></div>
            <div className="stack" style={{gap:14}}>
              <CollapsibleAdminSection title="Основная информация" subtitle="Заголовок, категория, дата и источник" defaultOpen storageKey={`krsu-news-editor:${newsSectionKey}:main`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="field"><label>Заголовок</label><input className="input" value={draft.title} onChange={e=>update('title',e.target.value)} required/></div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Категория</label><select className="select" value={draft.cat} onChange={e=>update('cat',e.target.value)}>{cats.map(cat=><option key={cat} value={cat}>{cat}</option>)}</select></div>
                    <div className="field"><label>Цвет метки</label><select className="select" value={draft.tag} onChange={e=>update('tag',e.target.value)}>{tags.map(tag=><option key={tag} value={tag}>{tag}</option>)}</select></div>
                  </div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Дата</label><input className="input" value={draft.date} onChange={e=>update('date',e.target.value)} placeholder="27 мая 2026"/></div>
                    <div className="field"><label>Источник</label><input className="input" value={draft.src} onChange={e=>update('src',e.target.value)} placeholder="Новости КРСУ"/></div>
                  </div>
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Обложка" subtitle="Изображение для карточки и внутренней страницы" defaultOpen storageKey={`krsu-news-editor:${newsSectionKey}:cover`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="field">
                  <label>Обложка новости</label>
                  <input className="input" value={draft.img||''} onChange={e=>update('img',e.target.value)} placeholder="uploads/news-cover.jpg или https://..."/>
                  <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать изображение" onSelect={uploadImage} style={{marginTop:8}}/>
                  {uploadingImage && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю изображение…</div>}
                  {draft.img && <img src={draft.img} alt="Обложка новости" style={{marginTop:12,width:220,maxWidth:'100%',borderRadius:18,objectFit:'cover'}}/>}
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Содержимое" subtitle="Полный текст новости" defaultOpen={false} storageKey={`krsu-news-editor:${newsSectionKey}:content`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="field">
                  <label>Текст новости</label>
                  <TinyEditor key={`news-${editing||'new'}-${draft.id||'draft'}`} value={draft.text||''} onChange={value=>update('text', value)} placeholder="Полный текст новости" minHeight={340}/>
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Публикация" subtitle="Видимость новости на сайте" defaultOpen={false} storageKey={`krsu-news-editor:${newsSectionKey}:publish`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <label className="agree" style={{marginTop:0}}><input type="checkbox" checked={!!draft.active} onChange={e=>update('active',e.target.checked)}/><span>Опубликована</span></label>
              </CollapsibleAdminSection>
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}><button className="btn btn-ghost" onClick={()=>go('admin', 'news')}>Отмена</button><button className="btn btn-green" onClick={save} disabled={!draft.title.trim()}>Сохранить</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminRaces({ go, adminState, refreshVersion=0, onHiddenCountChange=()=>{} }){
  const [items,setItems]=useState([]);
  const [statusFilter,setStatusFilter]=useState('all');
  const [editing,setEditing]=useState(null);
  const [draft,setDraft]=useState(null);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [uploadingImage,setUploadingImage]=useState(false);
  const [draggingId,setDraggingId]=useState(null);
  const statuses = ['Регистрация открыта','Скоро','Анонс','Завершён','Отменён'];

  useEffect(()=>{ loadRaces(); },[refreshVersion]);
  useEffect(()=>{
    const item = items.find(entry=>String(entry.id)===String(adminState.entityId||''));
    if(adminState.action==='edit' && item){
      setEditing(item.id);
      setDraft({...item});
      return;
    }
    if(adminState.action==='new'){
      setEditing('new');
      setDraft({date:'',title:'',place:'',status:'Анонс',img:'',text:'',pinned:false,active:true});
      return;
    }
    setEditing(null);
    setDraft(null);
  },[adminState.action, adminState.entityId, items]);
  const filteredItems = items.filter(item=>{
    if(statusFilter==='active') return !!item.active;
    if(statusFilter==='hidden') return !item.active;
    return true;
  });
  const filterCounts = {
    all: items.length,
    active: items.filter(item=>item.active).length,
    hidden: items.filter(item=>!item.active).length,
  };
  function loadRaces(){
    setLoading(true);
    apiFetch('/content.php?type=races')
      .then(data=>{ setItems(data.races); onHiddenCountChange((data.races || []).filter(item=>!item.active).length); setApiError(''); })
      .catch(err=>{ setItems(D6.races); onHiddenCountChange((D6.races || []).filter(item=>!item.active).length); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }
  function startNew(){ go('admin', buildAdminState('races','new')); }
  function startEdit(item){ go('admin', buildAdminState('races','edit', item.id)); }
  function update(field,value){ setDraft(d=>({...d,[field]:value})); }
  async function uploadImage(file){
    if(!file) return;
    setUploadingImage(true);
    try{
      const path = await uploadAdminFile(file);
      update('img', path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingImage(false);
    }
  }
  async function save(){
    if(!draft.title.trim()) return;
    go('admin', 'races');
    await apiFetch('/content.php',{method:editing==='new'?'POST':'PATCH',body:JSON.stringify({...draft,type:'races'})}).then(()=>{ loadRaces(); }).catch(err=>setApiError(err.message));
  }
  function togglePin(item){
    const newPinned = !item.pinned;
    setItems(list=>list.map(r=>r.id===item.id ? {...r,pinned:newPinned} : r));
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({...item,pinned:newPinned,type:'races'})})
      .catch(err=>{ setApiError(err.message); loadRaces(); });
  }
  function remove(id){
    setItems(list=>list.filter(item=>item.id!==id));
    apiFetch(`/content.php?type=races&id=${encodeURIComponent(id)}`,{method:'DELETE'}).catch(err=>setApiError(err.message));
  }
  function duplicateItem(item){
    apiFetch('/content.php',{method:'POST',body:JSON.stringify({type:'races',action:'duplicate',id:item.id})})
      .then(()=>{ setApiError(''); loadRaces(); })
      .catch(err=>setApiError(err.message));
  }
  function reorderItems(targetId){
    if(!draggingId || draggingId===targetId) return;
    const fromIndex = items.findIndex(item=>item.id===draggingId);
    const toIndex = items.findIndex(item=>item.id===targetId);
    if(fromIndex<0 || toIndex<0) return;
    const ordered = moveItem(items, fromIndex, toIndex);
    setItems(ordered);
    setDraggingId(null);
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'races',order:ordered.map(item=>item.id)})})
      .catch(err=>{ setApiError(err.message); loadRaces(); });
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Гонки</h1><p className="muted">Ближайшие старты на странице дрон-рейсинга.</p></div><button className="btn btn-primary" disabled><Icon name="plus" size={16}/> Старт</button></div>
        <div className="admin-skeleton admin-skeleton--banner" style={{margin:'16px 0'}}></div>
        <AdminTableSkeleton rows={4}/>
      </div>
    );
  }
  const racesSectionKey = editing==='new' ? 'new' : String(draft?.id || adminState.entityId || 'race');

  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Гонки</h1><p className="muted">Старты, членство в Лиге и рейтинг пилотов в одном месте.</p></div><button className="btn btn-primary" onClick={startNew}><Icon name="plus" size={16}/> Старт</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <AdminStatusQuickFilter value={statusFilter} onChange={setStatusFilter} counts={filterCounts}/>
      <div className="note" style={{margin:'16px 0'}}>Перетаскивайте старты, а ниже настраивайте Лигу и рейтинг пилотов для раздела гонок.</div>
      <div className="card table" style={{marginTop:22}}>
        <div className="table__head tr-u"><span>Старт</span><span>Статус</span><span>Место</span><span>Дата</span><span></span></div>
        {filteredItems.map(item=>(
          <div
            key={item.id}
            className="table__row tr-u"
            draggable
            onDragStart={()=>setDraggingId(item.id)}
            onDragEnd={()=>setDraggingId(null)}
            onDragOver={e=>e.preventDefault()}
            onDrop={()=>reorderItems(item.id)}
            style={{cursor:'grab', opacity:draggingId===item.id ? .55 : 1}}
            title="Перетащите, чтобы изменить порядок"
          >
            <div className="row gap12" style={{minWidth:0}}>
              {item.img && <img src={item.img} alt={item.title} style={{width:56,height:56,objectFit:'cover',borderRadius:14,flexShrink:0}}/>}
              <div style={{minWidth:0}}>
                <div className="row gap8" style={{flexWrap:'wrap',marginBottom:2}}>
                  <b style={{fontSize:14.5}}>{item.title}</b>
                  {item.pinned && <span className="badge green" style={{fontSize:11,padding:'2px 8px'}}>📌 Закреплён</span>}
                </div>
                {!!item.text && <span className="muted" style={{fontSize:12.5,display:'block',marginTop:2}}>{excerptFromHtml(item.text, 88)}</span>}
              </div>
            </div>
            <span className={`badge ${item.active?'green':'gray'}`}>{item.active?'Опубликован':'Скрыт'}</span>
            <span className="muted" style={{fontSize:13.5}}>{item.place}</span>
            <span className="muted" style={{fontSize:13.5}}>{item.date}</span>
            <div className="row gap8" style={{justifyContent:'flex-end'}}>
              <button className="ibtn" title={item.pinned?'Открепить':'Закрепить как главное событие'} onClick={()=>togglePin(item)} style={{color:item.pinned?'var(--green)':undefined}}><Icon name="zap" size={16}/></button>
              <button className="ibtn" onClick={()=>startEdit(item)}><Icon name="edit" size={16}/></button>
              <button className="ibtn" title="Дублировать" onClick={()=>duplicateItem(item)}><Icon name="copy" size={16}/></button>
              <button className="ibtn ibtn--danger" onClick={()=>remove(item.id)}><Icon name="trash" size={16}/></button>
            </div>
          </div>
        ))}
      </div>
      <div className="stack" style={{gap:16,marginTop:24}}>
        <CollapsibleAdminSection title="Членство в Лиге" subtitle="Платные планы участия в Лиге Дронов" storageKey="krsu-races:league" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <AdminLeagueMembership refreshVersion={refreshVersion} embedded/>
        </CollapsibleAdminSection>
        <CollapsibleAdminSection title="Рейтинг пилотов" subtitle="Таблица пилотов, очки, победы и фотографии" storageKey="krsu-races:pilot-rating" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <AdminPilotRating refreshVersion={refreshVersion} embedded/>
        </CollapsibleAdminSection>
      </div>
      {editing!==null && draft && (
        <div className="modal" onClick={()=>go('admin', 'races')}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}><h2 style={{fontSize:22}}>{editing==='new'?'Новый старт':'Редактирование старта'}</h2><button className="ibtn" onClick={()=>go('admin', 'races')}><Icon name="close" size={18}/></button></div>
            <div className="stack" style={{gap:14}}>
              <CollapsibleAdminSection title="Основная информация" subtitle="Название, место, дата и статус старта" defaultOpen storageKey={`krsu-races-editor:${racesSectionKey}:main`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="field"><label>Название</label><input className="input" value={draft.title} onChange={e=>update('title',e.target.value)} required/></div>
                  <div className="field"><label>Место</label><input className="input" value={draft.place} onChange={e=>update('place',e.target.value)} placeholder="Бишкек, кампус КРСУ"/></div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Дата</label><input className="input" value={draft.date} onChange={e=>update('date',e.target.value)} placeholder="14 июня 2026"/></div>
                    <div className="field"><label>Статус</label><select className="select" value={draft.status} onChange={e=>update('status',e.target.value)}>{statuses.map(status=><option key={status} value={status}>{status}</option>)}</select></div>
                  </div>
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Баннер или логотип" subtitle="Изображение для списка стартов и страницы гонок" defaultOpen storageKey={`krsu-races-editor:${racesSectionKey}:cover`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="field">
                  <label>Баннер или логотип старта</label>
                  <input className="input" value={draft.img||''} onChange={e=>update('img',e.target.value)} placeholder="uploads/race-banner.jpg или https://..."/>
                  <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать изображение" onSelect={uploadImage} style={{marginTop:8}}/>
                  {uploadingImage && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю изображение…</div>}
                  {draft.img && <img src={draft.img} alt="Баннер старта" style={{marginTop:12,width:220,maxWidth:'100%',borderRadius:18,objectFit:'cover'}}/>}
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Полное описание" subtitle="Текст для внутренней страницы старта" defaultOpen={false} storageKey={`krsu-races-editor:${racesSectionKey}:content`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="field">
                  <label>Описание старта</label>
                  <TinyEditor key={`race-${editing||'new'}-${draft.id||'draft'}`} value={draft.text||''} onChange={value=>update('text', value)} placeholder="Полное описание старта, программа, формат, условия участия" minHeight={300}/>
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Публикация" subtitle="Видимость и закреп на странице гонок" defaultOpen={false} storageKey={`krsu-races-editor:${racesSectionKey}:publish`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:12}}>
                  <label className="agree" style={{marginTop:0}}><input type="checkbox" checked={!!draft.active} onChange={e=>update('active',e.target.checked)}/><span>Опубликован</span></label>
                  <label className="agree" style={{marginTop:0}}><input type="checkbox" checked={!!draft.pinned} onChange={e=>update('pinned',e.target.checked)}/><span>Закреплён как <b>главное событие</b> (отображается отдельным блоком вверху раздела гонок)</span></label>
                </div>
              </CollapsibleAdminSection>
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}><button className="btn btn-ghost" onClick={()=>go('admin', 'races')}>Отмена</button><button className="btn btn-green" onClick={save} disabled={!draft.title.trim()}>Сохранить</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminPilotRating({ refreshVersion=0, embedded=false }){
  const [rating,setRating] = useState({ title:'', subtitle:'', season:'', updatedAt:'', entries:[] });
  const [loading,setLoading] = useState(true);
  const [apiError,setApiError] = useState('');
  const [uploadingPhoto,setUploadingPhoto] = useState('');
  const [saving,setSaving] = useState(false);
  const [saveFeedback,setSaveFeedback] = useState(null);

  useEffect(()=>{ loadRating(); },[refreshVersion]);

  function loadRating(){
    setLoading(true);
    setSaveFeedback(null);
    apiFetch('/content.php?type=pilot-rating')
      .then(data=>{ setRating(data.pilotRating || D6.pilotRating || {entries:[]}); setApiError(''); })
      .catch(err=>{ setRating(D6.pilotRating || {entries:[]}); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }

  function update(field, value){
    setSaveFeedback(null);
    setRating(current=>({...current, [field]:value}));
  }

  function updateEntry(index, field, value){
    setSaveFeedback(null);
    setRating(current=>({
      ...current,
      entries:(current.entries || []).map((entry, entryIndex)=>entryIndex===index ? {...entry, [field]:value} : entry),
    }));
  }

  async function uploadPhoto(index, file){
    if(!file) return;
    setUploadingPhoto(String(index));
    try{
      const path = await uploadAdminFile(file);
      updateEntry(index, 'photo', path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingPhoto('');
    }
  }

  function addEntry(){
    setSaveFeedback(null);
    setRating(current=>{
      const next = [...(current.entries || []), {
        id:`pilot-${Date.now()}`,
        name:'',
        photo:'',
        team:'',
        city:'',
        points:0,
        wins:0,
        bestLap:'',
        drone:'',
        active:true,
        sort_order:((current.entries || []).length + 1) * 10,
      }];
      return {...current, entries:next};
    });
  }

  function removeEntry(index){
    setSaveFeedback(null);
    setRating(current=>({
      ...current,
      entries:(current.entries || []).filter((_, entryIndex)=>entryIndex!==index).map((entry, entryIndex)=>({...entry, sort_order:(entryIndex + 1) * 10})),
    }));
  }

  function moveEntry(index, direction){
    const nextIndex = index + direction;
    if(nextIndex < 0 || nextIndex >= (rating.entries || []).length) return;
    setSaveFeedback(null);
    setRating(current=>({
      ...current,
      entries:moveItem(current.entries || [], index, nextIndex),
    }));
  }

  async function save(){
    if(saving) return;
    const payload = {
      ...rating,
      entries:(rating.entries || []).map((entry, index)=>({
        ...entry,
        sort_order:(index + 1) * 10,
      })),
    };
    setSaving(true);
    setSaveFeedback(null);
    try{
      await apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'pilot-rating', pilotRating:payload})});
      setRating(payload);
      setApiError('');
      setSaveFeedback({type:'success', text:'Рейтинг пилотов успешно сохранён.'});
    }catch(err){
      setSaveFeedback({type:'error', text:err.message || 'Не удалось сохранить рейтинг.'});
    }finally{
      setSaving(false);
    }
  }

  if(loading && !apiError){
    if(embedded){
      return <AdminFormSkeleton blocks={3}/>;
    }
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Рейтинг пилотов</h1><p className="muted">Публичная таблица лучших пилотов лаборатории и результаты сезона.</p></div><button className="btn btn-primary" disabled><Icon name="plus" size={16}/> Пилот</button></div>
        <AdminFormSkeleton blocks={4}/>
      </div>
    );
  }

  const entries = rating.entries || [];
  const content = (
    <>
      {!embedded && <div className="spread wrapf">
        <div>
          <h1 style={{fontSize:28}}>Рейтинг пилотов</h1>
          <p className="muted">Публичная таблица лучших пилотов лаборатории и результаты сезона.</p>
        </div>
        <div className="row gap12 wrapf">
          <button className="btn btn-primary" onClick={addEntry}><Icon name="plus" size={16}/> Пилот</button>
          <button className="btn btn-green" onClick={save} disabled={saving}><Icon name="check" size={16}/> {saving ? 'Сохраняю…' : 'Сохранить'}</button>
        </div>
      </div>}
      {embedded && <div className="row gap12 wrapf" style={{marginBottom:14}}><button className="btn btn-primary btn-sm" onClick={addEntry} disabled={saving}><Icon name="plus" size={16}/> Пилот</button><button className="btn btn-green btn-sm" onClick={save} disabled={saving}><Icon name="check" size={16}/> {saving ? 'Сохраняю…' : 'Сохранить'}</button></div>}
      {saveFeedback && (
        <div
          className={`note ${saveFeedback.type==='error' ? 'note--danger' : ''}`}
          style={{margin:'0 0 14px',padding:'12px 14px'}}
          role={saveFeedback.type==='error' ? 'alert' : 'status'}
        >
          <Icon name={saveFeedback.type==='error' ? 'close' : 'checkCircle'} size={18}/>
          <span>{saveFeedback.text}</span>
        </div>
      )}
      <AdminApiNotice loading={loading} error={apiError}/>

      <div className="stack" style={{gap:16,marginTop:22,maxWidth:980}}>
        <CollapsibleAdminSection title="Заголовок раздела" subtitle="Текст в hero-блоке страницы рейтинга" defaultOpen storageKey="krsu-pilot-rating:meta" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:14}}>
            <div className="field"><label>Заголовок</label><input className="input" value={rating.title||''} onChange={e=>update('title', e.target.value)} placeholder="Рейтинг пилотов"/></div>
            <div className="field"><label>Подзаголовок</label><textarea className="textarea" value={rating.subtitle||''} onChange={e=>update('subtitle', e.target.value)} placeholder="Таблица лучших пилотов Лаборатории БПЛА и результаты последних стартов."/></div>
            <div className="grid g2" style={{gap:12}}>
              <div className="field"><label>Сезон</label><input className="input" value={rating.season||''} onChange={e=>update('season', e.target.value)} placeholder="Сезон 2026"/></div>
              <div className="field"><label>Дата обновления</label><input className="input" value={rating.updatedAt||''} onChange={e=>update('updatedAt', e.target.value)} placeholder="03.06.2026"/></div>
            </div>
          </div>
        </CollapsibleAdminSection>

        <CollapsibleAdminSection title="Список пилотов" subtitle="Места на сайте автоматически сортируются по очкам: от большего к меньшему" defaultOpen storageKey="krsu-pilot-rating:list" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:14}}>
            {entries.map((entry, index)=>(
              <div key={entry.id || index} className="card" style={{padding:18}}>
                <div className="spread wrapf" style={{gap:12,marginBottom:14}}>
                  <div className="row gap8 wrapf">
                    <span className="badge navy">#{index + 1}</span>
                    <span className={`badge ${entry.active ? 'green' : 'gray'}`}>{entry.active ? 'Показывается' : 'Скрыт'}</span>
                  </div>
                  <div className="row gap8 wrapf">
                    <button className="ibtn" disabled={index===0} onClick={()=>moveEntry(index, -1)}><Icon name="chevUp" size={16}/></button>
                    <button className="ibtn" disabled={index===entries.length-1} onClick={()=>moveEntry(index, 1)}><Icon name="chevDown" size={16}/></button>
                    <button className="ibtn ibtn--danger" onClick={()=>removeEntry(index)}><Icon name="trash" size={16}/></button>
                  </div>
                </div>
                <div className="grid g2" style={{gap:12}}>
                  <div className="field"><label>Имя пилота</label><input className="input" value={entry.name||''} onChange={e=>updateEntry(index,'name',e.target.value)} placeholder="Имя и фамилия"/></div>
                  <div className="field"><label>Команда</label><input className="input" value={entry.team||''} onChange={e=>updateEntry(index,'team',e.target.value)} placeholder="KRSU Racing"/></div>
                </div>
                <div className="field" style={{marginTop:12}}>
                  <label>Фото пилота</label>
                  <input className="input" value={entry.photo||''} onChange={e=>updateEntry(index,'photo',e.target.value)} placeholder="uploads/pilot.jpg или https://..."/>
                  <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать фото" onSelect={file=>uploadPhoto(index,file)} style={{marginTop:8}}/>
                  {uploadingPhoto===String(index) && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю фото…</div>}
                  {entry.photo && <img src={entry.photo} alt={entry.name||'Пилот'} style={{marginTop:12,width:92,height:92,objectFit:'cover',borderRadius:'50%',border:'1px solid rgba(10,60,80,.12)'}}/>}
                </div>
                <div className="grid g2" style={{gap:12,marginTop:12}}>
                  <div className="field"><label>Город</label><input className="input" value={entry.city||''} onChange={e=>updateEntry(index,'city',e.target.value)} placeholder="Бишкек"/></div>
                  <div className="field"><label>Дрон</label><input className="input" value={entry.drone||''} onChange={e=>updateEntry(index,'drone',e.target.value)} placeholder="5” FPV"/></div>
                </div>
                <div className="grid g2" style={{gap:12,marginTop:12}}>
                  <div className="field"><label>Очки</label><input className="input" type="number" value={entry.points??0} onChange={e=>updateEntry(index,'points',Number(e.target.value)||0)}/></div>
                  <div className="field"><label>Победы</label><input className="input" type="number" value={entry.wins??0} onChange={e=>updateEntry(index,'wins',Number(e.target.value)||0)}/></div>
                </div>
                <div className="grid g2" style={{gap:12,marginTop:12}}>
                  <div className="field"><label>Лучший круг</label><input className="input" value={entry.bestLap||''} onChange={e=>updateEntry(index,'bestLap',e.target.value)} placeholder="00:21.84"/></div>
                  <label className="agree" style={{marginTop:30}}><input type="checkbox" checked={!!entry.active} onChange={e=>updateEntry(index,'active',e.target.checked)}/><span>Показывать пилота в рейтинге</span></label>
                </div>
              </div>
            ))}
            {!entries.length && <div className="empty">Пилоты пока не добавлены.</div>}
          </div>
        </CollapsibleAdminSection>
      </div>
    </>
  );

  if(embedded){
    return content;
  }

  return <div className="cab-page">{content}</div>;
}

function AdminLeagueMembership({ refreshVersion=0, embedded=false }){
  const [league,setLeague] = useState(D6.leagueMembership || {features:[]});
  const [loading,setLoading] = useState(true);
  const [apiError,setApiError] = useState('');

  useEffect(()=>{ loadLeague(); },[refreshVersion]);

  function loadLeague(){
    setLoading(true);
    apiFetch('/content.php?type=league-membership')
      .then(data=>{ setLeague(data.leagueMembership || D6.leagueMembership || {features:[]}); setApiError(''); })
      .catch(err=>{ setLeague(D6.leagueMembership || {features:[]}); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }

  function update(field, value){
    setLeague(current=>({...current, [field]:value}));
  }

  function updateFeature(index, value){
    setLeague(current=>({
      ...current,
      features:(current.features || []).map((item, itemIndex)=>itemIndex===index ? value : item),
    }));
  }

  function addFeature(){
    setLeague(current=>({...current, features:[...(current.features || []), '']}));
  }

  function removeFeature(index){
    setLeague(current=>({...current, features:(current.features || []).filter((_, itemIndex)=>itemIndex!==index)}));
  }

  function save(){
    const payload = {
      title:String(league.title || ''),
      subtitle:String(league.subtitle || ''),
      description:String(league.description || ''),
      monthlyPrice:0,
      yearlyPrice:Number(league.yearlyPrice)||0,
      cta:String(league.cta || ''),
      features:(league.features || []).map(item=>String(item || '').trim()).filter(Boolean),
    };
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'league-membership', leagueMembership:payload})})
      .then(()=>{ setLeague(payload); setApiError(''); })
      .catch(err=>setApiError(err.message));
  }

  if(loading && !apiError){
    if(embedded){
      return <AdminFormSkeleton blocks={3}/>;
    }
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Лига дронов</h1><p className="muted">Настройка платного членства, цен и преимуществ для участия в Лиге.</p></div><button className="btn btn-green" disabled><Icon name="check" size={16}/> Сохранить</button></div>
        <AdminFormSkeleton blocks={3}/>
      </div>
    );
  }

  const content = (
    <>
      {!embedded && <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Лига дронов</h1><p className="muted">Настройка платного членства, цен и преимуществ для участия в Лиге.</p></div><button className="btn btn-green" onClick={save}><Icon name="check" size={16}/> Сохранить</button></div>}
      {embedded && <div className="row gap12 wrapf" style={{marginBottom:14}}><button className="btn btn-green btn-sm" onClick={save}><Icon name="check" size={16}/> Сохранить настройки Лиги</button></div>}
      <AdminApiNotice loading={loading} error={apiError}/>
      <div className="stack" style={{gap:16,marginTop:22,maxWidth:980}}>
        <CollapsibleAdminSection title="Основная информация" subtitle="Заголовок и описание раздела членства" defaultOpen storageKey="krsu-league:main" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:14}}>
            <div className="field"><label>Заголовок</label><input className="input" value={league.title||''} onChange={e=>update('title',e.target.value)} placeholder="Членство в Лиге"/></div>
            <div className="field"><label>Подзаголовок</label><textarea className="textarea" value={league.subtitle||''} onChange={e=>update('subtitle',e.target.value)} placeholder="Платная регистрация для участия в Лиге Дронов и официальных заездах."/></div>
            <div className="field"><label>Описание</label><textarea className="textarea" value={league.description||''} onChange={e=>update('description',e.target.value)} placeholder="Что получает участник Лиги в рамках членства."/></div>
            <div className="field"><label>Текст кнопки</label><input className="input" value={league.cta||''} onChange={e=>update('cta',e.target.value)} placeholder="Оформить членство"/></div>
          </div>
        </CollapsibleAdminSection>

        <CollapsibleAdminSection title="Стоимость" subtitle="Годовая подписка Лиги" defaultOpen storageKey="krsu-league:pricing" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="field"><label>Стоимость в год, сом</label><input className="input" type="number" value={league.yearlyPrice??0} onChange={e=>update('yearlyPrice',e.target.value)} placeholder="8760"/></div>
        </CollapsibleAdminSection>

        <CollapsibleAdminSection title="Преимущества" subtitle="Список того, что получает участник Лиги" defaultOpen storageKey="krsu-league:features" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:12}}>
            <div className="spread wrapf"><label className="field-label">Пункты списка</label><button className="btn btn-ghost btn-sm" onClick={addFeature}><Icon name="plus" size={14}/> Пункт</button></div>
            {(league.features || []).map((item, index)=>(
              <div key={index} className="row gap10">
                <input className="input" value={item} onChange={e=>updateFeature(index,e.target.value)} placeholder={`Преимущество ${index+1}`}/>
                <button className="ibtn ibtn--danger" onClick={()=>removeFeature(index)}><Icon name="trash" size={15}/></button>
              </div>
            ))}
            {!(league.features || []).length && <div className="empty">Преимущества пока не добавлены.</div>}
          </div>
        </CollapsibleAdminSection>
      </div>
    </>
  );

  if(embedded){
    return content;
  }

  return <div className="cab-page">{content}</div>;
}

function AdminMedia({ go, adminState, refreshVersion=0, onHiddenCountChange=()=>{} }){
  const [items,setItems]=useState([]);
  const [statusFilter,setStatusFilter]=useState('all');
  const [editing,setEditing]=useState(null);
  const [draft,setDraft]=useState(null);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [uploadingField,setUploadingField]=useState('');
  const [draggingId,setDraggingId]=useState(null);
  const kinds = [
    {value:'video', label:'Видео'},
    {value:'image', label:'Изображение'},
  ];

  useEffect(()=>{ loadMedia(); },[refreshVersion]);
  useEffect(()=>{
    const item = items.find(entry=>String(entry.id)===String(adminState.entityId||''));
    if(adminState.action==='edit' && item){
      setEditing(item.id);
      setDraft({...item});
      return;
    }
    if(adminState.action==='new'){
      setEditing('new');
      setDraft({id:'',cat:'Медиа',title:'',kind:'video',src:'',poster:'',text:'',active:true,sort_order:(items.length + 1) * 10});
      return;
    }
    setEditing(null);
    setDraft(null);
  },[adminState.action, adminState.entityId, items]);

  const filteredItems = items.filter(item=>{
    if(statusFilter==='active') return !!item.active;
    if(statusFilter==='hidden') return !item.active;
    return true;
  });
  const filterCounts = {
    all: items.length,
    active: items.filter(item=>item.active).length,
    hidden: items.filter(item=>!item.active).length,
  };

  function loadMedia(){
    setLoading(true);
    apiFetch('/content.php?type=media')
      .then(data=>{ setItems(data.media || []); onHiddenCountChange((data.media || []).filter(item=>!item.active).length); setApiError(''); })
      .catch(err=>{ setItems(D6.media || []); onHiddenCountChange((D6.media || []).filter(item=>!item.active).length); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }
  function startNew(){ go('admin', buildAdminState('media','new')); }
  function startEdit(item){ go('admin', buildAdminState('media','edit', item.id)); }
  function update(field,value){ setDraft(d=>({...d,[field]:value})); }
  async function uploadMediaField(field, file){
    if(!file) return;
    setUploadingField(field);
    try{
      const path = await uploadAdminFile(file);
      update(field, path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingField('');
    }
  }
  async function save(){
    if(!draft?.title?.trim()) return;
    const payload = {
      ...draft,
      id: draft.id || `media-${Date.now()}`,
      cat: String(draft.cat || 'Медиа').trim() || 'Медиа',
      title: String(draft.title || '').trim(),
      kind: draft.kind === 'image' ? 'image' : 'video',
      src: String(draft.src || '').trim(),
      poster: String(draft.poster || '').trim(),
      text: String(draft.text || '').trim(),
      active: !!draft.active,
      sort_order: Number(draft.sort_order) || (items.length + 1) * 10,
    };
    setItems(list=>editing==='new' ? [...list, payload] : list.map(item=>item.id===payload.id ? payload : item));
    go('admin', 'media');
    await apiFetch('/content.php',{method:editing==='new'?'POST':'PATCH',body:JSON.stringify({...payload, type:'media'})})
      .then(()=>loadMedia())
      .catch(err=>setApiError(err.message));
  }
  function remove(id){
    setItems(list=>list.filter(item=>item.id!==id));
    apiFetch(`/content.php?type=media&id=${encodeURIComponent(id)}`,{method:'DELETE'}).catch(err=>setApiError(err.message));
  }
  function reorderItems(targetId){
    if(!draggingId || draggingId===targetId) return;
    const fromIndex = items.findIndex(item=>item.id===draggingId);
    const toIndex = items.findIndex(item=>item.id===targetId);
    if(fromIndex<0 || toIndex<0) return;
    const ordered = moveItem(items, fromIndex, toIndex);
    setItems(ordered);
    setDraggingId(null);
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'media',order:ordered.map(item=>item.id)})})
      .catch(err=>{ setApiError(err.message); loadMedia(); });
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Медиа</h1><p className="muted">Видео и изображения для страницы медиа-галереи.</p></div><button className="btn btn-primary" disabled><Icon name="plus" size={16}/> Медиа-элемент</button></div>
        <div className="admin-skeleton admin-skeleton--banner" style={{margin:'16px 0'}}></div>
        <AdminTableSkeleton rows={4}/>
      </div>
    );
  }
  const mediaSectionKey = editing==='new' ? 'new' : String(draft?.id || adminState.entityId || 'media');

  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Медиа</h1><p className="muted">Видео и изображения для страницы медиа-галереи.</p></div><button className="btn btn-primary" onClick={startNew}><Icon name="plus" size={16}/> Медиа-элемент</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <AdminStatusQuickFilter value={statusFilter} onChange={setStatusFilter} counts={filterCounts}/>
      <div className="note" style={{margin:'16px 0'}}>Перетаскивайте элементы, чтобы менять порядок показа на главной и в галерее.</div>
      <div className="card table" style={{marginTop:22}}>
        <div className="table__head tr-u"><span>Материал</span><span>Статус</span><span>Тип</span><span>Категория</span><span></span></div>
        {filteredItems.map(item=>(
          <div
            key={item.id}
            className="table__row tr-u"
            draggable
            onDragStart={()=>setDraggingId(item.id)}
            onDragEnd={()=>setDraggingId(null)}
            onDragOver={e=>e.preventDefault()}
            onDrop={()=>reorderItems(item.id)}
            style={{cursor:'grab', opacity:draggingId===item.id ? .55 : 1}}
            title="Перетащите, чтобы изменить порядок"
          >
            <div className="row gap12" style={{minWidth:0}}>
              {item.kind==='image'
                ? <img src={item.src} alt={item.title} style={{width:56,height:56,objectFit:'cover',borderRadius:14,flexShrink:0}}/>
                : item.poster
                  ? <img src={item.poster} alt={item.title} style={{width:56,height:56,objectFit:'cover',borderRadius:14,flexShrink:0}}/>
                  : <div className="acc-ic" style={{background:'var(--navy)'}}><Icon name="video" size={16} style={{color:'#fff'}}/></div>}
              <div style={{minWidth:0}}>
                <b style={{fontSize:14.5,display:'block'}}>{item.title}</b>
                {item.text ? <span className="muted" style={{fontSize:13}}>{item.text}</span> : null}
              </div>
            </div>
            <span className={`badge ${item.active?'green':'gray'}`}>{item.active?'Включён':'Скрыт'}</span>
            <span className="badge navy">{item.kind==='image' ? 'Изображение' : 'Видео'}</span>
            <span className="muted" style={{fontSize:13.5}}>{item.cat}</span>
            <div className="row gap8" style={{justifyContent:'flex-end'}}><button className="ibtn" onClick={()=>startEdit(item)}><Icon name="edit" size={16}/></button><button className="ibtn ibtn--danger" onClick={()=>remove(item.id)}><Icon name="trash" size={16}/></button></div>
          </div>
        ))}
      </div>
      {editing!==null && draft && (
        <div className="modal" onClick={()=>go('admin', 'media')}>
          <div className="modal__box card" style={{maxWidth:760}} onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}><h2 style={{fontSize:22}}>{editing==='new'?'Новый медиа-элемент':'Редактирование медиа-элемента'}</h2><button className="ibtn" onClick={()=>go('admin', 'media')}><Icon name="close" size={18}/></button></div>
            <div className="stack" style={{gap:14}}>
              <CollapsibleAdminSection title="Основная информация" subtitle="Название, категория, тип и подпись" defaultOpen storageKey={`krsu-media-editor:${mediaSectionKey}:main`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="field"><label>Название</label><input className="input" value={draft.title} onChange={e=>update('title',e.target.value)} required/></div>
                  <div className="grid g2" style={{gap:12}}>
                    <div className="field"><label>Категория</label><input className="input" value={draft.cat} onChange={e=>update('cat',e.target.value)} placeholder="Обучалки"/></div>
                    <div className="field"><label>Тип</label><select className="select" value={draft.kind} onChange={e=>update('kind',e.target.value)}>{kinds.map(kind=><option key={kind.value} value={kind.value}>{kind.label}</option>)}</select></div>
                  </div>
                  <div className="field"><label>Короткое описание</label><textarea className="textarea" value={draft.text||''} onChange={e=>update('text',e.target.value)} placeholder="Короткая подпись для карточки"/></div>
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Основной файл" subtitle="Видео или изображение для галереи" defaultOpen storageKey={`krsu-media-editor:${mediaSectionKey}:src`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="field">
                  <label>{draft.kind==='image' ? 'Изображение' : 'Видео'}</label>
                  <input className="input" value={draft.src||''} onChange={e=>update('src',e.target.value)} placeholder={draft.kind==='image' ? 'uploads/media-image.jpg или https://...' : 'uploads/media-video.mp4 или https://...'}/>
                  <AdminFilePicker
                    accept={draft.kind==='image' ? 'image/png,image/jpeg,image/webp' : 'video/mp4,video/webm'}
                    buttonLabel={draft.kind==='image' ? 'Выбрать изображение' : 'Выбрать видео'}
                    onSelect={file=>uploadMediaField('src', file)}
                    style={{marginTop:8}}
                  />
                  {uploadingField==='src' && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю основной файл…</div>}
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Превью / постер" subtitle="Картинка для видео или превью элемента" defaultOpen={false} storageKey={`krsu-media-editor:${mediaSectionKey}:poster`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="stack" style={{gap:14}}>
                  <div className="field">
                    <label>Превью / постер</label>
                    <input className="input" value={draft.poster||''} onChange={e=>update('poster',e.target.value)} placeholder="uploads/media-poster.jpg или https://..."/>
                    <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать постер" onSelect={file=>uploadMediaField('poster', file)} style={{marginTop:8}}/>
                    {uploadingField==='poster' && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю постер…</div>}
                  </div>
                  {(draft.poster || (draft.kind==='image' && draft.src)) && (
                    <img src={draft.kind==='image' ? draft.src : draft.poster} alt="Превью материала" style={{width:260,maxWidth:'100%',borderRadius:18,objectFit:'cover'}}/>
                  )}
                </div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Публикация" subtitle="Показывать элемент в галерее и на главной" defaultOpen={false} storageKey={`krsu-media-editor:${mediaSectionKey}:publish`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <label className="agree" style={{marginTop:0}}><input type="checkbox" checked={!!draft.active} onChange={e=>update('active',e.target.checked)}/><span>Показывать в галерее</span></label>
              </CollapsibleAdminSection>
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:20}}><button className="btn btn-ghost" onClick={()=>go('admin', 'media')}>Отмена</button><button className="btn btn-green" onClick={save} disabled={!draft.title.trim()}>Сохранить</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminAds({ refreshVersion=0 }){
  const defaultAds = Object.fromEntries((D6.adSlots || []).map(slot=>[slot.id, {active:false,showPlaceholder:true,title:'',text:'',img:'',url:'',button:'',tag:'РЕКЛАМА'}]));
  const [ads,setAds]=useState({...defaultAds, ...(D6.ads||{})});
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [uploadingSlot,setUploadingSlot]=useState('');

  useEffect(()=>{ loadAds(); },[refreshVersion]);

  function loadAds(){
    setLoading(true);
    apiFetch('/content.php?type=ads')
      .then(data=>{ setAds({...defaultAds, ...(data.ads||{})}); setApiError(''); })
      .catch(err=>setApiError(err.message))
      .finally(()=>setLoading(false));
  }

  function update(slotId, field, value){
    setAds(current=>({...current, [slotId]:{...(current[slotId]||defaultAds[slotId]), [field]:value}}));
  }

  async function uploadImage(slotId, file){
    if(!file) return;
    setUploadingSlot(slotId);
    try{
      const path = await uploadAdminFile(file);
      update(slotId, 'img', path);
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingSlot('');
    }
  }

  function save(){
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'ads',ads})})
      .then(()=>setApiError(''))
      .catch(err=>setApiError(err.message));
  }

  function slotState(item){
    const hasContent = !!(item?.title || item?.text || item?.img || item?.url || item?.button);
    if(item?.active && hasContent) return {label:'Баннер', tone:'green'};
    if(item?.showPlaceholder !== false) return {label:'Заглушка', tone:'gray'};
    return {label:'Скрыт', tone:'amber'};
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Реклама и баннеры</h1><p className="muted">Управление всеми рекламными блоками сайта из одного раздела.</p></div><button className="btn btn-green" onClick={save}><Icon name="check" size={16}/> Сохранить</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <div className="stack" style={{gap:16,marginTop:22}}>
        {(D6.adSlots||[]).map(slot=>{
          const item = ads[slot.id] || defaultAds[slot.id];
          const state = slotState(item);
          return (
            <CollapsibleAdminSection
              key={slot.id}
              title={slot.name}
              subtitle={<span className="row gap8 wrapf" style={{fontSize:13}}><span>ID: {slot.id}</span><span className={`badge ${state.tone}`}>{state.label}</span></span>}
              storageKey={`krsu-ads-editor:${slot.id}`}
              style={{maxWidth:'none',marginTop:0}}
              actions={
                <div className="row gap12 wrapf" onClick={e=>e.stopPropagation()}>
                  <label className="agree" style={{margin:0}}>
                    <input type="checkbox" checked={!!item.active} onChange={e=>update(slot.id,'active',e.target.checked)}/>
                    <span>Показывать баннер</span>
                  </label>
                  <label className="agree" style={{margin:0}}>
                    <input type="checkbox" checked={item.showPlaceholder !== false} onChange={e=>update(slot.id,'showPlaceholder',e.target.checked)}/>
                    <span>Показывать заглушку</span>
                  </label>
                </div>
              }
            >
              <div className="grid g2" style={{gap:14}}>
                <div className="field"><label>Заголовок</label><input className="input" value={item.title||''} onChange={e=>update(slot.id,'title',e.target.value)} placeholder="Название баннера"/></div>
                <div className="field"><label>Кнопка / CTA</label><input className="input" value={item.button||''} onChange={e=>update(slot.id,'button',e.target.value)} placeholder="Подробнее"/></div>
              </div>
              <div className="grid g2" style={{gap:14,marginTop:14}}>
                <div className="field"><label>Ссылка перехода</label><input className="input" value={item.url||''} onChange={e=>update(slot.id,'url',e.target.value)} placeholder="https://..."/></div>
                <div className="field"><label>Метка</label><input className="input" value={item.tag||'РЕКЛАМА'} onChange={e=>update(slot.id,'tag',e.target.value)} placeholder="РЕКЛАМА"/></div>
              </div>
              <div className="field" style={{marginTop:14}}><label>Описание</label><textarea className="textarea" value={item.text||''} onChange={e=>update(slot.id,'text',e.target.value)} placeholder="Короткое описание или предложение для рекламодателя"/></div>
              <div className="field" style={{marginTop:14}}>
                <label>Изображение баннера</label>
                <input className="input" value={item.img||''} onChange={e=>update(slot.id,'img',e.target.value)} placeholder="uploads/ad-banner.jpg или https://..."/>
                <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать изображение" onSelect={file=>uploadImage(slot.id,file)} style={{marginTop:8}}/>
                {uploadingSlot===slot.id && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю изображение…</div>}
                {item.img && <img src={item.img} alt={item.title||slot.name} style={{marginTop:12,width:260,maxWidth:'100%',borderRadius:18,objectFit:'cover'}}/>}
              </div>
            </CollapsibleAdminSection>
          );
        })}
      </div>
    </div>
  );
}

function AdminContentPages({ refreshVersion=0, onReloadSiteData=()=>{} }){
  const [pages,setPages]=useState({
    offer:{title:'Договор оферты', text:'', files:[]},
    payment:{title:'Условия оплаты', text:'', files:[]},
    privacy:{title:'Политика конфиденциальности', text:'', files:[]},
  });
  const [uploadingFile,setUploadingFile]=useState(null);
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [saving,setSaving]=useState(false);
  const pageDefs = [
    {id:'offer', label:'Договор оферты', subtitle:'Публичный договор для сайта'},
    {id:'payment', label:'Условия оплаты', subtitle:'Порядок, способы и сроки оплаты'},
    {id:'privacy', label:'Политика конфиденциальности', subtitle:'Обработка персональных данных'},
  ];

  useEffect(()=>{ loadPages(); },[refreshVersion]);

  function loadPages(){
    setLoading(true);
    apiFetch('/content.php?type=pages')
      .then(data=>{ setPages(data.pages || {}); setApiError(''); })
      .catch(err=>{ setPages(D6.pages || {}); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }

  function updatePage(pageId, field, value){
    setPages(prev=>({
      ...prev,
      [pageId]:{
        ...(prev[pageId] || {}),
        [field]: value,
      },
    }));
  }

  async function uploadPageFile(pageId, file){
    if(!file) return;
    setUploadingFile(pageId);
    try{
      const path = await uploadAdminFile(file);
      setPages(prev=>({
        ...prev,
        [pageId]:{...(prev[pageId]||{}), files:[...(prev[pageId]?.files||[]), {path, name:file.name}]},
      }));
    }catch(e){ alert('Ошибка загрузки: '+e.message); }
    setUploadingFile(null);
  }

  function removePageFile(pageId, idx){
    setPages(prev=>({
      ...prev,
      [pageId]:{...(prev[pageId]||{}), files:(prev[pageId]?.files||[]).filter((_,i)=>i!==idx)},
    }));
  }

  async function save(){
    setSaving(true);
    try{
      await apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'pages', pages})});
      setApiError('');
      await onReloadSiteData();
    }catch(err){
      setApiError(err.message);
    }finally{
      setSaving(false);
    }
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf">
          <div>
            <h1 style={{fontSize:28}}>Контент</h1>
            <p className="muted">Редактирование статических страниц сайта: оферта, оплата и конфиденциальность.</p>
          </div>
          <button className="btn btn-green" disabled><Icon name="check" size={16}/> Сохранить</button>
        </div>
        <AdminFormSkeleton blocks={3}/>
      </div>
    );
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf">
        <div>
          <h1 style={{fontSize:28}}>Контент</h1>
          <p className="muted">Редактирование статических страниц сайта: оферта, оплата и конфиденциальность.</p>
        </div>
        <button className="btn btn-green" onClick={save} disabled={saving}>
          <Icon name="check" size={16}/> {saving ? 'Сохраняю…' : 'Сохранить'}
        </button>
      </div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <div className="stack" style={{gap:16,marginTop:22}}>
        {pageDefs.map(page=>(
          <CollapsibleAdminSection
            key={page.id}
            title={page.label}
            subtitle={page.subtitle}
            defaultOpen={page.id==='offer'}
            storageKey={`krsu-content-pages:${page.id}`}
            style={{marginTop:0,maxWidth:'100%',padding:18}}
          >
            <div className="stack" style={{gap:14}}>
              <div className="field">
                <label>Заголовок страницы</label>
                <input className="input" value={pages?.[page.id]?.title || ''} onChange={e=>updatePage(page.id, 'title', e.target.value)} />
              </div>
              <div className="field">
                <label>Текст страницы</label>
                <TinyEditor
                  key={`content-page-${page.id}`}
                  value={pages?.[page.id]?.text || ''}
                  onChange={value=>updatePage(page.id, 'text', value)}
                  placeholder={`Введите текст страницы «${page.label}»`}
                  minHeight={320}
                />
              </div>
              <div className="field">
                <label>Прикреплённые файлы <span className="muted">(PDF или DOCX — кнопки скачать появятся на странице)</span></label>
                <div className="stack" style={{gap:8}}>
                  {(pages?.[page.id]?.files||[]).map((f,idx)=>(
                    <div key={idx} className="row gap8" style={{alignItems:'center',background:'var(--bg-2)',borderRadius:10,padding:'8px 14px'}}>
                      <Icon name="doc" size={18} style={{flexShrink:0,color:'var(--navy)'}}/>
                      <span style={{fontSize:14,fontWeight:600,flex:1,minWidth:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{f.name||f.path}</span>
                      <a href={`/${String(f.path || '').replace(/^\/+/, '')}`} target="_blank" rel="noreferrer" className="ibtn" title="Открыть"><Icon name="arrowUpRight" size={15}/></a>
                      <button className="ibtn ibtn--danger" onClick={()=>removePageFile(page.id,idx)} title="Удалить"><Icon name="trash" size={15}/></button>
                    </div>
                  ))}
                  <label className="btn btn-ghost" style={{cursor:'pointer',alignSelf:'flex-start',marginTop:2}}>
                    {uploadingFile===page.id ? 'Загружаю…' : <><Icon name="plus" size={15}/> Прикрепить PDF / DOCX</>}
                    <input type="file" accept=".pdf,.docx,.doc" style={{display:'none'}} disabled={uploadingFile===page.id} onChange={e=>{ uploadPageFile(page.id, e.target.files[0]); e.target.value=''; }}/>
                  </label>
                </div>
              </div>
            </div>
          </CollapsibleAdminSection>
        ))}
      </div>
    </div>
  );
}

function AdminContacts({ refreshVersion=0 }){
  const [contacts,setContacts]=useState({
    phones:[],
    email:'',
    address:'',
    hours:'',
    receiver:'',
    account:'',
    bik:'',
    inn:'',
    okpo:'',
    qrPaymentEnabled:true,
    qrImage:'',
    paymentText:'',
    bankPaymentText:'',
  });
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const [uploadingQr,setUploadingQr]=useState(false);

  useEffect(()=>{ loadContacts(); },[refreshVersion]);
  function loadContacts(){
    setLoading(true);
    apiFetch('/content.php?type=contacts')
      .then(data=>{ setContacts(data.contacts); setApiError(''); })
      .catch(err=>{ setContacts(D6.contacts); setApiError(err.message); })
      .finally(()=>setLoading(false));
  }
  function update(field,value){ setContacts(c=>({...c,[field]:value})); }
  function updatePhone(index,value){ setContacts(c=>({...c,phones:(c.phones||[]).map((phone,i)=>i===index?value:phone)})); }
  function addPhone(){ setContacts(c=>({...c,phones:[...(c.phones||[]),'']})); }
  function removePhone(index){ setContacts(c=>({...c,phones:(c.phones||[]).filter((_,i)=>i!==index)})); }
  function save(){
    const payload = {...contacts, phones:(contacts.phones||[]).map(p=>p.trim()).filter(Boolean)};
    apiFetch('/content.php',{method:'PATCH',body:JSON.stringify({type:'contacts',contacts:payload})}).then(()=>{ setContacts(payload); setApiError(''); }).catch(err=>setApiError(err.message));
  }
  async function uploadQr(file){
    if(!file) return;
    setUploadingQr(true);
    try{
      const path = await uploadAdminFile(file);
      setContacts(c=>({...c, qrImage:path}));
      setApiError('');
    }catch(err){
      setApiError(err.message);
    }finally{
      setUploadingQr(false);
    }
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Контакты</h1><p className="muted">Контакты и банковские реквизиты публичного сайта.</p></div><button className="btn btn-green" disabled><Icon name="check" size={16}/> Сохранить</button></div>
        <AdminFormSkeleton blocks={3}/>
      </div>
    );
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Контакты</h1><p className="muted">Контакты и банковские реквизиты публичного сайта.</p></div><button className="btn btn-green" onClick={save}><Icon name="check" size={16}/> Сохранить</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <div className="stack" style={{gap:16,marginTop:22,maxWidth:720}}>
        <CollapsibleAdminSection title="Основные контакты" subtitle="Телефоны, email, адрес и часы работы" defaultOpen storageKey="krsu-contacts:main" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:14}}>
            <div className="stack" style={{gap:10}}>
              <div className="spread"><label className="field-label">Телефоны</label><button className="btn btn-ghost btn-sm" onClick={addPhone}><Icon name="plus" size={14}/> Телефон</button></div>
              {(contacts.phones||[]).map((phone,index)=>(
                <div key={index} className="row gap10"><input className="input" value={phone} onChange={e=>updatePhone(index,e.target.value)}/><button className="ibtn ibtn--danger" onClick={()=>removePhone(index)}><Icon name="trash" size={15}/></button></div>
              ))}
            </div>
            <div className="field"><label>Email</label><input className="input" type="email" value={contacts.email||''} onChange={e=>update('email',e.target.value)}/></div>
            <div className="field"><label>Адрес</label><textarea className="textarea" value={contacts.address||''} onChange={e=>update('address',e.target.value)}/></div>
            <div className="field"><label>Часы работы</label><input className="input" value={contacts.hours||''} onChange={e=>update('hours',e.target.value)}/></div>
          </div>
        </CollapsibleAdminSection>

        <CollapsibleAdminSection title="Образование · счёт КРСУ" subtitle="Единственный способ оплаты курсов: банковские реквизиты КРСУ" storageKey="krsu-contacts:payment" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:14}}>
            <div className="field"><label>Получатель платежа</label><input className="input" value={contacts.receiver||''} onChange={e=>update('receiver',e.target.value)} placeholder="КРСУ · Лаборатория БПЛА"/></div>
            <div className="grid g2" style={{gap:12}}>
              <div className="field"><label>Расчётный счёт</label><input className="input" value={contacts.account||''} onChange={e=>update('account',e.target.value)}/></div>
              <div className="field"><label>БИК</label><input className="input" value={contacts.bik||''} onChange={e=>update('bik',e.target.value)}/></div>
            </div>
            <div className="grid g2" style={{gap:12}}>
              <div className="field"><label>ИНН</label><input className="input" value={contacts.inn||''} onChange={e=>update('inn',e.target.value)}/></div>
              <div className="field"><label>ОКПО</label><input className="input" value={contacts.okpo||''} onChange={e=>update('okpo',e.target.value)}/></div>
            </div>
            <div className="field"><label>Инструкция для оплаты обучения</label><textarea className="textarea" value={contacts.bankPaymentText||''} onChange={e=>update('bankPaymentText',e.target.value)} placeholder="Оплата обучения принимается только по реквизитам КРСУ."/></div>
          </div>
        </CollapsibleAdminSection>

        <CollapsibleAdminSection title="Гонки · отдельный QR-код" subtitle="Тестовый QR отдельного счёта для гонок и Лиги дронов" storageKey="krsu-contacts:qr" style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="stack" style={{gap:14}}>
            <div className="note">Этот QR-код показывается только при оплате гонок и членства в Лиге. В разделе «Образование» QR-код не используется.</div>
            <div className="field">
              <label>Ссылка на тестовый QR-код гонок</label>
              <input className="input" value={contacts.qrImage||''} onChange={e=>update('qrImage',e.target.value)} placeholder="uploads/qr.png или https://..."/>
              <AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Выбрать QR-код гонок" onSelect={uploadQr} style={{marginTop:8}}/>
              {uploadingQr && <div className="muted" style={{fontSize:12,marginTop:8}}>Загружаю QR-код…</div>}
              {contacts.qrImage && <img src={contacts.qrImage} alt="QR оплаты гонок" style={{marginTop:12,width:180,maxWidth:'100%',borderRadius:18,border:'1px solid rgba(10,60,80,.12)',background:'#fff',padding:10}}/>}
            </div>
            <div className="field"><label>Инструкция для оплаты гонок по QR</label><textarea className="textarea" value={contacts.paymentText||''} onChange={e=>update('paymentText',e.target.value)}/></div>
          </div>
        </CollapsibleAdminSection>
      </div>
    </div>
  );
}

function AdminQuestions({ go, adminState }){
  const [courses,setCourses]=useState([]);
  const [course,setCourse]=useState('');
  const [qs,setQs]=useState({});
  const [loading,setLoading]=useState(true);
  const [apiError,setApiError]=useState('');
  const list=qs[course]||[];
  const [editing,setEditing]=useState(null); // index or 'new'
  const [draft,setDraft]=useState(null);
  const [draggingIndex,setDraggingIndex]=useState(null);
  const [draggingAnswerIndex,setDraggingAnswerIndex]=useState(null);
  const [uploadingMedia,setUploadingMedia]=useState('');
  const questionSectionKey = editing==='new' ? `new:${course}` : `${course}:${editing ?? 'list'}`;

  useEffect(()=>{
    let alive=true;
    Promise.all([apiFetch('/courses.php'), apiFetch('/tests.php')])
      .then(([courseData,testData])=>{
        if(!alive) return;
        setCourses(courseData.courses);
        setQs(testData.tests);
        if(courseData.courses[0]) setCourse(courseData.courses[0].id);
        setApiError('');
      })
      .catch(err=>{
        if(alive){
          setCourses(D6.courses);
          setQs(JSON.parse(JSON.stringify(D6.tests)));
          if(D6.courses[0]) setCourse(D6.courses[0].id);
          setApiError(err.message);
        }
      })
      .finally(()=>{ if(alive) setLoading(false); });
    return ()=>{ alive=false; };
  },[]);

  useEffect(()=>{
    const fallbackCourse = courses[0]?.id || '';
    const routeCourse = courses.some(c=>String(c.id)===String(adminState.entityId||'')) ? adminState.entityId : fallbackCourse;
    if(routeCourse && routeCourse!==course) setCourse(routeCourse);

    const currentList = qs[routeCourse] || [];
    if(adminState.action==='edit'){
      const index = Number(adminState.extraId);
      if(Number.isInteger(index) && currentList[index]){
        setEditing(index);
        const item=JSON.parse(JSON.stringify(currentList[index]));
        setDraft({...item,image:item.image||'',answerImages:item.a.map((_,i)=>item.answerImages?.[i]||'')});
        return;
      }
    }
    if(adminState.action==='new'){
      setEditing('new');
      setDraft({q:'',image:'',a:['','',''],answerImages:['','',''],correct:0});
      return;
    }
    setEditing(null);
    setDraft(null);
  },[adminState.action, adminState.entityId, adminState.extraId, courses, qs, course]);

  function persistQuestions(courseId, questions){
    apiFetch('/tests.php',{method:'PUT',body:JSON.stringify({course_id:courseId,questions})}).catch(err=>setApiError(err.message));
  }
  function startNew(){ go('admin', buildAdminState('questions','new', course)); }
  function startEdit(i){ go('admin', buildAdminState('questions','edit', course, i)); }
  function reorderQuestions(targetIndex){
    if(draggingIndex===null || draggingIndex===targetIndex) return;
    const arr = [...list];
    const [moved] = arr.splice(draggingIndex, 1);
    arr.splice(targetIndex, 0, moved);
    setQs(prev=>({...prev,[course]:arr}));
    setDraggingIndex(null);
    persistQuestions(course,arr);
  }
  function reorderAnswers(targetIndex){
    if(!draft || draggingAnswerIndex===null || draggingAnswerIndex===targetIndex) return;
    const answers = draft.a.map((value,index)=>({value,image:draft.answerImages?.[index]||'',index}));
    const [moved] = answers.splice(draggingAnswerIndex, 1);
    answers.splice(targetIndex, 0, moved);
    setDraft({
      ...draft,
      a: answers.map(item=>item.value),
      answerImages: answers.map(item=>item.image),
      correct: answers.findIndex(item=>item.index===draft.correct),
    });
    setDraggingAnswerIndex(null);
  }
  async function uploadQuestionImage(file){
    setUploadingMedia('question');setApiError('');
    try{const path=await uploadAdminFile(file);setDraft(current=>({...current,image:path}));}
    catch(err){setApiError(err.message||'Не удалось загрузить изображение');}
    finally{setUploadingMedia('');}
  }
  async function uploadAnswerImage(index,file){
    setUploadingMedia(`answer-${index}`);setApiError('');
    try{
      const path=await uploadAdminFile(file);
      setDraft(current=>{const images=current.a.map((_,i)=>current.answerImages?.[i]||'');images[index]=path;return {...current,answerImages:images};});
    }catch(err){setApiError(err.message||'Не удалось загрузить изображение');}
    finally{setUploadingMedia('');}
  }
  function save(){
    const arr=[...list];
    if(editing==='new') arr.push(draft); else arr[editing]=draft;
    setQs(prev=>({...prev,[course]:arr}));
    persistQuestions(course,arr);
    go('admin', buildAdminState('questions','course', course));
  }
  function del(i){
    const arr=list.filter((_,j)=>j!==i);
    setQs(prev=>({...prev,[course]:arr}));
    persistQuestions(course,arr);
  }
  if(loading && !apiError){
    return (
      <div className="cab-page">
        <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Тесты и вопросы</h1><p className="muted">Создавайте и редактируйте вопросы аттестации для каждого курса.</p></div><button className="btn btn-primary" disabled><Icon name="plus" size={16}/> Добавить вопрос</button></div>
        <AdminFormSkeleton blocks={2}/>
      </div>
    );
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf"><div><h1 style={{fontSize:28}}>Тесты и вопросы</h1><p className="muted">Создавайте и редактируйте вопросы аттестации для каждого курса.</p></div><button className="btn btn-primary" onClick={startNew}><Icon name="plus" size={16}/> Добавить вопрос</button></div>
      <AdminApiNotice loading={loading} error={apiError}/>
      <div className="stack" style={{gap:16,marginTop:20}}>
        <CollapsibleAdminSection title="Курс и банк вопросов" subtitle="Выбор курса и список вопросов для итогового теста" defaultOpen storageKey={`krsu-questions:${course}:list`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
          <div className="field" style={{maxWidth:380,marginBottom:16}}>
            <label>Курс</label>
            <select className="select" value={course} onChange={e=>go('admin', buildAdminState('questions','course', e.target.value))}>
              {courses.map(c=><option key={c.id} value={c.id}>{c.title}</option>)}
            </select>
          </div>
          <div className="note" style={{margin:'0 0 16px'}}>Перетаскивайте вопросы, чтобы менять порядок показа в тесте.</div>
          <div className="stack" style={{gap:14}}>
            {list.map((q,i)=>(
              <div
                key={i}
                className="qcard card"
                draggable
                onDragStart={()=>setDraggingIndex(i)}
                onDragEnd={()=>setDraggingIndex(null)}
                onDragOver={e=>e.preventDefault()}
                onDrop={()=>reorderQuestions(i)}
                style={{cursor:'grab', opacity:draggingIndex===i ? .55 : 1}}
                title="Перетащите, чтобы изменить порядок"
              >
                <div className="spread">
                  {q.image&&<img src={q.image} alt="" style={{width:86,height:64,objectFit:'cover',borderRadius:10,marginRight:12}}/>}
                  <div style={{flex:1}}><div className="muted" style={{fontSize:12,fontWeight:700,marginBottom:4}}>ВОПРОС {i+1}</div><b style={{fontSize:16}}>{q.q}</b></div>
                  <div className="row gap8"><button className="ibtn" onClick={()=>startEdit(i)}><Icon name="edit" size={16}/></button><button className="ibtn ibtn--danger" onClick={()=>del(i)}><Icon name="trash" size={16}/></button></div>
                </div>
                <div className="grid g2" style={{gap:10,marginTop:14}}>
                  {q.a.map((a,j)=>(<div key={j} className={`ans-pill ${j===q.correct?'correct':''}`} style={{alignItems:'center'}}>{q.answerImages?.[j]&&<img src={q.answerImages[j]} alt="" style={{width:44,height:36,objectFit:'cover',borderRadius:7,marginRight:7}}/>}{j===q.correct&&<Icon name="check" size={14}/>} {a||'Ответ изображением'}</div>))}
                </div>
              </div>
            ))}
            {list.length===0 && <div className="empty">Нет вопросов. Добавьте первый.</div>}
          </div>
        </CollapsibleAdminSection>
      </div>

      {editing!==null && draft && (
        <div className="modal" onClick={()=>go('admin', buildAdminState('questions','course', course))}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()}>
            <div className="spread" style={{marginBottom:18}}><h2 style={{fontSize:22}}>{editing==='new'?'Новый вопрос':'Редактирование'}</h2><button className="ibtn" onClick={()=>go('admin', buildAdminState('questions','course', course))}><Icon name="close" size={18}/></button></div>
            <div className="stack" style={{gap:14}}>
              <CollapsibleAdminSection title="Текст вопроса" subtitle="Основная формулировка для итогового теста" defaultOpen storageKey={`krsu-question-editor:${questionSectionKey}:question`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <div className="field"><label>Текст вопроса</label><textarea className="textarea" value={draft.q} onChange={e=>setDraft({...draft,q:e.target.value})} placeholder="Введите вопрос…"/></div>
                <div className="field" style={{marginTop:14}}><label>Изображение к вопросу <span className="muted">· необязательно</span></label><input className="input" value={draft.image||''} onChange={e=>setDraft({...draft,image:e.target.value})} placeholder="uploads/изображение.webp или https://…"/><div className="row gap8 wrapf" style={{marginTop:8}}><AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel="Загрузить изображение" onSelect={uploadQuestionImage}/>{draft.image&&<button className="btn btn-ghost btn-sm" onClick={()=>setDraft({...draft,image:''})}><Icon name="trash" size={14}/> Удалить</button>}{uploadingMedia==='question'&&<span className="muted">Загружаю…</span>}</div>{draft.image&&<img src={draft.image} alt="Предпросмотр вопроса" style={{display:'block',marginTop:12,maxWidth:'100%',maxHeight:280,objectFit:'contain',borderRadius:14,border:'1px solid rgba(10,60,80,.12)'}}/>}</div>
              </CollapsibleAdminSection>
              <CollapsibleAdminSection title="Варианты ответов" subtitle="Можно отмечать правильный и менять порядок перетаскиванием" defaultOpen storageKey={`krsu-question-editor:${questionSectionKey}:answers`} style={{marginTop:0,maxWidth:'100%',padding:18}}>
                <label className="field-label">Варианты ответов <span className="muted">· отметьте правильный</span></label>
                <div className="note" style={{margin:'8px 0 14px'}}>Ответы тоже можно перетаскивать, порядок сохранится.</div>
                <div className="stack" style={{gap:10,margin:'8px 0 0'}}>
                  {draft.a.map((a,j)=>(
                    <div
                      key={j}
                      className="row gap10"
                      draggable
                      onDragStart={()=>setDraggingAnswerIndex(j)}
                      onDragEnd={()=>setDraggingAnswerIndex(null)}
                      onDragOver={e=>e.preventDefault()}
                      onDrop={()=>reorderAnswers(j)}
                      style={{cursor:'grab', opacity:draggingAnswerIndex===j ? .55 : 1}}
                      title="Перетащите, чтобы изменить порядок ответа"
                    >
                      <button className={`radio ${draft.correct===j?'on':''}`} onClick={()=>setDraft({...draft,correct:j})}>{draft.correct===j&&<Icon name="check" size={13}/>}</button>
                      <div style={{flex:1}}><input className="input" value={a} onChange={e=>{const na=[...draft.a];na[j]=e.target.value;setDraft({...draft,a:na});}} placeholder={`Вариант ${j+1} (текст можно оставить пустым, если есть изображение)`}/><div className="row gap8 wrapf" style={{marginTop:7}}><AdminFilePicker accept="image/png,image/jpeg,image/webp" buttonLabel={draft.answerImages?.[j]?'Заменить картинку':'Добавить картинку'} onSelect={file=>uploadAnswerImage(j,file)}/>{draft.answerImages?.[j]&&<button className="btn btn-ghost btn-sm" onClick={()=>{const images=draft.a.map((_,i)=>draft.answerImages?.[i]||'');images[j]='';setDraft({...draft,answerImages:images});}}>Убрать</button>}{uploadingMedia===`answer-${j}`&&<span className="muted">Загружаю…</span>}</div>{draft.answerImages?.[j]&&<img src={draft.answerImages[j]} alt={`Вариант ${j+1}`} style={{display:'block',marginTop:8,width:150,height:100,objectFit:'contain',borderRadius:10,border:'1px solid rgba(10,60,80,.12)'}}/>}</div>
                      {draft.a.length>2 && <button className="ibtn ibtn--danger" onClick={()=>{const na=draft.a.filter((_,k)=>k!==j);const ni=draft.a.map((_,k)=>draft.answerImages?.[k]||'').filter((_,k)=>k!==j);const correct=draft.correct===j?0:(draft.correct>j?draft.correct-1:draft.correct);setDraft({...draft,a:na,answerImages:ni,correct:Math.min(correct,na.length-1)});}}><Icon name="trash" size={15}/></button>}
                    </div>
                  ))}
                  {draft.a.length<5 && <button className="btn btn-ghost btn-sm" style={{alignSelf:'flex-start'}} onClick={()=>setDraft({...draft,a:[...draft.a,''],answerImages:[...(draft.answerImages||[]),'']})}><Icon name="plus" size={14}/> Вариант</button>}
                </div>
              </CollapsibleAdminSection>
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end'}}><button className="btn btn-ghost" onClick={()=>go('admin', buildAdminState('questions','course', course))}>Отмена</button><button className="btn btn-green" onClick={save} disabled={!draft.q.trim()||draft.a.some((answer,index)=>!answer.trim()&&!draft.answerImages?.[index])||!!uploadingMedia}>Сохранить</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

function AdminFaq(){
  const [list,setList]=useState(null);
  const [loading,setLoading]=useState(true);
  const [err,setErr]=useState(null);
  const [editing,setEditing]=useState(null);
  const [draft,setDraft]=useState(null);
  const [saving,setSaving]=useState(false);
  const [saveErr,setSaveErr]=useState(null);
  const [draggingIndex,setDraggingIndex]=useState(null);
  const [importing,setImporting]=useState(false);
  const [importConfirm,setImportConfirm]=useState(false);

  useEffect(()=>{ load(); },[]);

  async function load(){
    setLoading(true); setErr(null);
    try{
      const data = await apiFetch('/content.php?type=faq');
      setList(Array.isArray(data.faq) ? data.faq : (D6.faq || []));
    }catch(e){
      setErr(e.message);
      setList(D6.faq || []);
    }
    setLoading(false);
  }

  async function toggleActive(item){
    const prev = list;
    setList(l=>l.map(x=>x.id===item.id ? {...x,active:!x.active} : x));
    try{
      await apiFetch('/content.php?type=faq', {method:'PATCH', body:JSON.stringify({id:item.id,toggle_active:true})});
    }catch(e){ setList(prev); }
  }

  const [deletingId,setDeletingId]=useState(null);

  async function del(item){
    setDeletingId(item.id);
  }
  async function delConfirmed(){
    const item = list.find(x=>x.id===deletingId);
    if(!item) return;
    setDeletingId(null);
    const prev = list;
    setList(l=>l.filter(x=>x.id!==item.id));
    try{
      await apiFetch('/content.php?type=faq', {method:'DELETE', body:JSON.stringify({id:item.id})});
    }catch(e){ setList(prev); }
  }

  async function saveOrder(ordered){
    try{
      await apiFetch('/content.php?type=faq', {method:'PATCH', body:JSON.stringify({order:ordered.map(x=>x.id)})});
    }catch(e){}
  }

  function drop(toIndex){
    if(draggingIndex===null || draggingIndex===toIndex) return;
    const next = [...list];
    const [item] = next.splice(draggingIndex,1);
    next.splice(toIndex,0,item);
    const ordered = next.map((x,i)=>({...x,sort_order:(i+1)*10}));
    setList(ordered);
    setDraggingIndex(null);
    saveOrder(ordered);
  }

  async function importDemo(){
    const demo = _DEMO_FAQ_SNAPSHOT;
    if(!demo.length) return;
    setImporting(true);
    setImportConfirm(false);
    try{
      const added = [];
      for(const item of demo){
        const data = await apiFetch('/content.php?type=faq', {method:'POST', body:JSON.stringify({q:item.q,a:item.a,active:item.active,sort_order:item.sort_order})});
        added.push({...item, id:data.id});
      }
      setList(l=>[...(l||[]), ...added]);
    }catch(e){ setErr('Ошибка импорта: '+e.message); }
    setImporting(false);
  }

  function openNew(){ setDraft({q:'',a:'',active:true}); setEditing('new'); setSaveErr(null); }
  function openEdit(item){ setDraft({...item}); setEditing(item); setSaveErr(null); }
  function closeModal(){ setEditing(null); setDraft(null); setSaveErr(null); }

  async function save(){
    if(!draft.q.trim()) return;
    setSaving(true); setSaveErr(null);
    try{
      if(editing==='new'){
        const data = await apiFetch('/content.php?type=faq', {method:'POST', body:JSON.stringify({q:draft.q,a:draft.a||'',active:draft.active})});
        setList(l=>[...(l||[]), {...draft, id:data.id}]);
      } else {
        await apiFetch('/content.php?type=faq', {method:'PATCH', body:JSON.stringify({id:draft.id,q:draft.q,a:draft.a||'',active:draft.active})});
        setList(l=>l.map(x=>x.id===draft.id ? {...x,...draft} : x));
      }
      closeModal();
    }catch(e){ setSaveErr(e.message); }
    setSaving(false);
  }

  return (
    <div className="cab-page">
      <div className="spread wrapf" style={{marginBottom:28}}>
        <div><h1 style={{fontSize:28}}>FAQ</h1><p className="muted" style={{marginTop:4}}>Часто задаваемые вопросы на публичном сайте. Перетащите карточки для сортировки.</p></div>
        <div className="row gap10">
          {!loading && list && list.length===0 && !importConfirm && !importing && _DEMO_FAQ_SNAPSHOT.length>0 && (
            <button className="btn btn-ghost" onClick={()=>setImportConfirm(true)}>Импортировать примеры</button>
          )}
          {importConfirm && !importing && (
            <div className="row gap8" style={{alignItems:'center'}}>
              <span className="muted" style={{fontSize:14}}>Добавить {_DEMO_FAQ_SNAPSHOT.length} вопросов?</span>
              <button className="btn btn-green btn-sm" onClick={importDemo}>Да, добавить</button>
              <button className="btn btn-ghost btn-sm" onClick={()=>setImportConfirm(false)}>Отмена</button>
            </div>
          )}
          {importing && <span className="muted" style={{fontSize:14}}>Импортируется…</span>}
          <button className="btn btn-navy" onClick={openNew}><Icon name="plus" size={16}/> Добавить вопрос</button>
        </div>
      </div>
      {err && <div className="note" style={{marginBottom:16}}>Ошибка загрузки: {err}. Показаны демо-данные.</div>}
      {loading && <AdminFormSkeleton blocks={4}/>}
      {!loading && list && (
        <div className="stack" style={{gap:10}}>
          {list.map((item,i)=>(
            <div
              key={item.id}
              className="card"
              style={{padding:'18px 22px',cursor:'grab',opacity:draggingIndex===i?.5:1,borderLeft:`4px solid ${item.active?'var(--green)':'var(--line)'}`}}
              draggable
              onDragStart={()=>setDraggingIndex(i)}
              onDragEnd={()=>setDraggingIndex(null)}
              onDragOver={e=>e.preventDefault()}
              onDrop={()=>drop(i)}
            >
              <div className="spread">
                <div style={{flex:1,minWidth:0}}>
                  <div className="row gap8" style={{alignItems:'center',marginBottom:6}}>
                    <span className={`badge badge--${item.active?'green':'gray'}`}>{item.active?'Активен':'Скрыт'}</span>
                    <span className="muted" style={{fontSize:12,fontWeight:600}}>#{i+1}</span>
                  </div>
                  <b style={{fontSize:15,lineHeight:1.5}}>{item.q}</b>
                </div>
                <div className="row gap8" style={{flexShrink:0,marginLeft:16}}>
                  <button className="ibtn" onClick={()=>toggleActive(item)} title={item.active?'Скрыть на сайте':'Показать на сайте'}><Icon name={item.active?'eye-off':'eye'} size={16}/></button>
                  <button className="ibtn" onClick={()=>openEdit(item)} title="Редактировать"><Icon name="edit" size={16}/></button>
                  <button className="ibtn ibtn--danger" onClick={()=>del(item)} title="Удалить"><Icon name="trash" size={16}/></button>
                </div>
              </div>
            </div>
          ))}
          {list.length===0 && <div className="empty">Нет вопросов. Нажмите «Добавить вопрос» или «Импортировать примеры».</div>}
        </div>
      )}

      {editing!==null && draft && (
        <div className="modal" onClick={closeModal}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()} style={{maxWidth:720,width:'100%'}}>
            <div className="spread" style={{marginBottom:20}}>
              <h2 style={{fontSize:20,fontWeight:800}}>{editing==='new'?'Новый вопрос':'Редактировать вопрос'}</h2>
              <button className="ibtn" onClick={closeModal}><Icon name="close" size={18}/></button>
            </div>
            <div className="stack" style={{gap:18}}>
              <div className="field">
                <label>Вопрос</label>
                <input className="input" value={draft.q} onChange={e=>setDraft({...draft,q:e.target.value})} placeholder="Введите вопрос…"/>
              </div>
              <div className="field">
                <label>Ответ</label>
                <TinyEditor value={draft.a||''} onChange={v=>setDraft({...draft,a:v})} placeholder="Введите ответ…" minHeight={240}/>
              </div>
              <label className="row gap10" style={{cursor:'pointer',alignItems:'center'}}>
                <input type="checkbox" checked={!!draft.active} onChange={e=>setDraft({...draft,active:e.target.checked})}/>
                <span>Показывать на сайте</span>
              </label>
              {saveErr && <div className="note note--danger">{saveErr}</div>}
            </div>
            <div className="row gap12" style={{justifyContent:'flex-end',marginTop:22}}>
              <button className="btn btn-ghost" onClick={closeModal}>Отмена</button>
              <button className="btn btn-green" onClick={save} disabled={saving||!draft.q.trim()}>{saving?'Сохранение…':'Сохранить'}</button>
            </div>
          </div>
        </div>
      )}

      {deletingId && (
        <div className="modal" onClick={()=>setDeletingId(null)}>
          <div className="modal__box card" onClick={e=>e.stopPropagation()} style={{maxWidth:440}}>
            <h2 style={{fontSize:18,fontWeight:800,marginBottom:10}}>Удалить вопрос?</h2>
            <p className="muted" style={{marginBottom:20}}>{list.find(x=>x.id===deletingId)?.q}</p>
            <div className="row gap12" style={{justifyContent:'flex-end'}}>
              <button className="btn btn-ghost" onClick={()=>setDeletingId(null)}>Отмена</button>
              <button className="btn btn-danger" onClick={delConfirmed}>Удалить</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Admin });