// enroll.jsx — course registration records, attendance check-in, reminders, certificates

/* ---------- helpers over store.data.enrollments ---------- */
function allRegs(data) { return (data && data.enrollments) || []; }
function regsFor(data, courseId) { return allRegs(data).filter(r => r.courseId === courseId); }
function courseStartTs(c) { const ts = c && c.startAt ? Date.parse(c.startAt) : NaN; return isNaN(ts) ? null : ts; }

// duration in hours parsed from the free-text field (Arabic or Latin digits); default 3h
function courseHours(c) {
  const s = String((c && c.dur && (c.dur.ar || c.dur.en || c.dur)) || '').replace(/[\u0660-\u0669]/g, d => String(d.charCodeAt(0) - 0x0660));
  const m = s.match(/(\d+(?:[.,]\d+)?)/);
  const n = m ? parseFloat(m[1].replace(',', '.')) : 0;
  if (!n) return 3;
  return /دقيق|min/i.test(s) ? n / 60 : /يوم|day/i.test(s) ? n * 6 : n;
}
// 'live' from 30 minutes before the start until the session ends, else 'soon' | 'past'
function courseStatus(c) {
  const ts = courseStartTs(c);
  if ((c.term || 'upcoming') === 'past') return 'past';
  if (!ts) return 'soon';
  const now = Date.now();
  if (now >= ts - 30 * 60000 && now <= ts + courseHours(c) * 36e5) return 'live';
  return now > ts ? 'past' : 'soon';
}
function liveCourses(data) { return (data.courses || []).filter(c => courseStatus(c) === 'live'); }

const MY_REGS_KEY = 'ibtikar_regs';
const myRegs = () => { try { return JSON.parse(localStorage.getItem(MY_REGS_KEY) || '[]'); } catch (e) { return []; } };
const addMyReg = (id) => { const n = [...new Set([...myRegs(), id])]; localStorage.setItem(MY_REGS_KEY, JSON.stringify(n)); return n; };
const ME_KEY = 'ibtikar_me';
const savedMe = () => { try { return JSON.parse(localStorage.getItem(ME_KEY) || '{}'); } catch (e) { return {}; } };
const saveMe = (m) => { try { localStorage.setItem(ME_KEY, JSON.stringify(m)); } catch (e) {} };

