spelljammer-ships/web/src/pages/RulesPage.tsx

import { useState, useMemo } from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import TopBar from '../components/layout/TopBar';
import PageContainer from '../components/layout/PageContainer';
import { battleReferenceSections } from '../rules/battle-reference';

export default function RulesPage() {
  const [openSections, setOpenSections] = useState<Set<number>>(new Set());
  const [search, setSearch] = useState('');

  const filtered = useMemo(() => {
    if (!search.trim()) return battleReferenceSections.map((s, i) => ({ ...s, originalIndex: i }));
    const q = search.toLowerCase();
    return battleReferenceSections
      .map((s, i) => ({ ...s, originalIndex: i }))
      .filter((s) => s.title.toLowerCase().includes(q) || s.content.toLowerCase().includes(q));
  }, [search]);

  const toggle = (index: number) => {
    setOpenSections((prev) => {
      const next = new Set(prev);
      if (next.has(index)) {
        next.delete(index);
      } else {
        next.add(index);
      }
      return next;
    });
  };

  const expandAll = () => {
    setOpenSections(new Set(filtered.map((s) => s.originalIndex)));
  };

  const collapseAll = () => {
    setOpenSections(new Set());
  };

  return (
    <>
      <TopBar title="Ship Reference" />
      <PageContainer>
        <input
          type="search"
          className="rules-search"
          placeholder="Search rules..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />

        <div className="rules-actions">
          <button className="btn-secondary btn-sm" onClick={expandAll}>
            Expand All
          </button>
          <button className="btn-secondary btn-sm" onClick={collapseAll}>
            Collapse All
          </button>
          {search.trim() && (
            <span className="rules-count">{filtered.length} result{filtered.length !== 1 ? 's' : ''}</span>
          )}
        </div>

        <div className="rules-sections">
          {filtered.map((section) => (
            <details key={section.originalIndex} className="rules-section" open={openSections.has(section.originalIndex)}>
              <summary className="rules-summary" onClick={(e) => { e.preventDefault(); toggle(section.originalIndex); }}>
                {section.title}
              </summary>
              <div className="rules-content">
                <Markdown
                  remarkPlugins={[remarkGfm]}
                  components={{
                    table: ({ children }) => (
                      <div className="table-wrap"><table>{children}</table></div>
                    ),
                  }}
                >{section.content}</Markdown>
              </div>
            </details>
          ))}
          {filtered.length === 0 && (
            <p className="empty-text" style={{ padding: 'var(--spacing-md) 0' }}>
              No sections match "{search}".
            </p>
          )}
        </div>
      </PageContainer>
    </>
  );
}