import { useEffect, useState } from 'react';
import axios from '../../../bootstrap';
import { Gauge, Database, Cpu } from 'lucide-react';

export function PerformanceView() {
    const [agents, setAgents] = useState<any[]>([]);
    const [selectedAgentId, setSelectedAgentId] = useState('');
    const [metrics, setMetrics] = useState<any[]>([]);
    const [isLoadingAgents, setIsLoadingAgents] = useState(true);
    const [isLoadingMetrics, setIsLoadingMetrics] = useState(false);

    useEffect(() => {
        const fetchAgents = async () => {
            try {
                const res = await axios.get('/agents');
                const list = res.data.agents || [];
                setAgents(list);
                if (list.length > 0) {
                    setSelectedAgentId(list[0].id);
                }
            } catch (err) {
                console.error(err);
            } finally {
                setIsLoadingAgents(false);
            }
        };
        fetchAgents();
    }, []);

    useEffect(() => {
        if (!selectedAgentId) return;

        const fetchMetrics = async () => {
            setIsLoadingMetrics(true);
            try {
                const res = await axios.get(`/performance-metrics/${selectedAgentId}`);
                setMetrics(res.data.metrics || []);
            } catch (err) {
                console.error(err);
            } finally {
                setIsLoadingMetrics(false);
            }
        };
        fetchMetrics();
    }, [selectedAgentId]);

    // Calculate maximum load time to scale the chart columns dynamically
    const maxLoadTime = metrics.length > 0 
        ? Math.max(...metrics.map(m => m.page_load_time), 0.1) 
        : 1;

    if (isLoadingAgents) {
        return (
            <div className="flex justify-center items-center py-20">
                <div className="w-8 h-8 border-4 border-rose-500/20 border-t-rose-500 rounded-full animate-spin"></div>
            </div>
        );
    }

    return (
        <div className="space-y-8">
            {/* Header select */}
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-900/40 border border-slate-800/80 p-5 rounded-2xl">
                <div>
                    <h3 className="text-xl font-bold text-white">Performance Telemetry</h3>
                    <p className="text-sm text-slate-400">Monitor website speeds, query loads, and memory footprints</p>
                </div>
                <select
                    value={selectedAgentId}
                    onChange={(e) => setSelectedAgentId(e.target.value)}
                    className="px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none"
                >
                    <option value="">-- Select Website --</option>
                    {agents.map((agent) => (
                        <option key={agent.id} value={agent.id}>{agent.site_name} ({agent.domain})</option>
                    ))}
                </select>
            </div>

            {isLoadingMetrics && (
                <div className="flex justify-center items-center py-12">
                    <div className="w-8 h-8 border-4 border-rose-500/20 border-t-rose-500 rounded-full animate-spin"></div>
                </div>
            )}

            {!isLoadingMetrics && metrics.length === 0 && selectedAgentId && (
                <div className="text-center py-16 bg-slate-900/10 border border-slate-800/50 rounded-2xl text-slate-500 text-sm">
                    No performance data has been ingested for this website yet. Heartbeats will compile statistics over time.
                </div>
            )}

            {!isLoadingMetrics && metrics.length > 0 && (
                <div className="space-y-8 animate-fade-in">
                    {/* Telemetry charts summary cards */}
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {/* Avg load time */}
                        <div className="bg-slate-900/40 border border-slate-800/80 p-6 rounded-2xl flex items-center gap-5">
                            <div className="w-12 h-12 rounded-xl bg-rose-500/10 border border-rose-500/20 flex items-center justify-center">
                                <Gauge className="w-6 h-6 text-rose-400" />
                            </div>
                            <div>
                                <h4 className="text-sm font-semibold uppercase tracking-wider text-slate-500">Avg Page Load</h4>
                                <p className="text-2xl font-black text-white mt-1">
                                    {(metrics.reduce((acc, curr) => acc + curr.page_load_time, 0) / metrics.length).toFixed(3)}s
                                </p>
                            </div>
                        </div>

                        {/* Avg queries */}
                        <div className="bg-slate-900/40 border border-slate-800/80 p-6 rounded-2xl flex items-center gap-5">
                            <div className="w-12 h-12 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
                                <Database className="w-6 h-6 text-indigo-400" />
                            </div>
                            <div>
                                <h4 className="text-sm font-semibold uppercase tracking-wider text-slate-500">Avg DB Queries</h4>
                                <p className="text-2xl font-black text-white mt-1">
                                    {Math.round(metrics.reduce((acc, curr) => acc + curr.db_queries_count, 0) / metrics.length)}
                                </p>
                            </div>
                        </div>

                        {/* Avg memory */}
                        <div className="bg-slate-900/40 border border-slate-800/80 p-6 rounded-2xl flex items-center gap-5">
                            <div className="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center">
                                <Cpu className="w-6 h-6 text-emerald-400" />
                            </div>
                            <div>
                                <h4 className="text-sm font-semibold uppercase tracking-wider text-slate-500">Avg PHP Memory</h4>
                                <p className="text-2xl font-black text-white mt-1">
                                    {(metrics.reduce((acc, curr) => acc + curr.memory_usage, 0) / metrics.length).toFixed(1)} MB
                                </p>
                            </div>
                        </div>
                    </div>

                    {/* CSS Line graph bar columns */}
                    <div className="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6">
                        <h4 className="font-bold text-white text-base mb-6">Page Speed Timeline (Seconds)</h4>
                        
                        <div className="h-64 flex items-end justify-between gap-2 border-b border-slate-800/80 pb-3">
                            {metrics.slice().reverse().map((m) => {
                                const heightPercentage = (m.page_load_time / maxLoadTime) * 100;
                                return (
                                    <div key={m.id} className="flex-1 flex flex-col items-center group relative">
                                        {/* Tooltip */}
                                        <div className="absolute bottom-full mb-2 bg-slate-950 border border-slate-800 px-2 py-1 rounded text-[10px] font-mono text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-10">
                                            {m.page_load_time.toFixed(3)}s | {m.db_queries_count} Qs
                                        </div>
                                        {/* Bar */}
                                        <div 
                                            style={{ height: `${Math.max(heightPercentage, 4)}%` }} 
                                            className="w-full bg-gradient-to-t from-rose-500/30 to-rose-500 rounded-t-md group-hover:to-rose-400 transition-all cursor-pointer"
                                        ></div>
                                    </div>
                                );
                            })}
                        </div>
                        <div className="flex justify-between text-[10px] text-slate-600 font-mono mt-2 uppercase">
                            <span>Older telemetry</span>
                            <span>Latest Heartbeat pulse</span>
                        </div>
                    </div>

                    {/* Slow query reports */}
                    <div className="bg-slate-900/40 border border-slate-800/80 rounded-2xl p-6">
                        <h4 className="font-bold text-white text-base mb-4">Ingested Slow Database Queries</h4>
                        
                        <div className="divide-y divide-slate-850">
                            {metrics.filter(m => m.slow_queries && m.slow_queries.length > 0).length === 0 ? (
                                <div className="text-center py-8 text-slate-600 text-sm">
                                    No slow queries reported for this domain. Database is clean and optimized!
                                </div>
                            ) : (
                                metrics.filter(m => m.slow_queries && m.slow_queries.length > 0).map((m) => (
                                    <div key={m.id} className="py-4 space-y-2">
                                        <div className="flex items-center gap-2 text-xs text-slate-500">
                                            <span className="text-rose-400 font-semibold">{m.page_load_time.toFixed(3)}s load</span>
                                            <span>•</span>
                                            <span>{new Date(m.recorded_at).toLocaleTimeString()}</span>
                                        </div>
                                        <div className="space-y-2.5">
                                            {m.slow_queries.map((q: any, qIdx: number) => (
                                                <div key={qIdx} className="bg-slate-950 border border-slate-850 p-3 rounded-xl flex justify-between items-start gap-4 font-mono text-xs">
                                                    <code className="text-slate-300 break-all select-all">{q.query}</code>
                                                    <span className="text-[10px] font-bold text-amber-500 whitespace-nowrap bg-amber-500/10 px-2 py-0.5 rounded-full">
                                                        {q.duration}s
                                                    </span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}