// BioView — full biography: portrait + narrative, appointments, education,
// editorial roles, honors, and research interests.
const BV = window.WINTELAcademicDesignSystem_045d4f;

function InstLogo({ group }) {
  const [broken, setBroken] = React.useState(false);
  const R = (typeof window !== 'undefined' && window.__resources) || {};
  const logo = (group.logoRes && R[group.logoRes]) || group.logo;
  const logoDark = (group.logoDarkRes && R[group.logoDarkRes]) || group.logoDark;
  if (logo && !broken) {
    const pad = group.noLogoPad ? 0 : 3;
    const bg = group.noLogoPad ? 'transparent' : '#fff';
    const border = group.noLogoPad ? 'none' : '1px solid var(--border-default)';
    const base = { width: 48, height: 48, flexShrink: 0, objectFit: 'contain', borderRadius: 'var(--radius-md)', border, background: bg, padding: pad, boxSizing: 'border-box' };
    if (logoDark) {
      return (
        <React.Fragment>
          <img className="inst-logo inst-logo--light" src={logo} alt={group.org} onError={() => setBroken(true)} style={base} />
          <img className="inst-logo inst-logo--dark" src={logoDark} alt={group.org} onError={() => setBroken(true)} style={base} />
        </React.Fragment>
      );
    }
    return (
      <img src={logo} alt={group.org} onError={() => setBroken(true)} style={base} />
    );
  }
  return (
    <div aria-hidden="true" style={{ width: 48, height: 48, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-md)', background: group.color || 'var(--surface-muted)', color: '#fff', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: group.mono && group.mono.length > 2 ? '0.8rem' : '1.05rem', letterSpacing: '-0.02em' }}>
      {group.mono || (group.org || '?').slice(0, 1)}
    </div>
  );
}

function ExperienceGroup({ group }) {
  const multi = group.roles.length > 1;
  return (
    <li style={{ listStyle: 'none', display: 'flex', gap: '0.9rem', padding: '1rem 0', borderBottom: '1px solid var(--border-default)' }}>
      <InstLogo group={group} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.05rem', marginBottom: multi ? '0.6rem' : '0.25rem' }}>
          <span style={{ fontSize: 'var(--text-base)', fontWeight: 'var(--weight-semibold)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)' }}>{group.org}</span>
          {group.location ? <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>{group.location}</span> : null}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {group.roles.map((r, i) => (
            <div key={i} style={{ position: 'relative', paddingLeft: multi ? '1.1rem' : '0', paddingBottom: i < group.roles.length - 1 ? '0.8rem' : '0' }}>
              {multi ? (
                <React.Fragment>
                  <span style={{ position: 'absolute', left: '2px', top: '0.35rem', width: '7px', height: '7px', borderRadius: '50%', background: 'var(--text-muted)' }} />
                  {i < group.roles.length - 1 ? <span style={{ position: 'absolute', left: '5px', top: '0.7rem', bottom: '-0.1rem', width: '1px', background: 'var(--border-default)' }} /> : null}
                </React.Fragment>
              ) : null}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '0.1rem' }}>
                <span style={{ fontSize: 'var(--text-base)', fontWeight: 'var(--weight-medium)', color: 'var(--text-primary)', lineHeight: 'var(--leading-snug)', textWrap: 'pretty' }}>{r.role}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
                  {r.period}{r.duration ? ' · ' + r.duration : ''}
                </span>
                {r.detail ? <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-body)', fontWeight: 'var(--weight-light)', textWrap: 'pretty' }}>{r.detail}</span> : null}
              </div>
            </div>
          ))}
        </div>
      </div>
    </li>
  );
}

function BioBlock({ title, children }) {
  return (
    <section style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
      <h2 style={{ margin: 0, fontSize: 'var(--text-lg)', fontWeight: 'var(--weight-semibold)', letterSpacing: 'var(--tracking-tight)', color: 'var(--text-primary)', borderBottom: '1px solid var(--border-default)', paddingBottom: '0.4rem' }}>{title}</h2>
      {children}
    </section>
  );
}

function BioView({ data }) {
  const p = data.person;
  const b = p.biography || {};
  return (
    <main style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
      <BV.SectionHeading title="Biography" />

      <article style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
        {(b.intro || []).map((para, i) => (
          <p key={i} style={{ margin: 0, fontSize: 'var(--text-base)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-body)', textWrap: 'pretty' }}>{para}</p>
        ))}
      </article>

      {b.appointments && b.appointments.length ? (
        <BioBlock title="Appointments">
          <ul style={{ margin: 0, padding: 0 }}>
            {b.appointments.map((g, i) => <ExperienceGroup key={i} group={g} />)}
          </ul>
        </BioBlock>
      ) : null}

      {b.education && b.education.length ? (
        <BioBlock title="Education">
          <ul style={{ margin: 0, padding: 0 }}>
            {b.education.map((g, i) => <ExperienceGroup key={i} group={g} />)}
          </ul>
        </BioBlock>
      ) : null}
    </main>
  );
}

Object.assign(window, { BioView });