/* ============================================================
   EMPLOYEE views -> window.Employee
   ============================================================ */
(function () {
const { useState, useEffect, useRef } = React;
const D = window.DATA;
const ME = D.me;

const NAV = [
  { id:'learning',  label:'My Learning', icon:'book' },
  { id:'catalogue', label:'Available',   icon:'grid' },
  { id:'completed', label:'Completed',   icon:'award' },
];
const PAGE_META = {
  learning:  { crumb:ME.workplace+' · Learner', title:'My Learning' },
  catalogue: { crumb:ME.workplace, title:'Available Courses' },
  completed: { crumb:ME.workplace, title:'Completed' },
};

// enrich me.courses with course meta; inject a failed retry demo course
const myCourses = ME.courses.map(mc=>({ ...mc, course: D.courseById(mc.courseId) }));
const retryDemo = { courseId:'c3', status:'failed', progress:100, due:'30 Jun 2026', assigned:true, score:62, last:'24 May 2026', course:D.courseById('c3') };

function dueMeta(due, status) {
  if (status==='completed') return null;
  // simple: flag overdue/soon for demo
  if (status==='overdue') return { cls:'danger', txt:'Overdue' };
  return { cls:'neutral', txt:'Due '+due };
}

/* ---------- MY LEARNING ---------- */
function Learning({ onLaunch, toast }) {
  const active = myCourses.filter(c=>c.status==='in_progress'||c.status==='not_started'||c.status==='overdue');
  const list = [...active, retryDemo];
  const next = myCourses.find(c=>c.status==='in_progress') || list[0];
  return (
    <div className="fade-in">
      {/* resume hero */}
      <div className="card" style={{ overflow:'hidden', marginBottom:24, border:0 }}>
        <div style={{ background:'var(--grad)', padding:'28px 30px', color:'#fff', position:'relative' }}>
          <div style={{ position:'absolute', right:0, bottom:0, width:'40%', height:'140%', background:'radial-gradient(ellipse at bottom right, rgba(255,255,255,0.16), transparent 65%)' }}></div>
          <div style={{ position:'relative' }}>
            <div className="kicker" style={{ color:'rgba(255,255,255,0.85)', marginBottom:10 }}>Pick up where you left off</div>
            <div className="row gap16" style={{ alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:18 }}>
              <div style={{ maxWidth:520 }}>
                <h1 className="h-page" style={{ color:'#fff', fontSize:30, marginBottom:8 }}>{next.course.name}</h1>
                <p style={{ color:'rgba(255,255,255,0.85)', fontSize:14, margin:'0 0 16px' }}>{next.resume || next.course.desc}</p>
                <div style={{ maxWidth:340, marginBottom:16 }}>
                  <div className="row gap8" style={{ justifyContent:'space-between', marginBottom:6 }}>
                    <span style={{ fontSize:12, fontFamily:'var(--f-mono)', letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.8)' }}>{next.progress}% complete</span>
                  </div>
                  <div className="pbar" style={{ background:'rgba(255,255,255,0.22)' }}><span style={{ width:next.progress+'%', background:'#fff' }}></span></div>
                </div>
                <button className="btn lg" style={{ background:'#fff', color:'var(--brand)' }} onClick={()=>onLaunch(next)}>
                  <Icon n="play" size={17} />{next.progress>0?'Resume course':'Start course'}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <SectionHead kicker={list.length+' to do'} title="Assigned to you" />
      <div className="grid" style={{ gridTemplateColumns:'repeat(2,1fr)' }}>
        {list.map((mc,i)=>{
          const dm = dueMeta(mc.due, mc.status);
          return (
            <div key={i} className="card pad" style={{ display:'flex', flexDirection:'column', gap:14 }}>
              <div className="row gap12">
                <Swatch course={mc.course} size={46} font={16} />
                <div style={{ flex:1, minWidth:0 }}>
                  <div className="row gap8" style={{ marginBottom:4 }}>
                    {mc.status==='failed'? <Badge status="failed" /> : mc.status==='overdue'? <Badge status="overdue" /> : <Badge status={mc.status} />}
                    {mc.assigned && <span className="pill-soft">Assigned</span>}
                  </div>
                  <div className="h-card" style={{ fontSize:15.5 }}>{mc.course.name}</div>
                </div>
              </div>
              {mc.status==='failed' && (
                <div className="row gap8" style={{ padding:'9px 12px', background:'var(--warn-bg)', borderRadius:8, fontSize:12.5, color:'var(--warn)' }}>
                  <Icon n="refresh" size={15} />Previous attempt scored {mc.score}% — retry to pass ({mc.course.pass}%).
                </div>
              )}
              {mc.status==='in_progress' && <ProgressMini value={mc.progress} />}
              <div className="row gap8" style={{ justifyContent:'space-between', marginTop:'auto', paddingTop:6 }}>
                <span className="row gap8 muted" style={{ fontSize:12.5 }}>
                  <Icon n="clock" size={14} />{mc.course.mins} min
                  {dm && <span className={'badge '+dm.cls} style={{ marginLeft:4 }}><span className="bdot"></span>{dm.txt}</span>}
                </span>
                <button className={'btn sm '+(mc.status==='not_started'?'primary':'ghost')} onClick={()=>onLaunch(mc)}>
                  {mc.status==='failed'? <><Icon n="refresh" size={14} />Retry</> :
                   mc.status==='in_progress'? <><Icon n="play" size={14} />Resume</> :
                   <><Icon n="play" size={14} />Start</>}
                </button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- AVAILABLE / CATALOGUE ---------- */
function Catalogue({ onLaunch, toast }) {
  const available = D.courses.filter(c=>c.workplaces.includes('w1') && !ME.courses.some(mc=>mc.courseId===c.id && mc.assigned));
  return (
    <div className="fade-in">
      <SectionHead kicker="In your workplace catalogue" title="Available to you" />
      <p className="muted" style={{ marginTop:-6, marginBottom:20, fontSize:13.5 }}>These courses are available at {ME.workplace} even though they haven't been assigned to you. Start any anytime.</p>
      <div className="grid" style={{ gridTemplateColumns:'repeat(3,1fr)' }}>
        {available.map(c=>(
          <div key={c.id} className="course-card">
            <div className="course-banner" style={{ background:c.color }}><span className="cat">{c.cat}</span></div>
            <div style={{ padding:'16px 18px 18px', display:'flex', flexDirection:'column', flex:1 }}>
              <h3 className="h-card" style={{ marginBottom:6 }}>{c.name}</h3>
              <p className="muted" style={{ fontSize:13, lineHeight:1.5, margin:'0 0 14px', flex:1 }}>{c.desc}</p>
              <div className="row gap8" style={{ justifyContent:'space-between' }}>
                <span className="row gap8 muted" style={{ fontSize:12.5 }}><Icon n="clock" size={14} />{c.mins} min</span>
                <button className="btn subtle sm" onClick={()=>onLaunch({ course:c, status:'not_started', progress:0 })}><Icon n="play" size={14} />Start</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- COMPLETED ---------- */
function Completed({ toast }) {
  const done = myCourses.filter(c=>c.status==='completed');
  return (
    <div className="fade-in">
      <SectionHead kicker={done.length+' completed'} title="Your completed courses" />
      <div className="card">
        <div className="table-wrap">
          <table className="tbl">
            <thead><tr><th>Course</th><th>Completed</th><th>Score</th><th>Result</th><th></th></tr></thead>
            <tbody>
              {done.map((mc,i)=>(
                <tr key={i}>
                  <td><div className="row gap12"><Swatch course={mc.course} size={34} font={13} /><span className="td-strong">{mc.course.name}</span></div></td>
                  <td className="muted">{mc.completedOn}</td>
                  <td className="num">{mc.score!=null? mc.score+'%':'—'}</td>
                  <td>{mc.score==null? <Badge cls="ok">Completed</Badge> : mc.score>=mc.course.pass? <Badge cls="ok">Passed</Badge> : <Badge cls="warn">Below pass</Badge>}</td>
                  <td><button className="btn ghost sm" onClick={()=>toast('Reviewing '+mc.course.name)}><Icon n="eye" size={14} />Review</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

/* ---------- COURSE PLAYER ---------- */
function Player({ item, onClose, toast }) {
  const start = item.status==='in_progress'? item.progress : 0;
  const [pct, setPct] = useState(start);
  const [playing, setPlaying] = useState(false);
  const [doneState, setDoneState] = useState(null); // 'pass' | 'fail'
  const timer = useRef(null);
  const c = item.course;

  useEffect(()=>()=>clearInterval(timer.current),[]);
  const play = () => {
    setPlaying(true);
    timer.current = setInterval(()=>{
      setPct(p=>{
        if (p>=100){ clearInterval(timer.current); return 100; }
        return Math.min(100, p+2);
      });
    }, 60);
  };
  const pause = () => { setPlaying(false); clearInterval(timer.current); };
  useEffect(()=>{
    if (pct>=100 && playing){
      setPlaying(false);
      // retry demo (c3) passes on retry; oliver-style fail not triggered here
      setDoneState('pass');
    }
  },[pct, playing]);

  return (
    <div className="overlay" style={{ padding:0, alignItems:'stretch' }}>
      <div style={{ background:'var(--bg)', width:'100%', display:'flex', flexDirection:'column' }} onClick={e=>e.stopPropagation()}>
        {/* player chrome */}
        <div className="row" style={{ height:60, padding:'0 24px', background:'var(--surface)', borderBottom:'1px solid var(--border)', gap:16 }}>
          <button className="btn ghost sm" onClick={onClose}><Icon n="arrowl" size={15} />Exit</button>
          <div className="row gap12" style={{ flex:1 }}>
            <Swatch course={c} size={34} font={13} />
            <div><div className="td-strong" style={{ fontSize:14 }}>{c.name}</div><div className="td-sub">{c.cat} · v{(c.versions.find(v=>v.current)||c.versions[0]).v}</div></div>
          </div>
          <div className="row gap8" style={{ fontSize:12.5, color:'var(--muted)' }}><Icon n="clock" size={15} />Progress saved automatically</div>
        </div>

        <div style={{ flex:1, overflowY:'auto', padding:30 }}>
          <div style={{ maxWidth:900, margin:'0 auto' }}>
            {item.status==='failed' && !doneState && (
              <div className="card pad row gap12" style={{ background:'var(--warn-bg)', border:'1px solid #f0dcb5', marginBottom:18 }}>
                <span style={{ color:'var(--warn)' }}><Icon n="refresh" size={20} /></span>
                <div><div style={{ fontWeight:600, color:'var(--navy)' }}>Retry attempt</div><div className="muted" style={{ fontSize:13 }}>Your last attempt scored {item.score}%. You need {c.pass}% to pass — you can retry as many times as you need.</div></div>
              </div>
            )}

            {!doneState ? (
              <div className="player-stage">
                <div style={{ position:'absolute', inset:0, background:'radial-gradient(ellipse at center, rgba(46,108,214,0.25), transparent 70%)' }}></div>
                <div style={{ textAlign:'center', position:'relative', color:'#fff' }}>
                  <button onClick={playing?pause:play} style={{ width:84, height:84, borderRadius:'50%', border:0, background:'#fff', color:'var(--brand)', display:'grid', placeItems:'center', boxShadow:'0 8px 30px rgba(0,0,0,0.3)', cursor:'pointer' }}>
                    <Icon n={playing?'pause':'play'} size={34} />
                  </button>
                  <div style={{ marginTop:18, fontFamily:'var(--f-mono)', fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase', color:'rgba(255,255,255,0.7)' }}>
                    {playing? 'Playing — Articulate SCORM 1.2' : pct>0? 'Paused · resume from '+pct+'%' : 'Press play to launch'}
                  </div>
                </div>
              </div>
            ) : (
              <div className="card pad" style={{ textAlign:'center', padding:'48px 30px' }}>
                <span className="avatar" style={{ width:72, height:72, margin:'0 auto', background:'var(--ok-bg)', color:'var(--ok)' }}><Icon n="award" size={36} /></span>
                <div className="h-page" style={{ fontSize:26, marginTop:18 }}>Course complete</div>
                <p className="muted" style={{ fontSize:14, marginTop:6 }}>You completed <b style={{ color:'var(--navy)' }}>{c.name}</b>{c.hasScore? ` with a score of 86% — above the ${c.pass}% pass mark.`:'.'} Your completion has been recorded.</p>
                <div className="row gap8" style={{ justifyContent:'center', marginTop:22 }}>
                  <button className="btn ghost" onClick={onClose}>Back to My Learning</button>
                  <button className="btn primary" onClick={()=>{toast('Completion recorded');onClose();}}><Icon n="check" size={16} />Done</button>
                </div>
              </div>
            )}

            {!doneState && (
              <div className="card pad" style={{ marginTop:18 }}>
                <div className="row gap8" style={{ justifyContent:'space-between', marginBottom:10 }}>
                  <span className="lbl">Course progress</span>
                  <span className="num" style={{ fontSize:13, color:'var(--brand)', fontWeight:600 }}>{pct}%</span>
                </div>
                <Progress value={pct} />
                <div className="row gap8" style={{ marginTop:14, justifyContent:'space-between', flexWrap:'wrap', gap:8 }}>
                  <div className="row gap8" style={{ flexWrap:'wrap' }}>
                    {['Intro','Scenarios','Practice','Knowledge check','Summary'].map((m,i)=>{
                      const reached = pct >= i*20;
                      return <span key={i} className={'pill-soft'} style={{ opacity:reached?1:0.5, color:reached?'var(--brand)':'var(--faint)', borderColor: reached?'rgba(33,96,196,0.3)':'var(--border)' }}>{reached && pct<( (i+1)*20)? '▶ ':''}{m}</span>;
                    })}
                  </div>
                  {pct>=100
                    ? <button className="btn primary sm" onClick={()=>setDoneState('pass')}>Finish<Icon n="arrowr" size={14} /></button>
                    : <button className={'btn sm '+(playing?'ghost':'primary')} onClick={playing?pause:play}><Icon n={playing?'pause':'play'} size={14} />{playing?'Pause':pct>0?'Resume':'Play'}</button>}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function Employee({ page, toast }) {
  const [player, setPlayer] = useState(null);
  return (
    <>
      {page==='learning' && <Learning onLaunch={setPlayer} toast={toast} />}
      {page==='catalogue' && <Catalogue onLaunch={setPlayer} toast={toast} />}
      {page==='completed' && <Completed toast={toast} />}
      {player && <Player item={player} onClose={()=>setPlayer(null)} toast={toast} />}
    </>
  );
}

window.Employee = { Component: Employee, NAV, PAGE_META, user:{ name:ME.name, role:'Employee · '+ME.workplace, color:ME.color } };
})();