/* ---------- registration modal ---------- */
function EnrollModal({ course, t, L, store, onClose, onDone }) {
  const toast = useToast();
  const me = savedMe();
  const [f, setF] = React.useState({ name: me.name || '', empId: me.empId || '', dept: me.dept || '', email: me.email || '', phone: me.phone || '' });
  const [sending, setSending] = React.useState(false);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.name.trim() && f.empId.trim() && f.dept.trim() && f.phone.trim();

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    setSending(true);
    const rec = {
      id: 'REG-' + Date.now().toString(36).toUpperCase(),
      courseId: course.id, courseTitle: course.title,
      name: f.name.trim(), empId: f.empId.trim(), dept: f.dept.trim(), email: f.email.trim(), phone: f.phone.trim(),
      at: new Date().toISOString(), attended: false, attendedAt: null, certRef: null,
    };
    store.addEnrollment(rec);
    saveMe(f);
    addMyReg(course.id);
    setSending(false);
    toast(t('enroll_ok'));
    onDone && onDone(rec);
  };

  return (
    <div className="card-pad" style={{ padding: 28 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div>
          <div className="eyebrow"><Icon.book s={14} /> {t('reg_now')}</div>
          <h3 style={{ fontSize: 20, marginTop: 6 }}>{L(course.title)}</h3>
          <p className="muted" style={{ fontSize: 13.5, marginTop: 6 }}>{L(course.date)}{course.dur ? ' · ' + L(course.dur) : ''}</p>
        </div>
        <button className="btn btn-dark btn-sm" onClick={onClose} style={{ padding: 8 }}><Icon.x s={16} /></button>
      </div>
      <form onSubmit={submit} style={{ display: 'grid', gap: 16, marginTop: 20 }}>
        <div className="grid g2" style={{ gap: 16 }}>
          <Field label={t('f_name')} required><input className="input" required value={f.name} onChange={e => set('name', e.target.value)} placeholder="—" /></Field>
          <Field label={t('f_id')} required><input className="input" required value={f.empId} onChange={e => set('empId', e.target.value)} placeholder="EE-0000" /></Field>
        </div>
        <div className="grid g2" style={{ gap: 16 }}>
          <Field label={t('f_dept')} required><input className="input" required value={f.dept} onChange={e => set('dept', e.target.value)} placeholder="—" /></Field>
          <Field label={t('f_phone_reg')} required hint={t('phone_hint')}><input className="input" required value={f.phone} onChange={e => set('phone', e.target.value)} placeholder="05xxxxxxxx" dir="ltr" style={{ textAlign: 'start' }} /></Field>
        </div>
        <Field label={t('f_email')}><input className="input" type="email" value={f.email} onChange={e => set('email', e.target.value)} placeholder="name@ibtikar.health" dir="ltr" style={{ textAlign: 'start' }} /></Field>
        <div className="conf-note" style={{ marginTop: 0 }}><Icon.shield s={16} /> {t('enroll_privacy')}</div>
        <button className="btn btn-primary btn-lg" disabled={!valid || sending}>{sending ? <><span className="spin" /> {t('sending')}</> : <><Icon.check s={17} /> {t('confirm_reg')}</>}</button>
      </form>
    </div>
  );
}

/* ---------- reminders ---------- */
function reminderText(c, L, when) {
  const start = courseStartTs(c);
  const dt = start ? window.arDateTime(start) : L(c.date);
  return `تنبيه من منصة ابتكار · أكاديمية المبتكرين\n\nدورة «${L(c.title)}» ${when}\nالموعد: ${dt}\nالمقدّم: ${L(c.presenter)}${c.dur ? '\nالمدة: ' + L(c.dur) : ''}\nالنمط: ${c.mode === 'virtual' ? 'عن بُعد' : 'حضوري'}${c.link ? '\nرابط الدخول: ' + c.link : ''}\n\nنتشرف بحضورك.`;
}
function waLink(phone, msg) {
  let p = String(phone || '').replace(/[^\d]/g, '');
  if (p.startsWith('05')) p = '966' + p.slice(1);
  else if (p.startsWith('5') && p.length === 9) p = '966' + p;
  else if (p.startsWith('00')) p = p.slice(2);
  return 'https://wa.me/' + p + '?text=' + encodeURIComponent(msg);
}
function smsLinkAll(phones, msg) {
  return 'sms:' + phones.map(p => String(p).replace(/[^\d+]/g, '')).join(',') + '?&body=' + encodeURIComponent(msg);
}
function requestNotify() {
  if (!('Notification' in window)) return Promise.resolve('unsupported');
  if (Notification.permission === 'granted') return Promise.resolve('granted');
  return Notification.requestPermission().catch(() => 'denied');
}

// fires a device notification for locally-registered courses close to their start time
function useCourseReminders(data, L) {
  const [soon, setSoon] = React.useState([]);
  React.useEffect(() => {
    const tick = () => {
      const mine = myRegs();
      let done = {};
      try { done = JSON.parse(localStorage.getItem('ibtikar_reminded') || '{}'); } catch (e) {}
      const up = [];
      (data.courses || []).forEach(c => {
        const ts = courseStartTs(c);
        if (!ts || !mine.includes(c.id)) return;
        const hrs = (ts - Date.now()) / 36e5;
        if (hrs <= 0 || hrs > 72) return;
        up.push({ c, hrs });
        [[24, 'd1', 'غداً'], [2, 'h2', 'بعد ساعتين']].forEach(([lim, key, word]) => {
          const k = c.id + ':' + key;
          if (hrs <= lim && !done[k]) {
            done[k] = 1;
            try {
              if ('Notification' in window && Notification.permission === 'granted') {
                new Notification('دورة ' + L(c.title) + ' ' + word, { body: reminderText(c, L, word).split('\n\n')[1] || '', tag: k });
              }
            } catch (e) {}
          }
        });
      });
      try { localStorage.setItem('ibtikar_reminded', JSON.stringify(done)); } catch (e) {}
      setSoon(up.sort((a, b) => a.hrs - b.hrs));
    };
    tick();
    const id = setInterval(tick, 60000);
    return () => clearInterval(id);
  }, [data.courses]);
  return soon;
}

function ReminderBanner({ soon, t, L }) {
  const [perm, setPerm] = React.useState(('Notification' in window) ? Notification.permission : 'unsupported');
  if (!soon.length) return null;
  const { c, hrs } = soon[0];
  const inWords = hrs < 1 ? t('rem_now') : hrs < 24 ? `${Math.round(hrs)} ${t('rem_hours')}` : `${Math.round(hrs / 24)} ${t('rem_days')}`;
  return (
    <div className="card card-pad" style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap', background: 'color-mix(in srgb, var(--accent) 10%, transparent)', borderColor: 'color-mix(in srgb, var(--accent) 32%, transparent)', marginBottom: 22 }}>
      <span className="av" style={{ width: 40, height: 40, background: 'var(--accent)', flex: 'none' }}><Icon.clock s={20} /></span>
      <div style={{ flex: 1, minWidth: 200 }}>
        <b style={{ fontSize: 15.5 }}>{t('rem_title')} — {L(c.title)}</b>
        <div className="muted" style={{ fontSize: 13.5, marginTop: 3 }}>{t('rem_starts')} {inWords} · {window.arDateTime(courseStartTs(c))}</div>
      </div>
      {perm !== 'granted' && perm !== 'unsupported' && (
        <button className="btn btn-primary btn-sm" onClick={() => requestNotify().then(p => setPerm(p))}><Icon.phone s={15} /> {t('rem_enable')}</button>
      )}
    </div>
  );
}

/* ---- live session console: shown on the course page while a course is running ---- */
function LiveCourseBar({ data, store, t, L }) {
  const toast = useToast();
  const [, force] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => force(x => x + 1), 30000); return () => clearInterval(id); }, []);
  const live = liveCourses(data);
  if (!live.length) return null;
  return (
    <div style={{ display: 'grid', gap: 14, marginBottom: 24 }}>
      {live.map(c => <LiveCourseCard key={c.id} c={c} data={data} store={store} t={t} L={L} toast={toast} />)}
    </div>
  );
}

