/* Flashcards component — 暗記カードモード */
const { useState: fcUseState, useEffect: fcUseEffect, useCallback: fcUseCallback } = React;

function Flashcards({ cards, domains, fcProgress, updateFcProgress }) {
  const [order, setOrder] = fcUseState(() => cards.map((_, i) => i));
  const [idx, setIdx] = fcUseState(0);
  const [flipped, setFlipped] = fcUseState(false);

  fcUseEffect(() => {
    setOrder(cards.map((_, i) => i));
    setIdx(0);
    setFlipped(false);
  }, [cards]);

  if (cards.length === 0) {
    return (
      <div className="empty">
        <div className="empty-title">カードがありません</div>
        <div className="empty-sub">ドメインフィルターを変更してください。</div>
      </div>
    );
  }

  const realIdx = order[idx] ?? 0;
  const card = cards[realIdx];
  if (!card) return null;

  const status = fcProgress[card.id] || 'new';

  const rate = (level) => {
    updateFcProgress(card.id, level);
    // Auto advance
    setTimeout(() => {
      next();
    }, 200);
  };

  const next = () => {
    setFlipped(false);
    if (idx < cards.length - 1) {
      setTimeout(() => setIdx(idx + 1), 100);
    } else {
      setTimeout(() => setIdx(0), 100);
    }
  };

  const prev = () => {
    setFlipped(false);
    if (idx > 0) setTimeout(() => setIdx(idx - 1), 100);
  };

  const shuffle = () => {
    const newOrder = [...order];
    for (let i = newOrder.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [newOrder[i], newOrder[j]] = [newOrder[j], newOrder[i]];
    }
    setOrder(newOrder);
    setIdx(0);
    setFlipped(false);
  };

  const shuffleByDifficulty = () => {
    // Put unknown/review first, then new, then known
    const weight = (cid) => {
      const s = fcProgress[cid];
      if (s === 'unknown') return 0;
      if (s === 'review') return 1;
      if (!s || s === 'new') return 2;
      return 3; // known
    };
    const newOrder = [...order].sort((a, b) => weight(cards[a].id) - weight(cards[b].id));
    setOrder(newOrder);
    setIdx(0);
    setFlipped(false);
  };

  const domain = domains.find(d => d.id === card.domain);
  const statusLabel = {
    new: { text: '未学習', color: 'var(--ink-3)' },
    known: { text: '✓ 覚えた', color: 'var(--success)' },
    review: { text: '△ 要復習', color: 'var(--warn)' },
    unknown: { text: '✗ 分からない', color: 'var(--danger)' }
  }[status];

  return (
    <div>
      <div className="q-meta" style={{ marginBottom: 14 }}>
        <div className="q-progress">
          <span><strong>{idx + 1}</strong> / {cards.length}</span>
          <div className="q-progress-bar">
            <div className="q-progress-fill" style={{ width: `${((idx + 1) / cards.length) * 100}%` }} />
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <span className="q-domain-tag" style={{ color: statusLabel.color }}>
            {statusLabel.text}
          </span>
          <span className="q-domain-tag">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: domain?.color, display: 'inline-block' }} />
            Domain {card.domain}
          </span>
        </div>
      </div>

      <div className="fc-shell">
        <div className={`fc-card ${flipped ? 'flipped' : ''}`} onClick={() => setFlipped(!flipped)}>
          <div className="fc-face front">
            <div className="fc-cat">{card.category}</div>
            <div className="fc-flip-hint">タップで反転 ↻</div>
            <div className="fc-front-content">
              <h3 className="fc-front-term">{card.front}</h3>
            </div>
            <div className="fc-marker">#{idx + 1}</div>
          </div>
          <div className="fc-face back">
            <div className="fc-cat">{card.category}</div>
            <div className="fc-flip-hint">タップで反転 ↻</div>
            <div className="fc-back-content">
              <div className="fc-back-term">{card.front}</div>
              <div className="fc-back-body">{card.back}</div>
            </div>
            <div className="fc-marker">#{idx + 1}</div>
          </div>
        </div>
      </div>

      <div className="fc-controls">
        <div className="q-action-group">
          <button className="btn subtle" onClick={prev} disabled={idx === 0}>← 前へ</button>
          <button className="btn subtle" onClick={shuffle}>シャッフル</button>
          <button className="btn subtle" onClick={shuffleByDifficulty}>苦手優先</button>
        </div>
        {flipped ? (
          <div className="fc-rate">
            <button className="unknown" onClick={() => rate('unknown')}>✗ 分からない</button>
            <button className="review" onClick={() => rate('review')}>△ あいまい</button>
            <button className="known" onClick={() => rate('known')}>✓ 覚えた</button>
          </div>
        ) : (
          <button className="btn primary" onClick={() => setFlipped(true)}>意味を見る →</button>
        )}
      </div>
    </div>
  );
}

window.Flashcards = Flashcards;