"use client";

import React from 'react';
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { LogOut, Settings, MessageSquare, Phone, Disc, Sun, Moon, Monitor, Users, BarChart3, Bot, PieChart, Bookmark, LayoutTemplate, Activity } from "lucide-react";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTheme } from "next-themes";
import { useChatStore } from '@/store/useChatStore';
import { InfiniteData, useQueryClient } from '@tanstack/react-query';
import { Collections } from '@/types/response';
import { Contact } from '@/types/contacts';
import { useAuth } from '@/contexts/auth-context';

interface MiniSidebarProps {
    currentView: "chats" | "contacts" | "analysis" | "user-analysis" | "branch-analysis" | "chatbot-settings" | "whatsapp-templates" | "monthly-contacts-analysis" | "slow-responses-analysis";
    onViewChange: (view: "chats" | "contacts" | "analysis" | "user-analysis" | "branch-analysis" | "chatbot-settings" | "whatsapp-templates" | "monthly-contacts-analysis" | "slow-responses-analysis") => void;
}


const MiniSidebar: React.FC<MiniSidebarProps> = ({ currentView, onViewChange }) => {
    const { setTheme, theme } = useTheme();
    const { setContact } = useChatStore();
    const { user } = useAuth();
    const queryClient = useQueryClient();
    return (
        <div className="w-[60px] h-full flex flex-col items-center py-4 bg-[#f0f2f5] dark:bg-[#202c33] border-r border-gray-200 dark:border-gray-800 shrink-0">
            {/* Top Actions */}
            <div className="flex flex-col gap-4">
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${currentView === "chats" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                    onClick={() => {
                        onViewChange("chats")
                        setContact(null);
                    }}
                >
                    <MessageSquare className="h-5 w-5" />
                </Button>
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${currentView === "contacts" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                    onClick={() => {
                        onViewChange("contacts")
                        setContact((queryClient.getQueriesData({queryKey:["contacts-infinite"]}).at(0)?.at(1) as InfiniteData<Collections<Contact>> ).pages.at(0)?.result.at(0) ?? null);
                    }}
                >
                    <Users className="h-5 w-5" />
                </Button>
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700`}
                    onClick={() => {
                        useChatStore.getState().setBookmarkModalOpen(true);
                    }}
                    title="Daftar Bookmark"
                >
                    <Bookmark className="h-5 w-5" />
                </Button>

                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="ghost"
                            size="icon"
                            className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${currentView === "monthly-contacts-analysis" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                            title="Monitoring"
                        >
                            <Activity className="h-5 w-5" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" side="right" className="w-56">
                        <DropdownMenuItem onClick={() => onViewChange("monthly-contacts-analysis")} className="cursor-pointer">
                            <Activity className="mr-2 h-4 w-4" />
                            <span>Kontak Baru Per Bulan</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => onViewChange("slow-responses-analysis")} className="cursor-pointer">
                            <Activity className="mr-2 h-4 w-4" />
                            <span>Response Time &gt; 10 Menit</span>
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>

                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button
                            variant="ghost"
                            size="icon"
                            className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${currentView === "analysis" || currentView === "user-analysis" || currentView === "branch-analysis" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                        >
                            <BarChart3 className="h-5 w-5" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" side="right" className="w-56">
                        <DropdownMenuItem onClick={() => onViewChange("analysis")} className="cursor-pointer">
                            <BarChart3 className="mr-2 h-4 w-4" />
                            <span>Kontak Baru Per Hari</span>
                        </DropdownMenuItem>
                        {user?.type.id === 2 && (
                            <DropdownMenuItem onClick={() => onViewChange("branch-analysis")} className="cursor-pointer">
                                <BarChart3 className="mr-2 h-4 w-4" />
                                <span>Kontak Baru Per Cabang</span>
                            </DropdownMenuItem>
                        )}
                        <DropdownMenuItem onClick={() => onViewChange("user-analysis")} className="cursor-pointer">
                            <PieChart className="mr-2 h-4 w-4" />
                            <span>Pesan Per User</span>
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
                {
                    user?.type.id === 2 && (
                        <Button
                            variant="ghost"
                            size="icon"
                            className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${currentView === "chatbot-settings" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                            onClick={() => {
                                onViewChange("chatbot-settings")
                            }}
                        >
                            <Bot className="h-5 w-5" />
                        </Button>
                    )
                }

                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${currentView === "whatsapp-templates" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                    onClick={() => {
                        onViewChange("whatsapp-templates")
                    }}
                    title="Whatsapp Templates"
                >
                    <LayoutTemplate className="h-5 w-5" />
                </Button>
                
                {/* <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
                    <Phone className="h-5 w-5" />
                </Button> */}
                <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
                            <Settings className="h-5 w-5" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-40">
                        <DropdownMenuItem onClick={() => setTheme("light")} className="cursor-pointer">
                            <Sun className="mr-2 h-4 w-4" />
                            <span>Light</span>
                            {theme === "light" && <span className="ml-auto">✓</span>}
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => setTheme("dark")} className="cursor-pointer">
                            <Moon className="mr-2 h-4 w-4" />
                            <span>Dark</span>
                            {theme === "dark" && <span className="ml-auto">✓</span>}
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => setTheme("system")} className="cursor-pointer">
                            <Monitor className="mr-2 h-4 w-4" />
                            <span>System</span>
                            {theme === "system" && <span className="ml-auto">✓</span>}
                        </DropdownMenuItem>
                    </DropdownMenuContent>
                </DropdownMenu>
            </div>

            {/* Spacer */}
            <div className="flex-1"></div>

            {/* Bottom Actions */}
            <div className="flex flex-col gap-4 items-center">
                
                {/* <Avatar className="h-8 w-8 cursor-pointer hover:opacity-80 transition-opacity">
                    <AvatarImage src="https://github.com/shadcn.png" />
                    <AvatarFallback>ME</AvatarFallback>
                </Avatar> */}
                {/* <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700" title="Logout">
                    <LogOut className="h-5 w-5" />
                </Button> */}
            </div>
        </div>
    );
};

export default MiniSidebar;