/* Main App — CISSP苦手克服 */
const { useState: appUseState, useEffect: appUseEffect, useMemo: appUseMemo, useCallback: appUseCallback } = React;

const STORAGE_KEY = 'cissp-prep-v1';

function loadState() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return {};
    return JSON.parse(raw);
  } catch (e) {
    return {};
  }
}

function saveState(state) {
  try {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  } catch (e) {}
}

function App() {
  const data = window.CISSP_DATA;
  const [tab, setTab] = appUseState(() => loadState().tab || 'welcome');
  const [domainFilter, setDomainFilter] = appUseState(() => loadState().domainFilter || 'all');
  const [reviewOnly, setReviewOnly] = appUseState(false);
  const [progress, setProgress] = appUseState(() => loadState().progress || {});
  const [fcProgress, setFcProgress] = appUseState(() => loadState().fcProgress || {});

  appUseEffect(() => {
    saveState({ tab, domainFilter, progress, fcProgress });
  }, [tab, domainFilter, progress, fcProgress]);

  const filteredQuestions = appUseMemo(() => {
    let qs = data.questions;
    if (domainFilter !== 'all') {
      qs = qs.filter(q => q.domain === Number(domainFilter));
    }
    if (reviewOnly) {
      qs = qs.filter(q => {
        const p = progress[q.id];
        return p && p.correct === false;
      });
    }
    return qs;
  }, [data.questions, domainFilter, progress, reviewOnly]);

  const filteredCards = appUseMemo(() => {
    let cs = data.flashcards;
    if (domainFilter !== 'all') {
      cs = cs.filter(c => c.domain === Number(domainFilter));
    }
    if (reviewOnly) {
      cs = cs.filter(c => {
        const s = fcProgress[c.id];
        return s === 'unknown' || s === 'review';
      });
    }
    return cs;
  }, [data.flashcards, domainFilter, fcProgress, reviewOnly]);

  const updateProgress = appUseCallback((qid, change) => {
    setProgress(p => ({ ...p, [qid]: { ...(p[qid] || {}), ...change } }));
  }, []);

  const updateFcProgress = appUseCallback((cid, level) => {
    setFcProgress(p => ({ ...p, [cid]: level }));
  }, []);

  // Stats
  const stats = appUseMemo(() => {
    const totalQ = data.questions.length;
    const answered = Object.values(progress).filter(p => p.lastSeen).length;
    const correct = Object.values(progress).filter(p => p.correct === true).length;
    const wrong = Object.values(progress).filter(p => p.correct === false).length;
    const totalFc = data.flashcards.length;
    const knownFc = Object.values(fcProgress).filter(s => s === 'known').length;
    return { totalQ, answered, correct, wrong, totalFc, knownFc };
  }, [data, progress, fcProgress]);

  const resetProgress = () => {
    if (window.confirm('学習履歴をすべてリセットしますか？')) {
      setProgress({});
      setFcProgress({});
    }
  };

  return (
    <div className="app">
      <header className="header">
        <div className="brand">
          <div className="brand-mark">CIS</div>
          <div>
            <div className="brand-title">CISSP 苦手克服ドリル</div>
            <div className="brand-sub">Weak-spot workout · 8 domains</div>
          </div>
        </div>
        <div className="stats-pill" title="クリックでリセット" onClick={resetProgress} style={{cursor: 'pointer'}}>
          <span>問題: <strong>{stats.correct}</strong>/{stats.totalQ}</span>
          <span className="stats-divider" />
          <span>カード: <strong>{stats.knownFc}</strong>/{stats.totalFc}</span>
        </div>
      </header>

      <nav className="tabs">
        <button className={`tab ${tab === 'welcome' ? 'active' : ''}`} onClick={() => setTab('welcome')}>
          ホーム
        </button>
        <button className={`tab ${tab === 'quiz' ? 'active' : ''}`} onClick={() => setTab('quiz')}>
          一問一答 <span className="tab-badge">{data.questions.length}</span>
        </button>
        <button className={`tab ${tab === 'flash' ? 'active' : ''}`} onClick={() => setTab('flash')}>
          暗記カード <span className="tab-badge">{data.flashcards.length}</span>
        </button>
        <button className={`tab ${tab === 'browse' ? 'active' : ''}`} onClick={() => setTab('browse')}>
          一覧
        </button>
      </nav>

      <main className="main">
        {tab !== 'welcome' && (
          <div className="filter-bar">
            <span className="filter-bar-label">Domain</span>
            <button
              className={`chip ${domainFilter === 'all' ? 'active' : ''}`}
              onClick={() => setDomainFilter('all')}
            >
              すべて
            </button>
            {data.domains.map(d => (
              <button
                key={d.id}
                className={`chip ${domainFilter === String(d.id) ? 'active' : ''}`}
                onClick={() => setDomainFilter(String(d.id))}
                style={{ '--c': d.color }}
              >
                <span className="chip-dot" style={{ background: d.color }} />
                {d.id}. {d.short.replace('Domain ', 'D')}
              </button>
            ))}
            {(tab === 'quiz' || tab === 'flash') && (stats.wrong > 0 || Object.values(fcProgress).some(s => s === 'unknown' || s === 'review')) && (
              <button
                className={`chip ${reviewOnly ? 'active' : ''}`}
                onClick={() => setReviewOnly(!reviewOnly)}
                style={{ marginLeft: 8 }}
              >
                {reviewOnly ? '✓ ' : ''}要復習のみ
              </button>
            )}
          </div>
        )}

        {tab === 'welcome' && <Welcome stats={stats} domains={data.domains} setTab={setTab} />}
        {tab === 'quiz' && (
          <Quiz
            questions={filteredQuestions}
            domains={data.domains}
            progress={progress}
            updateProgress={updateProgress}
          />
        )}
        {tab === 'flash' && (
          <Flashcards
            cards={filteredCards}
            domains={data.domains}
            fcProgress={fcProgress}
            updateFcProgress={updateFcProgress}
          />
        )}
        {tab === 'browse' && (
          <Browse questions={filteredQuestions} domains={data.domains} />
        )}
      </main>

      <footer className="footer">
        ローカルに学習履歴を保存します · ステータスバッジをクリックでリセット
      </footer>
    </div>
  );
}

