"use client";

import React, { useState } from "react";
import { useOutboundByCategoryAnalysis } from "@/hooks/useAnalysis";
import { useBranch } from "@/hooks/useClientApp";
import { Branch } from "@/types/settings";
import { Loader2, ChevronDown, CalendarIcon, Check, ChevronLeft, ChevronRight, Activity } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

export default function OutboundCategoryAnalysisView() {
    const [selectedMonth, setSelectedMonth] = useState<number>(new Date().getMonth() + 1);
    const [selectedYear, setSelectedYear] = useState<number>(new Date().getFullYear());
    const [openDateOpen, setOpenDateOpen] = useState(false);

    const handlePrevMonth = () => {
        if (selectedMonth === 1) {
            setSelectedMonth(12);
            setSelectedYear(selectedYear - 1);
        } else {
            setSelectedMonth(selectedMonth - 1);
        }
    };

    const handleNextMonth = () => {
        if (selectedMonth === 12) {
            setSelectedMonth(1);
            setSelectedYear(selectedYear + 1);
        } else {
            setSelectedMonth(selectedMonth + 1);
        }
    };

    const monthName = new Date(selectedYear, selectedMonth - 1).toLocaleString('id-ID', { month: 'long', year: 'numeric' });
    
    const { data: branches } = useBranch();
    const availableBranches = branches?.filter(b => b.is_access) || [];
    
    const [selectedBranch, setSelectedBranch] = useState<string>("Semua Cabang");

    const branchParam = selectedBranch === "Semua Cabang" 
        ? availableBranches.map(b => b.name) 
        : selectedBranch;

    const { data: analysisData, isLoading } = useOutboundByCategoryAnalysis(selectedMonth, selectedYear, branchParam);

    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) => new Date().getFullYear() - i);

    const formatDate = (dateStr: string) => {
        const d = new Date(dateStr);
        return d.toLocaleString('id-ID', { weekday: 'long', day: '2-digit', month: 'short', year: 'numeric' });
    };

    const totalPesanKeluar = analysisData?.reduce((acc: number, curr: import("@/types/analysis").OutboundByCategoryAnalysis) => acc + curr.total, 0) || 0;
    const totalUmum = analysisData?.reduce((acc, curr) => acc + (curr.umum || 0), 0) || 0;
    const totalReels = analysisData?.reduce((acc, curr) => acc + (curr.reels || 0), 0) || 0;
    const totalSp = analysisData?.reduce((acc, curr) => acc + (curr.sp || 0), 0) || 0;
    const totalSecurity = analysisData?.reduce((acc, curr) => acc + (curr.security || 0), 0) || 0;
    const totalFreeSurvey = analysisData?.reduce((acc, curr) => acc + (curr.free_survey || 0), 0) || 0;
    const totalCabang = analysisData?.reduce((acc, curr) => acc + (curr.cabang || 0), 0) || 0;
    const totalGaransi = analysisData?.reduce((acc, curr) => acc + (curr.garansi || 0), 0) || 0;

    return (
        <div className="flex-1 flex flex-col h-full bg-[#efeae2] dark:bg-[#0b141a] overflow-hidden">
            <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">
                    <Activity 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 Outbound - Kategori</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",
                                        !selectedMonth && "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", selectedMonth === m.value ? "bg-accent" : "")}
                                                    onClick={() => {
                                                        setSelectedMonth(m.value)
                                                        setOpenDateOpen(false)
                                                    }}
                                                >
                                                    {m.value === selectedMonth && <Check className="mr-2 h-4 w-4" />}
                                                    {m.label}
                                                </Button>
                                            ))}
                                        </div>
                                    </ScrollArea>
                                    <ScrollArea className="h-full w-[100px]">
                                        <div className="flex flex-col gap-1">
                                            {years.map((y) => (
                                                <Button
                                                    key={y}
                                                    variant="ghost"
                                                    size="sm"
                                                    className={cn("justify-start", selectedYear === y ? "bg-accent" : "")}
                                                    onClick={() => {
                                                        setSelectedYear(y)
                                                        setOpenDateOpen(false)
                                                    }}
                                                >
                                                    {y === selectedYear && <Check className="mr-2 h-4 w-4" />}
                                                    {y}
                                                </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 className="bg-white dark:bg-[#111b21] rounded-md shadow-sm">
                        <Popover>
                            <PopoverTrigger asChild>
                                <Button
                                    variant="ghost"
                                    role="combobox"
                                    className="w-full md:w-[200px] justify-between font-normal"
                                >
                                    <span className="truncate">{selectedBranch}</span>
                                    <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-[200px] p-0">
                                <ScrollArea className="h-[300px]">
                                    <div className="flex flex-col p-1">
                                        <Button
                                            variant="ghost"
                                            className="justify-start font-normal"
                                            onClick={() => setSelectedBranch("Semua Cabang")}
                                        >
                                            {selectedBranch === "Semua Cabang" && <Check className="mr-2 h-4 w-4" />}
                                            <span className={cn(selectedBranch !== "Semua Cabang" && "ml-6")}>
                                                Semua Cabang
                                            </span>
                                        </Button>
                                        {availableBranches.map((branch: Branch) => (
                                            <Button
                                                key={branch.id}
                                                variant="ghost"
                                                className="justify-start font-normal"
                                                onClick={() => setSelectedBranch(branch.name)}
                                            >
                                                {selectedBranch === branch.name && <Check className="mr-2 h-4 w-4" />}
                                                <span className={cn(selectedBranch !== branch.name && "ml-6")}>
                                                    {branch.name}
                                                </span>
                                            </Button>
                                        ))}
                                    </div>
                                </ScrollArea>
                            </PopoverContent>
                        </Popover>
                    </div>
                </div>
            </header>

            <div className="flex-1 overflow-auto p-4 md:p-6">
                <div className="bg-white dark:bg-[#111b21] rounded-lg shadow-sm overflow-hidden border border-gray-100 dark:border-gray-800">
                    {isLoading ? (
                        <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 block md:table">
                                <thead className="hidden md:table-header-group 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">Tanggal</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Pesan Keluar</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Umum</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Reels</th>
                                        <th className="px-6 py-4 whitespace-nowrap">SP</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Security</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Free Survey</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Cabang</th>
                                        <th className="px-6 py-4 whitespace-nowrap">Garansi</th>
                                    </tr>
                                </thead>
                                <tbody className="block md:table-row-group divide-y divide-gray-100 dark:divide-gray-800">
                                    {analysisData && analysisData.length > 0 ? (
                                        <>
                                            {analysisData.map((item: import("@/types/analysis").OutboundByCategoryAnalysis, index: number) => (
                                                <tr 
                                                    key={index} 
                                                    className="block md:table-row border-b dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors p-4 md:p-0"
                                                >
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Tanggal:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{formatDate(item.date)}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Pesan Keluar:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.total}</span>
                                                    </td>
                                                                                                        <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Umum:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.umum}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Reels:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.reels}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">SP:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.sp}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Security:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.security}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Free Survey:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.free_survey}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Cabang:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.cabang}</span>
                                                    </td>
                                                    <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                        <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Garansi:</span>
                                                        <span className="font-medium text-gray-900 dark:text-gray-100">{item.garansi}</span>
                                                    </td>
                                                </tr>
                                            ))}
                                            <tr className="block md:table-row border-b dark:border-gray-800 transition-colors p-4 md:p-0 font-bold bg-[#f0f2f5] dark:bg-[#202c33]">
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Tanggal:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">Total</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Pesan Keluar:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalPesanKeluar}</span>
                                                </td>
                                                                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Umum:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalUmum}</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Reels:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalReels}</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">SP:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalSp}</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Security:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalSecurity}</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Free Survey:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalFreeSurvey}</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Cabang:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalCabang}</span>
                                                </td>
                                                <td className="block md:table-cell px-0 md:px-6 py-2 md:py-4">
                                                    <span className="md:hidden font-semibold text-xs text-gray-500 mr-2">Garansi:</span>
                                                    <span className="text-gray-900 dark:text-gray-100">{totalGaransi}</span>
                                                </td>
                                            </tr>
                                        </>
                                    ) : (
                                        <tr>
                                            <td colSpan={9} className="block md:table-cell px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                                Tidak ada data pesan keluar di bulan ini untuk cabang yang dipilih.
                                            </td>
                                        </tr>
                                    )}
                                </tbody>
                            </table>
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
}