import React, { useMemo } from 'react';
import { PieChart, Pie, Cell, ResponsiveContainer } from 'recharts';
import { SpotlightCard } from '../SpotlightCard';
import { Wind, AlertTriangle, ShieldCheck } from 'lucide-react';
import { InfoTooltip } from '../InfoTooltip';

export const WeatherRiskGauge = ({ properties, weather }) => {
    const riskScore = useMemo(() => {
        // 1. Weather Factor (0-50 points)
        // Wind > 20mph = 50pts, 0mph = 0pts
        let weatherScore = 0;
        if (weather && weather.wind) {
            weatherScore = Math.min(weather.wind.speed * 2.5, 50);
        }

        // 2. Territory Vulnerability (0-50 points)
        // % of roofs in "Needs Repair" or "Fair"
        const vulnerableCount = properties.filter(p =>
            ['Fair', 'Needs Repair'].includes(p.propertyData.roofCondition)
        ).length;
        const vulnerabilityRatio = vulnerableCount / (properties.length || 1);
        const roofScore = vulnerabilityRatio * 50;

        return Math.min(Math.round(weatherScore + roofScore), 100);
    }, [properties, weather]);

    const data = [
        { value: riskScore },
        { value: 100 - riskScore }
    ];

    const getColor = (score) => {
        if (score < 30) return '#10b981'; // Green
        if (score < 70) return '#eab308'; // Yellow
        if (score >= 70) return '#ef4444'; // Red
        return '#10b981';
    };

    const color = getColor(riskScore);

    return (
        <SpotlightCard className="h-full flex flex-col">
            <div className="p-6 flex-1 flex flex-col items-center justify-between text-center relative overflow-hidden">

                {/* Background Glow */}
                <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none" style={{ background: `radial-gradient(circle at center, ${color}, transparent)` }} />

                <div className="z-10 w-full mb-2">
                    <h3 className="text-lg font-bold text-zinc-900 dark:text-white flex items-center justify-center gap-2">
                        {riskScore > 70 ? <AlertTriangle size={18} className="text-red-500" /> : <ShieldCheck size={18} className="text-emerald-500" />}
                        Risk Index
                        <InfoTooltip text="Assessment of storm risk based on current wind speed and percentage of vulnerable roofs (Fair/Needs Repair)." />
                    </h3>
                    <p className="text-xs text-zinc-500 dark:text-zinc-400">Storm Impact Probability</p>
                </div>

                <div className="relative w-full h-[140px] flex items-end justify-center">
                    {/* Speedometer Chart */}
                    <ResponsiveContainer width="100%" height="100%">
                        <PieChart>
                            <Pie
                                data={data}
                                cx="50%"
                                cy="85%" // Shift down to make it a semi-circle
                                startAngle={180}
                                endAngle={0}
                                innerRadius={80}
                                outerRadius={100}
                                stroke="none"
                                paddingAngle={0}
                                dataKey="value"
                            >
                                <Cell fill={color} />
                                <Cell fill="#27272a" /> {/* zinc-800 for empty part */}
                            </Pie>
                        </PieChart>
                    </ResponsiveContainer>

                    {/* Score in Center */}
                    <div className="absolute bottom-0 text-center pb-2">
                        <div className="text-5xl font-black text-zinc-900 dark:text-white leading-none">
                            {riskScore}
                        </div>
                        <div className="text-[10px] font-bold uppercase tracking-widest text-zinc-500">
                            /100
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-2 w-full gap-4 mt-4 z-10">
                    <div className="bg-zinc-100 dark:bg-white/5 rounded-lg p-2 flex flex-col items-center border border-zinc-200 dark:border-white/5">
                        <span className="text-[10px] uppercase text-zinc-500 font-bold">Wind Exp.</span>
                        <span className="text-sm font-bold text-zinc-700 dark:text-zinc-300 flex items-center gap-1">
                            <Wind size={12} /> {weather?.wind?.speed ? Math.round(weather.wind.speed) : 0} mph
                        </span>
                    </div>
                    <div className="bg-zinc-100 dark:bg-white/5 rounded-lg p-2 flex flex-col items-center border border-zinc-200 dark:border-white/5">
                        <span className="text-[10px] uppercase text-zinc-500 font-bold">Vulnerable</span>
                        <span className="text-sm font-bold text-zinc-700 dark:text-zinc-300">
                            {Math.round((properties.filter(p => ['Fair', 'Needs Repair'].includes(p.propertyData.roofCondition)).length / properties.length) * 100)}%
                        </span>
                    </div>
                </div>

            </div>
        </SpotlightCard>
    );
};
