/* global React, Btn, Icon */
const { useState } = React;

function Cheatsheet({ course, onBack }) {
  const sections = course?._raw?.studyGuide?.sections || [];

  return (
    <div style={{ maxWidth: 880, margin: '0 auto', padding: '32px 32px 80px' }}>
      <Btn variant="ghost" size="sm" icon={<Icon name="arrow-left" size={18}/>} onClick={onBack}>Home</Btn>
      <header style={{ margin: '24px 0 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <div className="chip chip-secondary" style={{ alignSelf: 'flex-start', whiteSpace: 'nowrap' }}>
          <Icon name="book" size={14}/> Cheat sheet
        </div>
        <h1 style={{ fontSize: 'clamp(34px, 4.6vw, 48px)' }}>{course.name}</h1>
        <p style={{ color: 'var(--ink-soft)', fontSize: 17 }}>Concept reference. No quizzing here.</p>
      </header>

      {sections.length === 0 && (
        <div className="card" style={{ textAlign: 'center', color: 'var(--muted)' }}>
          No cheat sheet available for this course yet.
        </div>
      )}

      {sections.length > 1 && (
        <nav className="card" style={{ marginBottom: 24, position: 'sticky', top: 12, zIndex: 5 }}>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {sections.map(s => (
              <a key={s.id} href={`#${s.id}`} className="chip" style={{ textDecoration: 'none' }}>{s.title}</a>
            ))}
          </div>
        </nav>
      )}

      {sections.map((s, i) => (
        <section key={s.id} id={s.id} className="card pop-in" style={{ marginBottom: 20, animationDelay: `${i * 60}ms` }}>
          <h2 style={{ fontSize: 26, marginBottom: 16 }}>{s.title}</h2>
          <CheatsheetBody section={s} />
        </section>
      ))}
    </div>
  );
}

function CheatsheetBody({ section }) {
  if (section.type === 'table') {
    return (
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'separate', borderSpacing: 0, fontSize: 14 }}>
          <thead>
            <tr>
              {section.headers.map((h, i) => (
                <th key={i} style={{
                  textAlign: 'left', padding: '10px 12px',
                  background: 'var(--surface-2)',
                  borderBottom: '2px solid var(--line)',
                  fontFamily: 'var(--font-display)', fontWeight: 900,
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {section.rows.map((row, r) => (
              <tr key={r}>
                {row.map((cell, c) => (
                  <td key={c} style={{
                    padding: '10px 12px',
                    borderBottom: '1px solid var(--surface-2)',
                    color: c === 0 ? 'var(--ink)' : 'var(--ink-soft)',
                    fontWeight: c === 0 ? 800 : 500,
                  }}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }

  if (section.type === 'pairs') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {section.pairs.map((p, j) => (
          <div key={j} style={{ padding: 16, background: 'var(--surface-2)', borderRadius: 'var(--radius)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
              <span className="chip chip-primary">{p.left}</span>
              <span style={{ fontFamily: 'var(--font-hand)', fontSize: 22 }}>vs.</span>
              <span className="chip chip-secondary">{p.right}</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{p.distinction || p.note}</p>
          </div>
        ))}
      </div>
    );
  }

  if (section.type === 'list') {
    return (
      <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {section.items.map((it, j) => (
          <li key={j} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, fontWeight: 600 }}>
            <div style={{
              width: 24, height: 24, flexShrink: 0,
              borderRadius: '50%', background: 'var(--tertiary)',
              border: 'var(--outline-width) solid var(--line)',
              display: 'grid', placeItems: 'center',
              fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 900,
            }}>{j + 1}</div>
            <span style={{ paddingTop: 2 }}>{it}</span>
          </li>
        ))}
      </ul>
    );
  }

  if (section.type === 'glossary') {
    const entries = section.entries || section.items || [];
    return (
      <dl style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {entries.map(([k, v], j) => (
          <div key={j} style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: 16, alignItems: 'baseline' }}>
            <dt style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 18 }}>{k}</dt>
            <dd style={{ fontSize: 14, color: 'var(--ink-soft)' }}>{v}</dd>
          </div>
        ))}
      </dl>
    );
  }

  return <div style={{ color: 'var(--muted)' }}>Unknown section type: {section.type}</div>;
}

Object.assign(window, { Cheatsheet });