import React, { useState, useEffect } from 'react';
import { TrendingUp, Vote, Users, Briefcase, Map as MapIcon, Target, ChevronRight } from 'lucide-react';
import { backendApi } from '../../services/apiClient';
import { readCache, saveCache } from '../../hooks/useCachedFetch';
import { REFRESH_EVENTS } from '../../constants/refreshEvents';

interface Props {
    onNavigate: (tab: any) => void;
}

const CACHE_KEY = 'mkd_dev_summary_cache';
const CACHE_DEFAULT = { summary: { growthM2: 0, ossSuccessRate: 0, cac: 15000, potentialRevenue: 0 }, locations: [] };

export const DevSummary: React.FC<Props> = ({ onNavigate }) => {
    const cached = readCache<{ summary: any; locations: any[] }>(CACHE_KEY, CACHE_DEFAULT);
    const [summary, setSummary] = useState(cached.summary || CACHE_DEFAULT.summary);
    const [locations, setLocations] = useState<any[]>(cached.locations || []);
    const hasCache = (cached.locations?.length ?? 0) > 0;
    const [loading, setLoading] = useState(!hasCache);

    useEffect(() => {
        const fetchData = async () => {
            if (!hasCache) setLoading(true);
            try {
                const [summaryData, locationsData] = await Promise.all([
                    backendApi.getDevelopmentSummary(),
                    backendApi.getDevelopmentLocations()
                ]);
                setSummary(summaryData);
                setLocations(locationsData);
                saveCache(CACHE_KEY, { summary: summaryData, locations: locationsData });
            } catch (error) {
                console.error('Error fetching development summary:', error);
            } finally {
                setLoading(false);
            }
        };
        fetchData();
    }, []);

    useEffect(() => {
        const onRefresh = () => {
            (async () => {
                try {
                    const [summaryData, locationsData] = await Promise.all([
                        backendApi.getDevelopmentSummary(),
                        backendApi.getDevelopmentLocations()
                    ]);
                    setSummary(summaryData);
                    setLocations(locationsData);
                    saveCache(CACHE_KEY, { summary: summaryData, locations: locationsData });
                } catch (e) {
                    console.error('Error fetching development summary:', e);
                }
            })();
        };
        window.addEventListener(REFRESH_EVENTS.devSummary, onRefresh);
        return () => window.removeEventListener(REFRESH_EVENTS.devSummary, onRefresh);
    }, []);

    useEffect(() => {
        const interval = setInterval(async () => {
            try {
                const [summaryData, locationsData] = await Promise.all([
                    backendApi.getDevelopmentSummary(),
                    backendApi.getDevelopmentLocations()
                ]);
                setSummary(summaryData);
                setLocations(locationsData);
                saveCache(CACHE_KEY, { summary: summaryData, locations: locationsData });
            } catch (e) {
                console.error('Error fetching development summary:', e);
            }
        }, 10 * 1000);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className="space-y-6 animate-fade-in">
            {/* KPI Cards */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <StatCard 
                    icon={TrendingUp} 
                    label="Прирост фонда" 
                    value={loading ? '...' : `+${summary.growthM2} м²`} 
                    color="text-emerald-600" 
                    bg="bg-emerald-50"
                />
                <StatCard 
                    icon={Vote} 
                    label="Успех ОСС" 
                    value={loading ? '...' : `${summary.ossSuccessRate}%`} 
                    color="text-blue-600" 
                    bg="bg-blue-50"
                />
                <StatCard 
                    icon={Users} 
                    label="CAC (За дом)" 
                    value={loading ? '...' : `${summary.cac.toLocaleString()} ₽`} 
                    color="text-amber-600" 
                    bg="bg-amber-50"
                />
                <StatCard 
                    icon={Briefcase} 
                    label="Выручка в воронке" 
                    value={loading ? '...' : `${(summary.potentialRevenue/1000).toFixed(0)}k ₽`} 
                    color="text-violet-600" 
                    bg="bg-violet-50"
                />
            </div>

            {/* Capture Map Widget */}
            <div className="bg-slate-900 rounded-[2rem] p-8 text-white shadow-xl relative overflow-hidden min-h-[350px]">
                <div className="relative z-10 max-w-sm">
                    <div className="flex items-center gap-2 text-primary-400 mb-2">
                        <MapIcon className="w-5 h-5"/>
                        <span className="text-[10px] font-black uppercase tracking-widest">Стратегия экспансии</span>
                    </div>
                    <h3 className="text-3xl font-black mb-4 leading-tight">Карта присутствия</h3>
                    <p className="text-xs text-slate-400 font-medium mb-8">Интерактивный мониторинг конкурентов и зон активного голосования в Центральном районе.</p>
                </div>
                
                {/* Visual Map Simulation */}
                <div className="absolute top-10 right-10 left-10 md:left-auto md:w-1/2 bottom-10 bg-slate-800/50 rounded-2xl border border-slate-700 overflow-hidden">
                    <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:30px_30px]"></div>
                    
                    {/* Map Pointers - динамические из БД */}
                    {locations.length > 0 ? (
                        locations.slice(0, 10).map((loc, idx) => {
                            // Распределяем точки по карте (упрощенная логика)
                            const positions = [
                                { top: '20%', left: '30%' },
                                { top: '45%', left: '60%' },
                                { top: '70%', left: '25%' },
                                { top: '35%', left: '80%' },
                                { top: '15%', left: '70%' },
                                { top: '60%', left: '40%' },
                                { top: '30%', left: '50%' },
                                { top: '50%', left: '20%' },
                                { top: '80%', left: '60%' },
                                { top: '10%', left: '40%' },
                            ];
                            const pos = positions[idx % positions.length];
                            const label = loc.status === 'voting' ? 'ОСС ИДЕТ' : undefined;
                            return (
                                <MapPointer 
                                    key={loc.id || idx} 
                                    top={pos.top} 
                                    left={pos.left} 
                                    status={loc.status} 
                                    label={label}
                                    address={loc.address}
                                />
                            );
                        })
                    ) : (
                        // Fallback статические точки, если нет данных
                        <>
                            <MapPointer top="20%" left="30%" status="ours" />
                            <MapPointer top="45%" left="60%" status="ours" />
                            <MapPointer top="70%" left="25%" status="voting" label="ОСС ИДЕТ" />
                            <MapPointer top="35%" left="80%" status="competitor" />
                            <MapPointer top="15%" left="70%" status="competitor" />
                        </>
                    )}

                    <div className="absolute bottom-4 right-4 bg-slate-900/90 p-3 rounded-xl border border-slate-700 text-[9px] space-y-1.5 shadow-2xl">
                        <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.6)]"/> Наш фонд</div>
                        <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-amber-400 animate-pulse"/> Проходит ОСС</div>
                        <div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-red-500"/> Другие УК</div>
                    </div>
                </div>
            </div>

            {/* Quick Actions */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <button onClick={() => onNavigate('pipeline')} className="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm flex items-center justify-between group hover:border-primary-400 transition-all">
                    <div className="flex items-center gap-4">
                        <div className="p-3 bg-primary-50 text-primary-600 rounded-2xl group-hover:bg-primary-600 group-hover:text-white transition-colors">
                            <Target className="w-6 h-6"/>
                        </div>
                        <div className="text-left">
                            <p className="font-bold text-slate-800">Перейти в воронку</p>
                            <p className="text-xs text-slate-500">Управление лидами</p>
                        </div>
                    </div>
                    <ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-primary-500 group-hover:translate-x-1 transition-all"/>
                </button>
                <button onClick={() => onNavigate('oss')} className="bg-white p-6 rounded-3xl border border-slate-200 shadow-sm flex items-center justify-between group hover:border-primary-400 transition-all">
                    <div className="flex items-center gap-4">
                        <div className="p-3 bg-amber-50 text-amber-600 rounded-2xl group-hover:bg-amber-500 group-hover:text-white transition-colors">
                            <Vote className="w-6 h-6"/>
                        </div>
                        <div className="text-left">
                            <p className="font-bold text-slate-800">Центр ОСС</p>
                            <p className="text-xs text-slate-500">Контроль текущих голосований</p>
                        </div>
                    </div>
                    <ChevronRight className="w-5 h-5 text-slate-300 group-hover:text-primary-500 group-hover:translate-x-1 transition-all"/>
                </button>
            </div>
        </div>
    );
};

const StatCard = ({ icon: Icon, label, value, color, bg }: any) => (
    <div className="bg-white p-4 rounded-2xl border border-slate-200 shadow-sm">
        <div className="flex justify-between items-start mb-2">
            <div className={`p-2 ${bg} ${color} rounded-lg`}><Icon className="w-5 h-5"/></div>
        </div>
        <p className="text-xl font-black text-slate-800">{value}</p>
        <p className="text-[10px] text-slate-500 font-bold uppercase tracking-wider">{label}</p>
    </div>
);

const MapPointer = ({ top, left, status, label, address }: any) => (
    <div className="absolute group" style={{ top, left }}>
        <div className={`w-3 h-3 rounded-full relative cursor-pointer ${
            status === 'ours' ? 'bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.5)]' :
            status === 'voting' ? 'bg-amber-400 animate-pulse shadow-[0_0_15px_rgba(251,191,36,0.5)]' :
            'bg-red-500'
        }`}>
            {(label || address) && (
                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 bg-white text-slate-900 text-[7px] font-black px-1 rounded shadow-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
                    {label || address}
                </div>
            )}
        </div>
    </div>
);