'use client';

import { DashboardLayout } from '@/components/dashboard/DashboardLayout';
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler, ChartData } from 'chart.js';
import { Suspense } from 'react'; // Checking if I can add it here
import { Line, Bar } from 'react-chartjs-2';
import { useState, useEffect, useMemo, useCallback } from 'react';
import { Download, Filter, Calendar, MapPin, AlertTriangle, MonitorX, Lock, Activity, Server, Globe } from 'lucide-react';
import jsPDF from 'jspdf';
import autoTable from 'jspdf-autotable';
import { SearchableSelect } from '@/components/ui/SearchableSelect'; // Restored
import { Button } from '@/components/ui';
import { useSession } from 'next-auth/react';
import type { Country, MonitorWithHeartbeats, AnalyticsFilters, AnalyticsMetrics, SslStats, AnalyticsRecommendation } from '@/types/models';

// Register Chart.js components
ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Title, Tooltip, Legend, Filler);

export default function PageContent() {
    return (
        <Suspense fallback={<div className="flex h-screen items-center justify-center">Loading Analytics...</div>}>
            <AnalyticsContent />
        </Suspense>
    );
}

interface WorstPerformer {
    id: number;
    name: string;
    region: string;
    downtimeCount: number;
}

interface FormattedMonitorOption {
    value: number;
    label: string;
    subLabel: string;
    region: string;
}

