import {PanelRightClose, Settings, Sparkles} from 'lucide-react'
import {type Character} from '../api/character'
import {type Conversation} from '../api/conversation'

interface CharacterPanelProps {
  character: Character
  conversation: Conversation
  onOpenSettings: () => void
  onClose?: () => void
}

export default function CharacterPanel({ character, conversation, onOpenSettings, onClose }: CharacterPanelProps) {
  const tags = Array.isArray(character.tags) ? character.tags : []

  return (
    <div className="w-80 glass border-l border-white/10 flex flex-col">
      <div className="p-4 border-b border-white/10 flex items-center justify-between">
        <h2 className="font-semibold">角色信息</h2>
        <div className="flex items-center gap-2">
          <button
            onClick={onOpenSettings}
            className="p-2 glass-hover rounded-lg cursor-pointer"
            title="对话设置"
          >
            <Settings className="w-5 h-5" />
          </button>
          {onClose && (
            <button
              onClick={onClose}
              className="p-2 glass-hover rounded-lg cursor-pointer"
              title="隐藏角色面板"
            >
              <PanelRightClose className="w-5 h-5" />
            </button>
          )}
        </div>
      </div>

      <div className="p-4">
        <div className="glass-hover rounded-2xl p-6 text-center">
          {character.avatar ? (
            <img
              src={character.avatar}
              alt={character.name || '角色'}
              className="w-24 h-24 mx-auto mb-4 rounded-full object-cover"
            />
          ) : (
            <div className="w-24 h-24 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-3xl">
              {character.name ? character.name.charAt(0) : '?'}
            </div>
          )}
          <h3 className="text-lg font-semibold mb-2">{character.name || '未命名角色'}</h3>
          <p className="text-sm text-white/60 mb-4 line-clamp-2">{character.description || '暂无描述'}</p>

          <div className="flex items-center justify-center gap-2 text-xs text-white/40">
            <Sparkles className="w-4 h-4" />
            <span>在线</span>
          </div>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {tags.length > 0 && (
          <div>
            <h3 className="text-sm font-medium mb-2 text-white/80">标签</h3>
            <div className="flex flex-wrap gap-2">
              {tags.map((tag, index) => (
                <span
                  key={index}
                  className="px-3 py-1 glass rounded-full text-xs"
                >
                  {tag}
                </span>
              ))}
            </div>
          </div>
        )}

        {character.personality && (
          <div>
            <h3 className="text-sm font-medium mb-2 text-white/80">性格特征</h3>
            <p className="text-sm text-white/60 leading-relaxed">{character.personality}</p>
          </div>
        )}

        {character.scenario && (
          <div>
            <h3 className="text-sm font-medium mb-2 text-white/80">场景设定</h3>
            <p className="text-sm text-white/60 leading-relaxed">{character.scenario}</p>
          </div>
        )}

        {character.creator && (
          <div>
            <h3 className="text-sm font-medium mb-2 text-white/80">创建者</h3>
            <p className="text-sm text-white/60">{character.creator}</p>
          </div>
        )}

        <div>
          <h3 className="text-sm font-medium mb-2 text-white/80">对话统计</h3>
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-white/60">消息数</span>
              <span className="font-medium">{conversation.messageCount}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-white/60">Token 使用</span>
              <span className="font-medium">{conversation.tokenCount}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-white/60">AI 模型</span>
              <span className="font-medium text-xs">{conversation.model || 'GPT-4'}</span>
            </div>
          </div>
        </div>

        {character.characterBook && (
          <div>
            <h3 className="text-sm font-medium mb-2 text-white/80">世界书</h3>
            <p className="text-xs text-white/40">
              {typeof character.characterBook === 'object' && character.characterBook.entries
                ? `${character.characterBook.entries.length} 个条目`
                : '已启用'}
            </p>
          </div>
        )}
      </div>
    </div>
  )
}
