import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, Wand2, BarChart3, Video } from "lucide-react";
import { Link, useLocation } from "wouter";
import { useQuery, useMutation } from "@tanstack/react-query";
import { apiRequest, queryClient } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { useState, useEffect } from "react";

interface SidebarProps {
  onLinkClick?: () => void;
}

export default function Sidebar({ onLinkClick }: SidebarProps = {}) {
  const [location] = useLocation();
  const [, setLocation] = useLocation();
  const { toast } = useToast();
  const [isCollapsed, setIsCollapsed] = useState(() => {
    const saved = localStorage.getItem('sidebar-collapsed');
    return saved === 'true';
  });

  useEffect(() => {
    localStorage.setItem('sidebar-collapsed', String(isCollapsed));
  }, [isCollapsed]);

  const { data: session } = useQuery<{ id: string; username: string; role: string }>({
    queryKey: ["/api/auth/session"],
    retry: false,
  });

  const isAdmin = session?.role === "admin";

  const handleLinkClick = (href: string, e: React.MouseEvent) => {
    e.preventDefault();
    // Always close sidebar on mobile first
    if (onLinkClick) {
      onLinkClick();
    }
    // Navigate after a small delay to ensure state update completes
    setTimeout(() => {
      setLocation(href);
    }, 10);
  };

  const logoutMutation = useMutation({
    mutationFn: async () => {
      const res = await apiRequest("POST", "/api/auth/logout", {});
      return await res.json();
    },
    onSuccess: () => {
      queryClient.clear();
      setLocation("/login");
      toast({
        title: "Déconnecté",
        description: "Vous avez été déconnecté avec succès",
      });
    },
  });

  const navItems = [
    { icon: Home, label: "Tableau de bord", href: "/", badge: null },
    { icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null },
    { icon: Video, label: "Nouveau Reel", href: "/reel", badge: "New" },
    { icon: Calendar, label: "Calendrier", href: "/calendar", badge: null },
    { icon: Images, label: "Médiathèque", href: "/media", badge: null },
    { icon: Wand2, label: "Éditeur d'images", href: "/image-editor", badge: null },
    { icon: BarChart3, label: "Analytics", href: "/analytics", badge: "New" },
  ];

  const statsItems = [
    { icon: Clock, label: "Historique", href: "/history" },
  ];

  return (
    <aside className={`bg-sidebar border-r border-sidebar-border flex flex-col h-screen transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-72'}`}>
      {/* Logo & Brand */}
      <div className="p-6 border-b border-sidebar-border">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 gradient-primary rounded-xl flex items-center justify-center shadow-lg">
            <svg className="w-7 h-7 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
            </svg>
          </div>
          {!isCollapsed && (
            <div>
              <h1 className="text-xl font-bold gradient-text">Social Flow</h1>
              <p className="text-xs text-muted-foreground">Automatisation sociale</p>
            </div>
          )}
        </div>
      </div>

      {/* Navigation */}
      <nav className="flex-1 p-4 overflow-y-auto">
        <ul className="space-y-1">
          {navItems.map((item) => {
            const Icon = item.icon;
            const isActive = location === item.href;

            return (
              <li key={item.href} className="relative group">
                <a
                  href={item.href}
                  onClick={(e) => handleLinkClick(item.href, e)}
                  className={`
                    flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative cursor-pointer
                    ${isActive
                      ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                      : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                    }
                    ${isCollapsed ? 'justify-center' : ''}
                  `}
                  data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
                >
                  {isActive && (
                    <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
                  )}
                  <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
                  {!isCollapsed && (
                    <>
                      <span className="flex-1">{item.label}</span>
                      {item.badge && (
                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
                          {item.badge}
                        </span>
                      )}
                    </>
                  )}
                </a>
                {isCollapsed && (
                  <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                    {item.label}
                  </div>
                )}
              </li>
            );
          })}
        </ul>

        {/* Stats Section */}
        <div className="mt-8 pt-6 border-t border-sidebar-border">
          {!isCollapsed && (
            <p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
          )}
          <ul className="space-y-1">
            {statsItems.map((item) => {
              const Icon = item.icon;
              const isActive = location === item.href;

              return (
                <li key={item.href} className="relative group">
                  <a
                    href={item.href}
                    onClick={(e) => handleLinkClick(item.href, e)}
                    className={`
                      flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative cursor-pointer
                      ${isActive
                        ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                        : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                      }
                      ${isCollapsed ? 'justify-center' : ''}
                    `}
                    data-testid={`link-${item.label.toLowerCase()}`}
                  >
                    {isActive && (
                      <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
                    )}
                    <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
                    {!isCollapsed && <span>{item.label}</span>}
                  </a>
                  {isCollapsed && (
                    <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                      {item.label}
                    </div>
                  )}
                </li>
              );
            })}
          </ul>
        </div>
      </nav>

      {/* Admin & User Section */}
      <div className="p-4 border-t border-sidebar-border space-y-2">
        {isAdmin && (
          <>
            {!isCollapsed && (
              <div className="mb-2">
                <p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
              </div>
            )}
            <a
              href="/pages"
              onClick={(e) => handleLinkClick("/pages", e)}
              className={`
                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
                ${location === "/pages"
                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                }
                ${isCollapsed ? 'justify-center' : ''}
              `}
              data-testid="link-pages-gérées"
            >
              {location === "/pages" && (
                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
              )}
              <Users className="w-5 h-5" />
              {!isCollapsed && <span>Pages gérées</span>}
              {isCollapsed && (
                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                  Pages gérées
                </div>
              )}
            </a>
            <a
              href="/ai"
              onClick={(e) => handleLinkClick("/ai", e)}
              className={`
                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
                ${location === "/ai"
                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                }
                ${isCollapsed ? 'justify-center' : ''}
              `}
              data-testid="link-assistant-ia"
            >
              {location === "/ai" && (
                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
              )}
              <Bot className="w-5 h-5" />
              {!isCollapsed && <span>Assistant IA</span>}
              {isCollapsed && (
                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                  Assistant IA
                </div>
              )}
            </a>
            <a
              href="/users"
              onClick={(e) => handleLinkClick("/users", e)}
              className={`
                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
                ${location === "/users"
                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                }
                ${isCollapsed ? 'justify-center' : ''}
              `}
              data-testid="link-users"
            >
              {location === "/users" && (
                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
              )}
              <UserCog className="w-5 h-5" />
              {!isCollapsed && <span>Utilisateurs</span>}
              {isCollapsed && (
                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                  Utilisateurs
                </div>
              )}
            </a>
            <a
              href="/sql"
              onClick={(e) => handleLinkClick("/sql", e)}
              className={`
                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
                ${location === "/sql"
                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                }
                ${isCollapsed ? 'justify-center' : ''}
              `}
              data-testid="link-sql"
            >
              {location === "/sql" && (
                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
              )}
              <Database className="w-5 h-5" />
              {!isCollapsed && <span>SQL</span>}
              {isCollapsed && (
                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                  SQL
                </div>
              )}
            </a>
            <a
              href="/settings"
              onClick={(e) => handleLinkClick("/settings", e)}
              className={`
                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group cursor-pointer
                ${location === "/settings"
                  ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm'
                  : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                }
                ${isCollapsed ? 'justify-center' : ''}
              `}
              data-testid="link-settings"
            >
              {location === "/settings" && (
                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
              )}
              <Settings className="w-5 h-5" />
              {!isCollapsed && <span>Paramètres</span>}
              {isCollapsed && (
                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
                  Paramètres
                </div>
              )}
            </a>
          </>
        )}

        <div className="pt-2 relative group">
          <Button
            variant="ghost"
            className={`w-full text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl ${isCollapsed ? 'justify-center px-0' : 'justify-start'}`}
            onClick={() => logoutMutation.mutate()}
            disabled={logoutMutation.isPending}
            data-testid="button-logout"
          >
            <LogOut className={`w-5 h-5 ${isCollapsed ? '' : 'mr-3'}`} />
            {!isCollapsed && (logoutMutation.isPending ? "Déconnexion..." : "Déconnexion")}
          </Button>
          {isCollapsed && (
            <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 top-0">
              Déconnexion
            </div>
          )}
        </div>

        {/* User Profile Card */}
        {session && (
          <div className={`mt-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl ${isCollapsed ? 'p-2' : 'p-4'}`}>
            <div className={`flex items-center gap-3 ${isCollapsed ? 'justify-center' : ''}`}>
              <Avatar className="w-10 h-10 border-2 border-primary/20">
                <AvatarFallback className="gradient-primary text-white font-semibold">
                  {session.username.substring(0, 2).toUpperCase()}
                </AvatarFallback>
              </Avatar>
              {!isCollapsed && (
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-semibold truncate">{session.username}</p>
                  <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
                </div>
              )}
            </div>
          </div>
        )}

        {/* Toggle Button (Desktop only) */}
        <button
          onClick={() => setIsCollapsed(!isCollapsed)}
          className="mt-2 w-full hidden lg:flex items-center justify-center p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 border-2 border-border hover:border-primary/50 rounded-xl transition-all"
          data-testid="button-toggle-sidebar"
        >
          {isCollapsed ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
        </button>
      </div>
    </aside>
  );
}