function AnalyticsContent() {
    const { data: session } = useSession();
    const [chartData, setChartData] = useState<ChartData<'line'> | null>(null);
    const [waterfallData, setWaterfallData] = useState<ChartData<'bar'> | null>(null);
    const [metrics, setMetrics] = useState<AnalyticsMetrics>({ avgLatency: 0, uptime: '100', incidentCount: 0, downtimeEvents: 0, jitter: 0, recommendations: [] });
    const [worstPerformers, setWorstPerformers] = useState<WorstPerformer[]>([]);
    const [sslStats, setSslStats] = useState<SslStats | null>(null);

    const [detailedMonitors, setDetailedMonitors] = useState<MonitorWithHeartbeats[]>([]);

    // State for filtering
    const [allMonitors, setAllMonitors] = useState<FormattedMonitorOption[]>([]);


    const [regions, setRegions] = useState<{ name: string; code: string }[]>([]);

    const [filters, setFilters] = useState<AnalyticsFilters>({
        period: '7d',
        region: 'Global',
        monitorId: undefined,
    });

    // Derived state for filtering
    const filteredMonitors = useMemo(() => {
        if (filters.region === 'Global') {
            return allMonitors;
        } else {
            const regionName = filters.region;
            const regionCode = regions.find(r => r.name === regionName)?.code;
            return allMonitors.filter(m =>
                m.region === regionName || (regionCode && m.region === regionCode)
            );
        }
    }, [allMonitors, filters.region, regions]);

    const [loading, setLoading] = useState(true);

    const periodOptions = [
        { label: 'Last 24 Hours', value: '24h' },
        { label: 'Last 7 Days', value: '7d' },
        { label: 'Last 30 Days', value: '30d' },
        { label: 'Last 90 Days', value: '90d' },
    ];

    // Fetch Monitors & Regions on Mount
    useEffect(() => {
        // Fetch Regions
        fetch('/api/countries').then(r => r.json()).then(d => {
            if (d.success) {
                const fetchedRegions = d.countries || [];
                const isAdmin = session?.user?.role === 'ADMIN';

                // Filter out 'Global' from DB if it exists, to avoid duplicates if we add it manually
                const uniqueRegions = fetchedRegions.filter((r: Country) => r.code !== 'Global' && r.name !== 'Global');

                if (isAdmin) {
                    setRegions([{ name: 'Global', code: 'Global' }, ...uniqueRegions]);
                } else {
                    // For non-admin, rely strictly on what API returns.
                    setRegions(uniqueRegions);

                    // Also auto-select the first region if current 'Global' is invalid for them
                    if (uniqueRegions.length > 0) {
                        setFilters(prev => ({ ...prev, region: uniqueRegions[0].name }));
                    } else {
                        // User has no regions?
                        setFilters(prev => ({ ...prev, region: '' }));
                    }
                }
            } else {
                // Fallback
                setRegions([{ name: 'Global', code: 'Global' }]);
            }
        });

        // Fetch Monitors
        // Fetch Monitors & Profile for prioritized sorting
        Promise.all([
            fetch('/api/monitors?limit=1000').then(r => r.json()),
            fetch('/api/user/profile').then(r => r.json())
        ]).then(([monData, profData]) => {
            let userCountries: string[] = [];
            if (profData.success && profData.user?.countries) {
                userCountries = profData.user.countries.map((c: Country) => c.name);
            }

            if (monData.success) {
                setDetailedMonitors(monData.monitors);

                // Sort: Global Region First, Then My Countries, Then Alphabetical
                const sorted = [...monData.monitors].sort((a: MonitorWithHeartbeats, b: MonitorWithHeartbeats) => {
                    // 1. Priority: "Global" region
                    const aGlobal = a.region === 'Global';
                    const bGlobal = b.region === 'Global';
                    if (aGlobal && !bGlobal) return -1;
                    if (!aGlobal && bGlobal) return 1;

                    // 2. Priority: My Assigned Countries
                    const aMine = userCountries.includes(a.region);
                    const bMine = userCountries.includes(b.region);
                    if (aMine && !bMine) return -1;
                    if (!aMine && bMine) return 1;

                    // 3. Priority: Alphabetical
                    return a.name.localeCompare(b.name);
                });

                // Format for Select
                const formatted = sorted.map((m: MonitorWithHeartbeats) => ({
                    value: m.id,
                    label: m.name,
                    subLabel: m.url,
                    region: m.region
                }));
                setAllMonitors(formatted);
            }
        });
    }, [session]);

    // Filter Monitors when Region Changes
    // Reset selected monitor when region changes - MOVED to onChange handler
    // useEffect(() => {
    //     setFilters(prev => ({ ...prev, monitorId: undefined }));
    // }, [filters.region]);



    const loadData = useCallback(async () => {
        setLoading(true);
        // Reset
        setChartData(null);
        setWaterfallData(null);
        setMetrics({ avgLatency: 0, uptime: '...', incidentCount: 0, downtimeEvents: 0, jitter: 0, recommendations: [] });
        setWorstPerformers([]);
        setSslStats(null);

        const query = new URLSearchParams();
        query.set('period', filters.period);
        if (filters.region) query.set('region', filters.region);
        if (filters.monitorId) query.set('monitorId', String(filters.monitorId));
        const qStr = query.toString();

        try {
            // 1. Fetch Key Metrics (KPIs) - FAST
            const p1 = fetch(`/api/analytics/kpi?${qStr}`).then(r => r.json()).then(res => {
                if (res.success) {
                    setMetrics(prev => ({
                        ...prev,
                        avgLatency: res.avgLatency,
                        uptime: res.uptime,
                        incidentCount: res.incidentCount,
                        downtimeEvents: res.downtimeChecks || 0,
                        jitter: res.jitter || 0
                    }));
                }
            });

            // 2. Fetch Trends (Chart Data) - MEDIUM
            const p2 = fetch(`/api/analytics/trend?${qStr}`).then(r => r.json()).then(res => {
                if (res.success) {
                    const ds = res.datasets;
                    setChartData({
                        labels: res.labels,
                        datasets: [
                            {
                                label: 'Avg Latency (ms)',
                                data: ds.avgResponseTime,
                                borderColor: 'rgb(245, 158, 11)',
                                backgroundColor: 'rgba(245, 158, 11, 0.1)',
                                tension: 0.3,
                                fill: true,
                                yAxisID: 'y',
                            },
                        ],
                    });

                    setWaterfallData({
                        labels: res.labels,
                        datasets: [
                            {
                                label: 'Wait (TTFB)',
                                data: ds.avgTtfb,
                                backgroundColor: 'rgb(59, 130, 246)',
                                stack: 'Stack 0',
                            },
                            {
                                label: 'TLS Handshake',
                                data: ds.avgTlsTime,
                                backgroundColor: 'rgb(168, 85, 247)',
                                stack: 'Stack 0',
                            },
                            {
                                label: 'TCP Connect',
                                data: ds.avgConnectTime,
                                backgroundColor: 'rgb(249, 115, 22)',
                                stack: 'Stack 0',
                            },
                        ]
                    });
                }
            });

            // 3. Fetch Insights (Worst Performers / SSL) - FAST
            const p3 = fetch(`/api/analytics/insights?${qStr}`).then(r => r.json()).then(res => {
                if (res.success) {
                    setWorstPerformers(res.worstPerformers || []);
                    setSslStats(res.sslStats);
                    setMetrics(prev => ({ ...prev, recommendations: res.recommendations || [] }));
                }
            });

            await Promise.all([p1, p2, p3]);
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    }, [filters]);

    // Parallel Fetching for Speed
    useEffect(() => {
        loadData();
    }, [loadData]);

    const downloadReport = () => {
        const doc = new jsPDF();
        doc.setFontSize(20);
        doc.text('Performance Report', 14, 20);
        doc.setFontSize(10);
        doc.text(`Generated: ${new Date().toLocaleString()}`, 14, 28);
        doc.text(`Filter: ${filters.period} | Country: ${filters.region}`, 14, 34);

        autoTable(doc, {
            startY: 40,
            head: [['Metric', 'Value']],
            body: [
                ['Avg Uptime', `${metrics.uptime}%`],
                ['Avg Latency', `${metrics.avgLatency}ms`],
                ['Jitter (Stability)', `${metrics.jitter}ms`],
                ['Total Incidents', metrics.incidentCount],
            ],
            theme: 'grid',
            headStyles: { fillColor: [41, 128, 185] }
        });

        if (worstPerformers.length > 0) {
            doc.text('Worst Performing Monitors', 14, (doc as unknown as { lastAutoTable: { finalY: number } }).lastAutoTable.finalY + 15);
            autoTable(doc, {
                startY: (doc as unknown as { lastAutoTable: { finalY: number } }).lastAutoTable.finalY + 20,
                head: [['Monitor Name', 'Country', 'Downtime Events']],
                body: worstPerformers.map(m => [m.name, m.region, m.downtimeCount]),
                theme: 'striped',
                headStyles: { fillColor: [231, 76, 60] }
            });
        }

        doc.save('report.pdf');
    };

    return (
        <DashboardLayout>
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
                <div>
                    <h2 className="text-3xl font-bold text-slate-800 dark:text-slate-100">Network Analytics</h2>
                    <p className="text-slate-500 dark:text-slate-400 mt-1">Deep diagnostic insights for network engineers</p>
                </div>
                <Button variant="primary" size="md" onClick={downloadReport} className="bg-blue-600 hover:bg-blue-700 text-white px-5 rounded-xl font-bold shadow-lg shadow-blue-500/30 active:scale-95">
                    <Download className="size-4" />
                    Download PDF
                </Button>
            </div>

            {/* Smart Filter Bar */}
            <div className="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-200 dark:border-slate-800 mb-8 flex flex-col md:flex-row md:flex-wrap gap-4 items-stretch md:items-center shadow-sm z-20 relative">
                <div className="flex items-center gap-2 text-slate-500 font-bold mr-2">
                    <Filter className="size-4" />
                    Filters:
                </div>

                {/* Period */}
                <div className="relative min-w-[140px]">
                    <Calendar className="size-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10" />
                    <select
                        className="w-full pl-9 pr-8 py-2 bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 rounded-lg text-sm font-medium outline-none focus:ring-2 focus:ring-blue-500/20 appearance-none"
                        value={filters.period}
                        onChange={e => setFilters({ ...filters, period: e.target.value })}
                    >
                        {periodOptions.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
                    </select>
                </div>

                {/* Region */}
                <div className="relative min-w-[120px]">
                    <MapPin className="size-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 z-10" />
                    <select
                        className="w-full pl-9 pr-8 py-2 bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 rounded-lg text-sm font-medium outline-none focus:ring-2 focus:ring-blue-500/20 appearance-none"
                        value={filters.region}
                        onChange={e => setFilters({ ...filters, region: e.target.value, monitorId: undefined })}
                    >
                        {regions.map(r => <option key={r.code} value={r.name}>{r.name}</option>)}
                    </select>
                </div>

                {/* Monitor Search - using our custom component */}
                <div className="flex-1 min-w-[200px]">
                    <SearchableSelect
                        options={filteredMonitors}
                        value={filters.monitorId}
                        onChange={(val) => setFilters(prev => ({ ...prev, monitorId: val }))}
                        placeholder={filters.region && filters.region !== 'Global'
                            ? `Search ${filters.region} Monitors...`
                            : "Search All Monitors..."
                        }
                    />
                </div>
            </div>

            {/* KPI Metrics - Progressive breakpoints for 14" laptop support */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6 mb-8">
                <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden">
                    <div className="absolute right-0 top-0 p-4 opacity-5"><Activity className="size-24" /></div>
                    <div className="text-slate-500 text-sm font-bold mb-1">Avg Latency</div>
                    <div className="text-3xl font-black text-amber-500">{metrics.avgLatency}ms</div>
                    <div className="text-xs text-slate-400 mt-2">End-to-end response time</div>
                </div>
                <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden">
                    <div className="absolute right-0 top-0 p-4 opacity-5"><Server className="size-24" /></div>
                    <div className="text-slate-500 text-sm font-bold mb-1">Uptime</div>
                    <div className="text-3xl font-black text-emerald-500">{metrics.uptime}{!['N/A', '-', ''].includes(metrics.uptime) ? '%' : ''}</div>
                    <div className="text-xs text-slate-400 mt-2">Overall availability</div>
                </div>
                <div className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden">
                    <div className="absolute right-0 top-0 p-4 opacity-5"><Activity className="size-24" /></div>
                    <div className="text-slate-500 text-sm font-bold mb-1">Jitter (Stability)</div>
                    <div className={`text-3xl font-black ${metrics.jitter > 50 ? 'text-rose-500' : 'text-blue-500'}`}>{metrics.jitter}ms</div>
                    <div className="text-xs text-slate-400 mt-2">Standard Deviation (Lower is better)</div>
                </div>
                <div
                    onClick={() => {
                        const query = new URLSearchParams();
                        // query.set('tab', 'incidents'); // Not needed for status page
                        if (filters.monitorId) query.set('monitorId', String(filters.monitorId));
                        if (filters.region && filters.region !== 'Global') query.set('region', filters.region);

                        // Navigate to Incident Reporting (Status Page)
                        window.location.href = `/status?${query.toString()}`;
                    }}
                    className="bg-white dark:bg-slate-900 p-5 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm relative overflow-hidden cursor-pointer hover:border-blue-400 dark:hover:border-blue-700 transition-colors group"
                >
                    <div className="absolute right-0 top-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"><AlertTriangle className="size-24" /></div>
                    <div className="text-slate-500 text-sm font-bold mb-1">Incidents</div>
                    <div className="flex items-baseline gap-2">
                        <div className="text-3xl font-black text-slate-700 dark:text-slate-200">{metrics.incidentCount}</div>
                        <span className="text-xs text-slate-400 font-bold uppercase">Manual</span>
                    </div>
                    {metrics.downtimeEvents > 0 && (
                        <div className="text-sm font-bold text-rose-500 mt-1">
                            + {metrics.downtimeEvents} Detected Outages
                        </div>
                    )}
                    <div className="text-xs text-slate-400 mt-2">Recorded downtime events</div>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
                {/* Main Latency Chart */}
                <div className="lg:col-span-2 bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800">
                    <h3 className="font-bold text-slate-800 dark:text-slate-100 mb-6">Latency Trend</h3>
                    {chartData && !loading ? (
                        <div className="h-72">
                            <Line options={{ responsive: true, maintainAspectRatio: false }} data={chartData} />
                        </div>
                    ) : <div className="h-72 flex items-center justify-center text-slate-400">Loading...</div>}
                </div>

                {/* SSL Health & Info Panel */}
                <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800">
                    <h3 className="font-bold text-slate-800 dark:text-slate-100 mb-6 flex items-center gap-2">
                        <Lock className="size-5 text-emerald-500" />
                        SSL Health
                    </h3>
                    {sslStats ? (
                        <div className="space-y-6">
                            <div className="flex flex-col items-center justify-center py-4 relative">
                                <div className="text-4xl font-black text-emerald-600 dark:text-emerald-400">{sslStats.daysRemaining}</div>
                                <div className="text-sm font-bold text-slate-500 uppercase tracking-wider">Days Remaining</div>

                                {/* Simple visual gauge ring could go here */}
                                <div className="w-full bg-slate-100 dark:bg-slate-800 h-2 rounded-full mt-4 overflow-hidden">
                                    <div
                                        className={`h-full rounded-full ${sslStats.daysRemaining < 14 ? 'bg-rose-500' : 'bg-emerald-500'}`}
                                        style={{ width: `${Math.min(100, (sslStats.daysRemaining / 90) * 100)}%` }}
                                    ></div>
                                </div>
                            </div>

                            <div className="space-y-3">
                                <div className="flex justify-between text-sm p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                    <span className="text-slate-500">Issuer</span>
                                    <span className="font-medium text-slate-800 dark:text-slate-200 truncate max-w-[150px]">{sslStats.issuer}</span>
                                </div>
                                <div className="flex justify-between text-sm p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                    <span className="text-slate-500">Valid</span>
                                    <span className={`font-bold ${sslStats.valid ? 'text-emerald-500' : 'text-rose-500'}`}>
                                        {sslStats.valid ? 'YES' : 'NO'}
                                    </span>
                                </div>
                                <div className="flex justify-between text-sm p-3 bg-slate-50 dark:bg-slate-800 rounded-lg">
                                    <span className="text-slate-500">Expiry</span>
                                    <span className="font-medium text-slate-800 dark:text-slate-200">
                                        {new Date(sslStats.expiresAt).toLocaleDateString()}
                                    </span>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="text-center py-12 text-slate-400 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-dashed border-slate-200 dark:border-slate-700">
                            <MonitorX className="size-10 mx-auto mb-2 opacity-30" />
                            <p className="text-sm">Select a specific HTTPS monitor<br />to view SSL details</p>
                        </div>
                    )}
                </div>
            </div>

            {/* Smart Insights Panel */}
            <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 mb-8">
                <h3 className="font-bold text-slate-800 dark:text-slate-100 mb-6 flex items-center gap-2">
                    <Activity className="size-5 text-amber-500" />
                    Smart Insights
                </h3>

                <div className="space-y-4">
                    {metrics.recommendations && metrics.recommendations.length > 0 ? (
                        metrics.recommendations.map((rec: AnalyticsRecommendation, idx: number) => (
                            <div key={idx} className={`p-4 rounded-xl border-l-4 ${rec.type === 'critical' ? 'bg-rose-50 border-rose-500 dark:bg-rose-900/10' :
                                rec.type === 'warning' ? 'bg-amber-50 border-amber-500 dark:bg-amber-900/10' :
                                    'bg-blue-50 border-blue-500 dark:bg-blue-900/10'
                                }`}>
                                <div className="flex justify-between items-start mb-1">
                                    <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${rec.type === 'critical' ? 'bg-rose-100 text-rose-700 dark:bg-rose-800 dark:text-rose-200' :
                                        rec.type === 'warning' ? 'bg-amber-100 text-amber-700 dark:bg-amber-800 dark:text-amber-200' :
                                            'bg-blue-100 text-blue-700 dark:bg-blue-800 dark:text-blue-200'
                                        }`}>
                                        {rec.metric}
                                    </span>
                                </div>
                                <p className="text-sm text-slate-700 dark:text-slate-300 font-medium">
                                    {rec.message}
                                </p>
                            </div>
                        ))
                    ) : (
                        <div className="text-center py-8 text-slate-400">
                            <div className="inline-block p-3 bg-emerald-50 dark:bg-emerald-900/20 rounded-full mb-3">
                                <Activity className="size-6 text-emerald-500" />
                            </div>
                            <p className="text-sm font-medium text-emerald-600 dark:text-emerald-400">System Healthy</p>
                            <p className="text-xs mt-1">No optimization issues detected.</p>
                        </div>
                    )}
                </div>
            </div>

            {/* Latency Waterfall - The Pro Feature */}
            <div className="mb-8 bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800">
                <div className="flex justify-between items-center mb-6">
                    <div>
                        <h3 className="font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2">
                            <Globe className="size-5 text-blue-500" />
                            Latency Waterfall Breakdown
                        </h3>
                        <p className="text-sm text-slate-500 mt-1">Breakdown of network phases (TCP Connect, TLS Handshake, Time to First Byte)</p>
                    </div>
                </div>
                {waterfallData && !loading ? (
                    <div className="h-80">
                        <Bar options={{
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                x: { stacked: true, grid: { display: false } },
                                y: { stacked: true, grid: { color: 'rgba(0,0,0,0.05)' } }
                            },
                            interaction: {
                                mode: 'index' as const,
                                intersect: false,
                            },
                        }} data={waterfallData} />
                    </div>
                ) : <div className="h-80 flex items-center justify-center text-slate-400">Loading breakdown data...</div>}
            </div>

            {/* Worst Performers Table (Conditional) */}
            {!filters.monitorId && worstPerformers.length > 0 && (
                <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800 mb-8">
                    <h3 className="font-bold text-slate-800 dark:text-slate-100 mb-6 text-rose-600">Top Problematic Monitors</h3>
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm text-left">
                            <thead className="text-xs text-slate-500 bg-slate-50 dark:bg-slate-800 uppercase">
                                <tr>
                                    <th className="px-4 py-3 rounded-l-lg">Monitor</th>
                                    <th className="px-4 py-3">Country</th>
                                    <th className="px-4 py-3 text-right rounded-r-lg">Downtime Events</th>
                                </tr>
                            </thead>
                            <tbody>
                                {worstPerformers.map(m => (
                                    <tr key={m.id} className="border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50">
                                        <td className="px-4 py-3 font-medium text-slate-800 dark:text-white">{m.name}</td>
                                        <td className="px-4 py-3">
                                            <span className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded text-xs font-bold text-slate-600 dark:text-slate-400">
                                                {m.region}
                                            </span>
                                        </td>
                                        <td className="px-4 py-3 text-right font-bold text-rose-500">{m.downtimeCount}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}

            {/* Monitor Status List */}
            <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-slate-800">
                <h3 className="font-bold text-slate-800 dark:text-slate-100 mb-6 flex items-center gap-2">
                    <Server className="size-5 text-indigo-500" />
                    Monitor Status
                </h3>

                <div className="overflow-x-auto">
                    <table className="w-full text-sm text-left">
                        <thead className="text-xs text-slate-500 bg-slate-50 dark:bg-slate-800 uppercase">
                            <tr>
                                <th className="px-4 py-3 rounded-l-lg">Status</th>
                                <th className="px-4 py-3">Monitor Name</th>
                                <th className="px-4 py-3">Reference URL</th>
                                <th className="px-4 py-3">Country</th>
                                <th className="px-4 py-3 text-right">Latest Response</th>
                                <th className="px-4 py-3 text-right rounded-r-lg">Last Check</th>
                            </tr>
                        </thead>
                        <tbody>
                            {detailedMonitors
                                .filter(m => {
                                    if (filters.monitorId && String(m.id) !== String(filters.monitorId)) return false;
                                    if (filters.region === 'Global') return true;

                                    // Robust Match for Region: Name OR Code
                                    const regionName = filters.region;
                                    const regionCode = regions.find(r => r.name === regionName)?.code;

                                    return m.region === regionName || (regionCode && m.region === regionCode);
                                })
                                .map((m: MonitorWithHeartbeats) => {
                                    const lastCheck = m.heartbeats && m.heartbeats[0];
                                    const isUp = lastCheck?.status === 'up';

                                    return (
                                        <tr key={m.id} className="border-b border-slate-100 dark:border-slate-800 last:border-0 hover:bg-slate-50 dark:hover:bg-slate-800/50">
                                            <td className="px-4 py-3">
                                                <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold ${isUp ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400'
                                                    : 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-400'
                                                    }`}>
                                                    <span className={`size-2 rounded-full ${isUp ? 'bg-emerald-500' : 'bg-rose-500'}`}></span>
                                                    {isUp ? 'Operational' : 'Down'}
                                                </span>
                                            </td>
                                            <td className="px-4 py-3 font-medium text-slate-800 dark:text-white">{m.name}</td>
                                            <td className="px-4 py-3 text-slate-500 font-mono text-xs truncate max-w-[200px]">{m.url}</td>
                                            <td className="px-4 py-3">
                                                <span className="px-2 py-1 bg-slate-100 dark:bg-slate-800 rounded text-xs font-bold text-slate-600 dark:text-slate-400">
                                                    {m.region}
                                                </span>
                                            </td>
                                            <td className="px-4 py-3 text-right font-mono text-slate-600 dark:text-slate-400">
                                                {lastCheck?.responseTimeMs ? `${lastCheck.responseTimeMs}ms` : '-'}
                                            </td>
                                            <td className="px-4 py-3 text-right text-slate-500">
                                                {lastCheck ? new Date(lastCheck.createdAt).toLocaleTimeString() : 'Never'}
                                            </td>
                                        </tr>
                                    );
                                })
                            }
                            {detailedMonitors.filter(m => {
                                if (filters.monitorId && String(m.id) !== String(filters.monitorId)) return false;
                                if (filters.region === 'Global') return true;
                                const regionName = filters.region;
                                const regionCode = regions.find(r => r.name === regionName)?.code;
                                return m.region === regionName || (regionCode && m.region === regionCode);
                            }).length === 0 && (
                                    <tr>
                                        <td colSpan={6} className="px-4 py-8 text-center text-slate-400">
                                            No monitors found in this country.
                                        </td>
                                    </tr>
                                )}
                        </tbody>
                    </table>
                </div>
            </div>
        </DashboardLayout>
    );
}