import React, { useState, useEffect } from 'react';
import { 
  Heart, 
  Users, 
  ShieldCheck, 
  Star, 
  CheckCircle2, 
  ArrowRight, 
  BarChart3, 
  Lightbulb,
  Award
} from 'lucide-react';

const CORE_VALUES = [
  {
    id: 'respect',
    title: '尊重',
    description: '看重他人的感受、權利與獨特性。',
    icon: <Heart className="w-6 h-6 text-pink-500" />,
    color: 'bg-pink-50',
    borderColor: 'border-pink-200'
  },
  {
    id: 'responsibility',
    title: '負責',
    description: '認真完成自己的任務，並勇於承擔後果。',
    icon: <ShieldCheck className="w-6 h-6 text-blue-500" />,
    color: 'bg-blue-50',
    borderColor: 'border-blue-200'
  },
  {
    id: 'cooperation',
    title: '合作',
    description: '與他人攜手並進，為了共同目標努力。',
    icon: <Users className="w-6 h-6 text-green-500" />,
    color: 'bg-green-50',
    borderColor: 'border-green-200'
  },
  {
    id: 'integrity',
    title: '誠實',
    description: '說實話、做對的事，贏得他人的信任。',
    icon: <Star className="w-6 h-6 text-yellow-500" />,
    color: 'bg-yellow-50',
    borderColor: 'border-yellow-200'
  }
];

const SCENARIOS = [
  {
    id: 1,
    value: 'respect',
    question: '當你在討論中與同學意見不同時，最好的實踐方式是？',
    options: [
      { text: '大聲反駁，直到對方認輸', isCorrect: false, feedback: '這可能會傷害同學的感情。' },
      { text: '耐心聽完對方的想法，再平和地表達自己的意見', isCorrect: true, feedback: '很好！這展現了對他人想法的尊重。' },
      { text: '不說話，心裡默默討厭對方', isCorrect: false, feedback: '溝通才是解決差異的好方法。' }
    ]
  },
  {
    id: 2,
    value: 'responsibility',
    question: '分組作業時，如果你分配到的任務比較難，你會？',
    options: [
      { text: '假裝忘記做，等其他同學幫忙完成', isCorrect: false, feedback: '這樣會增加組員的負擔喔。' },
      { text: '直接放棄，說自己不會做', isCorrect: false, feedback: '嘗試努力或尋求建議也是負責的表現。' },
      { text: '儘力嘗試，若遇到困難主動找老師或組長討論', isCorrect: true, feedback: '正確！積極面對困難是負責任的典範。' }
    ]
  },
  {
    id: 3,
    value: 'cooperation',
    question: '大掃除時，你發現自己負責的區域做完了，但旁邊的同學還在忙，你會？',
    options: [
      { text: '主動詢問：「需要我幫忙嗎？」一起完成任務', isCorrect: true, feedback: '太棒了！團結力量大，這就是合作精神。' },
      { text: '趕快收拾東西回座位休息', isCorrect: false, feedback: '班級環境需要大家共同維護。' },
      { text: '站在旁邊看同學做，順便給他建議', isCorrect: false, feedback: '實際動手幫忙會比口頭建議更有力量。' }
    ]
  }
];

