'use client'

import { useState } from 'react'
import Link from 'next/link'

export default function LearnPage() {
  const [currentCardIndex, setCurrentCardIndex] = useState(0)
  const [isFlipped, setIsFlipped] = useState(false)
  const [mode, setMode] = useState<'flip' | 'quiz'>('flip')
  const [score, setScore] = useState({ correct: 0, total: 0 })
  const [selectedAnswer, setSelectedAnswer] = useState<string | null>(null)
  const [showResult, setShowResult] = useState(false)

  // Mock data
  const cards = [
    {
      id: 1,
      word: 'negotiate',
      partOfSpeech: 'verb',
      pronunciation: '/nɪˈɡoʊʃieɪt/',
      translation: '協商、談判',
      definition: 'To discuss something with someone in order to reach an agreement',
      example: 'We need to negotiate a better deal with our suppliers.',
      exampleTranslation: '我們需要與供應商協商更好的交易。',
      synonyms: ['bargain', 'discuss', 'mediate'],
      difficulty: 'intermediate'
    },
    {
      id: 2,
      word: 'perspective',
      partOfSpeech: 'noun',
      pronunciation: '/pərˈspektɪv/',
      translation: '觀點、看法',
      definition: 'A particular way of considering something',
      example: 'From my perspective, this is the best solution.',
      exampleTranslation: '從我的角度來看，這是最好的解決方案。',
      synonyms: ['viewpoint', 'outlook', 'stance'],
      difficulty: 'intermediate'
    },
    {
      id: 3,
      word: 'accomplish',
      partOfSpeech: 'verb',
      pronunciation: '/əˈkɒmplɪʃ/',
      translation: '完成、達成',
      definition: 'To finish something successfully or to achieve something',
      example: 'She accomplished her goal of running a marathon.',
      exampleTranslation: '她完成了跑馬拉松的目標。',
      synonyms: ['achieve', 'complete', 'fulfill'],
      difficulty: 'intermediate'
    }
  ]

  const currentCard = cards[currentCardIndex]

  // Quiz mode options
  const quizOptions = [
    '協商、談判',
    '觀點、看法',
    '完成、達成',
    '建議、提議'
  ]

  const handleFlip = () => {
    setIsFlipped(!isFlipped)
  }

  const handleNext = () => {
    if (currentCardIndex < cards.length - 1) {
      setCurrentCardIndex(currentCardIndex + 1)
      setIsFlipped(false)
      setSelectedAnswer(null)
      setShowResult(false)
    }
  }

  const handlePrevious = () => {
    if (currentCardIndex > 0) {
      setCurrentCardIndex(currentCardIndex - 1)
      setIsFlipped(false)
      setSelectedAnswer(null)
      setShowResult(false)
    }
  }

  const handleDifficultyRate = (rating: number) => {
    // Mock rating logic
    console.log(`Rated ${rating} for ${currentCard.word}`)
    handleNext()
  }

  const handleQuizAnswer = (answer: string) => {
    setSelectedAnswer(answer)
    setShowResult(true)
    if (answer === currentCard.translation) {
      setScore({ ...score, correct: score.correct + 1, total: score.total + 1 })
    } else {
      setScore({ ...score, total: score.total + 1 })
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Navigation */}
      <nav className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center space-x-8">
              <Link href="/dashboard" className="text-2xl font-bold text-primary">DramaLing</Link>
              <div className="hidden md:flex space-x-6">
                <Link href="/dashboard" className="text-gray-600 hover:text-gray-900">儀表板</Link>
                <Link href="/flashcards" className="text-gray-600 hover:text-gray-900">詞卡</Link>
                <Link href="/learn" className="text-gray-900 font-medium">學習</Link>
                <Link href="/generate" className="text-gray-600 hover:text-gray-900">AI 生成</Link>
              </div>
            </div>
            <button
              onClick={() => window.location.href = '/dashboard'}
              className="text-gray-600 hover:text-gray-900"
            >
              × 結束學習
            </button>
          </div>
        </div>
      </nav>

      <div className="max-w-4xl mx-auto px-4 py-8">
        {/* Progress Bar */}
        <div className="mb-8">
          <div className="flex justify-between items-center mb-2">
            <span className="text-sm text-gray-600">進度</span>
            <span className="text-sm text-gray-600">
              {currentCardIndex + 1} / {cards.length}
            </span>
          </div>
          <div className="w-full bg-gray-200 rounded-full h-2">
            <div
              className="bg-primary h-2 rounded-full transition-all"
              style={{ width: `${((currentCardIndex + 1) / cards.length) * 100}%` }}
            ></div>
          </div>
        </div>

        {/* Mode Toggle */}
        <div className="flex justify-center mb-6">
          <div className="bg-white rounded-lg shadow-sm p-1 inline-flex">
            <button
              onClick={() => setMode('flip')}
              className={`px-4 py-2 rounded-md transition-colors ${
                mode === 'flip'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              翻卡模式
            </button>
            <button
              onClick={() => setMode('quiz')}
              className={`px-4 py-2 rounded-md transition-colors ${
                mode === 'quiz'
                  ? 'bg-primary text-white'
                  : 'text-gray-600 hover:text-gray-900'
              }`}
            >
              測驗模式
            </button>
          </div>
        </div>

        {mode === 'flip' ? (
          /* Flip Card Mode */
          <div className="relative">
            <div
              className="relative w-full h-96 cursor-pointer"
              onClick={handleFlip}
              style={{ perspective: '1000px' }}
            >
              <div
                className={`absolute w-full h-full transition-transform duration-600 ${
                  isFlipped ? 'rotate-y-180' : ''
                }`}
                style={{ 
                  transformStyle: 'preserve-3d',
                  transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)'
                }}
              >
                {/* Front of card */}
                <div
                  className="absolute w-full h-full bg-white rounded-2xl shadow-xl p-8 flex flex-col items-center justify-center"
                  style={{ backfaceVisibility: 'hidden' }}
                >
                  <div className="text-4xl font-bold text-gray-900 mb-4">
                    {currentCard.word}
                  </div>
                  <div className="text-lg text-gray-600 mb-2">
                    {currentCard.partOfSpeech}
                  </div>
                  <div className="text-lg text-gray-500">
                    {currentCard.pronunciation}
                  </div>
                  <div className="mt-8 text-sm text-gray-400">
                    點擊翻轉查看答案
                  </div>
                </div>

                {/* Back of card */}
                <div
                  className="absolute w-full h-full bg-white rounded-2xl shadow-xl p-8 overflow-y-auto"
                  style={{ 
                    backfaceVisibility: 'hidden',
                    transform: 'rotateY(180deg)'
                  }}
                >
                  <div className="space-y-4">
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">翻譯</div>
                      <div className="text-2xl font-bold text-gray-900">{currentCard.translation}</div>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">定義</div>
                      <div className="text-gray-600">{currentCard.definition}</div>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">例句</div>
                      <div className="text-gray-600">{currentCard.example}</div>
                      <div className="text-gray-500 text-sm mt-1">{currentCard.exampleTranslation}</div>
                    </div>
                    <div>
                      <div className="text-sm font-semibold text-gray-700 mb-1">同義詞</div>
                      <div className="flex flex-wrap gap-2">
                        {currentCard.synonyms.map((syn, idx) => (
                          <span key={idx} className="px-3 py-1 bg-gray-100 rounded-full text-sm">
                            {syn}
                          </span>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Difficulty Rating */}
            {isFlipped && (
              <div className="mt-8">
                <div className="text-center mb-4">
                  <span className="text-gray-600">這個單字對你來說難度如何？</span>
                </div>
                <div className="flex justify-center space-x-3">
                  <button
                    onClick={() => handleDifficultyRate(1)}
                    className="px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition-colors"
                  >
                    😔 完全不記得
                  </button>
                  <button
                    onClick={() => handleDifficultyRate(3)}
                    className="px-4 py-2 bg-yellow-100 text-yellow-700 rounded-lg hover:bg-yellow-200 transition-colors"
                  >
                    😐 有點困難
                  </button>
                  <button
                    onClick={() => handleDifficultyRate(5)}
                    className="px-4 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition-colors"
                  >
                    😊 很簡單
                  </button>
                </div>
              </div>
            )}
          </div>
        ) : (
          /* Quiz Mode */
          <div className="bg-white rounded-2xl shadow-xl p-8">
            <div className="mb-6">
              <div className="text-sm text-gray-600 mb-2">選擇正確的翻譯</div>
              <div className="text-3xl font-bold text-gray-900">{currentCard.word}</div>
              <div className="text-lg text-gray-500 mt-1">{currentCard.pronunciation}</div>
            </div>

            <div className="space-y-3">
              {quizOptions.map((option, idx) => (
                <button
                  key={idx}
                  onClick={() => !showResult && handleQuizAnswer(option)}
                  disabled={showResult}
                  className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
                    showResult && option === currentCard.translation
                      ? 'border-green-500 bg-green-50'
                      : showResult && option === selectedAnswer && option !== currentCard.translation
                      ? 'border-red-500 bg-red-50'
                      : selectedAnswer === option
                      ? 'border-primary bg-primary-light'
                      : 'border-gray-200 hover:border-gray-300'
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <span className="font-medium">{option}</span>
                    {showResult && option === currentCard.translation && (
                      <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                    {showResult && option === selectedAnswer && option !== currentCard.translation && (
                      <svg className="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                      </svg>
                    )}
                  </div>
                </button>
              ))}
            </div>

            {showResult && (
              <div className="mt-6 p-4 bg-gray-50 rounded-lg">
                <div className="text-sm font-semibold text-gray-700 mb-2">例句</div>
                <div className="text-gray-600">{currentCard.example}</div>
                <div className="text-gray-500 text-sm mt-1">{currentCard.exampleTranslation}</div>
              </div>
            )}

            <div className="mt-6 text-center">
              <div className="text-sm text-gray-600">
                正確率：{score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0}% 
                ({score.correct}/{score.total})
              </div>
            </div>
          </div>
        )}

        {/* Navigation Buttons */}
        <div className="flex justify-between mt-8">
          <button
            onClick={handlePrevious}
            disabled={currentCardIndex === 0}
            className="flex items-center space-x-2 px-6 py-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            <span>上一個</span>
          </button>

          <button
            onClick={handleNext}
            disabled={currentCardIndex === cards.length - 1}
            className="flex items-center space-x-2 px-6 py-3 bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            <span>下一個</span>
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}