import {useEffect, useState} from 'react'
import {Link, useNavigate, useParams} from 'react-router-dom'
import Navbar from '../components/Navbar'
import {ArrowLeft, Book, Calendar, Download, Edit, MessageSquare, Tag, User} from 'lucide-react'
import {type Character, characterApi} from '../api/character'

export default function CharacterDetailPage() {
  const { id } = useParams<{ id: string }>()
  const [character, setCharacter] = useState<Character | null>(null)
  const [loading, setLoading] = useState(true)
  const navigate = useNavigate()

  useEffect(() => {
    if (id) {
      loadCharacter(parseInt(id))
    }
  }, [id])

  const loadCharacter = async (characterId: number) => {
    try {
      setLoading(true)
      const response = await characterApi.getCharacterById(characterId)
      setCharacter(response.data)
    } catch (err: any) {
      console.error('获取角色卡详情失败:', err)
      if (err.response?.status === 401) {
        navigate('/login')
      } else {
        alert('角色卡不存在或无权访问')
        navigate('/characters')
      }
    } finally {
      setLoading(false)
    }
  }

  const handleExport = async () => {
    if (!character) return
    try {
      const response = await characterApi.exportCharacter(character.id)
      const blob = new Blob([response.data], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `${character.name}.json`
      a.click()
      URL.revokeObjectURL(url)
    } catch (err) {
      console.error('导出角色卡失败:', err)
      alert('导出失败，请重试')
    }
  }

  const handleStartChat = () => {
    if (!character) return
    navigate(`/chat?character=${character.id}`)
  }

  const getWorldBookStats = () => {
    if (!character?.characterBook) return null
    try {
      const book = typeof character.characterBook === 'string'
        ? JSON.parse(character.characterBook)
        : character.characterBook
      return {
        name: book.name || '未命名世界书',
        entryCount: book.entries?.length || 0
      }
    } catch {
      return null
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-[#0A0A0F] via-[#1A0B2E] to-[#0A0A0F] flex items-center justify-center">
        <div className="text-white">加载中...</div>
      </div>
    )
  }

  if (!character) {
    return null
  }

  const worldBookStats = getWorldBookStats()

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#0A0A0F] via-[#1A0B2E] to-[#0A0A0F]">
      <Navbar />

      <div className="pt-32 pb-20 px-4">
        <div className="max-w-5xl mx-auto">
          <Link
            to="/characters"
            className="inline-flex items-center gap-2 text-white/60 hover:text-white transition-colors mb-6"
          >
            <ArrowLeft className="w-4 h-4" />
            返回角色管理
          </Link>

          <div className="glass rounded-3xl overflow-hidden">
            <div className="relative h-64 bg-gradient-to-br from-primary/20 to-secondary/20">
              {character.avatar && (
                <img
                  src={character.avatar}
                  alt={character.name}
                  className="w-full h-full object-cover"
                />
              )}
              <div className="absolute inset-0 bg-gradient-to-t from-[#0A0A0F] to-transparent" />
              <div className="absolute bottom-6 left-6 right-6">
                <h1 className="text-4xl font-bold mb-2">{character.name}</h1>
                {character.creator && (
                  <div className="flex items-center gap-2 text-white/60">
                    <User className="w-4 h-4" />
                    <span>{character.creator}</span>
                  </div>
                )}
              </div>
            </div>

            <div className="p-8">
              <div className="flex gap-3 mb-8">
                <button
                  onClick={handleStartChat}
                  className="flex-1 px-6 py-3 bg-gradient-to-r from-primary to-secondary rounded-xl font-medium hover:opacity-90 transition-opacity cursor-pointer flex items-center justify-center gap-2"
                >
                  <MessageSquare className="w-5 h-5" />
                  开始对话
                </button>
                <button
                  onClick={() => navigate(`/characters?edit=${character.id}`)}
                  className="px-6 py-3 glass-hover rounded-xl cursor-pointer flex items-center gap-2"
                >
                  <Edit className="w-5 h-5" />
                  编辑
                </button>
                <button
                  onClick={handleExport}
                  className="px-6 py-3 glass-hover rounded-xl cursor-pointer flex items-center gap-2"
                >
                  <Download className="w-5 h-5" />
                  导出
                </button>
              </div>

              {character.tags && character.tags.length > 0 && (
                <div className="mb-6">
                  <div className="flex items-center gap-2 mb-3">
                    <Tag className="w-4 h-4 text-primary" />
                    <span className="text-sm font-medium">标签</span>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {character.tags.map((tag, i) => (
                      <span key={i} className="px-3 py-1 glass rounded-lg text-sm">
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {worldBookStats && (
                <div className="mb-6 glass rounded-xl p-4">
                  <div className="flex items-center gap-2 mb-2">
                    <Book className="w-4 h-4 text-secondary" />
                    <span className="text-sm font-medium">世界书</span>
                  </div>
                  <div className="text-sm text-white/60">
                    <div>{worldBookStats.name}</div>
                    <div>{worldBookStats.entryCount} 个条目</div>
                  </div>
                </div>
              )}

              <div className="space-y-6">
                {character.description && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2">角色描述</h3>
                    <p className="text-white/80 whitespace-pre-wrap">{character.description}</p>
                  </div>
                )}

                {character.personality && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2">性格特征</h3>
                    <p className="text-white/80 whitespace-pre-wrap">{character.personality}</p>
                  </div>
                )}

                {character.scenario && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2">场景设定</h3>
                    <p className="text-white/80 whitespace-pre-wrap">{character.scenario}</p>
                  </div>
                )}

                {character.firstMes && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2">第一条消息</h3>
                    <div className="glass rounded-xl p-4">
                      <p className="text-white/80 whitespace-pre-wrap">{character.firstMes}</p>
                    </div>
                  </div>
                )}

                {character.mesExample && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2">示例对话</h3>
                    <div className="glass rounded-xl p-4">
                      <p className="text-white/80 whitespace-pre-wrap font-mono text-sm">
                        {character.mesExample}
                      </p>
                    </div>
                  </div>
                )}

                {character.systemPrompt && (
                  <div>
                    <h3 className="text-lg font-semibold mb-2">系统提示词</h3>
                    <div className="glass rounded-xl p-4">
                      <p className="text-white/80 whitespace-pre-wrap font-mono text-sm">
                        {character.systemPrompt}
                      </p>
                    </div>
                  </div>
                )}

                <div className="flex items-center gap-4 text-sm text-white/40 pt-4 border-t border-white/10">
                  <div className="flex items-center gap-2">
                    <Calendar className="w-4 h-4" />
                    创建于 {new Date(character.createdAt).toLocaleDateString()}
                  </div>
                  <div>版本 {character.version || '1.0'}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}