// Online Class + Online Meeting tabs

function copyLink(link, toast){
  try{
    if(navigator.clipboard) navigator.clipboard.writeText(link);
    else {
      const ta = document.createElement('textarea');
      ta.value = link; document.body.appendChild(ta); ta.select();
      document.execCommand('copy'); document.body.removeChild(ta);
    }
    toast('Link copied');
  }catch(e){ toast('Could not copy'); }
}

function fmtUpdated(ts){
  if(!ts) return null;
  const d = new Date(ts);
  const date = d.toLocaleDateString('en-IN', { day:'numeric', month:'short', year:'numeric' });
  const time = d.toLocaleTimeString('en-IN', { hour:'2-digit', minute:'2-digit', hour12:true });
  return `${date}, ${time}`;
}

// ---------- Online Class tab ----------
function ClassesTab(){
  const store = useStore();
  const toast = useToast();
  const me = store.currentUser();
  const [editing, setEditing] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [confirm, setConfirm] = React.useState(null);
  const [courseFilter, setCourseFilter] = React.useState('all');
  const [q, setQ] = React.useState('');

  const canEdit = me.role === 'admin';

  const visibleClasses = React.useMemo(() => {
    let cls = store.state.classes;
    if(me.role === 'student'){
      const my = new Set(me.courses || []);
      cls = cls.filter(c => {
        if(!my.has(c.courseId)) return false;
        if(c.students && c.students.length > 0) return c.students.includes(me.id);
        return true;
      });
    }
    if(courseFilter !== 'all') cls = cls.filter(c => c.courseId === courseFilter);
    if(q.trim()){
      const term = q.toLowerCase();
      cls = cls.filter(c => c.name.toLowerCase().includes(term));
    }
    return cls;
  }, [store.state.classes, me, courseFilter, q]);

  function saveClass(payload){
    if(editing){ store.updateClass(editing.id, payload); toast('Class updated'); }
    else { store.createClass({ ...payload, createdBy: me.id }); toast('Class created'); }
  }
  function askDelete(cl){
    setConfirm({
      title: `Delete "${cl.name}"?`,
      message: 'This class and its link will be removed.',
      onConfirm: () => { store.deleteClass(cl.id); toast('Class deleted'); },
    });
  }

  const myCourses = me.role === 'student'
    ? store.state.courses.filter(c => (me.courses||[]).includes(c.id))
    : store.state.courses;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Online classes</h1>
          <div className="page-sub">
            {me.role === 'student'
              ? `Classes for your ${(me.courses||[]).length} enrolled course${(me.courses||[]).length===1?'':'s'}.`
              : 'All course classes. Persistent links — update or delete anytime.'}
          </div>
        </div>
        <div className="head-actions">
          {canEdit && (
            <button className="btn accent" onClick={() => { setEditing(null); setCreating(true); }}>
              <Icon name="plus" /> Add class
            </button>
          )}
        </div>
      </div>

      <div className="filters">
        <div className="search">
          <Icon name="search" size={15} />
          <input placeholder="Search classes" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        <div className="chip-group">
          <button className={`chip ${courseFilter==='all'?'is-active':''}`} onClick={()=>setCourseFilter('all')}>All courses</button>
          {myCourses.map(c => (
            <button key={c.id} className={`chip ${courseFilter===c.id?'is-active':''}`} onClick={()=>setCourseFilter(c.id)}>
              <span style={{ display:'inline-block', width:8, height:8, borderRadius:99, background:c.color, marginRight:6, verticalAlign:'middle' }} />
              {c.code}
            </button>
          ))}
        </div>
      </div>

      {visibleClasses.length === 0 ? (
        <div className="empty">
          <h3>No classes yet</h3>
          <p>{canEdit ? 'Create a class to get started.' : 'No classes assigned to your courses yet.'}</p>
          {canEdit && <button className="btn accent" onClick={() => setCreating(true)}><Icon name="plus" /> Add class</button>}
        </div>
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))', gap:14 }}>
          {visibleClasses.map(cl => {
            const course = store.state.courses.find(c => c.id === cl.courseId);
            return (
              <div key={cl.id} style={{
                background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--radius-lg)',
                overflow:'hidden', display:'flex', flexDirection:'column',
                boxShadow:'var(--shadow-sm)',
                transition:'border-color .15s ease, box-shadow .15s ease',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor='var(--line-2)'; e.currentTarget.style.boxShadow='var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor='var(--line)'; e.currentTarget.style.boxShadow='var(--shadow-sm)'; }}
              >
                {course && <div style={{ height:4, background: course.color }} />}
                <div style={{ padding:'16px 18px', display:'flex', flexDirection:'column', gap:10, flex:1 }}>
                  {/* Header */}
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8 }}>
                    <div>
                      <div style={{ fontWeight:700, fontSize:15, letterSpacing:'-0.005em', lineHeight:1.3 }}>{cl.name}</div>
                      {course && (
                        <div style={{ fontSize:12, fontWeight:600, color: course.color, marginTop:2 }}>
                          ● {course.name}
                        </div>
                      )}
                    </div>
                    {canEdit && (
                      <Menu>
                        <button onClick={() => setEditing(cl)}><Icon name="edit" size={14} /> Edit</button>
                        <hr />
                        <button className="danger" onClick={() => askDelete(cl)}><Icon name="trash" size={14} /> Delete</button>
                      </Menu>
                    )}
                  </div>

                  {/* Time */}
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <Icon name="clock" size={13} style={{ color:'var(--ink-3)' }} />
                    <span style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:12.5, fontWeight:600 }}>
                      {fmtTime(cl.startTime)} – {fmtTime(cl.endTime)}
                    </span>
                    <span style={{ fontSize:11.5, color:'var(--ink-3)' }}>
                      ({Math.round((toMin(cl.endTime)-toMin(cl.startTime)))} min)
                    </span>
                  </div>

                  {/* Link */}
                  <div style={{ background:'var(--surface-2)', borderRadius:8, padding:'8px 12px', display:'flex', alignItems:'center', gap:8, overflow:'hidden' }}>
                    <Icon name="link" size={13} style={{ color:'var(--ink-3)', flexShrink:0 }} />
                    <a href={cl.link} target="_blank" rel="noreferrer"
                      style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:12, color:'var(--accent)', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', textDecoration:'none', fontWeight:500 }}>
                      {cl.link.replace(/^https?:\/\//,'')}
                    </a>
                  </div>

                  {cl.notes && <div style={{ fontSize:12.5, color:'var(--ink-3)', fontStyle:'italic' }}>"{cl.notes}"</div>}

                  {cl.updatedAt && (
                    <div style={{ fontSize:11, color:'var(--ink-3)', display:'flex', alignItems:'center', gap:4 }}>
                      <Icon name="clock" size={11} />
                      Updated {fmtUpdated(cl.updatedAt)}
                    </div>
                  )}

                  {/* Actions */}
                  <div style={{ display:'flex', gap:8, marginTop:'auto' }}>
                    <button className="btn sm ghost" style={{ flex:1, justifyContent:'center' }} onClick={() => copyLink(cl.link, toast)}>
                      <Icon name="copy" size={13} /> Copy link
                    </button>
                    <a className="btn sm accent" style={{ flex:1, justifyContent:'center' }} href={cl.link} target="_blank" rel="noreferrer">
                      Open <Icon name="arrow" size={13} />
                    </a>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <ClassForm
        open={creating || !!editing}
        onClose={() => { setCreating(false); setEditing(null); }}
        initial={editing}
        onSave={saveClass}
      />
      <ConfirmDialog
        open={!!confirm}
        title={confirm?.title || ''}
        message={confirm?.message || ''}
        onClose={() => setConfirm(null)}
        onConfirm={() => confirm?.onConfirm?.()}
      />
    </div>
  );
}

// ---------- Online Meeting tab ----------
function MeetingsTab(){
  const store = useStore();
  const toast = useToast();
  const me = store.currentUser();
  const [editing, setEditing] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [confirm, setConfirm] = React.useState(null);
  const [q, setQ] = React.useState('');

  const canEdit = me.role === 'admin';

  const visible = React.useMemo(() => {
    let list = store.state.meetings;
    if(me.role !== 'admin'){
      list = list.filter(m => m.attendees.includes(me.id));
    }
    if(q.trim()){
      const term = q.toLowerCase();
      list = list.filter(m => m.title.toLowerCase().includes(term));
    }
    return list;
  }, [store.state.meetings, me, q]);

  function saveMeeting(payload){
    if(editing){ store.updateMeeting(editing.id, payload); toast('Meeting updated'); }
    else { store.createMeeting({ ...payload, createdBy: me.id }); toast('Meeting created'); }
  }
  function askDelete(m){
    setConfirm({
      title: `Delete "${m.title}"?`,
      message: 'The meeting and its link will be removed for all invited attendees.',
      onConfirm: () => { store.deleteMeeting(m.id); toast('Meeting deleted'); },
    });
  }

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <h1 className="page-title">Online meetings</h1>
          <div className="page-sub">
            {me.role === 'admin'
              ? 'Persistent meeting links. Share and reuse until deleted.'
              : 'Meetings you\'re invited to.'}
          </div>
        </div>
        <div className="head-actions">
          {canEdit && (
            <button className="btn accent" onClick={() => { setEditing(null); setCreating(true); }}>
              <Icon name="plus" /> New meeting
            </button>
          )}
        </div>
      </div>

      <div className="filters">
        <div className="search">
          <Icon name="search" size={15} />
          <input placeholder="Search meetings" value={q} onChange={e => setQ(e.target.value)} />
        </div>
      </div>

      {visible.length === 0 ? (
        <div className="empty">
          <h3>No meetings yet</h3>
          <p>{canEdit ? 'Create a meeting to get started.' : 'You haven\'t been invited to any meetings yet.'}</p>
          {canEdit && <button className="btn accent" onClick={() => setCreating(true)}><Icon name="plus" /> New meeting</button>}
        </div>
      ) : (
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(300px,1fr))', gap:14 }}>
          {visible.map(m => {
            const attendees = m.attendees.map(id => store.state.users.find(u => u.id === id)).filter(Boolean);
            return (
              <div key={m.id} style={{
                background:'var(--surface)', border:'1px solid var(--line)', borderRadius:'var(--radius-lg)',
                padding:'18px', display:'flex', flexDirection:'column', gap:12,
                boxShadow:'var(--shadow-sm)',
                transition:'border-color .15s ease, box-shadow .15s ease',
              }}
              onMouseEnter={e => { e.currentTarget.style.borderColor='var(--line-2)'; e.currentTarget.style.boxShadow='var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor='var(--line)'; e.currentTarget.style.boxShadow='var(--shadow-sm)'; }}
              >
                <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:8 }}>
                  <div>
                    <div style={{ fontWeight:700, fontSize:15, letterSpacing:'-0.005em', lineHeight:1.3 }}>{m.title}</div>
                    {m.notes && <div style={{ fontSize:12.5, color:'var(--ink-3)', marginTop:3, fontStyle:'italic' }}>"{m.notes}"</div>}
                  </div>
                  {canEdit && (
                    <Menu>
                      <button onClick={() => setEditing(m)}><Icon name="edit" size={14} /> Edit</button>
                      <hr />
                      <button className="danger" onClick={() => askDelete(m)}><Icon name="trash" size={14} /> Delete</button>
                    </Menu>
                  )}
                </div>

                <div style={{ background:'var(--surface-2)', borderRadius:8, padding:'8px 12px', display:'flex', alignItems:'center', gap:8, overflow:'hidden' }}>
                  <Icon name="link" size={13} style={{ color:'var(--ink-3)', flexShrink:0 }} />
                  <a href={m.link} target="_blank" rel="noreferrer"
                    style={{ fontFamily:"'JetBrains Mono',monospace", fontSize:12, color:'var(--accent)', flex:1, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', textDecoration:'none', fontWeight:500 }}>
                    {m.link.replace(/^https?:\/\//,'')}
                  </a>
                </div>

                {attendees.length > 0 && (
                  <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                    <div style={{ display:'flex' }}>
                      {attendees.slice(0,5).map((a,i) => (
                        <div key={a.id} className="avatar" title={a.name}
                          style={{ width:24, height:24, fontSize:9, border:'2px solid var(--surface)', marginLeft: i===0?0:-6 }}>
                          {initials(a.name)}
                        </div>
                      ))}
                    </div>
                    <span style={{ fontSize:12, color:'var(--ink-3)', fontWeight:600 }}>
                      {attendees.length} attendee{attendees.length===1?'':'s'}
                      {attendees.length > 5 && ` (+${attendees.length-5} more)`}
                    </span>
                  </div>
                )}

                {m.updatedAt && (
                  <div style={{ fontSize:11, color:'var(--ink-3)', display:'flex', alignItems:'center', gap:4 }}>
                    <Icon name="clock" size={11} />
                    Updated {fmtUpdated(m.updatedAt)}
                  </div>
                )}

                <div style={{ display:'flex', gap:8, marginTop:'auto' }}>
                  <button className="btn sm ghost" style={{ flex:1, justifyContent:'center' }} onClick={() => copyLink(m.link, toast)}>
                    <Icon name="copy" size={13} /> Copy link
                  </button>
                  <a className="btn sm accent" style={{ flex:1, justifyContent:'center' }} href={m.link} target="_blank" rel="noreferrer">
                    Open <Icon name="arrow" size={13} />
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      )}

      <MeetingForm
        open={creating || !!editing}
        onClose={() => { setCreating(false); setEditing(null); }}
        initial={editing}
        onSave={saveMeeting}
      />
      <ConfirmDialog
        open={!!confirm}
        title={confirm?.title || ''}
        message={confirm?.message || ''}
        onClose={() => setConfirm(null)}
        onConfirm={() => confirm?.onConfirm?.()}
      />
    </div>
  );
}

Object.assign(window, { ClassesTab, MeetingsTab, copyLink });