"use client";

import React, { useState } from 'react';
import { useUserAnalysis } from '@/hooks/useAnalysis';
import { Button } from '@/components/ui/button';
import { ScrollArea } from "@/components/ui/scroll-area";
import { Loader2, ChevronLeft, ChevronRight, PieChart } from 'lucide-react';
import {
    Popover,
    PopoverContent,
    PopoverTrigger,
} from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { CalendarIcon, Check } from "lucide-react";

import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip as RechartsTooltip,
    Legend,
    ResponsiveContainer
} from 'recharts';

export default function UserAnalysisView() {
    const today = new Date();
    const [month, setMonth] = useState(today.getMonth() + 1);
    const [year, setYear] = useState(today.getFullYear());
    const [openDateOpen, setOpenDateOpen] = useState(false);
    
    const { data: userStats, isLoading: isLoadingUserStats } = useUserAnalysis(month, year);

    const handlePrevMonth = () => {
        if (month === 1) {
            setMonth(12);
            setYear(year - 1);
        } else {
            setMonth(month - 1);
        }
    };

    const handleNextMonth = () => {
        if (month === 12) {
            setMonth(1);
            setYear(year + 1);
        } else {
            setMonth(month + 1);
        }
    };

    const monthName = new Date(year, month - 1).toLocaleString('id-ID', { month: 'long', year: 'numeric' });
    const months = Array.from({ length: 12 }, (_, i) => {
        const d = new Date(0, i);
        return {
            value: i + 1,
            label: d.toLocaleString('id-ID', { month: 'long' })
        };
    });

    const years = Array.from({ length: 5 }, (_, i) => today.getFullYear() - i); // Last 5 years

    return (
        <div className="flex-1 flex flex-col h-full bg-[#efeae2] dark:bg-[#0b141a] overflow-hidden">
            {/* Header */}
            <header className="min-h-16 p-4 md:px-4 md:py-0 bg-[#f0f2f5] dark:bg-[#202c33] flex flex-col md:flex-row items-start md:items-center justify-between gap-4 shadow-sm shrink-0">
                <div className="flex items-center gap-2">
                    <PieChart className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                    <h1 className="text-lg font-semibold text-gray-800 dark:text-gray-200">Pesan Per User</h1>
                </div>
                
                <div className="flex flex-col md:flex-row items-stretch md:items-center gap-3 w-full md:w-auto">
                    <div className="flex items-center justify-between gap-2 bg-white dark:bg-[#111b21] rounded-md px-2 py-1 shadow-sm">
                    <Button variant="ghost" size="icon" onClick={handlePrevMonth} className="h-8 w-8 shrink-0">
                        <ChevronLeft className="h-4 w-4" />
                    </Button>
                    
                    <Popover open={openDateOpen} onOpenChange={setOpenDateOpen}>
                        <PopoverTrigger asChild>
                             <Button
                                variant={"ghost"}
                                className={cn(
                                    "flex-1 md:flex-none min-w-[140px] md:min-w-[160px] justify-center text-left font-normal",
                                    !month && "text-muted-foreground"
                                )}
                                >
                                <CalendarIcon className="mr-2 h-4 w-4" />
                                <span className="truncate">{monthName}</span>
                            </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="center">
                            <div className="flex flex-row p-2 gap-2 h-[300px]">
                                <ScrollArea className="h-full w-[120px]">
                                     <div className="flex flex-col gap-1">
                                        {months.map((m) => (
                                            <Button
                                                key={m.value}
                                                variant="ghost"
                                                size="sm"
                                                className={cn("justify-start", month === m.value ? "bg-accent" : "")}
                                                onClick={() => {
                                                    setMonth(m.value)
                                                }}
                                            >
                                                {m.label}
                                                {month === m.value && <Check className="ml-auto h-4 w-4" />}
                                            </Button>
                                        ))}
                                    </div>
                                </ScrollArea>
                                <div className="w-[1px] bg-border my-2"></div>
                                <ScrollArea className="h-full w-[80px]">
                                     <div className="flex flex-col gap-1">
                                        {years.map((y) => (
                                            <Button
                                                key={y}
                                                variant="ghost"
                                                size="sm"
                                                className={cn("justify-start", year === y ? "bg-accent" : "")}
                                                onClick={() => {
                                                    setYear(y);
                                                    setOpenDateOpen(false);
                                                }}
                                            >
                                                {y}
                                                {year === y && <Check className="ml-auto h-4 w-4" />}
                                            </Button>
                                        ))}
                                    </div>
                                </ScrollArea>
                            </div>
                        
                        </PopoverContent>
                    </Popover>

                    <Button variant="ghost" size="icon" onClick={handleNextMonth} className="h-8 w-8 shrink-0">
                        <ChevronRight className="h-4 w-4" />
                    </Button>
                    </div>
                </div>
            </header>

            {/* Main Content */}
            <div className="flex-1 overflow-auto p-4 md:p-6 space-y-6">
                
                {/* Chart Section */}
                <div className="bg-white dark:bg-[#111b21] rounded-lg shadow-sm border border-gray-100 dark:border-gray-800 p-4">
                     <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-4">Grafik Pesan User</h3>
                     <div className="h-[300px] w-full">
                        {isLoadingUserStats ? (
                             <div className="flex justify-center items-center h-full">
                                <Loader2 className="h-8 w-8 animate-spin text-emerald-500" />
                            </div>
                        ) : (userStats && userStats.length > 0) ? (
                            <ResponsiveContainer width="100%" height="100%">
                                <BarChart
                                    data={userStats}
                                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                                >
                                    <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#E5E7EB" />
                                    <XAxis 
                                        dataKey="user_name" 
                                        stroke="#9CA3AF" 
                                        fontSize={12} 
                                        tickLine={false} 
                                        axisLine={false}
                                    />
                                    <YAxis 
                                        stroke="#9CA3AF" 
                                        fontSize={12} 
                                        tickLine={false} 
                                        axisLine={false}
                                        allowDecimals={false}
                                    />
                                    <RechartsTooltip 
                                        cursor={{fill: 'rgba(0,0,0,0.05)'}}
                                        contentStyle={{ backgroundColor: '#fff', borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
                                        labelStyle={{ color: '#374151', fontWeight: 'bold', marginBottom: '4px' }}
                                    />
                                    <Legend />
                                    <Bar dataKey="sent_messages" name="Pesan Dikirimkan" fill="#3B82F6" radius={[4, 4, 0, 0]} barSize={40} />
                                    <Bar dataKey="failed_messages" name="Pesan Gagal" fill="#EF4444" radius={[4, 4, 0, 0]} barSize={40} />
                                </BarChart>
                            </ResponsiveContainer>
                        ) : (
                            <div className="flex justify-center items-center h-full text-gray-500">
                                Tidak ada data
                            </div>
                        )}
                     </div>
                </div>

                {/* User Message Analysis Section */}
                <div className="bg-white dark:bg-[#111b21] rounded-lg shadow-sm border border-gray-100 dark:border-gray-800 p-4">
                     {isLoadingUserStats ? (
                        <div className="flex items-center justify-center p-12">
                            <Loader2 className="h-8 w-8 animate-spin text-emerald-500" />
                        </div>
                    ) : (
                        <div className="overflow-x-auto">
                            <table className="w-full text-sm text-left border rounded-md">
                                <thead className="bg-[#f0f2f5] dark:bg-[#202c33] text-gray-700 dark:text-gray-300 font-semibold border-b border-gray-200 dark:border-gray-700">
                                    <tr>
                                        <th className="px-6 py-4 whitespace-nowrap">Nama User</th>
                                        <th className="px-6 py-4 whitespace-nowrap text-center">Jumlah Pesan Dikirimkan</th>
                                        <th className="px-6 py-4 whitespace-nowrap text-center">Jumlah Pesan Gagal</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-gray-100 dark:divide-gray-800 border-x border-b border-gray-200 dark:border-gray-700">
                                    {userStats?.map((stat, idx) => (
                                        <tr key={idx} className="hover:bg-gray-50 dark:hover:bg-[#1c272e] transition-colors bg-white dark:bg-[#111b21]">
                                            <td className="px-6 py-3 font-medium text-gray-900 dark:text-gray-100 border-r border-gray-200 dark:border-gray-700">
                                                {stat.user_name}
                                            </td>
                                            <td className="px-6 py-3 text-center text-gray-600 dark:text-gray-400 border-r border-gray-200 dark:border-gray-700">
                                                {stat.sent_messages}
                                            </td>
                                            <td className="px-6 py-3 text-center text-red-600 dark:text-red-400">
                                                {stat.failed_messages}
                                            </td>
                                        </tr>
                                    ))}
                                    {userStats?.length === 0 && (
                                        <tr className="bg-white dark:bg-[#111b21]">
                                            <td colSpan={3} className="px-6 py-8 text-center text-gray-500">
                                                Tidak ada data analisis pesan user di bulan ini.
                                            </td>
                                        </tr>
                                    )}
                                    {/* Total Footer Row */}
                                    {userStats && userStats.length > 0 && (
                                        <tr className="bg-[#f0f2f5] dark:bg-[#202c33] font-bold border-t border-gray-300 dark:border-gray-600">
                                            <td className="px-6 py-4 text-gray-900 dark:text-gray-100 border-r border-gray-200 dark:border-gray-700">
                                                Total
                                            </td>
                                            <td className="px-6 py-4 text-center text-gray-900 dark:text-gray-100 border-r border-gray-200 dark:border-gray-700">
                                                {userStats.reduce((acc, curr) => acc + curr.sent_messages, 0)}
                                            </td>
                                            <td className="px-6 py-4 text-center text-red-700 dark:text-red-400">
                                                {userStats.reduce((acc, curr) => acc + curr.failed_messages, 0)}
                                            </td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}