function LiveCourseCard({ c, data, store, t, L, toast }) {
  const rows = regsFor(data, c.id);
  const present = rows.filter(r => r.attended);
  const url = location.origin + location.pathname + '#checkin=' + c.id;
  const ts = courseStartTs(c);
  return (
    <div className="card card-pad" style={{ background: 'color-mix(in srgb, var(--rose) 10%, transparent)', borderColor: 'color-mix(in srgb, var(--rose) 34%, transparent)' }}>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <span className="badge rose" style={{ gap: 7 }}><span className="live-dot" /> {t('live_now')}</span>
        <div style={{ flex: 1, minWidth: 220 }}>
          <b style={{ fontSize: 17 }}>{L(c.title)}</b>
          <div className="muted" style={{ fontSize: 13.5, marginTop: 3 }}>{L(c.presenter)}{ts ? ' · ' + window.arDateTime(ts) : ''}{c.dur ? ' · ' + L(c.dur) : ''}</div>
        </div>
        <span className="chip"><Icon.users s={14} /> {t('registered_n')}: {rows.length}</span>
        <span className="chip on"><Icon.check s={14} /> {t('attended_n')}: {present.length}</span>
      </div>
      <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap', marginTop: 16 }}>
        <a className="btn btn-primary" href={'#checkin=' + c.id}><Icon.check s={16} /> {t('open_checkin')}</a>
        <button className="btn btn-ghost btn-sm" onClick={() => { copyText(url); toast(t('link_copied')); }}><Icon.hash s={15} /> {t('copy_checkin')}</button>
        <button className="btn btn-ghost btn-sm" onClick={() => window.printRegistrations(c, rows, L)}><Icon.book s={15} /> {t('pdf_regs')}</button>
        <button className="btn btn-ghost btn-sm" onClick={() => window.printAttendance(c, rows, L)}><Icon.layers s={15} /> {t('pdf_attend')}</button>
        <button className="btn btn-ghost btn-sm" disabled={!present.length} onClick={() => window.printCertificates(c, present, L)}><Icon.award s={15} /> {t('print_all_certs')} ({present.length})</button>
      </div>
      {present.length > 0 && (
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
          {present.map(r => (
            <button key={r.id} className="chip" onClick={() => window.printCertificate(c, r, L)} title={t('print_cert')}>
              <Icon.award s={13} /> {r.name}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* ---- admin: per-course registration + attendance panel ---- */
function CourseRegPanel({ course, data, store, t, L }) {
  const toast = useToast();
  const rows = regsFor(data, course.id);
  const present = rows.filter(r => r.attended);
  const [remind, setRemind] = React.useState(false);
  const checkinUrl = location.origin + location.pathname + '#checkin=' + course.id;

  const toggle = (r) => {
    const next = structuredClone(data);
    const rec = (next.enrollments || []).find(x => x.id === r.id);
    if (!rec) return;
    rec.attended = !rec.attended;
    rec.attendedAt = rec.attended ? new Date().toISOString() : null;
    rec.certRef = rec.attended ? (rec.certRef || window.certRefFor(course, rec)) : null;
    store.save(next);
  };
  const del = (r) => {
    const next = structuredClone(data);
    next.enrollments = (next.enrollments || []).filter(x => x.id !== r.id);
    store.save(next);
  };
  const copyLink = () => { { copyText(checkinUrl); toast(t('link_copied')); }; };

  return (
    <div className="card" style={{ padding: 16, background: 'rgba(255,255,255,.02)' }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 180 }}>
          <b style={{ fontSize: 15 }}>{L(course.title) || L({ ar: '(بدون عنوان)', en: '(untitled)' })}</b>
          <div className="muted" style={{ fontSize: 13 }}>{L(course.presenter)} · {L(course.date)}</div>
        </div>
        <span className="chip"><Icon.users s={14} /> {t('registered_n')}: {rows.length}</span>
        <span className="chip"><Icon.check s={14} /> {t('attended_n')}: {present.length}</span>
      </div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 14 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => window.printRegistrations(course, rows, L)}><Icon.book s={15} /> {t('pdf_regs')}</button>
        <button className="btn btn-ghost btn-sm" onClick={() => window.printAttendance(course, rows, L)}><Icon.check s={15} /> {t('pdf_attend')}</button>
        <button className="btn btn-ghost btn-sm" disabled={!present.length} onClick={() => window.printCertificates(course, present, L)}><Icon.award s={15} /> {t('print_all_certs')} ({present.length})</button>
        <button className="btn btn-ghost btn-sm" onClick={copyLink}><Icon.hash s={15} /> {t('copy_checkin')}</button>
        <button className="btn btn-ghost btn-sm" onClick={() => setRemind(true)}><Icon.phone s={15} /> {t('send_reminders')}</button>
      </div>

      {rows.length > 0 && (
        <div style={{ display: 'grid', gap: 8, marginTop: 14 }}>
          {rows.map(r => (
            <div key={r.id} style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap', padding: '9px 12px', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)' }}>
              <span className="av" style={{ width: 28, height: 28, fontSize: 12, background: r.attended ? 'var(--accent)' : 'rgba(255,255,255,.08)', color: r.attended ? 'var(--on-accent)' : 'var(--muted)', flex: 'none' }}>{r.attended ? <Icon.check s={14} /> : (r.name || '?')[0]}</span>
              <div style={{ flex: 1, minWidth: 150 }}>
                <b style={{ fontSize: 14 }}>{r.name}</b>
                <div className="muted" style={{ fontSize: 12.5 }}>{r.empId} · {r.dept} · <span dir="ltr">{r.phone}</span></div>
              </div>
              <button className={"btn btn-sm " + (r.attended ? 'btn-primary' : 'btn-dark')} onClick={() => toggle(r)}>{r.attended ? t('present') : t('mark_present')}</button>
              {r.attended && <button className="btn btn-ghost btn-sm" onClick={() => window.printCertificate(course, r, L)}><Icon.award s={15} /> {t('print_cert')}</button>}
              <button className="btn btn-dark btn-sm" style={{ padding: 8, color: 'var(--rose)' }} onClick={() => del(r)}><Icon.trash s={14} /></button>
            </div>
          ))}
        </div>
      )}
      {rows.length === 0 && <p className="muted" style={{ fontSize: 13.5, marginTop: 12 }}>{t('no_regs')}</p>}

      <Modal open={remind} onClose={() => setRemind(false)} max={620}>
        <RemindModal course={course} rows={rows} t={t} L={L} onClose={() => setRemind(false)} />
      </Modal>
    </div>
  );
}

function RemindModal({ course, rows, t, L, onClose }) {
  const toast = useToast();
  const [when, setWhen] = React.useState('غداً');
  const msg = reminderText(course, L, when);
  const phones = rows.map(r => r.phone).filter(Boolean);
  return (
    <div className="card-pad" style={{ padding: 26 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div>
          <div className="eyebrow"><Icon.phone s={14} /> {t('send_reminders')}</div>
          <h3 style={{ fontSize: 19, marginTop: 6 }}>{L(course.title)}</h3>
        </div>
        <button className="btn btn-dark btn-sm" onClick={onClose} style={{ padding: 8 }}><Icon.x s={16} /></button>
      </div>
      <div className="tabs" style={{ marginTop: 16 }}>
        {['بعد أسبوع', 'غداً', 'بعد ساعتين', 'الآن'].map(w => (
          <button key={w} className={"tab " + (when === w ? 'on' : '')} onClick={() => setWhen(w)}>{w}</button>
        ))}
      </div>
      <pre style={{ whiteSpace: 'pre-wrap', fontSize: 13.5, lineHeight: 1.75, background: 'rgba(255,255,255,.03)', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)', padding: 14, marginTop: 14, fontFamily: 'inherit' }}>{msg}</pre>
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 14 }}>
        <button className="btn btn-ghost btn-sm" onClick={() => { copyText(msg); toast(t('copied')); }}><Icon.pen s={15} /> {t('copy_text')}</button>
        {phones.length > 0 && <a className="btn btn-ghost btn-sm" href={smsLinkAll(phones, msg)}><Icon.mail s={15} /> {t('sms_all')} · {phones.length}</a>}
      </div>
      <div style={{ display: 'grid', gap: 8, marginTop: 16 }}>
        {rows.filter(r => r.phone).map(r => (
          <div key={r.id} style={{ display: 'flex', gap: 10, alignItems: 'center', padding: '8px 12px', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)' }}>
            <div style={{ flex: 1 }}><b style={{ fontSize: 14 }}>{r.name}</b><div className="muted" style={{ fontSize: 12.5 }} dir="ltr">{r.phone}</div></div>
            <a className="btn btn-primary btn-sm" href={waLink(r.phone, msg)} target="_blank" rel="noopener"><Icon.wa s={15} /> {t('wa_send')}</a>
          </div>
        ))}
        {phones.length === 0 && <p className="muted" style={{ fontSize: 13.5 }}>{t('no_phones')}</p>}
      </div>
    </div>
  );
}

/* ---------- public attendance check-in page (open 24/7 via link) ---------- */
function CheckinPage({ go, t, L, store, courseId }) {
  const toast = useToast();
  const data = store.data;
  const course = (data.courses || []).find(c => c.id === courseId) || (data.courses || [])[0];
  const me = savedMe();
  const [f, setF] = React.useState({ name: me.name || '', empId: me.empId || '', dept: me.dept || '', phone: me.phone || '', email: me.email || '' });
  const [done, setDone] = React.useState(null);
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.name.trim() && f.empId.trim();

  if (!course) {
    return (
      <div>
        <PageHeader go={go} t={t} eyebrow={t('checkin_eyebrow')} title={t('checkin_title')} icon="check" />
        <section className="section tight"><div className="wrap" style={{ maxWidth: 620 }}><p className="muted center">{t('checkin_no_course')}</p></div></section>
      </div>
    );
  }

  const submit = (e) => {
    e.preventDefault();
    if (!valid) return;
    const next = structuredClone(data);
    if (!next.enrollments) next.enrollments = [];
    const key = f.empId.trim().toLowerCase();
    let rec = next.enrollments.find(r => r.courseId === course.id && (String(r.empId).trim().toLowerCase() === key || (f.email && String(r.email).trim().toLowerCase() === f.email.trim().toLowerCase())));
    if (!rec) {
      rec = { id: 'REG-' + Date.now().toString(36).toUpperCase(), courseId: course.id, courseTitle: course.title, name: f.name.trim(), empId: f.empId.trim(), dept: f.dept.trim(), email: f.email.trim(), phone: f.phone.trim(), at: new Date().toISOString(), attended: false, attendedAt: null, certRef: null, walkIn: true };
      next.enrollments.unshift(rec);
    }
    rec.name = f.name.trim() || rec.name;
    if (f.dept.trim()) rec.dept = f.dept.trim();
    if (f.phone.trim()) rec.phone = f.phone.trim();
    if (f.email.trim()) rec.email = f.email.trim();
    rec.attended = true;
    rec.attendedAt = rec.attendedAt || new Date().toISOString();
    rec.certRef = rec.certRef || window.certRefFor(course, rec);
    store.save(next);
    saveMe(f);
    addMyReg(course.id);
    setDone(rec);
    toast(t('checkin_ok'));
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (done) {
    return (
      <div>
        <PageHeader go={go} t={t} eyebrow={t('checkin_eyebrow')} title={t('checkin_title')} icon="check" />
        <section className="section tight">
          <div className="wrap" style={{ maxWidth: 640 }}>
            <div className="card card-pad center" style={{ padding: 44 }}>
              <div className="av" style={{ width: 72, height: 72, margin: '0 auto 18px', background: 'var(--accent)' }}><Icon.check s={36} /></div>
              <h2 style={{ fontSize: 26 }}>{t('checkin_ok')}</h2>
              <p className="muted" style={{ marginTop: 12, fontSize: 15.5, lineHeight: 1.7 }}>{t('cert_ready')}</p>
              <div className="chip on" style={{ margin: '18px auto 0', fontSize: 15, padding: '10px 18px' }}><Icon.hash s={15} /> <span dir="ltr">{done.certRef}</span></div>
              <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 26, flexWrap: 'wrap' }}>
                <button className="btn btn-primary btn-lg" onClick={() => window.printCertificate(course, done, L)}><Icon.award s={18} /> {t('print_cert')}</button>
                <button className="btn btn-ghost" onClick={() => go('ondemand')}><Icon.play s={16} /> {t('nav_ondemand')}</button>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  return (
    <div>
      <PageHeader go={go} t={t} eyebrow={t('checkin_eyebrow')} title={t('checkin_title')} sub={t('checkin_sub')} icon="check" />
      <section className="section tight">
        <div className="wrap" style={{ maxWidth: 660, display: 'grid', gap: 20 }}>
          <div className="card card-pad">
            <div className="eyebrow"><Icon.book s={14} /> {L(COURSE_CATS.find(x => x.id === course.cat)?.label)}</div>
            <h3 style={{ fontSize: 21, marginTop: 8 }}>{L(course.title)}</h3>
            <div className="grid g2" style={{ gap: 14, marginTop: 16 }}>
              {course.presenter && <MetaRow icon="user" label={t('presenter')} value={L(course.presenter)} />}
              {course.date && <MetaRow icon="clock" label={t('course_date')} value={L(course.date)} />}
              {course.dur && <MetaRow icon="clock" label={t('duration')} value={L(course.dur)} />}
              <MetaRow icon={course.mode === 'onsite' ? 'pin' : 'globe'} label={L({ ar: 'النمط', en: 'Mode' })} value={course.mode === 'onsite' ? t('mode_onsite') : t('mode_virtual')} />
            </div>
          </div>
          <form className="card card-pad" style={{ display: 'grid', gap: 16, padding: 28 }} onSubmit={submit}>
            <div className="grid g2" style={{ gap: 16 }}>
              <Field label={t('f_name')} required><input className="input" required value={f.name} onChange={e => set('name', e.target.value)} placeholder="—" /></Field>
              <Field label={t('f_id')} required><input className="input" required value={f.empId} onChange={e => set('empId', e.target.value)} placeholder="EE-0000" /></Field>
            </div>
            <div className="grid g2" style={{ gap: 16 }}>
              <Field label={t('f_dept')}><input className="input" value={f.dept} onChange={e => set('dept', e.target.value)} placeholder="—" /></Field>
              <Field label={t('f_phone_reg')}><input className="input" value={f.phone} onChange={e => set('phone', e.target.value)} placeholder="05xxxxxxxx" dir="ltr" style={{ textAlign: 'start' }} /></Field>
            </div>
            <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.7 }}>{t('checkin_note')}</p>
            <button className="btn btn-primary btn-lg" disabled={!valid}><Icon.check s={18} /> {t('checkin_btn')}</button>
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  EnrollModal, CourseRegPanel, RemindModal, CheckinPage, ReminderBanner, useCourseReminders, LiveCourseBar,
  regsFor, allRegs, courseStartTs, courseStatus, courseHours, liveCourses, myRegs, addMyReg, savedMe, saveMe, reminderText, waLink, smsLinkAll, requestNotify,
});