// teachings.jsx — a dedicated library to browse the masters of the insight lineage.

// circular emblem standing in for a portrait (no photos): initials on a tinted disc
function TeacherEmblem({ name, size = 54 }) {
  const C = MT_COLORS;
  const t = MT_TEACHERS[name] || { hue: C.teal, initials: name.slice(0, 1) };
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <div style={{ position: 'absolute', inset: 0, borderRadius: '50%',
        background: `radial-gradient(60% 60% at 50% 38%, ${hexA(t.hue, 0.32)}, ${hexA(t.hue, 0.06)})`,
        border: `1px solid ${hexA(t.hue, 0.5)}`, boxShadow: `0 0 18px ${hexA(t.hue, 0.18)}, inset 0 1px 0 rgba(255,255,255,0.08)` }} />
      <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center',
        fontFamily: 'var(--serif)', fontSize: size * 0.36, fontWeight: 500, color: C.ink, letterSpacing: 0.5 }}>
        {t.initials}
      </div>
      <span style={{ position: 'absolute', top: 2, right: 2, width: 8, height: 8, borderRadius: 8, background: t.hue, boxShadow: `0 0 8px ${t.hue}` }} />
    </div>
  );
}

function TeachingsScreen({ vp }) {
  const C = MT_COLORS;
  const wide = vp && vp.isWide;
  const [active, setActive] = React.useState('all'); // 'all' | author name
  const teachers = MT_TEACHER_ORDER;
  const daily = React.useMemo(() => mtQuoteOfDay(), []);

  return (
    <div style={{ padding: '8px 20px 120px' }}>
      <h1 style={{ font: '300 32px/1.1 var(--serif)', color: C.ink, margin: '12px 0 6px' }}>Teachings</h1>
      <div style={{ fontSize: 14, color: C.inkFaint, marginBottom: 20 }}>Voices of the insight lineage — from the Buddha to Dipa Ma and her heirs.</div>

      {/* featured daily */}
      <div style={{ position: 'relative', borderRadius: 22, overflow: 'hidden', marginBottom: 22,
        border: `1px solid ${C.tealLine}`, background: 'radial-gradient(120% 120% at 0% 0%, rgba(12,36,44,0.8), rgba(7,18,26,0.6))', padding: '20px 20px 22px' }}>
        <ParticleField count={16} />
        <div style={{ position: 'relative' }}>
          <MTEyebrow color={C.teal}>Teaching of the day</MTEyebrow>
          <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', marginTop: 14 }}>
            <TeacherEmblem name={daily.a} size={56} />
            <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ minHeight: 58, display: 'flex', alignItems: 'center', font: 'italic 300 19px/1.5 var(--serif)', color: C.ink, textWrap: 'pretty' }}>“{daily.t}”</div>
              <div style={{ fontSize: 13, color: C.inkDim }}>
                <span style={{ fontWeight: 600, color: C.ink }}>{daily.a}</span> · {daily.r}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* teacher filter */}
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 6, marginBottom: 18, WebkitOverflowScrolling: 'touch' }}>
        <MTChip label="All" active={active === 'all'} onClick={() => setActive('all')} />
        {teachers.map(t => (
          <MTChip key={t} label={t} color={(MT_TEACHERS[t] || {}).hue} active={active === t} onClick={() => setActive(t)} />
        ))}
      </div>

      {active === 'all' ? (
        <div style={{ display: 'grid', gap: 22, gridTemplateColumns: wide ? '1fr 1fr' : '1fr', alignItems: 'stretch' }}>
          {teachers.map(name => <TeacherSection key={name} name={name} onOpen={() => setActive(name)} />)}
        </div>
      ) : (
        <div>
          <button onClick={() => setActive('all')} style={{ appearance: 'none', background: 'none', border: 'none', color: C.inkDim, display: 'flex', alignItems: 'center', gap: 5, cursor: 'pointer', margin: '0 0 14px', padding: 0, fontSize: 15, fontFamily: 'var(--sans)' }}>
            <MTIcon name="chevL" size={20} /> All teachers
          </button>
          <TeacherDetail name={active} />
        </div>
      )}
    </div>
  );
}

