'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Share2, Sparkles, Award } from 'lucide-react';
import { Radar, RadarChart, PolarGrid, PolarAngleAxis, ResponsiveContainer } from 'recharts';

interface ResultCardProps {
    data: {
        nose: number;
        taste: number;
        finish: number;
        rating: number;
        complexity?: number;
        balance?: number;
    };
    bottleName: string;
    image: string | null;
    onShare: () => void;
}

export default function ResultCard({ data, bottleName, image, onShare }: ResultCardProps) {
    const chartData = [
        { subject: 'Nose', A: data.nose, fullMark: 100 },
        { subject: 'Taste', A: data.taste, fullMark: 100 },
        { subject: 'Finish', A: data.finish, fullMark: 100 },
        { subject: 'Balance', A: data.balance || 85, fullMark: 100 },
        { subject: 'Complexity', A: data.complexity || 75, fullMark: 100 },
    ];

    const displayScore = data.rating;

    return (
        <motion.div
            initial={{ scale: 0.9, opacity: 0, rotateY: 30 }}
            animate={{ scale: 1, opacity: 1, rotateY: 0 }}
            transition={{ type: 'spring', damping: 20 }}
            className="flex flex-col items-center gap-6 w-full max-w-sm"
        >
            {/* The Trading Card */}
            <div className="relative w-full aspect-[3/4] rounded-[32px] overflow-hidden shadow-[0_20px_60px_rgba(0,0,0,0.9)] border border-zinc-800 bg-zinc-950 group">
                {/* Bottle Image with Vignette */}
                <div className="absolute inset-0">
                    {image ? (
                        <img src={image} alt={bottleName} className="w-full h-full object-cover" />
                    ) : (
                        <div className="absolute inset-0 bg-zinc-900 flex items-center justify-center opacity-40 text-[20px] font-bold uppercase tracking-[1em] rotate-90">No Data</div>
                    )}
                    <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-zinc-950/20 to-transparent opacity-90" />
                </div>

                {/* Content Overlay */}
                <div className="absolute inset-x-0 bottom-0 p-6 space-y-4">
                    <div className="space-y-0.5">
                        <p className="text-[10px] font-bold uppercase tracking-[0.3em] text-orange-600">Verified Tasting Record</p>
                        <h2 className="text-3xl font-bold text-white truncate uppercase tracking-tighter leading-none">{bottleName}</h2>
                    </div>

                    {/* Radar Chart Area */}
                    <div className="h-48 w-full bg-zinc-900/40 backdrop-blur-md rounded-[24px] p-2 flex flex-col items-center justify-center border border-zinc-800/50">
                        <ResponsiveContainer width="100%" height="100%">
                            <RadarChart cx="50%" cy="50%" outerRadius="70%" data={chartData}>
                                <PolarGrid stroke="rgba(255,255,255,0.05)" />
                                <PolarAngleAxis
                                    dataKey="subject"
                                    tick={{ fill: '#71717a', fontSize: 9, fontWeight: 700 }}
                                />
                                <Radar
                                    name="Whisky Profile"
                                    dataKey="A"
                                    stroke="#ea580c"
                                    fill="#ea580c"
                                    fillOpacity={0.6}
                                />
                            </RadarChart>
                        </ResponsiveContainer>
                    </div>

                    <div className="flex items-center justify-between pt-1">
                        <div className="flex items-center gap-2">
                            <Sparkles size={14} className="text-orange-600" />
                            <span className="text-[9px] font-bold uppercase tracking-widest text-zinc-500">Authenticated Report</span>
                        </div>
                    </div>
                </div>

                {/* Score Badge */}
                <div className="absolute top-6 right-6 w-16 h-16 bg-zinc-900/60 backdrop-blur-md rounded-2xl flex flex-col items-center justify-center border border-orange-500/30 shadow-2xl">
                    <span className="text-2xl font-bold text-orange-600 leading-none">{displayScore}</span>
                    <span className="text-[7px] font-bold uppercase tracking-widest text-zinc-500 mt-1">Rating</span>
                </div>

                {/* Decorative Elements */}
                <div className="absolute top-6 left-6 p-2 rounded-xl bg-orange-600 text-white shadow-lg shadow-orange-950/40">
                    <Award size={18} />
                </div>
            </div>

            {/* Share Button */}
            <button
                onClick={onShare}
                className="w-full py-4 bg-orange-600 hover:bg-orange-700 text-white rounded-2xl font-bold uppercase tracking-widest text-[10px] flex items-center justify-center gap-3 transition-all shadow-xl shadow-orange-950/20 active:scale-95"
            >
                <Share2 size={16} />
                Share Tasting Report
            </button>
        </motion.div>
    );
}
