import React, { useState } from 'react';

export default function Quiz({ question, options, correctAnswerIndex, explanation }) {
  const [selected, setSelected] = useState(null);
  const [submitted, setSubmitted] = useState(false);

  const handleOptionClick = (index) => {
    if (submitted) return;
    setSelected(index);
  };

  const handleSubmit = () => {
    if (selected === null) return;
    setSubmitted(true);
  };

  const handleReset = () => {
    setSelected(null);
    setSubmitted(false);
  };

  return (
    <div style={{
      border: '1px solid var(--ifm-color-emphasis-300)',
      borderRadius: '8px',
      padding: '16px',
      margin: '16px 0',
      backgroundColor: 'var(--ifm-card-background-color)'
    }}>
      {question && (
        <h4 style={{ marginTop: 0, marginBottom: '12px', fontSize: '1.1rem' }}>
          {question}
        </h4>
      )}

      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        {options.map((option, idx) => {
          let optionBg = 'transparent';
          let borderColor = 'var(--ifm-color-emphasis-300)';

          if (selected === idx) {
            borderColor = 'var(--ifm-color-primary)';
            optionBg = 'var(--ifm-color-primary-lightest)';
          }

          if (submitted) {
            if (idx === correctAnswerIndex) {
              borderColor = 'var(--ifm-color-success)';
              optionBg = 'var(--ifm-color-success-lightest, rgba(0,200,0,0.1))';
            } else if (selected === idx) {
              borderColor = 'var(--ifm-color-danger)';
              optionBg = 'var(--ifm-color-danger-lightest, rgba(200,0,0,0.1))';
            }
          }

          return (
            <button
              key={idx}
              onClick={() => handleOptionClick(idx)}
              style={{
                textAlign: 'left',
                padding: '10px 14px',
                borderRadius: '6px',
                border: `2px solid ${borderColor}`,
                backgroundColor: optionBg,
                cursor: submitted ? 'default' : 'pointer',
                color: 'var(--ifm-font-color-base)',
                fontSize: '0.95rem',
                transition: 'all 0.2s',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center'
              }}
            >
              <span>{option}</span>
              {submitted && idx === correctAnswerIndex && <span>🩵正確</span>}
              {submitted && selected === idx && idx !== correctAnswerIndex && <span>🥲錯誤</span>}
            </button>
          );
        })}
      </div>

      <div style={{ marginTop: '16px', display: 'flex', gap: '10px', alignItems: 'center' }}>
        {!submitted ? (
          <button
            onClick={handleSubmit}
            disabled={selected === null}
            style={{
              backgroundColor: selected === null ? '#ccc' : 'var(--ifm-color-primary)',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              padding: '6px 16px',
              cursor: selected === null ? 'not-allowed' : 'pointer',
              fontWeight: 'bold'
            }}
          >
            送出答案
          </button>
        ) : (
          <button
            onClick={handleReset}
            style={{
              backgroundColor: 'transparent',
              border: '1px solid var(--ifm-color-emphasis-500)',
              color: 'var(--ifm-font-color-base)',
              borderRadius: '4px',
              padding: '6px 12px',
              cursor: 'pointer'
            }}
          >
            重新作答
          </button>
        )}
      </div>

      {submitted && explanation && (
        <div style={{
          marginTop: '12px',
          paddingTop: '12px',
          borderTop: '1px dashed var(--ifm-color-emphasis-300)',
          color: 'var(--ifm-font-color-base)',
          fontSize: '0.9rem'
        }}>
          👍🏿<strong>解析：</strong>{explanation}
        </div>
      )}
    </div>
  );
}

import Quiz from '@site/src/components/Quiz';

<Quiz
  question="Q: 哪一首歌曲，不是收錄在「自傳」這張專輯中？"
  options={[
    '如果我們不曾相遇',
    '嘿！我要走了',
    '頑固',
    '成名在望'
  ]}
  correctAnswerIndex={1}
  explanation="不用解釋吧！五迷一秒作答"
/>

import React, { useState } from 'react';

