import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { User, Shield } from 'lucide-react';
import type { Character } from '@/pages/frontend/topup/types';

interface CharacterSelectorProps {
    characters: Character[];
    selectedCharacterId: string;
    onCharacterChange: (value: string) => void;
    error?: string;
}

export const CharacterSelector = ({
    characters,
    selectedCharacterId,
    onCharacterChange,
    error,
}: CharacterSelectorProps) => {
    const selectedCharacter = characters.find(c => String(c.id) === selectedCharacterId);

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <User className="w-5 h-5 text-primary" />
                    Select Character
                </CardTitle>
                <CardDescription>
                    Choose which character will receive the gold
                </CardDescription>
            </CardHeader>
            <CardContent>
                {characters.length === 0 ? (
                    <div className="text-center py-8">
                        <User className="w-12 h-12 mx-auto text-muted-foreground mb-3" />
                        <p className="text-muted-foreground">
                            No characters found.<br />Please create a character first.
                        </p>
                    </div>
                ) : (
                    <>
                        <Select value={selectedCharacterId} onValueChange={onCharacterChange}>
                            <SelectTrigger className="w-full md:w-1/2">
                                <SelectValue placeholder="Select a character" />
                            </SelectTrigger>
                            <SelectContent>
                                {characters.map((char) => (
                                    <SelectItem key={char.id} value={String(char.id)}>
                                        <div className="flex items-center gap-2">
                                            <span>{char.name}</span>
                                            {char.faction_bonus > 0 && (
                                                <Badge variant="secondary" className="text-xs bg-blue-500/10 text-blue-600">
                                                    +{char.faction_bonus}% Bonus
                                                </Badge>
                                            )}
                                        </div>
                                    </SelectItem>
                                ))}
                            </SelectContent>
                        </Select>
                        {selectedCharacter?.faction_bonus ? (
                            <p className="text-sm text-blue-600 mt-2 flex items-center gap-1">
                                <Shield className="w-4 h-4" />
                                This character has {selectedCharacter.faction_bonus}% faction bonus!
                            </p>
                        ) : null}
                    </>
                )}
                {error && <p className="text-sm text-destructive mt-2">{error}</p>}
            </CardContent>
        </Card>
    );
};