'use client';

import { useState, useEffect } from 'react';
import { DashboardLayout } from '@/components/dashboard/DashboardLayout';
import { MultiSelect } from '@/components/ui/MultiSelect';
import { Bar, Line } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, PointElement, LineElement } from 'chart.js';
import { FileText, Calendar, TrendingUp } from 'lucide-react';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, PointElement, LineElement);

export default function PageContent() {
    const [year, setYear] = useState(new Date().getFullYear());

    // State for modular data
    const [trendData, setTrendData] = useState<{
        labels: string[];
        datasets: { label: string; data: number[] }[];
        regions?: string[];
    } | null>(null);
    const [summaryData, setSummaryData] = useState<{
        totalTickets: number;
        breakdown: { country: string; total: number }[];
    } | null>(null);

    const [loading, setLoading] = useState(true);
    const [availableRegions, setAvailableRegions] = useState<string[]>([]);
    const [selectedComparisonRegions, setSelectedComparisonRegions] = useState<string[]>([]);

    useEffect(() => {
        // eslint-disable-next-line react-hooks/set-state-in-effect
        setLoading(true);
        setTrendData(null);
        setSummaryData(null);

        // Parallel Fetching
        const p1 = fetch(`/api/analytics/tickets/trend?year=${year}`)
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    setTrendData(data); // Contains labels, datasets
                    setAvailableRegions(data.regions || []);
                    // Default selection: Top 5 to avoid clutter
                    if (data.regions && data.regions.length > 0) {
                        setSelectedComparisonRegions(data.regions.slice(0, 5));
                    }
                }
            });

        const p2 = fetch(`/api/analytics/tickets/kpi?year=${year}`)
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    setSummaryData(data); // Contains totalTickets, breakdown
                }
            });

        Promise.all([p1, p2]).finally(() => setLoading(false));
    }, [year]);

    // Derived Charts
    const comparisonDatasets = trendData ? trendData.datasets.filter((d) => selectedComparisonRegions.includes(d.label)) : [];

    // Prepare Yearly Total Chart from Summary Data Breakdown
    const yearlyTotalData = {
        labels: summaryData?.breakdown?.map((b) => b.country) || [],
        datasets: [{
            label: 'Total Tickets',
            data: summaryData?.breakdown?.map((b) => b.total) || [],
            backgroundColor: [
                'rgb(59, 130, 246)', 'rgb(16, 185, 129)', 'rgb(245, 158, 11)',
                'rgb(239, 68, 68)', 'rgb(139, 92, 246)', 'rgb(236, 72, 153)', 'rgb(14, 165, 233)'
            ],
        }]
    };

    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 flex items-center gap-3">
                        <FileText className="size-8 text-blue-500" />
                        Ticket Statistics
                    </h2>
                    <p className="text-slate-500 dark:text-slate-400 mt-1">Overview of support tickets per country</p>
                </div>

                <div className="flex items-center gap-4">
                    {/* Summary Badge */}
                    {summaryData && (
                        <div className="hidden md:flex flex-col items-end mr-4">
                            <span className="text-xs font-bold text-slate-500 uppercase tracking-wider">Total Tickets</span>
                            <span className="text-2xl font-black text-slate-800 dark:text-slate-100">{summaryData.totalTickets}</span>
                        </div>
                    )}

                    <div className="flex items-center gap-2 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl px-4 py-2 shadow-sm">
                        <Calendar className="size-4 text-slate-400" />
                        <span className="text-sm font-bold text-slate-500">Year:</span>
                        <select
                            value={year}
                            onChange={(e) => setYear(parseInt(e.target.value))}
                            className="bg-transparent font-bold text-slate-800 dark:text-slate-200 outline-none"
                        >
                            {Array.from({ length: 5 }, (_, i) => new Date().getFullYear() - 2 + i).map(y => (
                                <option key={y} value={y}>{y}</option>
                            ))}
                        </select>
                    </div>
                </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                {/* Chart 1: Monthly Trends */}
                <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800">
                    {loading ? (
                        <div className="h-80 flex items-center justify-center text-slate-400">Loading statistics...</div>
                    ) : trendData && trendData.datasets.length > 0 ? (
                        <Bar options={{
                            responsive: true,
                            plugins: {
                                legend: { position: 'top' },
                                title: { display: true, text: `Monthly Ticket Statistics (${year})` }
                            },
                            scales: { y: { beginAtZero: true } }
                        }} data={trendData} />
                    ) : (
                        <div className="h-80 flex items-center justify-center text-slate-400 flex-col gap-2">
                            <FileText className="size-12 opacity-20" />
                            <p>No ticket data available for {year}.</p>
                        </div>
                    )}
                </div>

                {/* Chart 2: Regional Totals */}
                <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800">
                    {loading ? (
                        <div className="h-80 flex items-center justify-center text-slate-400">Loading statistics...</div>
                    ) : summaryData && summaryData.breakdown.length > 0 ? (
                        <Bar options={{
                            responsive: true,
                            plugins: {
                                legend: { display: false },
                                title: { display: true, text: `Yearly Total by Country (${year})` }
                            }
                        }} data={yearlyTotalData} />
                    ) : (
                        <div className="h-80 flex items-center justify-center text-slate-400 flex-col gap-2">
                            <FileText className="size-12 opacity-20" />
                            <p>No data to display.</p>
                        </div>
                    )}
                </div>
            </div>

            {/* Regional Trends Comparison (Line Chart) */}
            <div className="bg-white dark:bg-slate-900 p-6 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-800">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                    <div>
                        <h3 className="text-xl font-bold text-slate-800 dark:text-slate-100 flex items-center gap-2">
                            <TrendingUp className="size-5 text-emerald-500" />
                            Country Trend Comparison
                        </h3>
                        <p className="text-sm text-slate-500">Compare performance between specific countries over time.</p>
                    </div>
                    <div className="w-full md:w-64">
                        <MultiSelect
                            label="Select Countries to Compare"
                            options={availableRegions.map(r => ({ label: r, value: r }))}
                            selected={selectedComparisonRegions}
                            onChange={setSelectedComparisonRegions}
                        />
                    </div>
                </div>

                <div className="h-96">
                    {loading ? (
                        <div className="h-full flex items-center justify-center text-slate-400">Loading comparisons...</div>
                    ) : selectedComparisonRegions.length > 0 && trendData ? (
                        <Line options={{
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { position: 'top' },
                                title: { display: false }
                            },
                            scales: {
                                y: { beginAtZero: true }
                            }
                        }} data={{
                            labels: trendData.labels,
                            datasets: comparisonDatasets
                        }} />
                    ) : (
                        <div className="h-full flex items-center justify-center text-slate-400 bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-dashed border-slate-200 dark:border-slate-700">
                            Select countries from the dropdown to start comparing.
                        </div>
                    )}
                </div>
            </div>
        </DashboardLayout>
    );
}