export const MaydayMatch = () => {
  const [selectedMember, setSelectedMember] = useState(null);
  const [selectedRole, setSelectedRole] = useState(null);
  const [matchedPairs, setMatchedPairs] = useState({});
  const [statusMessage, setStatusMessage] = useState('先點選一位團員，再點選對應的職稱！');

  const members = ['阿信', '怪獸', '石頭', '瑪莎', '冠佑'];
  const roles = ['鼓手', '吉他手/團長', '主唱', '貝斯手', '吉他手'];
  
  const correctPairs = {
    '阿信': '主唱',
    '怪獸': '吉他手/團長',
    '石頭': '吉他手',
    '瑪莎': '貝斯手',
    '冠佑': '鼓手'
  };

  const handleSelectMember = (name) => {
    if (matchedPairs[name]) return;
    setSelectedMember(name);
    if (selectedRole) {
      checkPair(name, selectedRole);
    } else {
      setStatusMessage(`已選擇【${name}】，請選擇對應的職稱...`);
    }
  };

  const handleSelectRole = (role) => {
    const isRoleMatched = Object.values(matchedPairs).includes(role);
    if (isRoleMatched) return;

    setSelectedRole(role);
    if (selectedMember) {
      checkPair(selectedMember, role);
    } else {
      setStatusMessage(`已選擇【${role}】，請選擇對應的團員...`);
    }
  };

  const checkPair = (member, role) => {
    if (correctPairs[member] === role) {
      setMatchedPairs(prev => ({ ...prev, [member]: role }));
      setStatusMessage(`🤓讚喔`);
    } else {
      setStatusMessage(`🫠答錯了！這麼簡單欸`);
    }
    setSelectedMember(null);
    setSelectedRole(null);
  };

  const isCompleted = Object.keys(matchedPairs).length === members.length;

  return (
    <div style={{
      padding: '20px',
      borderRadius: '12px',
      border: '1px solid var(--ifm-color-emphasis-300)',
      backgroundColor: 'var(--ifm-card-background-color)',
      margin: '24px 0',
      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)'
    }}>
      <h3 style={{ marginTop: 0, marginBottom: '8px' }}>五月天團員職稱配對</h3>
      <p style={{ margin: '0 0 16px 0', color: 'var(--ifm-color-emphasis-700)', fontSize: '0.95rem' }}>
        {isCompleted ? '讚讚 已完成所有配對！' : statusMessage}
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          <span style={{ fontWeight: 'bold', fontSize: '0.85rem', color: 'var(--ifm-color-emphasis-600)' }}>團員</span>
          {members.map(m => {
            const isMatched = !!matchedPairs[m];
            const isSelected = selectedMember === m;
            return (
              <button
                key={m}
                onClick={() => handleSelectMember(m)}
                disabled={isMatched}
                style={{
                  padding: '10px 14px',
                  borderRadius: '8px',
                  textAlign: 'left',
                  border: isSelected ? '2px solid var(--ifm-color-primary)' : '1px solid var(--ifm-color-emphasis-300)',
                  backgroundColor: isMatched ? 'var(--ifm-color-success-lightest)' : isSelected ? 'var(--ifm-color-primary-lightest)' : 'transparent',
                  color: isMatched ? 'var(--ifm-color-success-darkest)' : 'inherit',
                  cursor: isMatched ? 'not-allowed' : 'pointer',
                  fontWeight: isSelected || isMatched ? 'bold' : 'normal',
                  transition: 'all 0.2s ease'
                }}
              >
                {m} {isMatched && '✓'}
              </button>
            );
          })}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
          <span style={{ fontWeight: 'bold', fontSize: '0.85rem', color: 'var(--ifm-color-emphasis-600)' }}>職稱 / 樂器</span>
          {roles.map((r, idx) => {
            const isMatched = Object.values(matchedPairs).includes(r);
            const isSelected = selectedRole === r;
            return (
              <button
                key={idx}
                onClick={() => handleSelectRole(r)}
                disabled={isMatched}
                style={{
                  padding: '10px 14px',
                  borderRadius: '8px',
                  textAlign: 'left',
                  border: isSelected ? '2px solid var(--ifm-color-primary)' : '1px solid var(--ifm-color-emphasis-300)',
                  backgroundColor: isMatched ? 'var(--ifm-color-success-lightest)' : isSelected ? 'var(--ifm-color-primary-lightest)' : 'transparent',
                  color: isMatched ? 'var(--ifm-color-success-darkest)' : 'inherit',
                  cursor: isMatched ? 'not-allowed' : 'pointer',
                  fontWeight: isSelected || isMatched ? 'bold' : 'normal',
                  transition: 'all 0.2s ease'
                }}
              >
                {r} {isMatched && '✓'}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};

<MaydayMatch />