Neah/components/sidebar.tsx

"use client";

import type React from "react";
import { useState } from "react";

import { cn } from "@/lib/utils";
import {
  Share2,
  Palette,
  GitFork,
  Building2,
  Calendar,
  Target,
  Mail,
  HardDrive,
  GraduationCap,
  MessageSquare,
  FileText,
  Calculator,
  Kanban,
  ChevronLeft,
  ChevronRight,
  BookOpen,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useRouter, usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { useSession } from "next-auth/react";
import { CalendarNav } from "@/components/sidebar/calendar-nav";

interface SidebarProps {
  isOpen: boolean;
  onClose: () => void;
}

interface MenuItem {
  title: string;
  icon: any;
  href: string;
  iframe?: string;
  external?: boolean;
  requiredRole?: string | string[];
}

export function Sidebar({ isOpen, onClose }: SidebarProps) {
  const { data: session, status } = useSession();
  const router = useRouter();
  const pathname = usePathname();

  // Debug session data
  console.log('Session state:', {
    status,
    hasSession: !!session,
    user: session?.user,
    roles: session?.user?.role,
    rawRoles: session?.user?.role,
    pathname
  });

  // Show loading state while session is being checked
  if (status === 'loading') {
    return null;
  }

  // Show nothing if not authenticated (middleware will handle redirect)
  if (status === 'unauthenticated') {
    return null;
  }

  // Function to check if user has a specific role
  const hasRole = (requiredRole: string | string[] | undefined) => {
    if (!requiredRole || !session?.user?.role) {
      console.log('No required role or user roles found', {
        requiredRole,
        userRoles: session?.user?.role
      });
      return false;
    }
    
    const userRoles = Array.isArray(session.user.role) ? session.user.role : [session.user.role];
    const cleanUserRoles = userRoles.map(role => role.toLowerCase());
    
    console.log('Debug roles:', {
      rawUserRoles: session.user.role,
      processedUserRoles: cleanUserRoles,
      requiredRole,
      pathname
    });
    
    // If requiredRole is an array, check if user has any of the roles
    if (Array.isArray(requiredRole)) {
      const cleanRequiredRoles = requiredRole.map(role => role.toLowerCase());
      console.log('Checking multiple roles:', {
        requiredRoles: requiredRole,
        cleanRequiredRoles,
        userRoles: cleanUserRoles,
        hasAnyRole: cleanRequiredRoles.some(role => cleanUserRoles.includes(role)),
        matchingRoles: cleanRequiredRoles.filter(role => cleanUserRoles.includes(role))
      });
      return cleanRequiredRoles.some(role => cleanUserRoles.includes(role));
    }
    
    // For single role requirement
    const cleanRequiredRole = requiredRole.toLowerCase();
    console.log('Checking single role:', {
      requiredRole,
      cleanRequiredRole,
      userRoles: cleanUserRoles,
      hasRole: cleanUserRoles.includes(cleanRequiredRole)
    });
    return cleanUserRoles.includes(cleanRequiredRole);
  };

  // Base menu items (available for everyone)
  const baseMenuItems: MenuItem[] = [
    {
      title: "Pages",
      icon: BookOpen,
      href: "/pages",
      iframe: process.env.NEXT_PUBLIC_IFRAME_CARNET_URL,
    },
    {
      title: "Courrier",
      icon: Mail,
      href: "/courrier",
    },
    {
      title: "Dossiers",
      icon: HardDrive,
      href: "/dossiers",
      iframe: process.env.NEXT_PUBLIC_IFRAME_DRIVE_URL,
    },
    {
      title: "Apprendre",
      icon: GraduationCap,
      href: "/apprendre",
      iframe: process.env.NEXT_PUBLIC_IFRAME_LEARN_URL,
    },
    {
      title: "Parole",
      icon: MessageSquare,
      href: "/parole",
      iframe: process.env.NEXT_PUBLIC_IFRAME_PAROLE_URL,
    },
    {
      title: "Missions",
      icon: Kanban,
      href: "/missions",
      iframe: process.env.NEXT_PUBLIC_IFRAME_MISSIONSBOARD_URL,
    },
    {
      title: "Chapitre",
      icon: FileText,
      href: "/chapitre",
      iframe: process.env.NEXT_PUBLIC_IFRAME_CHAPTER_URL,
    },
    {
      title: "Agilité",
      icon: Share2,
      href: "/agilite",
      iframe: process.env.NEXT_PUBLIC_IFRAME_AGILITY_URL,
    },
  ];

  // Role-specific menu items
  const roleSpecificItems: MenuItem[] = [
    {
      title: "Artlab",
      icon: Palette,
      href: "/design",
      iframe: process.env.NEXT_PUBLIC_IFRAME_ARTLAB_URL,
      requiredRole: "Expression",
    },
    {
      title: "Gite",
      icon: GitFork,
      href: "/gite",
      iframe: process.env.NEXT_PUBLIC_IFRAME_GITE_URL,
      requiredRole: ["Coding", "DataIntelligence"],
    },
    {
      title: "Calcul",
      icon: Calculator,
      href: "/calcul",
      iframe: process.env.NEXT_PUBLIC_IFRAME_CALCULATION_URL,
      requiredRole: "DataIntelligence",
    },
    {
      title: "Médiation",
      icon: Building2,
      href: "/mediation",
      iframe: process.env.NEXT_PUBLIC_IFRAME_MEDIATIONS_URL,
      requiredRole: ["Mediation", "Expression"],
    },
  ];

  // Combine base items with role-specific items based on user roles
  const visibleMenuItems = [
    ...baseMenuItems,
    ...roleSpecificItems.filter(item => hasRole(item.requiredRole))
  ];

  const handleNavigation = (href: string, external?: boolean) => {
    if (external && href) {
      window.open(href, "_blank");
    } else {
      router.push(href);
    }
    onClose();
  };

  return (
    <>
      {/* Backdrop */}
      {isOpen && (
        <div
          className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm"
          onClick={onClose}
        />
      )}

      {/* Sidebar */}
      <div
        className={cn(
          "fixed top-0 left-0 z-50 h-full w-64 transform bg-panel transition-all duration-200 ease-in-out",
          isOpen ? "translate-x-0" : "-translate-x-full"
        )}
      >
        <ScrollArea className="h-full w-full relative">
          {/* Hide Button */}
          <button
            onClick={onClose}
            className="absolute -right-3 top-1/2 transform -translate-y-1/2 w-6 h-12 bg-black text-white rounded-r-md flex items-center justify-center hover:bg-gray-800 transition-colors z-[60]"
          >
            <ChevronLeft className="h-4 w-4" />
          </button>

          {/* Logo */}
          <div className="flex justify-center p-6 border-b">
            <Image
              src="/Neahv3 logo.png"
              alt="Neah Logo"
              width={50}
              height={16.5}
              className="text-black"
            />
          </div>

          {/* Menu Items */}
          <div className="space-y-1 p-4">
            {visibleMenuItems.map((item) => (
              <Button
                key={item.title}
                variant="ghost"
                className={cn(
                  "w-full justify-start gap-2 text-black hover:bg-gray-100",
                  pathname === item.href && !item.external && "bg-gray-100"
                )}
                onClick={() => handleNavigation(item.href, item.external)}
              >
                <item.icon className="h-5 w-5" />
                <span>{item.title}</span>
              </Button>
            ))}
          </div>
        </ScrollArea>
      </div>
    </>
  );
}