"use client";

import Sidebar from "@/components/sidebar";
import ChatWindow from "@/components/chat-window";
import MiniSidebar from "@/components/mini-sidebar";
import Contacts from "@/components/contacts";
import { useState } from "react";
import { useAuth } from "@/contexts/auth-context";
import useEcho from "@/lib/echo";
import { useEffect, useRef } from "react";
import { useChatStore } from "@/store/useChatStore";
import { useConversationDetail, useContactDetail } from "@/hooks/useWhatsApp";
import { useQueryClient } from "@tanstack/react-query";
import Lightbox from "yet-another-react-lightbox";
import Zoom from "yet-another-react-lightbox/plugins/zoom";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import Download from "yet-another-react-lightbox/plugins/download";
import Counter from "yet-another-react-lightbox/plugins/counter";
import "yet-another-react-lightbox/styles.css";
import "yet-another-react-lightbox/plugins/thumbnails.css";
import "yet-another-react-lightbox/plugins/counter.css";
import ContactWindow from "@/components/contact-window";
import MessageInputTemplate from "@/components/message-input-template";
import { useSetting } from "@/hooks/useClientApp";
import Head from "next/head";
import { Button } from "@/components/ui/button";
import { MessageSquare, Monitor, Moon, Settings, Sun, Users, BarChart3, PieChart, Bookmark, LayoutTemplate, Activity, Bot } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { useTheme } from "next-themes";

import AnalysisView from "@/components/analysis/analysis-view";
import UserAnalysisView from "@/components/analysis/user-analysis-view";
import BranchAnalysisView from "@/components/analysis/branch-analysis-view";
import MonthlyContactsAnalysisView from "@/components/analysis/monthly-contacts-analysis-view";
import SlowResponsesAnalysisView from "@/components/analysis/slow-responses-analysis-view";

import ChatbotSettingsView from "@/components/chatbot-settings-view";
import TemplateView from "@/components/whatsapp-template/template-view";
import ForbiddenPage from "@/components/forbidden-page";
import { BookmarkListModal } from "@/components/bookmark-list-modal";

