// TeachingView — pedagogical qualifications + taught modules with
// collapsible briefs. Matches the News/Talks visual vocabulary.
const TV = window.WINTELAcademicDesignSystem_045d4f;

function CredentialItem({ c }) {
  const [open, setOpen] = React.useState(false);
  const hasDesc = !!c.desc;
  return (
    <li style={{ listStyle: 'none' }}>
      <div onClick={hasDesc ? () => setOpen((v) => !v) : undefined} role={hasDesc ? 'button' : undefined} aria-expanded={hasDesc ? open : undefined}
        style={{ display: 'flex', gap: '0.85rem', alignItems: 'flex-start', cursor: hasDesc ? 'pointer' : 'default' }}>
        <span style={{ color: 'var(--accent)', flexShrink: 0, paddingTop: '0.1rem' }}>
          <i className="ri-medal-line" style={{ fontSize: 18 }} />
        </span>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.3rem' }}>
          <h3 style={{ margin: 0, fontSize: 'var(--text-base)', fontWeight: 'var(--weight-medium)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)', textWrap: 'pretty' }}>
            {c.title}
            {c.url ? (
              <a href={c.url} target="_blank" rel="noopener" aria-label="Verified certificate" onClick={(e) => e.stopPropagation()}
                style={{ marginLeft: '0.45rem', color: 'var(--accent)', textDecoration: 'none', whiteSpace: 'nowrap', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-mono)' }}>
                <i className="ri-external-link-line" style={{ fontSize: 13, verticalAlign: '-1px' }} /> verify
              </a>
            ) : null}
          </h3>
          <p style={{ margin: 0, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-light)', color: 'var(--text-muted)' }}>
            {c.orgLink
              ? c.org.split(c.orgLink.label).map((seg, j, arr) => (
                  <React.Fragment key={j}>{seg}{j < arr.length - 1 ? (
                    <a href={c.orgLink.url} target="_blank" rel="noopener" style={{ color: 'var(--accent)', textDecoration: 'underline', textUnderlineOffset: '2px' }}>{c.orgLink.label}</a>
                  ) : null}</React.Fragment>
                ))
              : c.org}{c.note ? <span> · {c.note}</span> : null}
          </p>
        </div>
        {c.date ? (
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0, paddingTop: '0.15rem' }}>{c.date}</span>
        ) : null}
        {hasDesc ? (
          <i className="ri-arrow-down-s-line" style={{ fontSize: 22, color: 'var(--text-muted)', flexShrink: 0, paddingTop: '0.05rem', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--duration-base) var(--ease-standard)' }} />
        ) : null}
      </div>
      {hasDesc && open ? (
        <p style={{ margin: '0.6rem 0 0', paddingLeft: '1.7rem', fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-light)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', textWrap: 'pretty' }}>
          {c.descLink
            ? c.desc.split(c.descLink.label).map((seg, j, arr) => (
                <React.Fragment key={j}>{seg}{j < arr.length - 1 ? (
                  <a href={c.descLink.url} target="_blank" rel="noopener" style={{ color: 'var(--accent)', textDecoration: 'underline', textUnderlineOffset: '2px' }}>{c.descLink.label}</a>
                ) : null}</React.Fragment>
              ))
            : c.desc}
        </p>
      ) : null}
    </li>
  );
}

function ModuleItem({ m }) {
  const [open, setOpen] = React.useState(false);
  return (
    <li style={{ listStyle: 'none', borderBottom: '1px solid var(--border-default)' }}>
      <div onClick={() => setOpen((v) => !v)} role="button" aria-expanded={open}
        style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem', padding: '1rem 0', cursor: 'pointer' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', whiteSpace: 'nowrap', flexShrink: 0, paddingTop: '0.3rem', minWidth: '5.5rem' }}>{m.code}</span>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '0.2rem' }}>
          <h3 style={{ margin: 0, fontSize: 'var(--text-base)', fontWeight: 'var(--weight-medium)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)', textWrap: 'pretty' }}>{m.title}</h3>
          {m.level ? (
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{m.level === 'UG' ? 'Undergraduate' : m.level === 'MSc' ? 'Postgraduate · MSc' : m.level}</span>
          ) : null}
        </div>
        <i className="ri-arrow-down-s-line" style={{ fontSize: 22, color: 'var(--text-muted)', flexShrink: 0, paddingTop: '0.15rem', transform: open ? 'rotate(180deg)' : 'none', transition: 'transform var(--duration-base) var(--ease-standard)' }} />
      </div>
      {open ? (
        <div style={{ paddingBottom: '1.25rem', paddingLeft: '6.5rem', display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
          <p style={{ margin: 0, fontSize: 'var(--text-base)', fontWeight: 'var(--weight-light)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', textWrap: 'pretty' }}>{m.desc}</p>
          {m.url ? (
            <TV.Button variant="outline" size="sm" href={m.url} target="_blank"
              style={{ height: '1.85rem', padding: '0 0.6rem', fontSize: 'var(--text-xs)', fontFamily: 'var(--font-mono)', letterSpacing: '0.03em', alignSelf: 'flex-start' }}>
              <i className="ri-external-link-line" style={{ fontSize: 14 }} /> Module page
            </TV.Button>
          ) : null}
        </div>
      ) : null}
    </li>
  );
}

function TeachingView({ data }) {
  const t = data.teaching || { credentials: [], modules: [] };
  return (
    <main style={{ display: 'flex', flexDirection: 'column', gap: '2.25rem' }}>
      <TV.SectionHeading title="Teaching" />

      <section style={{ display: 'flex', flexDirection: 'column', gap: '1.1rem' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.75rem', borderBottom: '1px solid var(--border-default)', paddingBottom: '0.4rem' }}>
          <h2 style={{ margin: 0, fontSize: 'var(--text-lg)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)' }}>Pedagogical Qualifications</h2>
        </div>
        <ul style={{ margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '1.4rem' }}>
          {t.credentials.map((c, i) => <CredentialItem key={i} c={c} />)}
        </ul>
      </section>

      <section style={{ display: 'flex', flexDirection: 'column', gap: '1.1rem' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.75rem', borderBottom: '1px solid var(--border-default)', paddingBottom: '0.4rem' }}>
          <h2 style={{ margin: 0, fontSize: 'var(--text-lg)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)' }}>Modules Taught</h2>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{t.modules.length}</span>
        </div>
        <ul style={{ margin: 0, padding: 0, borderTop: '1px solid var(--border-default)' }}>
          {t.modules.map((m, i) => <ModuleItem key={i} m={m} />)}
        </ul>
      </section>

      {(t.moderated && t.moderated.length) ? (
        <section style={{ display: 'flex', flexDirection: 'column', gap: '1.1rem' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.75rem', borderBottom: '1px solid var(--border-default)', paddingBottom: '0.4rem' }}>
            <h2 style={{ margin: 0, fontSize: 'var(--text-lg)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)' }}>Modules Moderated</h2>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>{t.moderated.length}</span>
          </div>
          {t.moderationNote ? (
            <p style={{ margin: 0, fontSize: 'var(--text-sm)', fontWeight: 'var(--weight-light)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)', textWrap: 'pretty' }}>{t.moderationNote}</p>
          ) : null}
          <ul style={{ margin: 0, padding: 0, borderTop: '1px solid var(--border-default)' }}>
            {t.moderated.map((m, i) => <ModuleItem key={i} m={m} />)}
          </ul>
        </section>
      ) : null}
    </main>
  );
}

Object.assign(window, { TeachingView });