
import { useState, useEffect } from "react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,
  SidebarHeader,
  SidebarFooter,
} from "@/components/ui/sidebar";
import { useNavigate, useSearchParams } from "react-router-dom";
import { LayoutDashboard, Phone, BarChart3, Settings, CreditCard, Layers3, PhoneCall, LogOut, Brain, Database, Store, ChevronDown, Package, Globe, FileText } from "lucide-react";
import { useAuth } from "@/components/context/AuthContext";
import { useShop } from "@/components/context/ShopContext";
import { useTranslation } from 'react-i18next';
import { LanguageSelector } from "./LanguageSelector";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { API_URL } from "@/lib/config";

export function AppSidebar() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const currentPath = window.location.pathname;
  const { logout } = useAuth();
  const { selectedShop, setSelectedShop, stores, setStores } = useShop();
  // Keep AI menu open when on any AI submenu page
  const aiMenuPaths = ['/ai-config', '/products', '/website-content', '/custom-content'];
  const [isAIMenuOpen, setIsAIMenuOpen] = useState(aiMenuPaths.includes(currentPath));

  // Update AI menu state when path changes
  useEffect(() => {
    setIsAIMenuOpen(aiMenuPaths.includes(currentPath));
  }, [currentPath]);

  // Fetch stores on component mount
  useEffect(() => {
    const fetchStores = async () => {
      try {
        const sessionData = localStorage.getItem('session_data');
        if (!sessionData) return;

        const session = JSON.parse(sessionData);
        const response = await fetch(`${API_URL}/api/stores`, {
          headers: {
            'Authorization': `Bearer ${session.session.access_token}`,
          }
        });

        if (response.ok) {
          const data = await response.json();
          setStores(data.stores || []);
        }
      } catch (error) {
        console.error('Error fetching stores:', error);
      }
    };

    fetchStores();
  }, [setStores]);

  const menuItems = [
    {
      title: t('sidebar.dashboard'),
      icon: LayoutDashboard,
      url: "/dashboard",
      active: false,
    },
    {
      title: t('sidebar.calls'),
      icon: Phone,
      url: "/call-logs",
      active: false,
    },
    {
      title: t('sidebar.analytics'),
      icon: BarChart3,
      url: "/analytics",
      active: false,
    },
    {
      title: t('sidebar.webshops'),
      icon: Layers3,
      url: "/webshops",
      active: false,
    },
    {
      title: t('sidebar.phoneNumbers'),
      icon: PhoneCall,
      url: "/phone-numbers",
      active: false,
    },
  ];

  const configItems = [
    {
      title: "Billing & Plan",
      icon: CreditCard,
      url: "/billing",
    },
  ];

  const handleShopChange = (shopId: string) => {
    const shop = stores.find(s => s.id === shopId);
    if (shop) {
      setSelectedShop(shop);

      // Update URL query parameter if the current page uses the shop parameter
      if (searchParams.has('shop')) {
        const newSearchParams = new URLSearchParams(searchParams);
        newSearchParams.set('shop', shopId);
        setSearchParams(newSearchParams);
      }
    }
  };

  return (
    <Sidebar className="border-r border-slate-700/50 bg-slate-900 text-white">
      <SidebarHeader className="p-4 bg-slate-900 space-y-4">
        <div className="flex items-center gap-3">
          <img src="/uploads/e0ddbf09-622c-426a-851f-149776e300c0.png" alt="ShopCall.ai" className="w-8 h-8" />
          <span className="text-xl font-bold text-white">ShopCall.ai</span>
        </div>

        {/* Shop Selector */}
        {stores.length > 0 && (
          <div className="pt-2">
            <div className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2 px-1">
              {t('sidebar.activeShop') || 'Active Shop'}
            </div>
            <Select value={selectedShop?.id || ''} onValueChange={handleShopChange}>
              <SelectTrigger className="bg-slate-800 border-slate-600 text-white hover:bg-slate-700">
                <div className="flex items-center gap-2 overflow-hidden">
                  <Store className="w-4 h-4 text-cyan-400 flex-shrink-0" />
                  <SelectValue placeholder="Select shop" />
                </div>
              </SelectTrigger>
              <SelectContent className="bg-slate-800 border-slate-600">
                {stores.map((store) => (
                  <SelectItem key={store.id} value={store.id} className="text-white hover:bg-slate-700">
                    <div className="flex flex-col items-start">
                      <div className="font-medium">{store.store_name || 'Unnamed Store'}</div>
                      <div className="text-xs text-slate-400 capitalize">{store.platform_name}</div>
                    </div>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
        )}
      </SidebarHeader>

      <SidebarContent className="px-3 bg-slate-900">
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuItems.map((item) => {
                const isActive = currentPath === item.url;
                return (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      asChild
                      className={`w-full justify-start text-slate-300 hover:text-white hover:bg-slate-800/50 ${
                        isActive ? 'bg-cyan-500 text-white hover:bg-cyan-600' : ''
                      }`}
                    >
                      <a onClick={() => {navigate(item.url)}} className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer">
                        <item.icon className="w-4 h-4" />
                        <span>{item.title}</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        {/* AI Assistant Section */}
        <SidebarGroup className="mt-4">
          <div className="px-3 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">
            {t('sidebar.aiAssistant')}
          </div>
          <SidebarGroupContent>
            <SidebarMenu>
              <Collapsible open={isAIMenuOpen} onOpenChange={setIsAIMenuOpen}>
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton className="w-full justify-start text-slate-300 hover:text-white hover:bg-slate-800/50">
                      <div className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer w-full">
                        <Brain className="w-4 h-4" />
                        <span className="flex-1">{t('sidebar.aiMenu')}</span>
                        <ChevronDown className={`w-4 h-4 transition-transform ${isAIMenuOpen ? 'rotate-180' : ''}`} />
                      </div>
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      <SidebarMenuSubItem>
                        <SidebarMenuSubButton
                          asChild
                          className={`text-slate-300 hover:text-white hover:bg-slate-800/50 ${
                            currentPath === '/ai-config' ? 'bg-cyan-500/20 text-cyan-400' : ''
                          }`}
                        >
                          <a onClick={() => navigate('/ai-config')} className="flex items-center gap-2 cursor-pointer">
                            <Settings className="w-3 h-3" />
                            <span>{t('sidebar.configuration')}</span>
                          </a>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                      <SidebarMenuSubItem>
                        <SidebarMenuSubButton
                          asChild
                          className={`text-slate-300 hover:text-white hover:bg-slate-800/50 ${
                            currentPath === '/products' ? 'bg-cyan-500/20 text-cyan-400' : ''
                          }`}
                        >
                          <a
                            onClick={() => {
                              if (selectedShop) {
                                navigate(`/products?shop=${selectedShop.id}`);
                              } else {
                                navigate('/products');
                              }
                            }}
                            className="flex items-center gap-2 cursor-pointer"
                          >
                            <Package className="w-3 h-3" />
                            <span>{t('sidebar.products')}</span>
                          </a>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                      <SidebarMenuSubItem>
                        <SidebarMenuSubButton
                          asChild
                          className={`text-slate-300 hover:text-white hover:bg-slate-800/50 ${
                            currentPath === '/website-content' ? 'bg-cyan-500/20 text-cyan-400' : ''
                          }`}
                        >
                          <a
                            onClick={() => {
                              if (selectedShop) {
                                navigate(`/website-content?shop=${selectedShop.id}`);
                              } else {
                                navigate('/website-content');
                              }
                            }}
                            className="flex items-center gap-2 cursor-pointer"
                          >
                            <Globe className="w-3 h-3" />
                            <span>{t('sidebar.websiteContent')}</span>
                          </a>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                      <SidebarMenuSubItem>
                        <SidebarMenuSubButton
                          asChild
                          className={`text-slate-300 hover:text-white hover:bg-slate-800/50 ${
                            currentPath === '/custom-content' ? 'bg-cyan-500/20 text-cyan-400' : ''
                          }`}
                        >
                          <a
                            onClick={() => {
                              if (selectedShop) {
                                navigate(`/custom-content?shop=${selectedShop.id}`);
                              } else {
                                navigate('/custom-content');
                              }
                            }}
                            className="flex items-center gap-2 cursor-pointer"
                          >
                            <FileText className="w-3 h-3" />
                            <span>{t('sidebar.customContent')}</span>
                          </a>
                        </SidebarMenuSubButton>
                      </SidebarMenuSubItem>
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup className="mt-4">
          <div className="px-3 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">
            {t('sidebar.configuration')}
          </div>
          <SidebarGroupContent>
            <SidebarMenu>
              {configItems.map((item) => {
                const isActive = currentPath === item.url;
                return (
                  <SidebarMenuItem key={item.title}>
                    <SidebarMenuButton
                      asChild
                      className={`w-full justify-start text-slate-300 hover:text-white hover:bg-slate-800/50 ${
                        isActive ? 'bg-cyan-500 text-white hover:bg-cyan-600' : ''
                      }`}
                    >
                      <a onClick={() => {navigate(item.url)}} className="flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer">
                        <item.icon className="w-4 h-4" />
                        <span>{item.title}</span>
                      </a>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                );
              })}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="p-6 bg-slate-900">
        <div className="flex flex-col gap-2">
          <div className="flex justify-center mb-2">
            <LanguageSelector />
          </div>
          <div className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg">
            <Settings className="w-4 h-4 text-slate-400" />
            <span className="text-sm text-slate-300">{t('sidebar.settings')}</span>
          </div>
          <button
            onClick={logout}
            className="flex items-center gap-3 p-3 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors cursor-pointer"
          >
            <LogOut className="w-4 h-4 text-slate-400" />
            <span className="text-sm text-slate-300">{t('sidebar.logout')}</span>
          </button>
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}