export default function Home() {
  const [currentView, setCurrentView] = useState<"chats" | "contacts" | "analysis" | "user-analysis" | "branch-analysis" | "chatbot-settings" | "whatsapp-templates" | "monthly-contacts-analysis" | "slow-responses-analysis">("chats");
  const [mobileView, setMobileView] = useState<"chats" | "contacts" | "conversation" | "contact-detail" | "analysis" | "user-analysis" | "branch-analysis" | "chatbot-settings" | "whatsapp-templates" | "monthly-contacts-analysis" | "slow-responses-analysis">("chats");
  const accountId = process.env.NEXT_PUBLIC_APP_ACCOUNT_ID_WHATSAPP_SERVICE || "";
  const echo = useEcho();
  const { selectedContact,setSelectedContact,setLoadingFirstConversation,setLightBoxImages, setMessageId,contact, setContactId, setPaginationWindow, lightBoxImages, selectedLightBoxImage, setSelectedLightBoxImage, openMessageTemplate, setOpenMessageTemplate, bookmarkModalOpen, setBookmarkModalOpen } = useChatStore();
  const queryClient = useQueryClient();
  const { refetch } = useConversationDetail();
  const contactDetailMutation = useContactDetail();
  const [audio, setAudio] = useState<any>(null);
  const { data:setting } = useSetting();
  const { setTheme, theme } = useTheme();
  const { user } = useAuth();
  useEffect(() => {
    if (typeof Notification === "undefined") {
      console.log("Browser does not support Notification API");
      return;
    }
    if (Notification.permission === "granted") {
      setAudio(new Audio("/audio/notification.wav"));
      sessionStorage.setItem('notification', !sessionStorage.getItem('notification') ? "true" : sessionStorage.getItem('notification') as string);
    } else {
      Notification.requestPermission();
    }

    // Automatically open bookmark modal on page load
    setBookmarkModalOpen(true);
  },[]);

  // Dedup refresh: pesan yang sama bisa dibroadcast ke channel messages.* dan
  // notification.* sekaligus. Tanpa guard ini, satu pesan masuk memicu fetch
  // contact-detail (dan conversation-detail) 2x.
  const processedMessagesRef = useRef<Set<string>>(new Set());

  const refreshForMessage = (data: any) => {
    if (!data?.contact_id) return;

    if (data?.message_id) {
      if (processedMessagesRef.current.has(data.message_id)) return;
      processedMessagesRef.current.add(data.message_id);
      // Jaga ukuran set tetap terbatas
      if (processedMessagesRef.current.size > 200) {
        processedMessagesRef.current = new Set(
          Array.from(processedMessagesRef.current).slice(-100)
        );
      }
    }

    contactDetailMutation.mutateAsync(data.contact_id);

    if (selectedContact?.id == data.contact_id) {
      setPaginationWindow(false);
      setMessageId(data.message_id);
      queryClient.invalidateQueries({ queryKey: ["conversation-detail"] });
    }
  };

  useEffect(() => {
    if (!echo || !accountId) return;

    const channel = echo.channel(`messages.${accountId}`);

    channel.listen(".new.message", (data: any) => {
      refreshForMessage(data);
    });

    return () => {
      echo.leave(`messages.${accountId}`);
    };
  }, [echo, accountId, selectedContact]);


  useEffect(() => {
    if (!echo || !accountId) return;

    const channel = echo.channel(`notification.${accountId}`);

    channel.listen(".notification.message", (data: any) => {
      refreshForMessage(data);

      if(data?.message_direction == "inbound") {
        if(sessionStorage.getItem('notification') == "true") {
          audio?.play().catch((err:any) => {
              console.warn("Autoplay blocked:", err);
          });
        }


        if (Notification.permission === "granted") {
          if(sessionStorage.getItem('notification') == "true") {
            new Notification(`Pesan Baru dari Cabang ${data.branch_name}`, {
              body:`${data?.contact_name} : ${data?.message_text}`,
              icon: `/logo/logo.png`
            });
          }
       }

     }
    });

    return () => {
      echo.leave(`notification.${accountId}`);
    };
  }, [echo, accountId, selectedContact, audio]);


  if (user && user.access && user.access.access_whatsapp === 0) {
    return <ForbiddenPage />;
  }

  return (
    <>
      <main className="flex h-screen w-full bg-[#d1d7db] dark:bg-[#0b141a] overflow-hidden relative">
          {/* Green header background strip for desktop effect */}
        
          <div className="absolute top-0 w-full h-32 bg-[#00a884] dark:bg-[#0b141a] z-0 hidden md:block"></div>

          {/* Desktop layout */}
          <div className="z-10 w-full h-full md:m-auto hidden md:flex shadow-lg overflow-hidden bg-white dark:bg-[#111b21]">
            <div className="hidden md:flex">
              <MiniSidebar currentView={currentView} onViewChange={setCurrentView} />
            </div>
            {currentView === "chats" ? (
              <>
                <Sidebar />
                <ChatWindow />
              </>
            ) : currentView === "analysis" ? (
                <AnalysisView onNavigateToChat={(contact) => {
                    setSelectedContact(contact);
                    setPaginationWindow(false);
                    setLoadingFirstConversation(true);
                    setLightBoxImages([]);
                    setCurrentView("chats");
                }} />
            ) : currentView === "user-analysis" ? (
                <UserAnalysisView />
            ) : currentView === "branch-analysis" ? (
                <BranchAnalysisView onNavigateToChat={(contact) => {
                    setSelectedContact(contact);
                    setPaginationWindow(false);
                    setLoadingFirstConversation(true);
                    setLightBoxImages([]);
                    setCurrentView("chats");
                }} />
            ) : currentView === "chatbot-settings" ? (
                <ChatbotSettingsView />
            ) : currentView === "whatsapp-templates" ? (
              <div className="flex-1 overflow-hidden h-full">
                <TemplateView />
              </div>
            ) : currentView === "monthly-contacts-analysis" ? (
              <div className="flex-1 overflow-hidden h-full bg-[#f0f2f5] dark:bg-[#111b21]">
                <MonthlyContactsAnalysisView onNavigateToChat={(contact: any) => {
                    setSelectedContact(contact);
                    setPaginationWindow(false);
                    setLoadingFirstConversation(true);
                    setLightBoxImages([]);
                    setCurrentView("chats");
                }} />
              </div>
            ) : currentView === "slow-responses-analysis" ? (
              <div className="flex-1 overflow-hidden h-full bg-[#f0f2f5] dark:bg-[#111b21]">
                <SlowResponsesAnalysisView onNavigateToChat={(contact: any) => {
                    setSelectedContact(contact);
                    setPaginationWindow(false);
                    setLoadingFirstConversation(true);
                    setLightBoxImages([]);
                    setCurrentView("chats");
                }} />
              </div>
            ) : (  
              <>
                <Contacts onClose={() => setCurrentView("chats")} />
                {
                  contact ?
                  <ContactWindow/>
                  :
                  <div className="flex-1 flex flex-col h-full bg-[#efeae2] dark:bg-[#0b141a] items-center justify-center">
                      <div className="text-center">
                          <h3 className="text-xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                              Pilih Kontak
                          </h3>
                      </div>
                  </div>
                }
              </>
            )}
          </div>

          {/* Mobile layout */}
          <div className="z-10 w-full h-full flex md:hidden flex-col shadow-lg overflow-hidden bg-white dark:bg-[#111b21]">
            <div className="flex items-center justify-between px-4 py-3 bg-[#f0f2f5] dark:bg-[#202c33] text-white ">
              <div className="flex gap-3 items-center  w-full flex-row h-5">
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${mobileView === "chats" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                    onClick={() => setMobileView("chats")}
                >
                    <MessageSquare className="h-4 w-4" />
                </Button>
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${mobileView === "contacts" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                    onClick={() => {
                      setMobileView("contacts")
                    }}
                >
                    <Users className="h-4 w-4" />
                </Button>
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700`}
                    onClick={() => setBookmarkModalOpen(true)}
                >
                    <Bookmark className="h-4 w-4" />
                </Button>
                <Button
                    variant="ghost"
                    size="icon"
                    className={`text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 ${mobileView === "whatsapp-templates" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                    onClick={() => {
                      setMobileView("whatsapp-templates")
                    }}
                >
                    <LayoutTemplate className="h-4 w-4" />
                </Button>
                {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 ${mobileView === "chatbot-settings" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                        onClick={() => setMobileView("chatbot-settings")}
                    >
                        <Bot className="h-4 w-4" />
                    </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 ${mobileView === "monthly-contacts-analysis" || mobileView === "slow-responses-analysis" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                        >
                            <Activity className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end" className="w-56">
                        <DropdownMenuItem onClick={() => setMobileView("monthly-contacts-analysis")} className="cursor-pointer">
                            <Activity className="mr-2 h-4 w-4" />
                            <span>Kontak Baru Per Bulan</span>
                        </DropdownMenuItem>
                        <DropdownMenuItem onClick={() => setMobileView("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 ${mobileView === "analysis" || mobileView === "user-analysis" || mobileView === "branch-analysis" ? "bg-gray-200 dark:bg-gray-700" : ""}`}
                        >
                            <BarChart3 className="h-4 w-4" />
                        </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                        <DropdownMenuItem onClick={() => setMobileView("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={() => setMobileView("branch-analysis")} className="cursor-pointer">
                                <BarChart3 className="mr-2 h-4 w-4" />
                                <span>Kontak Baru Per Cabang</span>
                            </DropdownMenuItem>
                        )}
                        <DropdownMenuItem onClick={() => setMobileView("user-analysis")} className="cursor-pointer">
                            <PieChart className="mr-2 h-4 w-4" />
                            <span>Pesan Per User</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">
                            <Settings className="h-4 w-4" />
                        </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>
            </div>
            <div className="flex-1 h-0">
              {mobileView === "chats" && (
                <Sidebar onSelectContact={() => setMobileView("conversation")} />
              )}
              {mobileView === "contacts" && (
                <Contacts
                  onClose={() => setMobileView("chats")}
                  onSelectContact={() => setMobileView("contact-detail")}
                />
              )}
              {mobileView === "conversation" && (
                <ChatWindow onBack={() => setMobileView("chats")} />
              )}
              {mobileView === "contact-detail" && (
                contact ? (
                  <ContactWindow onBack={() => setMobileView("contacts")} />
                ) : (
                  <div className="flex-1 flex flex-col h-full bg-[#efeae2] dark:bg-[#0b141a] items-center justify-center">
                      <div className="text-center">
                          <h3 className="text-xl font-medium text-gray-900 dark:text-gray-100 mb-2">
                              Pilih Kontak
                          </h3>
                      </div>
                  </div>
                )
              )}
               {mobileView === "analysis" && (
                <AnalysisView onNavigateToChat={(contact) => {
                    setSelectedContact(contact);
                    setPaginationWindow(false);
                    setLoadingFirstConversation(true);
                    setLightBoxImages([]);
                    setMobileView("conversation");
                }} />
              )}
               {mobileView === "user-analysis" && (
                <UserAnalysisView />
              )}
               {mobileView === "branch-analysis" && (
                <BranchAnalysisView onNavigateToChat={(contact) => {
                    setSelectedContact(contact);
                    setPaginationWindow(false);
                    setLoadingFirstConversation(true);
                    setLightBoxImages([]);
                    setMobileView("conversation");
                }} />
              )}
               {mobileView === "chatbot-settings" && (
                <ChatbotSettingsView />
              )}
               {mobileView === "whatsapp-templates" && (
                <TemplateView />
              )}
               {mobileView === "monthly-contacts-analysis" && (
                <div className="flex-1 overflow-hidden h-full bg-[#f0f2f5] dark:bg-[#111b21]">
                  <MonthlyContactsAnalysisView onNavigateToChat={(contact: any) => {
                      setSelectedContact(contact);
                      setPaginationWindow(false);
                      setLoadingFirstConversation(true);
                      setLightBoxImages([]);
                      setMobileView("conversation");
                  }} />
                </div>
              )}
               {mobileView === "slow-responses-analysis" && (
                <div className="flex-1 overflow-hidden h-full bg-[#f0f2f5] dark:bg-[#111b21]">
                  <SlowResponsesAnalysisView onNavigateToChat={(contact: any) => {
                      setSelectedContact(contact);
                      setPaginationWindow(false);
                      setLoadingFirstConversation(true);
                      setLightBoxImages([]);
                      setMobileView("conversation");
                  }} />
                </div>
              )}
            </div>
          </div>
          <Lightbox 
              open={lightBoxImages.findIndex((fill) => fill.src == selectedLightBoxImage) !== -1}
              index={lightBoxImages.findIndex((fill) => fill.src == selectedLightBoxImage)}
              close={() => setSelectedLightBoxImage('')}
              plugins={[Thumbnails,Zoom,Counter, Download]}  
              zoom={{
                maxZoomPixelRatio: 5,            // zoom maksimal
                zoomInMultiplier: 1.5, // kecepatan zoom in
              }}
              slides={lightBoxImages}/>
              <MessageInputTemplate open={openMessageTemplate} onChangeOpen={setOpenMessageTemplate}/>
              <BookmarkListModal open={bookmarkModalOpen} onOpenChange={setBookmarkModalOpen} />
        </main>
    </>
   
  );
}