// CRUD forms for Classes, Meetings, Users, Courses

function ClassForm({ open, onClose, initial, onSave }){
  const store = useStore();
  const isEdit = !!initial;
  const [data, setData] = React.useState(() => initial ? { audience:'course', students:[], ...initial } : {
    name: '',
    courseId: store.state.courses[0]?.id || '',
    startTime: '10:00',
    endTime: '11:00',
    link: '',
    notes: '',
    audience: 'course',
    students: [],
  });
  React.useEffect(() => {
    if(open && initial) setData({ audience:'course', students:[], ...initial });
    if(open && !initial) setData({
      name: '', courseId: store.state.courses[0]?.id || '',
      startTime: '10:00', endTime: '11:00', link: '', notes: '',
      audience: 'course', students: [],
    });
    // eslint-disable-next-line
  }, [open]);

  function toggleStudent(id){
    setData(d => ({ ...d, students: (d.students||[]).includes(id) ? d.students.filter(x=>x!==id) : [...(d.students||[]), id] }));
  }

  const eligibleStudents = React.useMemo(() => {
    return store.state.users.filter(u => u.role==='student' && (u.courses||[]).includes(data.courseId));
  }, [store.state.users, data.courseId]);

  function submit(){
    if(!data.name.trim()){ alert('Class name required'); return; }
    if(!data.courseId){ alert('Pick a course'); return; }
    if(!data.link.trim()){ alert('Meeting link required'); return; }
    if(toMin(data.endTime) <= toMin(data.startTime)){ alert('End time must be after start time'); return; }
    if(data.audience === 'specific' && (!data.students || data.students.length === 0)){
      alert('Pick at least one student, or switch to "All enrolled".');
      return;
    }
    const payload = { ...data };
    if(payload.audience === 'course') payload.students = [];
    onSave(payload);
    onClose();
  }

  return (
    <Modal open={open} onClose={onClose}
      title={isEdit ? 'Edit class' : 'Add class'}
      maxWidth={520}
      footer={<React.Fragment>
        <button className="btn ghost" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={submit}>{isEdit ? 'Save changes' : 'Create class'}</button>
      </React.Fragment>}>

      <label className="field">
        <span className="field-label">Class name</span>
        <input className="input" placeholder="e.g. React Fundamentals"
          value={data.name} onChange={e => setData({...data, name: e.target.value})} />
      </label>

      <label className="field">
        <span className="field-label">Course</span>
        <select className="select" value={data.courseId} onChange={e => setData({...data, courseId: e.target.value, students: []})}>
          {store.state.courses.map(c => <option key={c.id} value={c.id}>{c.name} · {c.code}</option>)}
        </select>
      </label>

      <div className="row-2">
        <label className="field">
          <span className="field-label">Start time</span>
          <input className="input" type="time" value={data.startTime} onChange={e => setData({...data, startTime: e.target.value})} />
        </label>
        <label className="field">
          <span className="field-label">End time</span>
          <input className="input" type="time" value={data.endTime} onChange={e => setData({...data, endTime: e.target.value})} />
        </label>
      </div>

      <label className="field">
        <span className="field-label">Meeting link</span>
        <input className="input mono" placeholder="https://meet.google.com/..."
          value={data.link} onChange={e => setData({...data, link: e.target.value})} />
        <div className="field-hint">This link stays active until you edit or delete the class.</div>
      </label>

      <div className="field">
        <span className="field-label">Who can join</span>
        <div className="seg">
          <button type="button" className={data.audience==='course'?'is-active':''} onClick={() => setData({...data, audience:'course'})}>All enrolled ({eligibleStudents.length})</button>
          <button type="button" className={data.audience==='specific'?'is-active':''} onClick={() => setData({...data, audience:'specific'})}>Specific students</button>
        </div>
        {data.audience === 'specific' && (
          <div style={{ marginTop:10 }}>
            {eligibleStudents.length === 0 ? (
              <div className="field-hint">No students enrolled in this course yet.</div>
            ) : (
              <div className="checkbox-list scroll-thin" style={{ gridTemplateColumns:'1fr', maxHeight:180 }}>
                {eligibleStudents.map(u => {
                  const on = (data.students||[]).includes(u.id);
                  return (
                    <label key={u.id} className={`checkbox-row ${on?'is-on':''}`} style={{ gap:12 }}>
                      <input type="checkbox" checked={on} onChange={() => toggleStudent(u.id)} />
                      <div className="avatar" style={{ width:28, height:28, flexShrink:0, fontSize:11 }}>{initials(u.name)}</div>
                      <span style={{ minWidth:0 }}>
                        <div style={{ fontWeight:600, fontSize:13 }}>{u.name}</div>
                        <div style={{ fontSize:11, color:'var(--ink-3)', fontFamily:"'JetBrains Mono',monospace", overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.email}</div>
                      </span>
                      {on && <span style={{ marginLeft:'auto', flexShrink:0, fontSize:11, fontWeight:700, color:'var(--accent)' }}>✓</span>}
                    </label>
                  );
                })}
              </div>
            )}
          </div>
        )}
      </div>

      <label className="field">
        <span className="field-label">Notes (optional)</span>
        <textarea className="textarea" placeholder="What should students prepare?"
          value={data.notes} onChange={e => setData({...data, notes: e.target.value})} />
      </label>
    </Modal>
  );
}
function MeetingForm({ open, onClose, initial, onSave }){
  const store = useStore();
  const isEdit = !!initial;
  const employees = store.state.users.filter(u => u.role === 'employee');
  const students = store.state.users.filter(u => u.role === 'student');

  const [audienceTab, setAudienceTab] = React.useState('employees');

  const [data, setData] = React.useState(() => initial ? { ...initial } : {
    title: '', link: '', attendees: [], notes: '',
  });
  React.useEffect(() => {
    if(open && initial) setData({ ...initial });
    if(open && !initial) setData({ title: '', link: '', attendees: [], notes: '' });
    // eslint-disable-next-line
  }, [open]);

  function toggleAttendee(id){
    setData(d => ({ ...d, attendees: d.attendees.includes(id) ? d.attendees.filter(x=>x!==id) : [...d.attendees, id] }));
  }

  function submit(){
    if(!data.title.trim()){ alert('Title required'); return; }
    if(!data.link.trim()){ alert('Meeting link required'); return; }
    onSave(data);
    onClose();
  }

  return (
    <Modal open={open} onClose={onClose}
      title={isEdit ? 'Edit meeting' : 'New online meeting'}
      maxWidth={560}
      footer={<React.Fragment>
        <button className="btn ghost" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={submit}>{isEdit ? 'Save changes' : 'Create meeting'}</button>
      </React.Fragment>}>

      <label className="field">
        <span className="field-label">Title</span>
        <input className="input" placeholder="e.g. Q2 Planning"
          value={data.title} onChange={e => setData({...data, title: e.target.value})} />
      </label>

      <label className="field">
        <span className="field-label">Meeting link</span>
        <input className="input mono" placeholder="https://meet.google.com/..."
          value={data.link} onChange={e => setData({...data, link: e.target.value})} />
        <div className="field-hint">This link stays active until you edit or delete the meeting.</div>
      </label>

      <div className="field">
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
          <span className="field-label" style={{ margin:0 }}>Invite attendees</span>
          <span style={{ fontSize:11.5, fontWeight:600, color:'var(--accent)' }}>{data.attendees.length} invited</span>
        </div>
        <div className="seg" style={{ marginBottom:8 }}>
          <button type="button" className={audienceTab==='employees'?'is-active':''} onClick={()=>setAudienceTab('employees')}>
            Employees ({data.attendees.filter(id => employees.some(e=>e.id===id)).length}/{employees.length})
          </button>
          <button type="button" className={audienceTab==='students'?'is-active':''} onClick={()=>setAudienceTab('students')}>
            Students ({data.attendees.filter(id => students.some(s=>s.id===id)).length}/{students.length})
          </button>
        </div>
        {(audienceTab === 'employees' ? employees : students).length === 0 ? (
          <div style={{ padding:'14px', textAlign:'center', border:'1px dashed var(--line-2)', borderRadius:8, color:'var(--ink-3)', fontSize:12.5 }}>
            No {audienceTab} yet — create one from the Admin panel.
          </div>
        ) : (
          <div className="checkbox-list scroll-thin" style={{ gridTemplateColumns:'1fr', maxHeight:200 }}>
            {(audienceTab === 'employees' ? employees : students).map(u => {
              const on = data.attendees.includes(u.id);
              return (
                <label key={u.id} className={`checkbox-row ${on?'is-on':''}`} style={{ gap:12 }}>
                  <input type="checkbox" checked={on} onChange={() => toggleAttendee(u.id)} />
                  <div className="avatar" style={{ width:28, height:28, flexShrink:0, fontSize:11 }}>{initials(u.name)}</div>
                  <span style={{ minWidth:0 }}>
                    <div style={{ fontWeight:600, fontSize:13 }}>{u.name}</div>
                    <div style={{ fontSize:11, color:'var(--ink-3)', fontFamily:"'JetBrains Mono',monospace", overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.email}</div>
                  </span>
                  {on && <span style={{ marginLeft:'auto', flexShrink:0, fontSize:11, fontWeight:700, color:'var(--accent)' }}>✓</span>}
                </label>
              );
            })}
          </div>
        )}
      </div>

      <label className="field">
        <span className="field-label">Notes (optional)</span>
        <textarea className="textarea" placeholder="Agenda, context, etc."
          value={data.notes} onChange={e => setData({...data, notes: e.target.value})} />
      </label>
    </Modal>
  );
}

function UserForm({ open, onClose, initial, defaultRole, onSave }){
  const store = useStore();
  const isEdit = !!initial;
  const [data, setData] = React.useState(() => initial ? { ...initial, password: '' } : {
    name: '', email: '', role: defaultRole || 'student', courses: [], password: '',
  });
  React.useEffect(() => {
    if(open && initial) setData({ ...initial, courses: initial.courses || [], password: '' });
    if(open && !initial) setData({ name:'', email:'', role: defaultRole || 'student', courses: [], password: '' });
    // eslint-disable-next-line
  }, [open]);

  function toggleCourse(id){
    setData(d => ({ ...d, courses: (d.courses||[]).includes(id) ? d.courses.filter(x=>x!==id) : [...(d.courses||[]), id] }));
  }

  function submit(){
    if(!data.name.trim()){ alert('Name required'); return; }
    if(!data.email.trim() || !data.email.includes('@')){ alert('Valid email required'); return; }
    const dup = store.state.users.find(u => u.email.toLowerCase() === data.email.toLowerCase().trim() && u.id !== initial?.id);
    if(dup){ alert('That email is already in use.'); return; }
    if(!isEdit && (!data.password || data.password.length < 6)){ alert('Password is required and must be at least 6 characters.'); return; }
    if(isEdit && data.password && data.password.length < 6){ alert('Password must be at least 6 characters.'); return; }
    const payload = { ...data };
    if(isEdit && !payload.password) delete payload.password; // don't overwrite existing pw on edit
    onSave(payload);
    onClose();
  }

  return (
    <Modal open={open} onClose={onClose}
      title={isEdit ? `Edit ${data.role}` : `Create ${data.role}`}
      footer={<React.Fragment>
        <button className="btn ghost" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={submit}>{isEdit ? 'Save' : 'Create'}</button>
      </React.Fragment>}>

      <label className="field">
        <span className="field-label">Full name</span>
        <input className="input" value={data.name} onChange={e => setData({...data, name: e.target.value})} placeholder="e.g. Aanya Sharma" />
      </label>

      <label className="field">
        <span className="field-label">Email (login)</span>
        <input className="input mono" type="email" value={data.email} onChange={e => setData({...data, email: e.target.value})} placeholder="name@merida.in" />
        <div className="field-hint">The user logs in with this address.</div>
      </label>

      <label className="field">
        <span className="field-label">{isEdit ? 'Set new password (optional)' : 'Initial password'}</span>
        <input className="input" type="text" value={data.password}
          onChange={e => setData({...data, password: e.target.value})}
          placeholder={isEdit ? 'Leave blank to keep current' : 'Min 6 characters'} />
        <div className="field-hint">{isEdit ? 'Fill this only if you want to reset it.' : 'User can change it via Forgot password.'}</div>
      </label>

      {!isEdit && (
        <div className="field">
          <span className="field-label">Role</span>
          <div className="seg">
            {['student','employee','admin'].map(r => (
              <button key={r} type="button" className={data.role===r?'is-active':''} onClick={() => setData({...data, role: r})}>
                {r[0].toUpperCase()+r.slice(1)}
              </button>
            ))}
          </div>
        </div>
      )}

      {data.role === 'student' && (
        <div className="field">
          <span className="field-label">Assigned courses</span>
          {store.state.courses.length === 0 ? (
            <div className="field-hint">Create a course first.</div>
          ) : (
            <div className="checkbox-list scroll-thin">
              {store.state.courses.map(c => {
                const on = (data.courses||[]).includes(c.id);
                return (
                  <label key={c.id} className={`checkbox-row ${on?'is-on':''}`}>
                    <input type="checkbox" checked={on} onChange={() => toggleCourse(c.id)} />
                    <span>
                      <div style={{ fontWeight:600 }}>{c.name}</div>
                      <div style={{ fontSize:11, color:'var(--ink-3)', fontFamily:"'JetBrains Mono', monospace" }}>{c.code}</div>
                    </span>
                  </label>
                );
              })}
            </div>
          )}
          <div className="field-hint">Student sees classes only for assigned courses.</div>
        </div>
      )}
    </Modal>
  );
}

function CourseForm({ open, onClose, initial, onSave }){
  const store = useStore();
  const isEdit = !!initial;
  const [studentSearch, setStudentSearch] = React.useState('');

  const allStudents = React.useMemo(() => store.state.users.filter(u => u.role === 'student'), [store.state.users]);

  const initialStudents = React.useMemo(() => {
    if(!initial) return [];
    return allStudents.filter(u => (u.courses||[]).includes(initial.id)).map(u => u.id);
  }, [initial, allStudents]);

  const [data, setData] = React.useState(() => initial ? { ...initial, students: initialStudents } : { name:'', code:'', color: 'oklch(48% 0.14 268)', students: [] });

  React.useEffect(() => {
    if(open && initial) setData({ ...initial, students: initialStudents });
    if(open && !initial) setData({ name:'', code:'', color: 'oklch(48% 0.14 268)', students: [] });
    setStudentSearch('');
  }, [open, initial, initialStudents]);

  const filteredStudents = React.useMemo(() => {
    const q = studentSearch.toLowerCase();
    return allStudents.filter(u => !q || u.name.toLowerCase().includes(q) || u.email.toLowerCase().includes(q));
  }, [allStudents, studentSearch]);

  const palette = [
    'oklch(48% 0.14 268)', 'oklch(52% 0.13 155)', 'oklch(58% 0.16 35)',
    'oklch(48% 0.12 220)', 'oklch(50% 0.14 320)', 'oklch(52% 0.12 100)',
  ];

  function toggleStudent(id){
    setData(d => ({ ...d, students: (d.students||[]).includes(id) ? d.students.filter(x=>x!==id) : [...(d.students||[]), id] }));
  }

  function submit(){
    if(!data.name.trim()) { alert('Name required'); return; }
    if(!data.code.trim()) { alert('Code required'); return; }
    onSave(data);
    onClose();
  }

  return (
    <Modal open={open} onClose={onClose}
      title={isEdit ? 'Edit course' : 'New course'}
      footer={<React.Fragment>
        <button className="btn ghost" onClick={onClose}>Cancel</button>
        <button className="btn accent" onClick={submit}>{isEdit?'Save':'Create'}</button>
      </React.Fragment>}>
      <label className="field">
        <span className="field-label">Course name</span>
        <input className="input" value={data.name} onChange={e=>setData({...data,name:e.target.value})} placeholder="e.g. Full Stack Bootcamp" />
      </label>
      <label className="field">
        <span className="field-label">Course code</span>
        <input className="input mono" value={data.code} onChange={e=>setData({...data,code:e.target.value.toUpperCase()})} placeholder="FSB-26" />
      </label>
      <div className="field">
        <span className="field-label">Color</span>
        <div style={{ display:'flex', gap:8 }}>
          {palette.map(c => (
            <button key={c} type="button" onClick={()=>setData({...data, color: c})}
              style={{ width:28, height:28, borderRadius:8, background:c, border: data.color===c?'2px solid var(--ink)':'2px solid transparent', cursor:'pointer' }} />
          ))}
        </div>
      </div>

      <div className="field">
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
          <span className="field-label" style={{ margin:0 }}>Assign Students</span>
          <span style={{ fontSize:11.5, fontWeight:600, color:'var(--accent)' }}>
            {(data.students||[]).length} / {allStudents.length} selected
          </span>
        </div>
        {allStudents.length === 0 ? (
          <div style={{ padding:'16px', textAlign:'center', border:'1px dashed var(--line-2)', borderRadius:8, color:'var(--ink-3)', fontSize:12.5 }}>
            No students created yet. Add students first.
          </div>
        ) : (
          <React.Fragment>
            <div style={{ position:'relative', marginBottom:8 }}>
              <input className="input" placeholder="Search students…" style={{ paddingLeft:32, fontSize:13 }}
                value={studentSearch} onChange={e => setStudentSearch(e.target.value)} />
              <svg style={{ position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'var(--ink-3)' }} width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            </div>
            {filteredStudents.length === 0 ? (
              <div style={{ padding:'12px', textAlign:'center', color:'var(--ink-3)', fontSize:12.5 }}>No students match your search.</div>
            ) : (
              <div className="checkbox-list scroll-thin" style={{ maxHeight:200, gridTemplateColumns:'1fr' }}>
                {filteredStudents.map(u => {
                  const on = (data.students||[]).includes(u.id);
                  return (
                    <label key={u.id} className={`checkbox-row ${on?'is-on':''}`} style={{ gap:12 }}>
                      <input type="checkbox" checked={on} onChange={() => toggleStudent(u.id)} />
                      <div className="avatar" style={{ width:28, height:28, flexShrink:0, fontSize:11 }}>{initials(u.name)}</div>
                      <span style={{ minWidth:0 }}>
                        <div style={{ fontWeight:600, fontSize:13, lineHeight:1.2 }}>{u.name}</div>
                        <div style={{ fontSize:11, color:'var(--ink-3)', fontFamily:"'JetBrains Mono',monospace", overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{u.email}</div>
                      </span>
                      {on && <span style={{ marginLeft:'auto', flexShrink:0, fontSize:11, fontWeight:700, color:'var(--accent)' }}>✓</span>}
                    </label>
                  );
                })}
              </div>
            )}
            {allStudents.length > 0 && (
              <div style={{ display:'flex', justifyContent:'flex-end', gap:8, marginTop:8 }}>
                <button type="button" className="btn sm ghost" onClick={() => setData(d => ({...d, students: filteredStudents.map(u=>u.id)}))}>Select all</button>
                <button type="button" className="btn sm ghost" onClick={() => setData(d => ({...d, students: []}))}>Clear</button>
              </div>
            )}
          </React.Fragment>
        )}
      </div>
    </Modal>
  );
}

Object.assign(window, { ClassForm, MeetingForm, UserForm, CourseForm });