import React from 'react';
import Image from 'next/image';
import { Users } from 'lucide-react';
import { CharacterAsset } from '@/types';
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

interface CharacterPreviewProps {
    character: CharacterAsset;
}

/**
 * CharacterPreview - 角色信息快速预览组件
 * 用于在不打开完整编辑界面的情况下快速查看角色信息
 */
export const CharacterPreview: React.FC<CharacterPreviewProps> = ({ character }) => {
    return (
        <Card className="border-none shadow-none">
            <CardContent className="p-6 space-y-6">
                {/* Character Avatar and Basic Info */}
                <div className="flex flex-col items-center">
                    <div className="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500/20 to-pink-500/20 border-2 border-purple-500/30 flex items-center justify-center text-3xl font-bold text-purple-600 dark:text-purple-400 mb-4 shadow-lg">
                        {character.name[0]}
                    </div>
                    <h2 className="text-xl font-bold text-foreground mb-1">{character.name}</h2>
                    <div className="flex items-center gap-2">
                        {character.age && (
                            <span className="text-sm text-muted-foreground">{character.age}</span>
                        )}
                        {character.gender && (
                            <Badge variant="outline" className="text-xs">
                                {character.gender === 'male' ? '男' : character.gender === 'female' ? '女' : '其他'}
                            </Badge>
                        )}
                        {character.role && (
                            <Badge variant="secondary" className="text-xs">
                                {character.role}
                            </Badge>
                        )}
                    </div>
                </div>

                {/* Character Details */}
                <div className="space-y-4">
                    {character.appearance && (
                        <div className="space-y-2">
                            <label className="text-xs text-muted-foreground font-semibold uppercase tracking-wider flex items-center gap-2">
                                <Users size={12} />
                                外貌特征
                            </label>
                            <p className="text-sm text-foreground bg-muted/30 p-4 rounded-lg border border-border leading-relaxed">
                                {character.appearance}
                            </p>
                        </div>
                    )}

                    {character.desc && (
                        <div className="space-y-2">
                            <label className="text-xs text-muted-foreground font-semibold uppercase tracking-wider">
                                角色描述
                            </label>
                            <p className="text-sm text-foreground bg-muted/30 p-4 rounded-lg border border-border leading-relaxed">
                                {character.desc}
                            </p>
                        </div>
                    )}

                    {character.tags && character.tags.length > 0 && (
                        <div className="space-y-2">
                            <label className="text-xs text-muted-foreground font-semibold uppercase tracking-wider">
                                标签
                            </label>
                            <div className="flex flex-wrap gap-2">
                                {character.tags.map((tag, index) => (
                                    <Badge key={index} variant="outline" className="text-xs">
                                        {tag}
                                    </Badge>
                                ))}
                            </div>
                        </div>
                    )}
                </div>

                {/* Character Images Preview */}
                {character.imageUrls && character.imageUrls.length > 0 && (
                    <div className="space-y-2">
                        <label className="text-xs text-muted-foreground font-semibold uppercase tracking-wider">
                            参考图片
                        </label>
                        <div className="grid grid-cols-2 gap-2">
                            {character.imageUrls.slice(0, 4).map((url, index) => (
                                <div 
                                    key={index} 
                                    className="aspect-square rounded-lg overflow-hidden border border-border bg-muted/30 relative"
                                >
                                    <Image 
                                        src={url} 
                                        alt={`${character.name} - ${index + 1}`}
                                        fill
                                        sizes="(max-width: 768px) 50vw, 200px"
                                        className="object-cover hover:scale-105 transition-transform duration-200"
                                    />
                                </div>
                            ))}
                        </div>
                        {character.imageUrls.length > 4 && (
                            <p className="text-xs text-muted-foreground text-center mt-2">
                                还有 {character.imageUrls.length - 4} 张图片
                            </p>
                        )}
                    </div>
                )}
            </CardContent>
        </Card>
    );
};
