/* global React */
const { useState: useState_T, useMemo: useMemo_T } = React;

// ═══════════════ TACTICS NOTES ═══════════════
function Tactics({ readTactics, setReadTactics }) {
  const [cat, setCat] = useState_T('all');
  const [expanded, setExpanded] = useState_T({});
  const tactics = window.NFL_TACTICS || [];
  const filtered = cat === 'all' ? tactics : tactics.filter(t => t.category === cat);

  function toggle(id) { setExpanded({ ...expanded, [id]: !expanded[id] }); }
  function markRead(id, e) {
    e.stopPropagation();
    setReadTactics(readTactics.includes(id) ? readTactics.filter(x => x !== id) : [...readTactics, id]);
  }

  return (
    <section>
      <div className="section-head">
        <div className="kicker">§ 03 · Tactics Notebook</div>
        <h2>NFL <span className="underline-hand">戰術筆記</span></h2>
        <div className="zh">從規則到陣型，從盯防到 RPO — 看懂比賽的骨架</div>
      </div>

      <div style={{ display: 'flex', gap: 6, marginBottom: 24, flexWrap: 'wrap' }}>
        {(window.TACTIC_CATEGORIES || []).map(c => (
          <div key={c.id} className={`chip ${cat === c.id ? 'active' : ''}`}
               onClick={() => setCat(c.id)}>{c.label}</div>
        ))}
      </div>

      <div className="col" style={{ gap: 18 }}>
        {filtered.map((t, i) => {
          const isRead = readTactics.includes(t.id);
          const isOpen = expanded[t.id];
          return (
            <div key={t.id} className="card"
                 style={{ padding: '22px 26px', position: 'relative',
                           borderLeft: '4px solid ' + (isRead ? 'var(--field-green)' : 'var(--red-mark)'),
                           cursor: 'pointer' }}
                 onClick={() => toggle(t.id)}>
              {i === 0 && <div className="tape" style={{ top: -14, right: 40 }} />}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: '0.15em',
                                                      color: 'var(--ink-faint)', textTransform: 'uppercase' }}>
                      {t.id.toUpperCase()} · {t.category}
                    </div>
                  </div>
                  <div className="hand" style={{ fontSize: 32, fontWeight: 700, lineHeight: 1.1,
                                                    marginTop: 4 }}>
                    {t.title}
                  </div>
                  <div className="serif" style={{ fontSize: 14, color: 'var(--ink-faint)',
                                                     marginTop: 2 }}>
                    {t.zhTitle}
                  </div>
                </div>
                <div onClick={(e) => markRead(t.id, e)}
                     className="mono"
                     style={{ padding: '6px 12px', border: '1.5px solid',
                               borderColor: isRead ? 'var(--field-green)' : 'var(--ink)',
                               background: isRead ? 'var(--field-green)' : 'transparent',
                               color: isRead ? 'var(--paper)' : 'var(--ink)',
                               fontSize: 10, letterSpacing: '0.1em',
                               textTransform: 'uppercase', cursor: 'pointer', whiteSpace: 'nowrap' }}>
                  {isRead ? '✓ read' : 'mark read'}
                </div>
              </div>

              <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <div className="serif" style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)' }}>
                  {t.summary}
                </div>
                <div className="serif" style={{ fontSize: 14, lineHeight: 1.7,
                                                  color: 'var(--ink-2)', fontStyle: 'italic',
                                                  borderLeft: '2px dashed var(--rule)', paddingLeft: 16 }}>
                  {t.zhSummary}
                </div>
              </div>

              {isOpen && (
                <div style={{ marginTop: 20, paddingTop: 18, borderTop: '1px dashed var(--rule)' }}>
                  <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em',
                                                    color: 'var(--ink-faint)', textTransform: 'uppercase',
                                                    marginBottom: 10 }}>
                    Key terms to listen for
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 16 }}>
                    {t.keyTerms.map(k => (
                      <span key={k} className="mono" style={{
                        padding: '4px 10px', background: 'var(--paper-shade)',
                        fontSize: 12, color: 'var(--ink)' }}>{k}</span>
                    ))}
                  </div>
                  <div className="hand" style={{ fontSize: 18, color: 'var(--red-mark)',
                                                    lineHeight: 1.5, marginTop: 8,
                                                    display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                    <span style={{ flexShrink: 0 }}>✎</span>
                    <span>{t.note}</span>
                  </div>
                </div>
              )}
              {!isOpen && (
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)',
                                                  marginTop: 14, letterSpacing: '0.08em' }}>
                  ↓ click to expand key terms + 個人註記
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

window.Tactics = Tactics;