"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,
} 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 } = useSession();
  const router = useRouter();
  const pathname = usePathname();

  // Function to check if user has a specific role
  const hasRole = (requiredRole: string | string[]) => {
    console.log('=== Role Check Debug ===');
    console.log('Session:', session);
    console.log('User:', session?.user);
    console.log('User roles:', session?.user?.role);
    const userRoles = Array.isArray(session?.user?.role) ? session.user.role : [session?.user?.role];
    console.log('Processed user roles:', userRoles);
    console.log('Required role:', requiredRole);
    
    if (!session?.user?.role) {
      console.log('No user roles found');
      return false;
    }

    if (Array.isArray(requiredRole)) {
      const hasRequiredRole = userRoles.some(role => {
        const cleanRole = role.replace('ROLE_', '');
        const hasRole = requiredRole.includes(cleanRole) || cleanRole === 'Admin';
        console.log(`Checking role ${cleanRole} against required roles:`, hasRole);
        return hasRole;
      });
      console.log('Has any required role:', hasRequiredRole);
      return hasRequiredRole;
    }
    
    const hasRequiredRole = userRoles.some(role => {
      const cleanRole = role.replace('ROLE_', '');
      const hasRole = cleanRole === requiredRole || cleanRole === 'Admin';
      console.log(`Checking role ${cleanRole} against required role ${requiredRole}:`, hasRole);
      return hasRole;
    });
    console.log('Has required role:', hasRequiredRole);
    return hasRequiredRole;
  };

  // Base menu items (available for everyone)
  const baseMenuItems: MenuItem[] = [
    {
      title: "Courrier",
      icon: Mail,
      href: "/courrier",
    },
    {
      title: "Drive",
      icon: HardDrive,
      href: "/drive",
      iframe: process.env.NEXT_PUBLIC_IFRAME_DRIVE_URL,
    },
    {
      title: "Learn",
      icon: GraduationCap,
      href: "/learn",
      iframe: process.env.NEXT_PUBLIC_IFRAME_LEARN_URL,
    },
    {
      title: "Parole",
      icon: MessageSquare,
      href: "/parole",
      iframe: process.env.NEXT_PUBLIC_IFRAME_PAROLE_URL,
    },
    {
      title: "MissionsBoard",
      icon: Kanban,
      href: "/missions-board",
      iframe: process.env.NEXT_PUBLIC_IFRAME_MISSIONSBOARD_URL,
    },
    {
      title: "Chapter",
      icon: FileText,
      href: "/chapter",
      iframe: process.env.NEXT_PUBLIC_IFRAME_CHAPTER_URL,
    },
    {
      title: "Agility",
      icon: Share2,
      href: "/flow",
      iframe: process.env.NEXT_PUBLIC_IFRAME_AGILITY_URL,
    },
    {
      title: "Calendrier",
      icon: Calendar,
      href: "/calendar",
      iframe: process.env.NEXT_PUBLIC_IFRAME_CALENDAR_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: "Calculation",
      icon: Calculator,
      href: "/calculation",
      iframe: process.env.NEXT_PUBLIC_IFRAME_CALCULATION_URL,
      requiredRole: "DataIntelligence",
    },
    {
      title: "Mediations",
      icon: Building2,
      href: "/crm",
      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={100}
              height={33}
              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>
    </>
  );
}