"use client";

import { useEffect, useState } from "react";
import {
  Calendar,
  MessageSquare,
  BotIcon as Robot,
  PenTool,
  Bell,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { Sidebar } from "./sidebar";
import { useSession } from "next-auth/react";

export function MainNav() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const { data: session } = useSession();

  console.log(session);

  return (
    <>
      <div className='flex items-center justify-between p-4 bg-black'>
        <div className='flex items-center space-x-4'>
          <button
            className='text-white/80 hover:text-white'
            onClick={() => setIsSidebarOpen(true)}
          >
            <span className='sr-only'>Toggle menu</span>
            <svg
              xmlns='http://www.w3.org/2000/svg'
              width='24'
              height='24'
              viewBox='0 0 24 24'
              fill='none'
              stroke='currentColor'
              strokeWidth='2'
              strokeLinecap='round'
              strokeLinejoin='round'
            >
              <line x1='3' y1='12' x2='21' y2='12'></line>
              <line x1='3' y1='6' x2='21' y2='6'></line>
              <line x1='3' y1='18' x2='21' y2='18'></line>
            </svg>
          </button>
          <Link href='/'>
            <Image
              src='https://hebbkx1anhila5yf.public.blob.vercel-storage.com/enkun-4TNAp6sm9vEQNPg8XpLlizNyWW3jPD.svg'
              alt='Logo'
              width={32}
              height={32}
              className='text-white'
            />
          </Link>
          <Link href='/calendar' className='text-white/80 hover:text-white'>
            <Calendar className='w-6 h-6' />
          </Link>
          <Link href='/messages' className='text-white/80 hover:text-white'>
            <MessageSquare className='w-6 h-6' />
          </Link>
          <Link href='/ai-assistant' className='text-white/80 hover:text-white'>
            <Robot className='w-6 h-6' />
          </Link>
          <Link href='/design' className='text-white/80 hover:text-white'>
            <PenTool className='w-6 h-6' />
          </Link>
          <Link
            href='/notifications'
            className='text-white/80 hover:text-white'
          >
            <Bell className='w-6 h-6' />
          </Link>
        </div>
        {session ? (
          <div className='flex items-center space-x-4'>
            <div className='cursor-pointer text-white/80 hover:text-white'>
              <span>
                {session.user.first_name} {session.user.last_name} -{" "}
                {session.user.role.includes("admin") ? "Admin" : ""}
                {session.user.role.includes("TEACHERS") ? "Teacher" : ""}
                {session.user.role.includes("STUDENTS") ? "Student" : ""}
              </span>
            </div>
            <div className='cursor-pointer text-white/80 hover:text-white'>
              <Link href='/api/auth/signout'>Logout</Link>
            </div>
          </div>
        ) : (
          <div className='cursor-pointer text-white/80 hover:text-white'>
            <Link href='/api/auth/signin'>Login</Link>
          </div>
        )}
      </div>
      <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
    </>
  );
}