/* ===== Student cabinet: dashboard, course player, test ===== */
const D4 = window.DATA;
function lessonTitle(lesson){ return typeof lesson==='string' ? lesson : (lesson?.t || 'Урок'); }
function lessonVideo(lesson){ return typeof lesson==='object' && lesson ? lesson.video : ''; }
function lessonFile(lesson){ return typeof lesson==='object' && lesson ? lesson.file : ''; }
function isPdfFile(path){ return /\.pdf(?:[#?].*)?$/i.test(String(path || '')); }
function courseMediaUrl(accessCourseId,path){
  const value=String(path||'');
  const match=value.match(/^uploads\/courses\/([a-z0-9][a-z0-9-]{0,79})\/(.+)$/i);
  if(!match) return value;
  const mediaCourseId=match[1];
  const accessParam=mediaCourseId===String(accessCourseId||'')
    ? ''
    : `&access_course_id=${encodeURIComponent(accessCourseId)}`;
  return `api/course-media.php?course_id=${encodeURIComponent(mediaCourseId)}&path=${encodeURIComponent(match[2])}${accessParam}`;
}

function PdfLessonViewer({ src, title }){
  const canvasRef=useRef(null);
  const shellRef=useRef(null);
  const documentRef=useRef(null);
  const renderTaskRef=useRef(null);
  const [pageNumber,setPageNumber]=useState(1);
  const [pageCount,setPageCount]=useState(0);
  const [loading,setLoading]=useState(true);
  const [error,setError]=useState('');

  useEffect(()=>{
    let cancelled=false;
    setLoading(true);
    setError('');
    setPageNumber(1);
    setPageCount(0);
    documentRef.current=null;
    if(!window.pdfjsLib){
      setLoading(false);
      setError('Модуль просмотра PDF не загрузился. Обновите страницу.');
      return ()=>{};
    }
    window.pdfjsLib.GlobalWorkerOptions.workerSrc='assets/vendor/pdfjs/pdf.worker.min.js';
    const task=window.pdfjsLib.getDocument({url:src,withCredentials:true});
    task.promise.then(pdf=>{
      if(cancelled) return;
      documentRef.current=pdf;
      setPageCount(pdf.numPages);
      setLoading(false);
    }).catch(err=>{
      if(cancelled) return;
      setLoading(false);
      setError(err?.message || 'Не удалось открыть PDF.');
    });
    return ()=>{
      cancelled=true;
      documentRef.current=null;
      task.destroy();
    };
  },[src]);

  useEffect(()=>{
    const pdf=documentRef.current;
    const canvas=canvasRef.current;
    if(!pdf || !canvas || loading || error) return;
    let cancelled=false;
    pdf.getPage(pageNumber).then(page=>{
      if(cancelled) return;
      const baseViewport=page.getViewport({scale:1});
      const availableWidth=Math.max(280,Math.min(960,(shellRef.current?.clientWidth||900)-32));
      const scale=availableWidth/baseViewport.width;
      const viewport=page.getViewport({scale});
      const pixelRatio=Math.min(window.devicePixelRatio||1,2);
      const context=canvas.getContext('2d',{alpha:false});
      canvas.width=Math.floor(viewport.width*pixelRatio);
      canvas.height=Math.floor(viewport.height*pixelRatio);
      canvas.style.width=`${Math.floor(viewport.width)}px`;
      canvas.style.height=`${Math.floor(viewport.height)}px`;
      renderTaskRef.current=page.render({
        canvasContext:context,
        viewport,
        transform:pixelRatio===1?null:[pixelRatio,0,0,pixelRatio,0,0],
      });
      return renderTaskRef.current.promise;
    }).catch(err=>{
      if(!cancelled && err?.name!=='RenderingCancelledException'){
        setError(err?.message || 'Не удалось отобразить страницу PDF.');
      }
    });
    return ()=>{
      cancelled=true;
      renderTaskRef.current?.cancel();
      renderTaskRef.current=null;
    };
  },[pageNumber,pageCount,loading,error]);

  return (
    <div ref={shellRef} onContextMenu={e=>e.preventDefault()} style={{border:'1px solid rgba(10,60,80,.12)',borderRadius:18,background:'#eef3f4',overflow:'hidden'}}>
      <div className="spread wrapf" style={{padding:'10px 14px',gap:10,background:'#fff',borderBottom:'1px solid rgba(10,60,80,.1)'}}>
        <span className="muted" style={{fontSize:13}}>{loading?'Загрузка PDF…':error?'Ошибка просмотра':`${title} · страница ${pageNumber} из ${pageCount}`}</span>
        {!loading && !error && pageCount>1 && <div className="row gap8">
          <button className="btn btn-ghost btn-sm" disabled={pageNumber<=1} onClick={()=>setPageNumber(n=>Math.max(1,n-1))}><Icon name="chevLeft" size={14}/> Назад</button>
          <button className="btn btn-ghost btn-sm" disabled={pageNumber>=pageCount} onClick={()=>setPageNumber(n=>Math.min(pageCount,n+1))}>Далее <Icon name="chevRight" size={14}/></button>
        </div>}
      </div>
      <div style={{minHeight:420,padding:16,display:'flex',justifyContent:'center',alignItems:loading||error?'center':'flex-start',overflow:'auto'}}>
        {loading && <div className="muted">Подготавливаем материал урока…</div>}
        {error && <div className="note" style={{maxWidth:560,color:'#9f2d20'}}>{error}</div>}
        <canvas ref={canvasRef} aria-label={`PDF: ${title}`} style={{display:loading||error?'none':'block',maxWidth:'100%',background:'#fff',boxShadow:'0 8px 28px rgba(10,60,80,.12)'}}/>
      </div>
    </div>
  );
}

function CabShell({ active, go, onLogout, children, user }){
  const [menuOpen,setMenuOpen]=useState(false);
  const isLeagueMember = !isStaffRole(user?.role) && !!(user?.league_member || user?.leagueMember);
  const leagueItems = [
    { k:'league-rating', t:'Рейтинг', i:'trophy' },
    { k:'league-infrastructure', t:'Инфраструктура', i:'pin' },
    { k:'league-discounts', t:'Скидки', i:'star' },
    { k:'league-pilot-card', t:'Спортивная карточка', i:'award' },
    { k:'league-support', t:'Техподдержка', i:'wrench' },
  ];
  const studentItems = [
    { k:'cabinet', t:'Мои курсы', i:'book' },
    { k:'cab-materials', t:'Материалы', i:'doc' },
    { k:'cab-certs', t:'Сертификаты', i:'award' },
  ];
  const items = [
    ...(isLeagueMember ? leagueItems : studentItems),
    { k:'cab-settings', t:'Настройки', i:'settings' },
  ];
  function navTo(k){ go(k); setMenuOpen(false); }
  return (
    <div className="cab">
      <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">
          {items.map(it=>(
            <button key={it.k} className={`cab__link ${active===it.k?'on':''}`} onClick={()=>navTo(it.k)} title={it.t}>
              <Icon name={it.i} size={19}/>
              <span className="cab__link-label">{it.t}</span>
            </button>
          ))}
        </nav>
        <div className="cab__user">
          <Avatar name={user.name} color="var(--green-600)"/>
          <div style={{flex:1,minWidth:0}}><b style={{fontSize:14,display:'block',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{user.name}</b><div className="muted" style={{fontSize:12}}>{isLeagueMember?'Участник Лиги':'Студент'}</div></div>
          <button className="cab__logout" onClick={onLogout} title="Выйти"><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>
          <button className="cab__burger" onClick={()=>setMenuOpen(v=>!v)} aria-label="Меню">
            <Icon name={menuOpen?'close':'menu'} size={20}/>
          </button>
        </div>
        {children}
      </main>
    </div>
  );
}

function Dashboard({ go, enroll, user }){
  const data = enroll.map(e=>({ ...e, course: D4.courses.find(c=>c.id===e.id) })).filter(x=>x.course);
  const active = data.filter(d=>d.access==='open');
  const done = data.filter(d=>d.progress===100).length;
  const avg = (()=>{ const s=data.filter(d=>d.testScore!=null); return s.length?Math.round(s.reduce((a,b)=>a+b.testScore,0)/s.length):'—'; })();
  return (
    <div className="cab-page">
      <div className="spread wrapf" style={{marginBottom:8}}>
        <div><h1 style={{fontSize:30}}>Привет, {user?.name || 'студент'} 👋</h1><p className="muted">Продолжайте обучение с того места, где остановились.</p></div>
        <button className="btn btn-ghost" onClick={()=>go('education')}><Icon name="plus" size={16}/> Новый курс</button>
      </div>
      <div className="grid g4" style={{margin:'24px 0 8px'}}>
        <div className="kpi card"><div className="ic-badge"><Icon name="book" size={18}/></div><div><b>{active.length}</b><span>активных курсов</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="checkCircle" size={18}/></div><div><b>{done}</b><span>завершено</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="target" size={18}/></div><div><b>{avg}{avg!=='—'?'%':''}</b><span>средний балл</span></div></div>
        <div className="kpi card"><div className="ic-badge"><Icon name="clock" size={18}/></div><div><b>14ч</b><span>в этом месяце</span></div></div>
      </div>

      <h2 style={{fontSize:22,margin:'28px 0 16px'}}>Мои курсы</h2>
      <div className="stack" style={{gap:16}}>
        {data.map(d=>(<EnrollRow key={d.id} d={d} go={go}/>))}
      </div>
    </div>
  );
}

function EnrollRow({ d, go }){
  const c=d.course;
  const league = D4.leagueMembership || {};
  const displayTitle = c.id==='racing' && league.title ? league.title : c.title;
  const isLeague = c.id==='racing';
  const locked = d.access!=='open';
  return (
    <div className={`enroll card ${locked?'enroll--lock':''}`}>
      <div className="enroll__icon" style={{background:c.color}}><Icon name={c.icon} size={26} style={{color:'#fff'}}/></div>
      <div className="enroll__main">
        <div className="row gap8 wrapf" style={{marginBottom:6}}>
          <b style={{fontSize:17}}>{displayTitle}</b>
          {d.status==='Завершён' && <span className="badge green"><Icon name="check" size={12}/>Завершён</span>}
          {d.status==='В процессе' && <span className="badge navy">В процессе</span>}
          {locked && <span className="badge amber"><Icon name="lock" size={12}/>{d.status}</span>}
        </div>
        {!locked ? (
          isLeague
            ? <div className="row gap8 wrapf" style={{marginTop:2}}>
                <span className="badge green"><Icon name="check" size={12}/> Активно</span>
                {d.leaguePlan && <span className="badge navy">{d.leaguePlan}</span>}
                <span className="chip">Действует до {d.validUntil || '—'}</span>
              </div>
            : <div className="row gap12" style={{maxWidth:420}}>
                <div className="bar" style={{flex:1}}><i style={{width:d.progress+'%'}}></i></div>
                <span className="muted" style={{fontSize:13,fontWeight:700}}>{d.progress}%</span>
              </div>
        ) : <p className="muted" style={{fontSize:14}}>Доступ откроется после подтверждения оплаты администратором.</p>}
        {d.testScore!=null && <div className="row gap8" style={{marginTop:8,fontSize:13.5,color:'var(--green-700)',fontWeight:700}}><Icon name="award" size={15}/> Результат теста: {d.testScore}%</div>}
      </div>
      <div className="enroll__act">
        {locked
          ? <button className="btn btn-ghost btn-sm" onClick={()=>go('payment',c.id)}>К оплате</button>
          : isLeague
            ? <span className="muted" style={{fontSize:13.5,fontWeight:700,textAlign:'right'}}>{d.leaguePlan || 'Членство'}<br/>{d.validUntil ? `до ${d.validUntil}` : 'срок не указан'}</span>
            : <button className="btn btn-primary btn-sm" onClick={()=>go('player',c.id)}>{d.progress===100?'Открыть':'Продолжить'} <Icon name="arrowRight" size={15}/></button>}
      </div>
    </div>
  );
}

/* ---------------- COURSE PLAYER ---------------- */
function Player({ id, go, enroll, onProgress }){
  const c = D4.courses.find(x=>x.id===id)||D4.courses[0];
  const e = enroll.find(x=>x.id===id)||{progress:0};
  const flat=[]; c.modules.forEach((m,mi)=>m.lessons.forEach((l,li)=>flat.push({l,mi,li,t:m.t})));
  const legacyCompletedCount=Math.max(0,Math.min(flat.length,Math.round(((e.progress||0)/100)*flat.length)));
  const initialCompletedLessons=Array.isArray(e.completedLessons)
    ? [...new Set(e.completedLessons.filter(index=>Number.isInteger(index)&&index>=0&&index<flat.length))].sort((a,b)=>a-b)
    : Array.from({length:legacyCompletedCount},(_,index)=>index);
  const initialLessonIndex=initialCompletedLessons.length<flat.length
    ? Math.max(0,Array.from({length:flat.length},(_,index)=>index).find(index=>!initialCompletedLessons.includes(index))??0)
    : 0;
  const [cur,setCur]=useState(initialLessonIndex);
  const [completedLessons,setCompletedLessons]=useState(initialCompletedLessons);
  const [progressError,setProgressError]=useState('');
  const [finishing,setFinishing]=useState(false);
  const lesson=flat[cur];
  const rawMaterialSrc = lessonFile(lesson.l);
  const rawVideoSrc = lessonVideo(lesson.l);
  const materialSrc = courseMediaUrl(c.id,rawMaterialSrc);
  const videoSrc = courseMediaUrl(c.id,rawVideoSrc);
  const materialIsPdf = isPdfFile(rawMaterialSrc);
  const lessonAssetMatch=String(rawMaterialSrc||'').match(/^(uploads\/courses\/[^/]+\/lesson-\d+)\/presentation\.pdf$/i);
  const lessonAssetBase=lesson.l?.assetBase||lessonAssetMatch?.[1]||'';
  const explicitMaterials=Array.isArray(lesson.l?.materials)?lesson.l.materials:null;
  const materialEnabled=key=>explicitMaterials===null||explicitMaterials.includes(key);
  const defaultMaterialKey=materialEnabled('pdf')&&materialSrc&&materialIsPdf
    ? 'pdf'
    : materialEnabled('docx')&&lessonAssetBase ? 'docx' : null;
  const lessonMaterials=[
    materialEnabled('pdf') && materialSrc && materialIsPdf ? {key:'pdf',label:'PDF',icon:'doc',kind:'pdf',src:materialSrc,title:'Презентация PDF'} : null,
    materialEnabled('audio') && lessonAssetBase ? {key:'audio',label:'Аудио',icon:'play',kind:'audio',src:courseMediaUrl(c.id,`${lessonAssetBase}/audio.m4a`),title:'Аудиолекция'} : null,
    materialEnabled('pptx') && lessonAssetBase ? {key:'pptx',label:'PPTX',icon:'layers',kind:'pdf',src:courseMediaUrl(c.id,`${lessonAssetBase}/presentation-preview.pdf`),title:'Презентация PowerPoint'} : null,
    materialEnabled('docx') && lessonAssetBase ? {key:'docx',label:'DOCX',icon:'doc',kind:'pdf',src:courseMediaUrl(c.id,`${lessonAssetBase}/notes-preview.pdf`),title:'Конспект DOCX'} : null,
    c.id==='aeronavigation-bpla-part-1' && /\/lesson-03$/i.test(lessonAssetBase)
      ? {key:'audio-2',label:'Доп. аудио',icon:'play',kind:'audio',src:courseMediaUrl(c.id,`${lessonAssetBase}/audio-2.m4a`),title:'Дополнительная аудиолекция'}
      : null,
  ].filter(Boolean);
  const [activeMaterial,setActiveMaterial]=useState(defaultMaterialKey);
  const selectedMaterial=lessonMaterials.find(item=>item.key===activeMaterial)||null;
  const isLast = cur===flat.length-1;
  const currentCompleted=completedLessons.includes(cur);
  const allLessonsCompleted=completedLessons.length===flat.length;
  const canFinishFromLast=isLast&&(allLessonsCompleted||(!currentCompleted&&completedLessons.length===flat.length-1));
  useEffect(()=>{
    setActiveMaterial(defaultMaterialKey);
  },[cur, defaultMaterialKey]);
  function goLesson(next){
    const bounded = Math.max(0, Math.min(flat.length-1, next));
    setCur(bounded);
  }
  function setLessonCompletion(index,completed){
    setProgressError('');
    setCompletedLessons(current=>{
      const next=completed?[...new Set([...current,index])]:current.filter(value=>value!==index);
      return next.sort((a,b)=>a-b);
    });
    const request=onProgress&&onProgress(c.id,index,flat.length,completed);
    if(request&&typeof request.catch==='function'){
      return request.catch(error=>{
        setCompletedLessons(current=>completed?current.filter(value=>value!==index):[...new Set([...current,index])].sort((a,b)=>a-b));
        setProgressError(error?.message||'Не удалось сохранить прохождение урока. Обновите страницу и попробуйте ещё раз.');
        throw error;
      });
    }
    return Promise.resolve();
  }
  function goNextLesson(){
    if(!currentCompleted)setLessonCompletion(cur,true).catch(()=>{});
    goLesson(cur+1);
  }
  async function finishAndOpenTest(){
    if(!canFinishFromLast||finishing)return;
    setFinishing(true);
    try{
      if(!currentCompleted)await setLessonCompletion(cur,true);
      go('test',c.id);
    }catch(error){}
    finally{setFinishing(false);}
  }
  return (
    <div className="player">
      <div className="player__bar">
        <button className="back" onClick={()=>go('cabinet')}><Icon name="chevLeft" size={16}/> Кабинет</button>
        <b style={{fontSize:15,textAlign:'center',flex:1}}>{c.title}</b>
        <span className="muted" style={{fontSize:13}}>Урок {cur+1} / {flat.length}</span>
      </div>
      <div className="player__grid">
        <div className="player__stage scroll">
          <div className="player__video">
            {videoSrc
              ? <video src={videoSrc} controls controlsList="nodownload" disablePictureInPicture onEnded={()=>setLessonCompletion(cur,true).catch(()=>{})} onContextMenu={e=>e.preventDefault()} style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',borderRadius:'inherit'}}></video>
              : <Ph label="Видео пока не загружено" style={{position:'absolute',inset:0,borderRadius:'inherit'}}><span className="muted" style={{fontSize:13}}>Используйте доступный конспект урока</span></Ph>}
          </div>
          <div className="player__content">
            <span className="eyebrow">{lesson.t}</span>
            <h1 style={{fontSize:28,margin:'10px 0 14px'}}>{lessonTitle(lesson.l)}</h1>
            <p className="muted" style={{fontSize:16}}>В этом уроке разбираем тему на практике: ключевые понятия, демонстрация на симуляторе и чек-лист для самостоятельной отработки. Учебные материалы и конспект доступны во вкладке ниже.</p>
            <div className="row gap8 wrapf" style={{margin:'20px 0'}}>
              {lessonMaterials.map(item=>(
                <button key={item.key} className={`chip ${activeMaterial===item.key?'navy':''}`} onClick={()=>setActiveMaterial(current=>current===item.key?null:item.key)}>
                  <Icon name={item.icon} size={14}/> {item.label}
                </button>
              ))}
              {!lessonMaterials.length && <span className="chip"><Icon name="doc" size={14}/> Материалы не прикреплены</span>}
              {videoSrc && <span className="chip"><Icon name="video" size={14}/> Защищённое видео</span>}
              <span className="chip"><Icon name="layers" size={14}/> Симулятор-сценарий</span>
              <button className={`chip ${currentCompleted?'navy':''}`} onClick={()=>setLessonCompletion(cur,!currentCompleted).catch(()=>{})}><Icon name={currentCompleted?'checkCircle':'check'} size={14}/> {currentCompleted?'Урок пройден — снять отметку':'Отметить урок пройденным'}</button>
            </div>
            {selectedMaterial && (
              <div className="card" style={{padding:18,margin:'0 0 20px',overflow:'hidden'}}>
                <div className="spread wrapf" style={{gap:12,marginBottom:14}}>
                  <b style={{fontSize:16}}>{selectedMaterial.title}</b>
                  <button className="btn btn-ghost btn-sm" onClick={()=>setActiveMaterial(null)}>
                    <Icon name="close" size={14}/> Скрыть
                  </button>
                </div>
                {selectedMaterial.kind==='audio'
                  ? <div className="card" style={{padding:24,background:'#eef5f2'}} onContextMenu={e=>e.preventDefault()}>
                      <audio key={selectedMaterial.src} src={selectedMaterial.src} controls controlsList="nodownload" style={{width:'100%'}}/>
                    </div>
                  : <PdfLessonViewer src={selectedMaterial.src} title={`${lessonTitle(lesson.l)} · ${selectedMaterial.title}`}/>}
              </div>
            )}
            <div className="player__navbtns">
              <button className="btn btn-ghost" disabled={cur===0} style={{opacity:cur===0 ? .4 : 1}} onClick={()=>goLesson(cur-1)}><Icon name="chevLeft" size={16}/> Назад</button>
              {isLast
                ? <button className="btn btn-green btn-lg" disabled={!canFinishFromLast||finishing} style={{opacity:canFinishFromLast&&!finishing?1:.55}} title={canFinishFromLast?'':'Сначала отметьте пройденными остальные уроки'} onClick={finishAndOpenTest}>{finishing?'Сохраняем…':currentCompleted?'Перейти к тестированию':'Завершить урок и перейти к тестированию'} <Icon name="award" size={18}/></button>
                : <button className="btn btn-primary" onClick={goNextLesson}>Завершить и перейти далее <Icon name="arrowRight" size={16}/></button>}
            </div>
            {isLast&&!canFinishFromLast&&<div className="note" style={{marginTop:12}}>Для тестирования отметьте пройденными остальные уроки. Осталось: {flat.length-completedLessons.length}.</div>}
            {progressError&&<div className="note note--danger" style={{marginTop:12}}>{progressError}</div>}
          </div>
        </div>
        <aside className="player__list scroll">
          <b style={{fontSize:14,padding:'4px 4px 12px'}}>Программа курса</b>
          {c.modules.map((m,mi)=>(
            <div key={mi} className="pl-mod">
              <div className="pl-mod__t">{String(mi+1).padStart(2,'0')} · {m.t}</div>
              {m.lessons.map((l,li)=>{
                const idx=flat.findIndex(f=>f.mi===mi&&f.li===li);
                const doneL=completedLessons.includes(idx), on=idx===cur;
                return (
                  <button key={li} className={`pl-lesson ${on?'on':''}`} onClick={()=>goLesson(idx)}>
                    <span className={`pl-dot ${doneL?'done':''} ${on?'cur':''}`}>{doneL?<Icon name="check" size={12}/>:''}</span>
                    <span style={{flex:1}}>{lessonTitle(l)}</span>
                  </button>
                );
              })}
            </div>
          ))}
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { CabShell, Dashboard, Player });