import React, { useState } from 'react';

// 簡化的成語資料庫
const idiomDatabase = [
  { mainIdiom: '急如星火', synonyms: ['迫在眉睫', '刻不容緩'], meaning: '形容事情非常緊急' },
  { mainIdiom: '一葉知秋', synonyms: ['見微知著', '月暈而風'], meaning: '從小徵兆可以預見未來的發展' },
  { mainIdiom: '一丘之貉', synonyms: ['沆瀣一氣', '狐群狗黨'], meaning: '形容品性相同的壞人' }
];

function ChineseIdiomGame() {
  // 基本狀態
  const [questionIndex, setQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [selectedAnswers, setSelectedAnswers] = useState([]);

  // 當前題目
  const currentQuestion = idiomDatabase[questionIndex];

  // 處理答案選擇
  const handleSelect = (answer) => {
    if (selectedAnswers.includes(answer)) return;

    if (currentQuestion.synonyms.includes(answer)) {
      const newSelected = [...selectedAnswers, answer];
      setSelectedAnswers(newSelected);

      if (newSelected.length === 2) {
        const newScore = score + 10;
        setScore(newScore);
        
        // 延遲後切換到下一題
        setTimeout(() => {
          setQuestionIndex((questionIndex + 1) % idiomDatabase.length);
          setSelectedAnswers([]);
        }, 1000);
      }
    }
  };

  // 生成選項
  const options = [
    ...currentQuestion.synonyms,
    '望穿秋水',
    '守株待兔',
    '揮金如土',
    '一暴十寒'
  ].sort(() => Math.random() - 0.5);

  return (
    <div style={{ padding: '20px' }}>
      <h1 style={{ textAlign: 'center', marginBottom: '20px' }}>成語對對碰</h1>
      
      <div style={{ 
        backgroundColor: '#f0f0f0', 
        padding: '20px',
        borderRadius: '8px',
        marginBottom: '20px'
      }}>
        <h2 style={{ textAlign: 'center' }}>{currentQuestion.mainIdiom}</h2>
        <p style={{ textAlign: 'center' }}>{currentQuestion.meaning}</p>
      </div>

      <div style={{ 
        display: 'grid', 
        gridTemplateColumns: 'repeat(2, 1fr)',
        gap: '10px' 
      }}>
        {options.map((option, index) => (
          <button
            key={index}
            onClick={() => handleSelect(option)}
            style={{
              padding: '10px',
              backgroundColor: selectedAnswers.includes(option) ? '#4CAF50' : 'white',
              color: selectedAnswers.includes(option) ? 'white' : 'black',
              border: '1px solid #ddd',
              borderRadius: '4px'
            }}
          >
            {option}
          </button>
        ))}
      </div>

      <div style={{ 
        marginTop: '20px',
        textAlign: 'center'
      }}>
        分數: {score}
      </div>
    </div>
  );
}

export default ChineseIdiomGame;