function Welcome({ stats, domains, setTab }) {
  const pct = stats.totalQ ? Math.round((stats.correct / stats.totalQ) * 100) : 0;
  const fcPct = stats.totalFc ? Math.round((stats.knownFc / stats.totalFc) * 100) : 0;

  // Get domain question counts
  const domainCounts = {};
  window.CISSP_DATA.questions.forEach(q => {
    domainCounts[q.domain] = (domainCounts[q.domain] || 0) + 1;
  });

  return (
    <div>
      <div className="welcome">
        <h1 className="welcome-h">苦手領域を、繰り返し潰す。</h1>
        <p className="welcome-sub">
          GitHub の学習メモから抽出した <strong>{stats.totalQ}問の四択問題</strong> と
          <strong> {stats.totalFc}枚の暗記カード</strong>。<br />
          誤答の落とし穴と判別の決め手をセットで身につける。
        </p>
      </div>

      <div className="modes">
        <button className="mode-card" onClick={() => setTab('quiz')}>
          <div className="mode-card-icon">📝</div>
          <div className="mode-card-title">一問一答</div>
          <div className="mode-card-sub">四択で解いて、誤答の落とし穴と判別の決め手を確認</div>
          <div style={{marginTop: 14, fontSize: 11, color: 'var(--ink-3)'}}>
            進捗: <strong style={{color: 'var(--ink-2)'}}>{stats.correct}/{stats.totalQ}</strong>　正答率 {pct}%
          </div>
        </button>
        <button className="mode-card" onClick={() => setTab('flash')}>
          <div className="mode-card-icon">🗂</div>
          <div className="mode-card-title">暗記カード</div>
          <div className="mode-card-sub">用語をタップで反転、覚えた/要復習で仕分け</div>
          <div style={{marginTop: 14, fontSize: 11, color: 'var(--ink-3)'}}>
            進捗: <strong style={{color: 'var(--ink-2)'}}>{stats.knownFc}/{stats.totalFc}</strong>　達成率 {fcPct}%
          </div>
        </button>
        <button className="mode-card" onClick={() => setTab('browse')}>
          <div className="mode-card-icon">📚</div>
          <div className="mode-card-title">一覧</div>
          <div className="mode-card-sub">ドメイン別に全問題を俯瞰・検索</div>
          <div style={{marginTop: 14, fontSize: 11, color: 'var(--ink-3)'}}>
            {Object.keys(domainCounts).length} ドメインを網羅
          </div>
        </button>
      </div>

      <div style={{ marginTop: 32 }}>
        <div className="filter-bar-label" style={{ marginBottom: 12, display: 'block' }}>ドメイン別 内訳</div>
        <div className="browse-section" style={{padding: '8px 18px'}}>
          {domains.map(d => {
            const count = domainCounts[d.id] || 0;
            return (
              <div key={d.id} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '10px 0',
                borderBottom: d.id < 8 ? '1px solid var(--line)' : 'none'
              }}>
                <span style={{
                  width: 10, height: 10, borderRadius: '50%',
                  background: d.color, flexShrink: 0
                }} />
                <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--ink-3)', minWidth: 38, fontVariantNumeric: 'tabular-nums' }}>
                  D{d.id}
                </span>
                <span style={{ fontSize: 13.5, color: 'var(--ink)', flex: 1 }}>
                  {d.name}
                </span>
                <span style={{ fontSize: 12, color: 'var(--ink-3)', fontVariantNumeric: 'tabular-nums' }}>
                  {count}問
                </span>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ marginTop: 28, padding: '20px 24px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--radius)' }}>
        <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 12 }}>
          使い方
        </div>
        <ul style={{margin: 0, paddingLeft: 18, fontSize: 13.5, lineHeight: 1.85, color: 'var(--ink-2)'}}>
          <li>各問題は「<strong>問われ方</strong> → <strong>正解</strong> → <strong>誤答の落とし穴</strong> → <strong>判別の決め手</strong>」の4ステップ。</li>
          <li>解答結果はブラウザに保存され、<strong>「要復習のみ」</strong> フィルタで誤答だけ集中復習できる。</li>
          <li>暗記カードは ✓覚えた / △あいまい / ✗分からない の3段階で仕分け。<strong>苦手優先</strong> で並べ直せる。</li>
          <li>ドメインチップで分野を絞り込み。</li>
        </ul>
      </div>
    </div>
  );
}

window.App = App;