/* ============================================================
   WORKPLACE ADMIN views -> window.WorkplaceAdmin
   ============================================================ */
(function () {
const { useState, useMemo, useEffect, useRef } = React;
const D = window.DATA;
const WP = D.workplaces.find(w=>w.active); // Riparide

const NAV = [
  { id:'dashboard', label:'Overview', icon:'gauge' },
  { id:'employees', label:'Employees',  icon:'users', count: D.employees.length },
  { id:'catalogue', label:'Catalogue',  icon:'book' },
  { section:'Evidence' },
  { id:'reports',   label:'Reports',    icon:'download' },
  { id:'settings',  label:'Settings',   icon:'settings' },
];
const PAGE_META = {
  dashboard:{ crumb:WP.name+' · People & Culture', title:'Compliance Overview' },
  employees:{ crumb:WP.name, title:'Employees' },
  catalogue:{ crumb:WP.name, title:'Workplace Catalogue' },
  reports:  { crumb:WP.name+' · Evidence', title:'Reports' },
  settings: { crumb:WP.name, title:'Settings' },
};

/* distributed courses for this workplace */
const COURSES = D.courses.filter(c=>c.workplaces.includes(WP.id));
const allAssign = D.employees.flatMap(e=>e.assignments.map(a=>({ ...a, emp:e })));
const done = ['completed','failed'];
const isComplete = a => a.status==='completed';

function summary() {
  const assignedEmps = D.employees.filter(e=>e.assignments.length).length;
  const tot = allAssign.length;
  const completed = allAssign.filter(a=>a.status==='completed').length;
  const inprog = allAssign.filter(a=>a.status==='in_progress').length;
  const notstarted = allAssign.filter(a=>a.status==='not_started').length;
  const overdue = allAssign.filter(a=>a.status==='overdue').length;
  const scores = allAssign.filter(a=>a.score!=null).map(a=>a.score);
  const avg = Math.round(scores.reduce((s,x)=>s+x,0)/scores.length);
  const passed = scores.filter(s=>s>=80).length;
  return { assignedEmps, tot, completed, inprog, notstarted, overdue,
    rate: Math.round(completed/tot*100), avg, passRate: Math.round(passed/scores.length*100),
    dueSoon: 4 };
}

function courseStats(c) {
  const as = allAssign.filter(a=>a.courseId===c.id);
  const completed = as.filter(a=>a.status==='completed').length;
  const inprog = as.filter(a=>a.status==='in_progress').length;
  const ns = as.filter(a=>a.status==='not_started').length;
  const overdue = as.filter(a=>a.status==='overdue').length;
  const scores = as.filter(a=>a.score!=null).map(a=>a.score);
  const avg = scores.length? Math.round(scores.reduce((s,x)=>s+x,0)/scores.length):null;
  return { assigned:as.length, completed, inprog, ns, overdue,
    rate: as.length? Math.round(completed/as.length*100):0, avg };
}

/* ---------- DASHBOARD ---------- */
function Dashboard({ toast }) {
  const s = useMemo(summary,[]);
  const topOverdue = useMemo(() => D.employees
    .map(e => ({ ...e, od: e.assignments.filter(a=>a.status==='overdue').length }))
    .filter(e => e.od>0)
    .sort((a,b)=>b.od-a.od || a.name.localeCompare(b.name))
    .slice(0,4), []);
  const [tab, setTab] = useState('course');
  return (
    <div className="fade-in">
      <div className="grid" style={{ gridTemplateColumns:'1.7fr 1fr', marginBottom:16, alignItems:'stretch' }}>
        <div className="grid" style={{ gridTemplateColumns:'1fr 1fr' }}>
          <StatCard icon="users" label="Assigned" value={s.assignedEmps} sub="employees with training" />
          <StatCard icon="checkc" iconBg="#E4F5EC" iconColor="#1E9E6A" label="Completion rate" value={s.rate} unit="%" sub={`${s.completed} of ${s.tot} assignments`} />
          <StatCard icon="alert" iconBg="#FCE9E7" iconColor="#D24B43" label="Overdue" value={s.overdue} sub="need follow-up" />
          <StatCard icon="play" iconBg="#E7EFFB" iconColor="#2160C4" label="In progress" value={s.inprog} />
          <StatCard icon="clock" iconBg="#EDF1F5" iconColor="#6A7989" label="Not started" value={s.notstarted} />
          <StatCard icon="award" iconBg="#FBF1DD" iconColor="#C9821C" label="Avg score" value={s.avg} unit="%" sub={`${s.passRate}% pass`} />
        </div>
        <div className="card pad" style={{ display:'flex', flexDirection:'column' }}>
          <SectionHead kicker="All assignments" title="Status breakdown" />
          <div className="row gap24" style={{ alignItems:'center' }}>
            <Donut size={140} stroke={20}
              segments={[
                { value:s.completed, color:'#1E9E6A' },
                { value:s.inprog, color:'#2160C4' },
                { value:s.notstarted, color:'#C2CDD8' },
                { value:s.overdue, color:'#D24B43' },
              ]}
              centerVal={s.rate+'%'} centerLbl="complete" />
            <div className="legend" style={{ flex:1 }}>
              <div className="lg-item"><span className="lg-dot" style={{ background:'#1E9E6A' }}></span>Completed<span className="lg-val">{s.completed}</span></div>
              <div className="lg-item"><span className="lg-dot" style={{ background:'#2160C4' }}></span>In progress<span className="lg-val">{s.inprog}</span></div>
              <div className="lg-item"><span className="lg-dot" style={{ background:'#C2CDD8' }}></span>Not started<span className="lg-val">{s.notstarted}</span></div>
              <div className="lg-item"><span className="lg-dot" style={{ background:'#D24B43' }}></span>Overdue<span className="lg-val">{s.overdue}</span></div>
            </div>
          </div>
          <div style={{ borderTop:'1px solid var(--line)', marginTop:18, paddingTop:16 }}>
            <div className="kicker" style={{ marginBottom:12 }}>Most overdue employees</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {topOverdue.map(e =>
                <div key={e.id} className="row gap12" style={{ alignItems:'center' }}>
                  <Avatar name={e.name} initials={e.initials} color={e.color} size="av-sm" />
                  <div style={{ flex:1, minWidth:0 }}>
                    <div className="td-strong" style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{e.name}</div>
                    <div className="muted" style={{ fontSize:12.5 }}>{e.dept}</div>
                  </div>
                  <span className="badge danger">{e.od} overdue</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      <div className="card">
        <div className="pad" style={{ paddingBottom:14 }}>
          <SectionHead title="Assigned Courses">
            <div className="tabs">
              <button className={tab==='course'?'active':''} onClick={()=>setTab('course')}>By course</button>
              <button className={tab==='employee'?'active':''} onClick={()=>setTab('employee')}>By employee</button>
            </div>
          </SectionHead>
        </div>
        {tab==='course' ? <CourseTable toast={toast} /> : <EmployeeTable toast={toast} />}
      </div>
    </div>
  );
}

function CourseTable({ toast }) {
  return (
    <div className="table-wrap">
      <table className="tbl">
        <thead><tr><th>Course</th><th>Assigned</th><th>Completed</th><th>In progress</th><th>Not started</th><th>Overdue</th><th style={{ width:170 }}>Completion</th><th>Avg score</th></tr></thead>
        <tbody>
          {COURSES.map(c=>{ const st=courseStats(c); return (
            <tr key={c.id} className="clickable">
              <td><div className="row gap12"><Swatch course={c} size={34} font={13} /><div><div className="td-strong">{c.name}</div><div className="td-sub">{c.cat}</div></div></div></td>
              <td className="num">{st.assigned}</td>
              <td className="num" style={{ color:'var(--ok)', fontWeight:600 }}>{st.completed}</td>
              <td className="num">{st.inprog}</td>
              <td className="num muted">{st.ns}</td>
              <td className="num" style={{ color: st.overdue?'var(--danger)':'var(--faint)', fontWeight: st.overdue?600:400 }}>{st.overdue||'—'}</td>
              <td><ProgressMini value={st.rate} /></td>
              <td className="num">{st.avg!=null? st.avg+'%' : '—'}</td>
            </tr>
          ); })}
        </tbody>
      </table>
    </div>
  );
}

function EmployeeTable({ toast }) {
  const [course, setCourse] = useState('all');
  const [status, setStatus] = useState('all');
  const [q, setQ] = useState('');
  const rows = D.employees.map(e=>{
    const as = e.assignments;
    const stat = id => as.filter(a=>a.status===id).length;
    const scores = as.filter(a=>a.score!=null).map(a=>a.score);
    const lastScore = scores.length? scores[0] : null;
    const lasts = as.map(a=>a.last).filter(Boolean).sort().reverse();
    return { e, total:as.length, completed:stat('completed'), inprog:stat('in_progress'), ns:stat('not_started'),
      overdue:stat('overdue'), last: lasts[0]||'—', score:lastScore,
      hasCourse: course==='all'|| as.some(a=>a.courseId===course),
      hasStatus: status==='all'|| as.some(a=>a.status===status || (status==='overdue'&&a.status==='overdue')) };
  }).filter(r=> r.hasCourse && r.hasStatus && r.e.name.toLowerCase().includes(q.toLowerCase()));

  return (
    <div>
      <div className="pad" style={{ paddingTop:0, paddingBottom:14, display:'flex', gap:8, flexWrap:'wrap', alignItems:'center' }}>
        <div className="search" style={{ width:220 }}><Icon n="search" /><input placeholder="Search employees…" value={q} onChange={e=>setQ(e.target.value)} /></div>
        <select className="chip clickable" value={course} onChange={e=>setCourse(e.target.value)} style={{ appearance:'none', paddingRight:24 }}>
          <option value="all">All courses</option>
          {COURSES.map(c=><option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
        {['all','completed','in_progress','not_started','overdue'].map(st=>(
          <button key={st} className={'chip clickable'+(status===st?' active':'')} onClick={()=>setStatus(st)}>
            {st==='all'?'All status': (STATUS[st]?.label||st)}
          </button>
        ))}
      </div>
      <div className="table-wrap">
        <table className="tbl">
          <thead><tr><th>Employee</th><th>Department</th><th>Assigned</th><th>Done</th><th>Overdue</th><th>Last activity</th><th>Latest score</th><th></th></tr></thead>
          <tbody>
            {rows.map(r=>(
              <tr key={r.e.id} className="clickable">
                <td><div className="row gap12"><Avatar name={r.e.name} color={r.e.color} initials={r.e.initials} size="av-sm" /><div><div className="td-strong">{r.e.name}</div><div className="td-sub">{r.e.email}</div></div></div></td>
                <td className="muted">{r.e.dept}</td>
                <td className="num">{r.total}</td>
                <td className="num">{r.completed}/{r.total}</td>
                <td>{r.overdue? <Badge cls="danger">{r.overdue}</Badge> : <span className="faint num" style={{ color:'var(--faint)' }}>0</span>}</td>
                <td className="muted">{r.last}</td>
                <td className="num">{r.score!=null? r.score+'%' : '—'}</td>
                <td><span style={{ color:'var(--faint)' }}><Icon n="chevr" size={16} /></span></td>
              </tr>
            ))}
            {rows.length===0 && <tr><td colSpan={8} style={{ textAlign:'center', color:'var(--faint)', padding:30 }}>No employees match these filters.</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ---------- EMPLOYEES + CSV IMPORT ---------- */
function empStats(e) {
  const as = e.assignments;
  const completed = as.filter(a=>a.status==='completed').length;
  const overdue = as.filter(a=>a.status==='overdue').length;
  const inprog = as.filter(a=>a.status==='in_progress').length;
  const ns = as.filter(a=>a.status==='not_started').length;
  const scores = as.filter(a=>a.score!=null).map(a=>a.score);
  const avg = scores.length? Math.round(scores.reduce((s,x)=>s+x,0)/scores.length):null;
  const lasts = as.map(a=>a.last).filter(Boolean).sort().reverse();
  return { total:as.length, completed, overdue, inprog, ns, avg,
    rate: as.length? Math.round(completed/as.length*100):0, last: lasts[0]||'—' };
}

function Employees({ toast }) {
  const [importOpen, setImportOpen] = useState(false);
  const [drawer, setDrawer] = useState(null);          // employee detail drawer
  const [assign, setAssign] = useState(false);         // assign / select mode
  const [popOpen, setPopOpen] = useState(false);       // course/date popover
  const [course, setCourse] = useState(null);
  const [due, setDue] = useState('');
  const [picked, setPicked] = useState([]);            // selected employee ids
  const dueInputRef = useRef(null);

  const c = course ? D.courseById(course) : null;
  const has = e => !!c && e.assignments.some(a=>a.courseId===course);
  const togglePick = id => setPicked(s=> s.includes(id)? s.filter(x=>x!==id):[...s,id]);
  const fmtDue = d => d ? new Date(d+'T00:00').toLocaleDateString('en-GB',{ day:'numeric', month:'short', year:'numeric' }) : '';
  const openDuePicker = () => {
    const input = dueInputRef.current;
    if (!input) return;
    try {
      if (typeof input.showPicker === 'function') input.showPicker();
      else input.click();
    } catch (err) {
      input.focus();
      input.click();
    }
  };

  const toggleAssignPicker = () => {
    setAssign(true);
    setPopOpen(isOpen => !isOpen);
  };
  const cancelAssign = () => {
    setAssign(false);
    setPopOpen(false);
    setCourse(null);
    setDue('');
    setPicked([]);
  };
  const submitAssign = () => {
    if (!c) {
      setPopOpen(true);
      return;
    }
    if (!picked.length) {
      toast('Select at least one employee');
      return;
    }
    toast(`Assigned ${c.name} to ${picked.length} employee${picked.length>1?'s':''}${due?' · due '+due:''}`);
    cancelAssign();
  };

  const selectable = c ? D.employees.filter(e=>!has(e)) : D.employees;
  const allSel = assign && selectable.length>0 && selectable.every(e=>picked.includes(e.id));
  const someSel = assign && !allSel && selectable.some(e=>picked.includes(e.id));
  const toggleAll = () => setPicked(allSel ? [] : selectable.map(e=>e.id));

  const rowClick = e => { if (assign) { if (!has(e)) togglePick(e.id); } else setDrawer(e); };
  const topbar = document.querySelector('.topbar');
  const employeeTopbarActions = (
    <div className="row gap8">
      <button className="btn ghost sm" onClick={()=>toast('Add employee — name & email')}><Icon n="plus" size={15} />Add employee</button>
      <button className="btn ghost sm" onClick={()=>setImportOpen(true)}><Icon n="upload" size={15} />Import CSV</button>
    </div>
  );
  const assignActions = (
    <span className="pop-anchor" onMouseDown={e=>e.stopPropagation()}>
      {assign ? (
        <button className="btn success sm" onClick={submitAssign}>
          <Icon n="check" size={15} />Submit<span className="assign-count">{picked.length}</span>
        </button>
      ) : (
        <button className="btn primary sm" onClick={toggleAssignPicker}>
          <Icon n="target" size={15} />Courses
        </button>
      )}
      {popOpen && <AssignPopover course={course} setCourse={setCourse} onClose={()=>setPopOpen(false)} />}
    </span>
  );

  return (
    <div className="fade-in">
      {topbar && ReactDOM.createPortal(employeeTopbarActions, topbar)}
      <SectionHead kicker={D.employees.length+' employees · '+WP.name} title="Employee directory">
        {assignActions}
      </SectionHead>

      {assign && (
        <div className="assign-infobar">
          <Icon n="info" size={16} />
          {c ? (
            <>
              <span>Assigning</span>
              <span className="ai-course"><Swatch course={c} size={20} font={9} radius="5px" /><b>{c.name}</b></span>
              <span className="ai-due-wrap">
                <button type="button" className="ai-due" onClick={openDuePicker}>
                  <Icon n="calendar" size={13} />{due ? 'Due '+fmtDue(due) : 'No due date'}
                </button>
                <input ref={dueInputRef} className="ai-due-input" type="date" value={due} aria-label="Due date" onInput={e=>setDue(e.target.value)} onChange={e=>setDue(e.target.value)} />
              </span>
            </>
          ) : (
            <span>Choose a course in the panel, then tick employees in the list to assign them.</span>
          )}
          <span className="ai-actions">
            <button className="ai-cancel" onClick={cancelAssign}>Cancel</button>
          </span>
        </div>
      )}

      <div className="card">
        <div className="table-wrap">
          <table className={'tbl'+(assign?' select-mode':'')}>
            <thead>
              <tr>
                <th className="sel-cell">
                  <span className="sel-box">
                    <input type="checkbox" checked={allSel} disabled={!c || !selectable.length}
                      ref={el=>{ if (el) el.indeterminate = someSel; }} onChange={toggleAll} />
                  </span>
                </th>
                <th>Employee</th><th>Email</th><th>Department</th><th>Assigned courses</th><th>Completion</th><th></th>
              </tr>
            </thead>
            <tbody>
              {D.employees.map(e=>{
                const st = empStats(e);
                const already = has(e);
                const checked = picked.includes(e.id);
                const active = (drawer&&drawer.id===e.id) || (assign&&checked);
                return (
                  <tr key={e.id} className={'clickable'+(active?' row-active':'')} onClick={()=>rowClick(e)}
                    style={assign&&already? { opacity:.55 } : null}>
                    <td className="sel-cell">
                      <span className="sel-box">
                        <input type="checkbox" checked={assign&&checked} disabled={assign&&already} readOnly />
                      </span>
                    </td>
                    <td><div className="row gap12"><Avatar name={e.name} color={e.color} initials={e.initials} size="av-sm" /><div><span className="td-strong">{e.name}</span>{st.overdue>0 && <span className="badge danger" style={{ marginLeft:8, padding:'2px 8px', verticalAlign:'middle' }}>{st.overdue} overdue</span>}</div></div></td>
                    <td className="mono muted" style={{ fontSize:12.5 }}>{e.email}</td>
                    <td className="muted">{e.dept}</td>
                    <td>{assign && already ? <Badge cls="info">Assigned</Badge> : <span className="num">{st.total}</span>}</td>
                    <td style={{ width:160 }}><ProgressMini value={st.rate} /></td>
                    <td><button className="icon-btn" style={{ width:30, height:30, border:0, background:'transparent' }} onClick={ev=>{ev.stopPropagation();setDrawer(e);}}><Icon n="chevr" size={16} /></button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
      {importOpen && <ImportModal onClose={()=>setImportOpen(false)} toast={toast} />}
      {drawer && <EmployeeDrawer e={drawer} onClose={()=>setDrawer(null)} toast={toast} />}
    </div>
  );
}

/* assign-course popover — outside click / Esc closes (select mode stays on) */
function AssignPopover({ course, setCourse, onClose }) {
  const ref = useRef(null);
  useEffect(()=>{
    const onDown = e => { if (ref.current && !ref.current.contains(e.target)) onClose(); };
    const onKey = e => { if (e.key==='Escape') onClose(); };
    // defer so the opening click doesn't immediately close it
    const t = setTimeout(()=>document.addEventListener('mousedown', onDown), 0);
    window.addEventListener('keydown', onKey);
    return ()=>{ clearTimeout(t); document.removeEventListener('mousedown', onDown); window.removeEventListener('keydown', onKey); };
  },[]);
  return (
    <div ref={ref} className="pop assign-pop" onClick={e=>e.stopPropagation()}>
      <div className="pop-head">
        <div className="td-strong" style={{ fontSize:14 }}>Assign a course</div>
        <div className="td-sub">Pick a course, then tick employees in the list.</div>
      </div>
      <div className="pop-body">
        <div className="lbl" style={{ marginBottom:1 }}>Course</div>
        {COURSES.map(o=>{
          const active = course===o.id;
          return (
            <button key={o.id} className={'course-opt'+(active?' active':'')} onClick={()=>{setCourse(o.id);onClose();}}>
              <Swatch course={o} size={34} font={13} />
              <div style={{ flex:1, minWidth:0 }}>
                <div className="td-strong" style={{ fontSize:13, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{o.name}</div>
                <div className="td-sub">{o.cat} · {o.mins} min</div>
              </div>
              {active && <span className="course-opt-check"><Icon n="check" size={14} /></span>}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- EMPLOYEE DETAIL DRAWER ---------- */
function EmployeeDrawer({ e, onClose, toast }) {
  useEffect(()=>{
    const h = ev => { if (ev.key==='Escape') onClose(); };
    window.addEventListener('keydown', h);
    return ()=>window.removeEventListener('keydown', h);
  },[e.id]);
  const st = empStats(e);
  const order = { overdue:0, in_progress:1, not_started:2, failed:3, completed:4 };
  const sorted = [...e.assignments].sort((a,b)=>(order[a.status]??9)-(order[b.status]??9));

  return (
    <>
    <div className="drawer-scrim" onClick={onClose}></div>
    <aside className="drawer">
      <div className="drawer-head">
        <div className="row gap8" style={{ justifyContent:'space-between', alignItems:'flex-start', marginBottom:16 }}>
          <div className="kicker">Employee</div>
          <button className="icon-btn" style={{ width:32, height:32, border:0, background:'var(--surface-2)' }} onClick={onClose}><Icon n="x" size={16} /></button>
        </div>
        <div className="row gap12">
          <Avatar name={e.name} initials={e.initials} color={e.color} size="av-lg" />
          <div style={{ minWidth:0 }}>
            <h2 className="h-sec" style={{ marginBottom:4 }}>{e.name}</h2>
            <div className="td-sub" style={{ marginBottom:3 }}>{e.dept}</div>
            <div className="mono muted" style={{ fontSize:12 }}>{e.email}</div>
          </div>
        </div>
      </div>
      <div className="drawer-body">
        {/* stats */}
        <div className="drawer-statrow" style={{ marginBottom:8 }}>
          <div className="drawer-stat"><div className="dv">{st.total}</div><div className="dl">Assigned</div></div>
          <div className="drawer-stat"><div className="dv">{st.rate}<em style={{ fontSize:13, fontStyle:'normal', color:'var(--muted)' }}>%</em></div><div className="dl">Completed</div></div>
          <div className="drawer-stat"><div className="dv">{st.avg!=null? st.avg : '—'}{st.avg!=null && <em style={{ fontSize:13, fontStyle:'normal', color:'var(--muted)' }}>%</em>}</div><div className="dl">Avg score</div></div>
        </div>
        {st.overdue>0 && (
          <div className="row gap8" style={{ background:'var(--danger-bg)', color:'var(--danger)', borderRadius:'var(--r-sm)', padding:'10px 13px', fontSize:13, fontWeight:600, marginBottom:24, marginTop:14 }}>
            <Icon n="alert" size={16} />{st.overdue} overdue {st.overdue===1?'course needs':'courses need'} follow-up
          </div>
        )}
        <div style={{ marginTop: st.overdue>0?0:24 }}></div>

        {/* assigned courses */}
        <div className="row gap8" style={{ justifyContent:'space-between', alignItems:'center', marginBottom:10 }}>
          <div className="kicker">Assigned courses</div>
          <button className="btn primary sm" onClick={()=>toast('Assign a course to '+e.name)}><Icon n="target" size={15} />Assign course</button>
        </div>
        <div>
          {sorted.map(a=>{
            const c = D.courseById(a.courseId);
            if (!c) return null;
            return (
              <div key={a.courseId} className="drawer-course" style={{ alignItems:'flex-start' }}>
                <Swatch course={c} size={38} font={14} />
                <div style={{ flex:1, minWidth:0 }}>
                  <div className="row gap8" style={{ justifyContent:'space-between', alignItems:'flex-start' }}>
                    <div style={{ minWidth:0 }}>
                      <div className="td-strong" style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.name}</div>
                      <div className="td-sub">{c.cat}</div>
                    </div>
                    <Badge status={a.status} />
                  </div>
                  <div style={{ marginTop:9 }}><Progress value={a.progress} thin /></div>
                  <div className="row gap12" style={{ marginTop:7, fontSize:11.5, color:'var(--faint)', flexWrap:'wrap' }}>
                    <span className="mono">{a.progress}% done</span>
                    {a.due && <span className="row gap8" style={{ gap:5, color: a.status==='overdue'?'var(--danger)':'var(--faint)' }}><Icon n="calendar" size={13} />Due {a.due}</span>}
                    {a.score!=null && <span className="row gap8" style={{ gap:5 }}><Icon n="award" size={13} />{a.score}%</span>}
                    {a.last && <span className="row gap8" style={{ gap:5 }}><Icon n="clock" size={13} />{a.last}</span>}
                  </div>
                </div>
              </div>
            );
          })}
          {st.total===0 && <div className="muted" style={{ textAlign:'center', padding:'24px 0', fontSize:13 }}>No courses assigned yet.</div>}
        </div>

        <div className="hr" style={{ margin:'22px 0 16px' }}></div>
        <div className="row gap8" style={{ flexWrap:'wrap' }}>
          <button className="btn ghost sm" onClick={()=>toast('Edit '+e.name+'’s details')}><Icon n="user" size={15} />Edit details</button>
          <button className="btn ghost sm" style={{ color:'var(--danger)', borderColor:'var(--danger-bg)', marginLeft:'auto' }} onClick={()=>toast(e.name+' removed from workplace')}><Icon n="x" size={15} />Remove</button>
        </div>
      </div>
    </aside>
    </>
  );
}

function ImportModal({ onClose, toast }) {
  const [step, setStep] = useState(1); // 1 upload, 2 review, 3 done
  const [hot, setHot] = useState(false);
  const additions = [
    { name:'Chloe Bennett', email:'chloe.bennett@riparide.com', dept:'Customer Experience' },
    { name:'Marco Silva', email:'marco.silva@riparide.com', dept:'Operations' },
    { name:'Priya Sharma', email:'priya.sharma@riparide.com', dept:'Product' },
  ];
  const updates = [{ name:'James Okafor', email:'james.okafor@riparide.com', change:'Department → Logistics' }];
  const errors = [{ row:7, email:'—', issue:'Missing email address' }];

  const foot = step===1
    ? <button className="btn ghost" onClick={onClose}>Cancel</button>
    : step===2
      ? <><button className="btn ghost" onClick={()=>setStep(1)}>Back</button><button className="btn primary" onClick={()=>setStep(3)}><Icon n="check" size={16} />Confirm import</button></>
      : <button className="btn primary" onClick={()=>{toast(`${additions.length} added · ${updates.length} updated`);onClose();}}>Done</button>;

  return (
    <Modal kicker={WP.name} title="Import Employees from CSV" onClose={onClose} footer={foot} wide>
      <div className="row gap8" style={{ marginBottom:20 }}>
        {[['1','Upload'],['2','Review'],['3','Done']].map(s=>(
          <React.Fragment key={s[0]}>
            <div className="row gap8" style={{ opacity: step>=+s[0]?1:0.4 }}>
              <span className="avatar av-sm" style={{ background: step>=+s[0]?'var(--grad)':'var(--surface-3)', color: step>=+s[0]?'#fff':'var(--faint)', fontSize:12 }}>{step>+s[0]?'✓':s[0]}</span>
              <span style={{ fontSize:13, fontWeight:600, color: step>=+s[0]?'var(--navy)':'var(--faint)' }}>{s[1]}</span>
            </div>
            {s[0]!=='3' && <div style={{ flex:1, height:1, background:'var(--border)' }}></div>}
          </React.Fragment>
        ))}
      </div>

      {step===1 && (
        <div>
          <div className={'dropzone'+(hot?' hot':'')}
            onDragOver={e=>{e.preventDefault();setHot(true);}} onDragLeave={()=>setHot(false)}
            onDrop={e=>{e.preventDefault();setHot(false);setStep(2);}} onClick={()=>setStep(2)}>
            <Icon n="filecsv" />
            <div className="h-card" style={{ margin:'12px 0 4px' }}>Drop your employee CSV</div>
            <div className="muted" style={{ fontSize:13 }}>Columns: name, email, department · identified by email</div>
            <button className="btn ghost sm" style={{ marginTop:16 }}>Browse files</button>
          </div>
          <div className="row gap8" style={{ marginTop:14, color:'var(--muted)', fontSize:12.5 }}><Icon n="info" size={16} />Nothing changes until you review and confirm.</div>
        </div>
      )}

      {step===2 && (
        <div>
          <div className="row gap8" style={{ marginBottom:16 }}>
            <span className="pill-soft"><b style={{ color:'var(--ok)' }}>+{additions.length}</b> new</span>
            <span className="pill-soft"><b style={{ color:'var(--brand)' }}>~{updates.length}</b> updated</span>
            <span className="pill-soft"><b style={{ color:'var(--danger)' }}>{errors.length}</b> skipped</span>
          </div>
          <div className="lbl" style={{ marginBottom:8 }}>New employees</div>
          <div className="card" style={{ marginBottom:16 }}><table className="tbl"><tbody>
            {additions.map((a,i)=>(<tr key={i}><td><div className="row gap12"><Avatar name={a.name} size="av-sm" color="#1E9E6A" /><span className="td-strong">{a.name}</span></div></td><td className="mono muted" style={{ fontSize:12.5 }}>{a.email}</td><td className="muted">{a.dept}</td><td><Badge cls="ok">Add</Badge></td></tr>))}
          </tbody></table></div>
          <div className="lbl" style={{ marginBottom:8 }}>Updated · Skipped</div>
          <div className="card"><table className="tbl"><tbody>
            {updates.map((u,i)=>(<tr key={i}><td className="td-strong">{u.name}</td><td className="muted" colSpan={2}>{u.change}</td><td><Badge cls="info">Update</Badge></td></tr>))}
            {errors.map((e,i)=>(<tr key={i}><td className="muted">Row {e.row}</td><td className="muted" colSpan={2}>{e.issue}</td><td><Badge cls="danger">Skip</Badge></td></tr>))}
          </tbody></table></div>
        </div>
      )}

      {step===3 && (
        <div style={{ textAlign:'center', padding:'20px 0' }}>
          <span className="avatar" style={{ width:60, height:60, margin:'0 auto', background:'var(--ok-bg)', color:'var(--ok)' }}><Icon n="check" size={30} /></span>
          <div className="h-sec" style={{ marginTop:16 }}>Import complete</div>
          <p className="muted" style={{ fontSize:13.5 }}>{additions.length} employees added · {updates.length} updated · {errors.length} skipped. They're ready to be assigned courses.</p>
        </div>
      )}
    </Modal>
  );
}

/* ---------- CATALOGUE ---------- */
function Catalogue({ toast }) {
  return (
    <div className="fade-in">
      <SectionHead kicker={COURSES.length+' courses available to '+WP.name} title="Workplace catalogue" />
      <div className="grid" style={{ gridTemplateColumns:'repeat(3,1fr)' }}>
        {COURSES.map(c=>{
          const st = courseStats(c);
          return (
            <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' }}>
                <h3 className="h-card" style={{ marginBottom:6 }}>{c.name}</h3>
                <p className="muted" style={{ fontSize:13, lineHeight:1.5, margin:'0 0 14px' }}>{c.desc}</p>
                <div className="row gap8" style={{ justifyContent:'space-between' }}>
                  <span className="muted" style={{ fontSize:12.5 }}>{st.assigned} assigned · {st.rate}% done</span>
                  <button className="btn subtle sm" onClick={()=>toast('Assign '+c.name)}><Icon n="target" size={14} />Assign</button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ---------- REPORTS ---------- */
function Reports({ toast }) {
  const reports = [
    { name:'Full compliance evidence', desc:'All assigned courses · employee-level progress, completions & scores', icon:'gauge' },
    { name:'Overdue & due-soon', desc:'Employees with overdue or upcoming assignments', icon:'alert' },
    { name:'Course completion summary', desc:'Per-course completion rates and average scores', icon:'course' },
    { name:'Completion certificates log', desc:'Record of completed assignments for audit', icon:'history' },
  ];
  return (
    <div className="fade-in">
      <SectionHead kicker="CSV evidence export" title="Reports" />
      <div className="grid" style={{ gridTemplateColumns:'1fr 1fr' }}>
        {reports.map(r=>(
          <div key={r.name} className="card pad row gap16">
            <span className="stat-ic" style={{ width:42, height:42, background:'var(--info-bg)', color:'var(--brand)' }}><Icon n={r.icon} size={20} /></span>
            <div style={{ flex:1 }}><div className="h-card" style={{ fontSize:15 }}>{r.name}</div><div className="muted" style={{ fontSize:12.5, marginTop:3 }}>{r.desc}</div></div>
            <button className="btn ghost sm" onClick={()=>toast(r.name+' exported (CSV)')}><Icon n="download" size={15} />CSV</button>
          </div>
        ))}
      </div>
      <div className="card pad row gap12" style={{ marginTop:16, color:'var(--muted)', fontSize:12.5 }}>
        <Icon n="info" size={16} />Reports cover assigned courses only and remain available after a course is withdrawn or superseded.
      </div>
    </div>
  );
}

function WorkplaceAdmin({ page, toast }) {
  switch(page){
    case 'dashboard': return <Dashboard toast={toast} />;
    case 'employees': return <Employees toast={toast} />;
    case 'catalogue': return <Catalogue toast={toast} />;
    case 'reports':   return <Reports toast={toast} />;
    default: return <div className="fade-in card pad" style={{ textAlign:'center', padding:60, color:'var(--faint)' }}><Icon n="settings" size={34} /><div className="h-card" style={{ marginTop:14 }}>Settings</div></div>;
  }
}

window.WorkplaceAdmin = { Component: WorkplaceAdmin, NAV, PAGE_META, user:{ name:WP.admin, role:'Workplace Admin', color:'#2E6CD6' } };
})();