import React from 'react'
import type { Flashcard } from '@/lib/services/flashcards'
import { getPartOfSpeechDisplay, getCEFRColor } from '@/lib/utils/flashcardUtils'
import { BluePlayButton } from '@/components/shared/BluePlayButton'

interface FlashcardDetailHeaderProps {
  flashcard: Flashcard
  isPlayingWord: boolean
  isPlayingExample: boolean
  onToggleWordTTS: (text: string, lang?: string) => void
}

export const FlashcardDetailHeader: React.FC<FlashcardDetailHeaderProps> = ({
  flashcard,
  isPlayingWord,
  isPlayingExample,
  onToggleWordTTS
}) => {
  return (
    <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 border-b border-blue-200">
      <div className="pr-16">
        <h1 className="text-4xl font-bold text-gray-900 mb-3">{flashcard.word}</h1>
        <div className="flex items-center gap-3">
          <span className="text-sm bg-gray-100 text-gray-700 px-3 py-1 rounded-full">
            {getPartOfSpeechDisplay(flashcard.partOfSpeech)}
          </span>
          <span className="text-lg text-gray-600">{flashcard.pronunciation}</span>

          {/* TTS播放按鈕 - 使用統一的藍底漸層組件 */}
          <BluePlayButton
            text={flashcard.word}
            lang="en-US"
            isPlaying={isPlayingWord}
            onToggle={onToggleWordTTS}
            disabled={isPlayingExample}
            size="md"
            title={isPlayingWord ? "點擊停止播放" : "點擊聽詞彙發音"}
          />
        </div>
      </div>

      {/* 學習統計 */}
      <div className="grid grid-cols-3 gap-4 text-center mt-4">
        <div className="bg-white bg-opacity-60 rounded-lg p-3">
          <div className="text-2xl font-bold text-gray-900">{flashcard.masteryLevel || 0}%</div>
          <div className="text-sm text-gray-600">掌握程度</div>
        </div>
        <div className="bg-white bg-opacity-60 rounded-lg p-3">
          <div className="text-2xl font-bold text-gray-900">{flashcard.timesReviewed || 0}</div>
          <div className="text-sm text-gray-600">複習次數</div>
        </div>
        <div className="bg-white bg-opacity-60 rounded-lg p-3">
          <div className="text-2xl font-bold text-gray-900">
            {(() => {
              if (!flashcard.nextReviewDate) return 0
              const reviewDate = new Date(flashcard.nextReviewDate)
              if (isNaN(reviewDate.getTime())) return 0
              const days = Math.ceil((reviewDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24))
              return Math.max(0, days)
            })()}
          </div>
          <div className="text-sm text-gray-600">天後複習</div>
        </div>
      </div>
    </div>
  )
}