import { Button } from "@/components/ui/button"
import { Trophy, Home, RotateCw } from "lucide-react"

interface MissionReportModalProps {
    open: boolean
    onOpenChange: (open: boolean) => void
    score: number
    feedback: string
    onHome: () => void
    onRestart: () => void
}

export function MissionReportModal({ open, score, feedback, onHome, onRestart }: MissionReportModalProps) {
    if (!open) return null

    return (
        <div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm flex items-center justify-center p-4">
            <div className="bg-card w-full max-w-md border rounded-xl shadow-lg p-6 animate-in zoom-in-95 duration-200">
                <div className="flex flex-col items-center gap-4 text-center">
                    <div className="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mb-2">
                        <Trophy className="w-10 h-10" />
                    </div>
                    <h2 className="text-2xl font-bold">Mission Complete!</h2>
                    <p className="text-muted-foreground">
                        You scored <span className="font-bold text-primary">{score}%</span> on this mission.
                    </p>
                </div>

                <div className="bg-muted/50 p-4 rounded-lg text-left text-sm my-6">
                    <p className="font-semibold mb-2">Feedback Report:</p>
                    <p className="text-muted-foreground leading-relaxed">{feedback}</p>
                </div>

                <div className="flex gap-4 justify-center">
                    <Button variant="outline" onClick={onHome} className="gap-2">
                        <Home className="w-4 h-4" /> Dashboard
                    </Button>
                    <Button onClick={onRestart} className="gap-2">
                        <RotateCw className="w-4 h-4" /> Try Again
                    </Button>
                </div>
            </div>
        </div>
    )
}
