"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, 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,
    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');
      return false;
    }
    
    const userRoles = Array.isArray(session.user.role) ? session.user.role : [session.user.role];
    console.log('Raw user roles:', userRoles);
    
    // Clean up user roles by removing prefixes and converting to lowercase for comparison
    const cleanUserRoles = userRoles.map(role => 
      role.replace(/^[\/]/, '').toLowerCase()
    );
    console.log('Clean user roles:', cleanUserRoles);
    
    // 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,
        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,
      hasRole: cleanUserRoles.includes(cleanRequiredRole)
    });
    return cleanUserRoles.includes(cleanRequiredRole);
  };

  // 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>
    </>
  );
}