export default function App() {
  const [view, setView] = useState('home'); // home, vote, quiz, results
  const [votes, setVotes] = useState({ respect: 0, responsibility: 0, cooperation: 0, integrity: 0 });
  const [hasVoted, setHasVoted] = useState(false);
  const [quizIndex, setQuizIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [feedback, setFeedback] = useState(null);

  const handleVote = (id) => {
    setVotes(prev => ({ ...prev, [id]: prev[id] + 1 }));
    setHasVoted(true);
  };

  const handleQuizAnswer = (option) => {
    setFeedback(option.feedback);
    if (option.isCorrect) {
      setScore(prev => prev + 1);
    }
    
    setTimeout(() => {
      setFeedback(null);
      if (quizIndex < SCENARIOS.length - 1) {
        setQuizIndex(prev => prev + 1);
      } else {
        setView('results');
      }
    }, 2000);
  };

  const resetAll = () => {
    setView('home');
    setQuizIndex(0);
    setScore(0);
    setHasVoted(false);
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans p-4 md:p-8">
      <div className="max-w-4xl mx-auto">
        {/* Header */}
        <header className="text-center mb-10">
          <h1 className="text-3xl md:text-4xl font-bold text-indigo-700 mb-2 flex items-center justify-center gap-2">
            <Award className="w-8 h-8" />
            班級核心價值：我們的約定
          </h1>
          <p className="text-slate-500">透過認識與互動，讓我們建立一個更溫暖、更有溫度的班級環境。</p>
        </header>

        {/* Navigation Tabs */}
        <div className="flex justify-center gap-2 mb-8 bg-white p-1 rounded-full shadow-sm border border-slate-200">
          <button 
            onClick={() => setView('home')}
            className={`px-6 py-2 rounded-full transition-all ${view === 'home' ? 'bg-indigo-600 text-white shadow-md' : 'hover:bg-slate-100'}`}
          >
            認識價值
          </button>
          <button 
            onClick={() => setView('vote')}
            className={`px-6 py-2 rounded-full transition-all ${view === 'vote' ? 'bg-indigo-600 text-white shadow-md' : 'hover:bg-slate-100'}`}
          >
            心目中首選
          </button>
          <button 
            onClick={() => setView('quiz')}
            className={`px-6 py-2 rounded-full transition-all ${view === 'quiz' ? 'bg-indigo-600 text-white shadow-md' : 'hover:bg-slate-100'}`}
          >
            實踐挑戰
          </button>
        </div>

        {/* Main Content Area */}
        <main className="bg-white rounded-2xl shadow-xl p-6 md:p-10 border border-slate-100">
          
          {/* View: Home (Value Definitions) */}
          {view === 'home' && (
            <div className="animate-fadeIn">
              <h2 className="text-2xl font-bold mb-6 flex items-center gap-2 text-slate-800">
                <Lightbulb className="text-yellow-500" />
                什麼是我們的核心價值？
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {CORE_VALUES.map((val) => (
                  <div key={val.id} className={`${val.color} border ${val.borderColor} p-6 rounded-xl transition-transform hover:scale-[1.02]`}>
                    <div className="flex items-center gap-3 mb-3">
                      {val.icon}
                      <h3 className="text-xl font-bold text-slate-800">{val.title}</h3>
                    </div>
                    <p className="text-slate-600 leading-relaxed">{val.description}</p>
                  </div>
                ))}
              </div>
              <div className="mt-10 text-center">
                <button 
                  onClick={() => setView('vote')}
                  className="inline-flex items-center gap-2 bg-indigo-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-indigo-700 transition-colors"
                >
                  開始互動投票 <ArrowRight className="w-4 h-4" />
                </button>
              </div>
            </div>
          )}

          {/* View: Vote */}
          {view === 'vote' && (
            <div className="animate-fadeIn">
              <h2 className="text-2xl font-bold mb-2 flex items-center gap-2 text-slate-800">
                <BarChart3 className="text-indigo-500" />
                心目中最希望班級做到的價值
              </h2>
              <p className="text-slate-500 mb-8">每人投下一票，看看班級共同最重視的是什麼？</p>
              
              {!hasVoted ? (
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {CORE_VALUES.map((val) => (
                    <button
                      key={val.id}
                      onClick={() => handleVote(val.id)}
                      className="group flex flex-col items-center p-6 border-2 border-slate-100 rounded-2xl hover:border-indigo-500 hover:bg-indigo-50 transition-all text-center"
                    >
                      <div className="mb-4 p-4 bg-white rounded-full shadow-sm group-hover:scale-110 transition-transform">
                        {val.icon}
                      </div>
                      <span className="text-lg font-bold text-slate-800">{val.title}</span>
                    </button>
                  ))}
                </div>
              ) : (
                <div className="space-y-6">
                  <div className="bg-green-50 text-green-700 p-4 rounded-lg flex items-center gap-2 mb-6">
                    <CheckCircle2 className="w-5 h-5" /> 投票成功！看看大家的選擇：
                  </div>
                  {CORE_VALUES.map((val) => {
                    const total = Object.values(votes).reduce((a, b) => a + b, 0);
                    const percentage = total === 0 ? 0 : Math.round((votes[val.id] / total) * 100);
                    return (
                      <div key={val.id} className="space-y-2">
                        <div className="flex justify-between font-medium">
                          <span>{val.title}</span>
                          <span>{votes[val.id]} 票 ({percentage}%)</span>
                        </div>
                        <div className="w-full bg-slate-100 h-4 rounded-full overflow-hidden">
                          <div 
                            className="bg-indigo-500 h-full transition-all duration-1000" 
                            style={{ width: `${percentage}%` }}
                          ></div>
                        </div>
                      </div>
                    );
                  })}
                  <div className="pt-6 text-center">
                    <button 
                      onClick={() => setView('quiz')}
                      className="bg-indigo-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-indigo-700"
                    >
                      進入挑戰：我會實踐它！
                    </button>
                  </div>
                </div>
              )}
            </div>
          )}

          {/* View: Quiz */}
          {view === 'quiz' && (
            <div className="animate-fadeIn">
              <div className="flex justify-between items-center mb-6">
                <span className="text-sm font-bold text-indigo-600 uppercase tracking-wider">情境挑戰 {quizIndex + 1} / {SCENARIOS.length}</span>
                <span className="bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full text-sm font-bold">目前分數: {score}</span>
              </div>
              
              <h2 className="text-2xl font-bold text-slate-800 mb-8 leading-snug">
                {SCENARIOS[quizIndex].question}
              </h2>

              <div className="space-y-4">
                {SCENARIOS[quizIndex].options.map((option, idx) => (
                  <button
                    key={idx}
                    disabled={feedback !== null}
                    onClick={() => handleQuizAnswer(option)}
                    className={`w-full text-left p-5 rounded-xl border-2 transition-all flex items-center justify-between group
                      ${feedback === null ? 'border-slate-100 hover:border-indigo-400 hover:bg-indigo-50' : 
                        option.isCorrect ? 'border-green-500 bg-green-50' : feedback === option.feedback ? 'border-red-500 bg-red-50' : 'border-slate-100 opacity-50'}
                    `}
                  >
                    <span className="text-lg font-medium">{option.text}</span>
                    {feedback !== null && option.isCorrect && <CheckCircle2 className="text-green-600 w-6 h-6" />}
                  </button>
                ))}
              </div>

              {feedback && (
                <div className={`mt-6 p-4 rounded-lg animate-bounce ${feedback.includes('很好') || feedback.includes('正確') || feedback.includes('太棒') ? 'bg-green-100 text-green-800' : 'bg-orange-100 text-orange-800'}`}>
                  <strong>{feedback.includes('很好') || feedback.includes('正確') || feedback.includes('太棒') ? '💡 答對了！' : '💡 小提醒：'}</strong> {feedback}
                </div>
              )}
            </div>
          )}

          {/* View: Results */}
          {view === 'results' && (
            <div className="text-center animate-fadeIn py-10">
              <div className="mb-6 inline-block p-6 bg-yellow-50 rounded-full border-4 border-yellow-200">
                <Award className="w-20 h-20 text-yellow-500" />
              </div>
              <h2 className="text-3xl font-bold mb-4 text-slate-800">挑戰完成！</h2>
              <p className="text-xl text-slate-600 mb-8">
                你的「價值實踐力」得分：<span className="text-indigo-600 font-black text-4xl mx-2">{score}</span> / {SCENARIOS.length}
              </p>
              
              <div className="bg-indigo-50 p-6 rounded-2xl mb-8 max-w-md mx-auto">
                <p className="italic text-indigo-800 leading-relaxed">
                  「最偉大的價值不是掛在牆上的口號，而是我們每天如何對待彼此。」
                </p>
              </div>

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button 
                  onClick={resetAll}
                  className="bg-slate-200 text-slate-700 px-8 py-3 rounded-xl font-semibold hover:bg-slate-300 transition-colors"
                >
                  重新開始
                </button>
                <button 
                  onClick={() => setView('home')}
                  className="bg-indigo-600 text-white px-8 py-3 rounded-xl font-semibold hover:bg-indigo-700 shadow-lg transition-colors"
                >
                  回到價值介紹
                </button>
              </div>
            </div>
          )}

        </main>

        {/* Footer */}
        <footer className="mt-8 text-center text-slate-400 text-sm">
          <p>© 2024 班級經營數位工具．讓價值落實於生活</p>
        </footer>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.5s ease-out forwards;
        }
      `}} />
    </div>
  );
}