// compact section in the "All" grid — bio teaser + first 2 quotes
function TeacherSection({ name, onOpen }) {
  const C = MT_COLORS;
  const t = MT_TEACHERS[name] || {};
  const quotes = mtQuotesFor(name);
  return (
    <MTPanel style={{ padding: 18, height: '100%', display: 'flex', flexDirection: 'column', boxSizing: 'border-box' }}>
      <div onClick={onOpen} style={{ display: 'flex', gap: 14, alignItems: 'center', cursor: 'pointer', marginBottom: 14 }}>
        <TeacherEmblem name={name} size={52} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 17, fontWeight: 600, color: C.ink }}>{name}</div>
          <div style={{ fontSize: 12.5, color: C.inkFaint, marginTop: 2 }}>{t.years} · {t.tradition}</div>
        </div>
        <MTIcon name="chevR" size={18} color={C.inkFaint} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {quotes.slice(0, 2).map((q, i) => (
          <div key={i} style={{ borderLeft: `2px solid ${hexA(t.hue, 0.5)}`, paddingLeft: 12 }}>
            <div style={{ font: 'italic 300 15px/1.5 var(--serif)', color: C.inkDim, textWrap: 'pretty' }}>“{q.t}”</div>
          </div>
        ))}
      </div>
      <div style={{ flex: 1, minHeight: 8 }} />
      <button onClick={onOpen} style={{ appearance: 'none', background: 'none', border: 'none', cursor: 'pointer', color: C.teal, fontSize: 13, fontWeight: 600, marginTop: 14, padding: 0, fontFamily: 'var(--sans)', alignSelf: 'flex-start' }}>
        All {quotes.length} teaching{quotes.length === 1 ? '' : 's'} →
      </button>
    </MTPanel>
  );
}

// full teacher view — bio + every quote
function TeacherDetail({ name }) {
  const C = MT_COLORS;
  const t = MT_TEACHERS[name] || {};
  const quotes = mtQuotesFor(name);
  return (
    <div>
      <MTPanel hi style={{ padding: 20, marginBottom: 18 }}>
        <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 14 }}>
          <TeacherEmblem name={name} size={64} />
          <div>
            <div style={{ fontSize: 21, fontWeight: 600, color: C.ink }}>{name}</div>
            <div style={{ fontSize: 13, color: C.inkFaint, marginTop: 3 }}>{t.years} · {t.tradition}</div>
          </div>
        </div>
        <p style={{ fontSize: 15, lineHeight: 1.6, color: C.inkDim, margin: 0, textWrap: 'pretty' }}>{t.bio}</p>
      </MTPanel>
      {(MT_TEACHER_PRINCIPLES[name] || []).length > 0 && (
        <MTPanel style={{ padding: 18, marginBottom: 18 }}>
          <MTEyebrow color={t.hue}>Practical principles</MTEyebrow>
          <ol style={{ margin: '12px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 9 }}>
            {MT_TEACHER_PRINCIPLES[name].map((it, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
                <span style={{ flexShrink: 0, width: 22, textAlign: 'right', color: hexA(t.hue, 0.85), fontFamily: 'var(--mono)', fontSize: 12.5 }}>{i + 1}</span>
                <span style={{ fontSize: 15, lineHeight: 1.55, color: C.ink }}>{it}</span>
              </li>
            ))}
          </ol>
        </MTPanel>
      )}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {quotes.map((q, i) => (
          <MTPanel key={i} style={{ padding: '16px 18px', borderLeft: `2px solid ${hexA(t.hue, 0.6)}` }}>
            <div style={{ font: 'italic 300 17px/1.55 var(--serif)', color: C.ink, textWrap: 'pretty' }}>“{q.t}”</div>
            <div style={{ marginTop: 9, fontSize: 12, color: C.inkFaint, fontFamily: 'var(--mono)', letterSpacing: 0.5 }}>{q.r}</div>
          </MTPanel>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TeachingsScreen, TeacherEmblem });