'use client'

import { useState } from 'react'
import { Navigation } from '@/components/Navigation'
import { ProtectedRoute } from '@/components/ProtectedRoute'

export default function VocabDesignsPage() {
  return (
    <ProtectedRoute>
      <VocabDesignsContent />
    </ProtectedRoute>
  )
}

function VocabDesignsContent() {
  const [selectedDesign, setSelectedDesign] = useState('modern')
  const [showPopup, setShowPopup] = useState(false)

  // 假詞彙數據
  const mockWord = {
    word: 'elaborate',
    pronunciation: '/ɪˈlæbərət/',
    partOfSpeech: 'verb',
    translation: '詳細說明',
    definition: 'To explain something in more detail; to develop or present a theory, policy, or system in further detail',
    synonyms: ['explain', 'detail', 'expand', 'clarify'],
    difficultyLevel: 'B2',
    isHighValue: true,
    example: 'Could you elaborate on your proposal?',
    exampleTranslation: '你能詳細說明一下你的提案嗎？'
  }

  const designs = [
    { id: 'modern', name: '現代玻璃', description: '毛玻璃效果，現代感設計' },
    { id: 'classic', name: '經典卡片', description: '傳統卡片風格，清晰分區' },
    { id: 'minimal', name: '極簡風格', description: '簡潔乾淨，突出重點' },
    { id: 'magazine', name: '雜誌排版', description: '類似雜誌的排版風格' },
    { id: 'mobile', name: '移動應用', description: 'iOS/Android應用風格' },
    { id: 'learning', name: '學習卡片', description: '與學習功能一致的風格' }
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      <Navigation />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* 頁面標題 */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-gray-900 mb-4">詞彙明細版型展示</h1>
          <p className="text-xl text-gray-600 mb-6">6種不同風格的詞彙彈窗設計</p>

          {/* 測試詞彙 */}
          <div className="inline-block bg-white rounded-lg shadow-sm p-4 border border-gray-200">
            <span className="text-gray-600 text-sm">測試詞彙：</span>
            <button
              onClick={() => setShowPopup(true)}
              className="ml-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
            >
              點擊查看 "elaborate"
            </button>
          </div>
        </div>

        {/* 版型選擇器 */}
        <div className="flex justify-center mb-8">
          <div className="bg-white rounded-xl shadow-sm p-2 inline-flex flex-wrap gap-2">
            {designs.map((design) => (
              <button
                key={design.id}
                onClick={() => setSelectedDesign(design.id)}
                className={`px-4 py-2 rounded-lg transition-all ${
                  selectedDesign === design.id
                    ? 'bg-primary text-white shadow-md'
                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                }`}
              >
                {design.name}
              </button>
            ))}
          </div>
        </div>

        {/* 版型預覽 */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* 左側：版型說明 */}
          <div className="bg-white rounded-xl shadow-lg p-6">
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              {designs.find(d => d.id === selectedDesign)?.name}
            </h2>
            <p className="text-gray-600 mb-6">
              {designs.find(d => d.id === selectedDesign)?.description}
            </p>

            <div className="space-y-4">
              <div>
                <h3 className="font-semibold text-gray-900 mb-2">設計特色</h3>
                <ul className="text-sm text-gray-700 space-y-1">
                  {getDesignFeatures(selectedDesign).map((feature, idx) => (
                    <li key={idx} className="flex items-center gap-2">
                      <span className="text-blue-500">•</span>
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <h3 className="font-semibold text-gray-900 mb-2">適用場景</h3>
                <p className="text-sm text-gray-700">
                  {getDesignScenario(selectedDesign)}
                </p>
              </div>
            </div>
          </div>

          {/* 右側：版型預覽 */}
          <div className="bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl p-8 flex items-center justify-center min-h-[600px] relative">
            <div className="text-center">
              <p className="text-gray-600 mb-4">點擊下方按鈕預覽版型效果</p>
              <button
                onClick={() => setShowPopup(true)}
                className="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors font-medium shadow-lg"
              >
                預覽 "{mockWord.word}" 詞彙詳情
              </button>
            </div>

            {/* 模擬背景文字 */}
            <div className="absolute inset-4 opacity-10 text-gray-500 text-lg leading-relaxed pointer-events-none">
              This is a sample sentence where you can click on any word to see the elaborate definition and detailed explanation.
            </div>
          </div>
        </div>
      </div>

      {/* 詞彙彈窗 - 根據選擇的設計風格渲染 */}
      {showPopup && (
        <>
          {/* 背景遮罩 */}
          <div
            className="fixed inset-0 bg-black bg-opacity-50 z-40"
            onClick={() => setShowPopup(false)}
          />

          {/* 彈窗內容 */}
          <div className="fixed inset-0 flex items-center justify-center z-50 p-4">
            {renderVocabPopup(selectedDesign, mockWord, () => setShowPopup(false))}
          </div>
        </>
      )}
    </div>
  )
}

// 渲染不同風格的詞彙彈窗
function renderVocabPopup(design: string, word: any, onClose: () => void) {
  const handleSave = () => {
    alert(`✅ 已將「${word.word}」保存到詞卡！`)
    onClose()
  }

  switch (design) {
    case 'modern':
      return <ModernGlassDesign word={word} onClose={onClose} onSave={handleSave} />
    case 'classic':
      return <ClassicCardDesign word={word} onClose={onClose} onSave={handleSave} />
    case 'minimal':
      return <MinimalDesign word={word} onClose={onClose} onSave={handleSave} />
    case 'magazine':
      return <MagazineDesign word={word} onClose={onClose} onSave={handleSave} />
    case 'mobile':
      return <MobileAppDesign word={word} onClose={onClose} onSave={handleSave} />
    case 'learning':
      return <LearningCardDesign word={word} onClose={onClose} onSave={handleSave} />
    default:
      return <ModernGlassDesign word={word} onClose={onClose} onSave={handleSave} />
  }
}

// 1. 現代玻璃風格
function ModernGlassDesign({ word, onClose, onSave }: any) {
  return (
    <div
      className="bg-white rounded-2xl shadow-2xl border-0 w-80 backdrop-blur-sm"
      style={{
        background: 'rgba(255, 255, 255, 0.98)',
        backdropFilter: 'blur(12px)',
        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.8)'
      }}
    >
      <div className="relative p-5 pb-0">
        <button
          onClick={onClose}
          className="absolute top-3 right-3 w-6 h-6 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors flex items-center justify-center text-gray-500"
        >
          ✕
        </button>

        <div className="pr-8">
          <div className="flex items-baseline gap-3 mb-1">
            <h3 className="text-2xl font-bold text-gray-900">{word.word}</h3>
            {word.isHighValue && <span className="text-yellow-500 text-lg">⭐</span>}
          </div>
          <div className="flex items-center gap-3 text-gray-600">
            <span className="text-sm font-medium">{word.pronunciation}</span>
            <span className="text-xs px-2 py-1 rounded-full font-medium bg-blue-100 text-blue-700">
              {word.difficultyLevel}
            </span>
          </div>
        </div>
      </div>

      <div className="px-5 py-4 space-y-4">
        <div>
          <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">翻譯</div>
          <div className="text-lg font-semibold text-gray-900">{word.translation}</div>
        </div>

        <div>
          <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">定義</div>
          <div className="text-sm text-gray-700 leading-relaxed">{word.definition}</div>
        </div>

        <div>
          <div className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">同義詞</div>
          <div className="flex flex-wrap gap-1">
            {word.synonyms.map((synonym: string, idx: number) => (
              <span key={idx} className="bg-blue-50 text-blue-700 px-2 py-1 rounded text-xs font-medium border border-blue-200">
                {synonym}
              </span>
            ))}
          </div>
        </div>
      </div>

      <div className="p-5 pt-2 border-t border-gray-100">
        <button
          onClick={onSave}
          className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 px-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-800 transition-all duration-200 transform hover:scale-105 active:scale-95 flex items-center justify-center gap-2 shadow-lg"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
          </svg>
          <span className="text-sm font-medium">加入詞卡</span>
        </button>
      </div>
    </div>
  )
}

// 2. 經典卡片風格
function ClassicCardDesign({ word, onClose, onSave }: any) {
  return (
    <div className="bg-white rounded-lg shadow-lg border border-gray-200 w-96 max-w-md">
      <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 rounded-t-lg">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="text-xl font-bold">{word.word}</h3>
            <p className="text-blue-100 text-sm">{word.pronunciation}</p>
          </div>
          <button
            onClick={onClose}
            className="text-blue-100 hover:text-white w-8 h-8 rounded-full hover:bg-blue-800 transition-colors flex items-center justify-center"
          >
            ✕
          </button>
        </div>
      </div>

      <div className="p-4 space-y-4">
        <div className="flex items-center gap-3">
          <span className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm font-medium">
            {word.partOfSpeech}
          </span>
          <span className={`px-3 py-1 rounded-full text-sm font-medium ${
            word.difficultyLevel === 'A1' || word.difficultyLevel === 'A2' ? 'bg-green-100 text-green-700' :
            word.difficultyLevel === 'B1' || word.difficultyLevel === 'B2' ? 'bg-yellow-100 text-yellow-700' :
            'bg-red-100 text-red-700'
          }`}>
            {word.difficultyLevel}
          </span>
          {word.isHighValue && (
            <span className="bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full text-xs font-medium">
              ⭐ 高價值
            </span>
          )}
        </div>

        <div className="bg-blue-50 rounded-lg p-3 border-l-4 border-blue-400">
          <h4 className="font-semibold text-blue-900 mb-1">中文翻譯</h4>
          <p className="text-blue-800 font-medium">{word.translation}</p>
        </div>

        <div className="bg-gray-50 rounded-lg p-3">
          <h4 className="font-semibold text-gray-900 mb-2">英文定義</h4>
          <p className="text-gray-700 text-sm leading-relaxed">{word.definition}</p>
        </div>

        <div>
          <h4 className="font-semibold text-gray-900 mb-2">同義詞</h4>
          <div className="flex flex-wrap gap-2">
            {word.synonyms.map((synonym: string, idx: number) => (
              <span key={idx} className="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm">
                {synonym}
              </span>
            ))}
          </div>
        </div>

        <button
          onClick={onSave}
          className="w-full bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"
        >
          <span>💾</span>
          <span>保存到詞卡</span>
        </button>
      </div>
    </div>
  )
}

// 3. 極簡風格
function MinimalDesign({ word, onClose, onSave }: any) {
  return (
    <div className="bg-white rounded-lg shadow-lg w-72 border border-gray-100">
      <div className="p-4 border-b border-gray-100">
        <div className="flex items-center justify-between">
          <h3 className="text-xl font-bold text-gray-900">{word.word}</h3>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 w-5 h-5 flex items-center justify-center"
          >
            ✕
          </button>
        </div>
        <p className="text-sm text-gray-500 mt-1">{word.pronunciation}</p>
      </div>

      <div className="p-4 space-y-3">
        <div>
          <span className="text-lg font-medium text-gray-900">{word.translation}</span>
          <span className="ml-2 text-xs text-gray-500">({word.partOfSpeech})</span>
        </div>

        <p className="text-sm text-gray-600 leading-relaxed">{word.definition}</p>

        <div className="flex flex-wrap gap-1 pt-2">
          {word.synonyms.slice(0, 3).map((synonym: string, idx: number) => (
            <span key={idx} className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
              {synonym}
            </span>
          ))}
        </div>

        <button
          onClick={onSave}
          className="w-full mt-4 bg-gray-900 text-white py-2 rounded text-sm font-medium hover:bg-gray-800 transition-colors"
        >
          加入學習
        </button>
      </div>
    </div>
  )
}

// 4. 雜誌排版風格
function MagazineDesign({ word, onClose, onSave }: any) {
  return (
    <div className="bg-white shadow-xl w-96 max-w-md" style={{ fontFamily: 'Georgia, serif' }}>
      <div className="p-6 border-b-2 border-gray-900">
        <div className="flex items-start justify-between">
          <div>
            <h3 className="text-3xl font-bold text-gray-900 mb-1" style={{ fontFamily: 'Georgia, serif' }}>
              {word.word}
            </h3>
            <div className="flex items-center gap-4 text-sm text-gray-600">
              <span className="italic">{word.pronunciation}</span>
              <span className="font-semibold">{word.partOfSpeech}</span>
              <span className="bg-gray-900 text-white px-2 py-1 text-xs">{word.difficultyLevel}</span>
            </div>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600 text-xl"
          >
            ×
          </button>
        </div>
      </div>

      <div className="p-6">
        <div className="mb-4">
          <h4 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-2 border-b border-gray-200 pb-1">
            Translation
          </h4>
          <p className="text-xl font-semibold text-gray-900" style={{ fontFamily: 'Georgia, serif' }}>
            {word.translation}
          </p>
        </div>

        <div className="mb-4">
          <h4 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Definition</h4>
          <p className="text-sm text-gray-700 leading-relaxed" style={{ textAlign: 'justify' }}>
            {word.definition}
          </p>
        </div>

        <div className="mb-6">
          <h4 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-2">Synonyms</h4>
          <p className="text-sm text-gray-700 italic">
            {word.synonyms.join(', ')}
          </p>
        </div>

        <button
          onClick={onSave}
          className="w-full bg-gray-900 text-white py-3 font-semibold uppercase tracking-wider text-sm hover:bg-gray-800 transition-colors"
        >
          Add to Collection
        </button>
      </div>
    </div>
  )
}

// 5. 移動應用風格
function MobileAppDesign({ word, onClose, onSave }: any) {
  return (
    <div className="bg-white rounded-3xl shadow-xl w-80 overflow-hidden">
      <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
              {word.word[0].toUpperCase()}
            </div>
            <span className="font-medium text-gray-900">詞彙詳情</span>
          </div>
          <button
            onClick={onClose}
            className="text-blue-500 font-medium text-sm"
          >
            完成
          </button>
        </div>
      </div>

      <div className="p-4">
        <div className="text-center mb-4">
          <h3 className="text-2xl font-bold text-gray-900 mb-1">{word.word}</h3>
          <p className="text-gray-500 text-sm">{word.pronunciation}</p>
          <div className="flex items-center justify-center gap-2 mt-2">
            <span className="bg-gray-100 text-gray-700 px-2 py-1 rounded-full text-xs">
              {word.partOfSpeech}
            </span>
            <span className={`px-2 py-1 rounded-full text-xs ${
              word.difficultyLevel === 'A1' || word.difficultyLevel === 'A2' ? 'bg-green-100 text-green-700' :
              word.difficultyLevel === 'B1' || word.difficultyLevel === 'B2' ? 'bg-yellow-100 text-yellow-700' :
              'bg-red-100 text-red-700'
            }`}>
              {word.difficultyLevel}
            </span>
          </div>
        </div>

        <div className="space-y-3">
          <div className="flex items-start gap-3 py-2">
            <div className="w-8 text-center">🌏</div>
            <div className="flex-1">
              <div className="font-medium text-gray-900">{word.translation}</div>
              <div className="text-xs text-gray-500">中文翻譯</div>
            </div>
          </div>

          <div className="flex items-start gap-3 py-2 border-t border-gray-100">
            <div className="w-8 text-center">📝</div>
            <div className="flex-1">
              <div className="text-sm text-gray-700 leading-relaxed">{word.definition}</div>
              <div className="text-xs text-gray-500 mt-1">英文定義</div>
            </div>
          </div>

          <div className="flex items-start gap-3 py-2 border-t border-gray-100">
            <div className="w-8 text-center">🔗</div>
            <div className="flex-1">
              <div className="flex flex-wrap gap-1">
                {word.synonyms.slice(0, 3).map((synonym: string, idx: number) => (
                  <span key={idx} className="bg-gray-100 text-gray-700 px-2 py-1 rounded-full text-xs">
                    {synonym}
                  </span>
                ))}
              </div>
              <div className="text-xs text-gray-500 mt-1">同義詞</div>
            </div>
          </div>
        </div>

        <button
          onClick={onSave}
          className="w-full mt-6 bg-blue-500 text-white py-3 rounded-xl font-medium text-base hover:bg-blue-600 transition-colors active:bg-blue-700"
        >
          加入詞卡
        </button>
      </div>
    </div>
  )
}

// 6. 學習卡片風格
function LearningCardDesign({ word, onClose, onSave }: any) {
  return (
    <div className="bg-white rounded-xl shadow-lg w-96 max-w-md overflow-hidden">
      <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-5 border-b border-blue-200">
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold">
              {word.word[0].toUpperCase()}
            </div>
            <div>
              <h3 className="text-lg font-bold text-gray-900">{word.word}</h3>
              <p className="text-sm text-gray-600">{word.partOfSpeech}</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="text-gray-400 hover:text-gray-600"
          >
            ✕
          </button>
        </div>

        <div className="flex items-center gap-3">
          <span className="text-sm font-medium text-gray-700">{word.pronunciation}</span>
          <button className="text-blue-600 hover:text-blue-700 p-1 rounded-full hover:bg-blue-50 transition-colors">
            <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
              <path d="M8 5v14l11-7z"/>
            </svg>
          </button>
        </div>
      </div>

      <div className="p-5 space-y-4">
        <div className="bg-green-50 rounded-lg p-4">
          <h4 className="font-semibold text-green-900 mb-2 text-left">翻譯</h4>
          <p className="text-green-800 font-medium text-left">{word.translation}</p>
        </div>

        <div className="bg-gray-50 rounded-lg p-4">
          <h4 className="font-semibold text-gray-900 mb-2 text-left">定義</h4>
          <p className="text-gray-700 text-sm text-left leading-relaxed">{word.definition}</p>
        </div>

        <div className="bg-blue-50 rounded-lg p-4">
          <h4 className="font-semibold text-blue-900 mb-2 text-left">同義詞</h4>
          <div className="flex flex-wrap gap-2">
            {word.synonyms.map((synonym: string, idx: number) => (
              <span key={idx} className="bg-white text-blue-700 px-3 py-1 rounded-full text-sm border border-blue-200">
                {synonym}
              </span>
            ))}
          </div>
        </div>

        <button
          onClick={onSave}
          className="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary-hover transition-colors flex items-center justify-center gap-2"
        >
          <span>💾</span>
          <span>保存學習</span>
        </button>
      </div>
    </div>
  )
}

// 輔助函數
function getDesignFeatures(design: string): string[] {
  const features = {
    modern: [
      '毛玻璃背景效果',
      '大尺寸陰影和圓角',
      '漸層按鈕設計',
      '微互動動畫',
      '現代配色方案'
    ],
    classic: [
      '藍色漸層標題欄',
      '清晰的區塊分隔',
      '傳統卡片佈局',
      '顏色編碼標籤',
      '穩重的設計風格'
    ],
    minimal: [
      '極簡配色方案',
      '去除多餘裝飾',
      '重點信息突出',
      '輕量化設計',
      '快速瀏覽體驗'
    ],
    magazine: [
      '雜誌式字體',
      '專業排版設計',
      '大標題小說明',
      '黑白主色調',
      '閱讀導向佈局'
    ],
    mobile: [
      'iOS/Android風格',
      '圓角和圖標設計',
      '列表式信息展示',
      '觸控友好設計',
      '移動端優化'
    ],
    learning: [
      '學習功能一致性',
      '彩色區塊設計',
      '教育導向佈局',
      '清晰的信息分類',
      '學習體驗優化'
    ]
  }
  return features[design as keyof typeof features] || []
}

function getDesignScenario(design: string): string {
  const scenarios = {
    modern: '適合追求現代感和科技感的用戶，特別是年輕用戶群體。設計前衛，視覺效果佳。',
    classic: '適合喜歡傳統界面的用戶，信息展示清晰，功能分區明確，適合學術或商務場景。',
    minimal: '適合追求效率的用戶，減少視覺干擾，快速獲取核心信息，適合頻繁使用的場景。',
    magazine: '適合喜歡閱讀體驗的用戶，類似字典或雜誌的專業排版，適合深度學習。',
    mobile: '適合手機用戶，觸控友好，符合移動端應用的使用習慣，適合隨時隨地學習。',
    learning: '與現有學習功能保持一致，用戶體驗連貫，適合在學習流程中使用。'
  }
  return scenarios[design as keyof typeof scenarios] || ''
}