import { Html } from '@react-three/drei';
import { Activity, Thermometer, Droplets, Leaf } from 'lucide-react';

interface SectionSummaryProps {
    position: [number, number, number];
    name: string;
    plantCount: number;
    healthScore: number;
    avgTemp: number;
    avgHumidity: number;
    warnings: number;
    isVisible: boolean;
}

export function SectionSummary({
    position,
    name,
    plantCount,
    healthScore,
    avgTemp,
    avgHumidity,
    warnings,
    isVisible
}: SectionSummaryProps) {
    if (!isVisible) return null;

    return (
        <Html position={position} center distanceFactor={15}>
            <div className="bg-slate-900/95 backdrop-blur-xl border border-cyan-500/30 rounded-lg p-3 shadow-[0_0_20px_rgba(0,0,0,0.5)] w-48 pointer-events-none select-none animate-in fade-in zoom-in duration-200">
                <div className="flex justify-between items-center mb-2 border-b border-slate-700/50 pb-1">
                    <span className="text-xs font-bold text-cyan-400">{name}</span>
                    <span className="text-[10px] text-[var(--color-text-tertiary)]">{plantCount} Plants</span>
                </div>

                <div className="space-y-2">
                    {/* Health Aggregate */}
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-1.5 text-[10px] text-[var(--color-text-tertiary)]">
                            <Activity className="w-3 h-3" />
                            Health
                        </div>
                        <span className={`text-[10px] font-bold ${healthScore > 80 ? 'text-green-400' : 'text-yellow-400'}`}>
                            {healthScore}%
                        </span>
                    </div>

                    {/* Environment Aggregates */}
                    <div className="grid grid-cols-2 gap-2">
                        <div className="flex items-center gap-1 text-[9px] text-slate-300">
                            <Thermometer className="w-2.5 h-2.5 text-orange-400" />
                            {avgTemp}°F
                        </div>
                        <div className="flex items-center gap-1 text-[9px] text-slate-300">
                            <Droplets className="w-2.5 h-2.5 text-blue-400" />
                            {avgHumidity}%
                        </div>
                    </div>

                    {/* Warnings if any */}
                    {warnings > 0 && (
                        <div className="mt-1 py-0.5 px-2 bg-red-500/20 border border-red-500/30 rounded text-[9px] text-red-300 flex items-center gap-1">
                            <div className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse" />
                            {warnings} Alert{warnings > 1 ? 's' : ''}
                        </div>
                    )}
                </div>

                {/* Visual score bar */}
                <div className="mt-2 w-full h-1 bg-slate-800 rounded-full overflow-hidden">
                    <div
                        className={`h-full transition-all duration-500 ${healthScore > 80 ? 'bg-green-500' : 'bg-yellow-500'}`}
                        style={{ width: `${healthScore}%` }}
                    />
                </div>
            </div>
        </Html>
    );
}

// Room level summary for the map view
export function RoomSummaryOverlay({
    roomName,
    plantCount,
    warnings,
    position
}: {
    roomName: string;
    plantCount: number;
    warnings: number;
    position: [number, number, number];
}) {
    return (
        <Html position={position} center distanceFactor={25}>
            <div className="flex flex-col items-center group cursor-pointer">
                <div className="bg-slate-900/90 backdrop-blur-md border border-slate-700/50 rounded-full py-1.5 px-4 shadow-xl flex items-center gap-2 transition-all group-hover:bg-slate-800 group-hover:border-cyan-500/50 group-hover:scale-110">
                    <Leaf className="w-3.5 h-3.5 text-green-400" />
                    <span className="text-xs font-bold text-white whitespace-nowrap">{roomName}</span>
                    <div className="w-px h-3.5 bg-slate-700 mx-0.5" />
                    <span className="text-xs text-cyan-400 font-mono">{plantCount}</span>
                    {warnings > 0 && (
                        <div className="relative flex h-2 w-2 ml-1">
                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                            <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
                        </div>
                    )}
                </div>
                {/* Arrow indicator */}
                <div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[8px] border-t-slate-800/90 -mt-px" />
            </div>
        </Html>
    );
}
