import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { CheckCircle2, Circle, Target, Flag } from 'lucide-react'
import type { Mission } from '@/lib/mockData'

interface MissionControlProps {
    mission: Mission
    completedKeywords: string[]
}

export const MissionControl = ({ mission, completedKeywords }: MissionControlProps) => {
    return (
        <div className="h-full flex flex-col gap-4 p-4 bg-muted/20 border-r overflow-y-auto">
            <div className="flex items-center gap-2 mb-4">
                <Target className="w-6 h-6 text-primary" />
                <h2 className="text-xl font-bold tracking-tight">Mission Control</h2>
            </div>

            <Card className="border-0 shadow-none bg-transparent">
                <CardHeader className="pb-2 px-0">
                    <CardTitle className="text-xs font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-2">
                        <Flag className="w-3 h-3" /> Objective
                    </CardTitle>
                </CardHeader>
                <CardContent className="px-0">
                    <p className="text-lg font-medium leading-relaxed font-serif">
                        {mission.objective}
                    </p>
                </CardContent>
            </Card>

            <div className="space-y-3">
                <h3 className="text-xs font-bold uppercase tracking-widest text-muted-foreground">Required Vocabulary</h3>

                <div className="grid gap-2">
                    {mission.keywords.map((keyword, idx) => {
                        const isCompleted = completedKeywords.includes(keyword.toLowerCase())
                        return (
                            <div
                                key={idx}
                                className={`flex items-center justify-between p-3 rounded-lg border transition-all duration-300 ${isCompleted
                                        ? 'bg-green-500/10 border-green-500/20 shadow-sm'
                                        : 'bg-card border-border/50 opacity-80'
                                    }`}
                            >
                                <span className={`font-medium transition-colors ${isCompleted ? 'text-green-700 dark:text-green-400' : 'text-foreground'}`}>
                                    {keyword}
                                </span>
                                {isCompleted ? (
                                    <CheckCircle2 className="w-5 h-5 text-green-600 animate-in zoom-in" />
                                ) : (
                                    <Circle className="w-4 h-4 text-muted-foreground/30" />
                                )}
                            </div>
                        )
                    })}
                </div>
            </div>

            <div className="mt-auto p-4 bg-yellow-50 dark:bg-yellow-900/10 border border-yellow-200 dark:border-yellow-900/50 rounded-lg text-sm text-yellow-800 dark:text-yellow-200">
                <p className="font-bold mb-1">💡 Instructor Tip</p>
                <p>Try being polite! Norwegians appreciate "Vær så snill" (Please).</p>
            </div>
        </div>
    )
}
