"use client";
import Link from 'next/link';
import Image from 'next/image';
import { signOut } from "next-auth/react";
import { usePathname } from 'next/navigation';

interface NavBarProps {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
  user: any;
}

const NavBar: React.FC<NavBarProps> = ({ isOpen, setIsOpen, user }) => {
  const pathname = usePathname();
  return (
    <nav onClick={(e) => e.stopPropagation()} className={`
      transition-all duration-300 max-lg:transition-none
      ${isOpen ? 'left-[0px]' : 'left-[-300px]'}
      absolute
      z-10
      bg-white 
      text-black 
      p-4
      h-[100dvh]
      overflow-y-auto
      flex-col
      flex
      justify-between
      opacity-95

      lg:z-0
      lg:left-0
      lg:relative
      lg:flex
      lg:flex-col
      lg:min-w-[300px] 
      lg:basis-[300px] 
      lg:shirink-0 
      lg:ml-5 sm:mr-5`}
      style={{ paddingBottom: 'max(env(safe-area-inset-bottom), 1rem)' }}
    >
        <div className="flex-0 hidden lg:block">
          <Link href="/">
            <div className="flex items-center justify-center gap-1 mb-5 p-2 cursor-pointer">
              <Image src="/falogo2.png" alt="logo" width={64} height={64} />
              {/* <svg width="32" height="20" viewBox="0 0 32 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 13.7815C0 11.1485 1.5051 9.48685 3.07055 8.61376C4.53165 7.7989 6.17151 7.56314 7.25262 7.56307H29.6288C30.9383 7.56309 32 8.65413 32 10C31.9999 11.3458 30.9383 12.4369 29.6288 12.4369H7.25262C6.70651 12.437 5.90554 12.5782 5.33295 12.8974C5.06963 13.0443 4.93117 13.1859 4.86171 13.2901C4.80809 13.3706 4.74246 13.5037 4.74246 13.7815C4.7425 14.0589 4.80813 14.1913 4.86171 14.2718C4.93111 14.376 5.06944 14.5175 5.33295 14.6644C5.90555 14.9838 6.70643 15.126 7.25262 15.1261H23.5259C24.8355 15.1261 25.8971 16.2172 25.8971 17.5631C25.8969 18.9088 24.8354 20 23.5259 20H7.25262C6.17151 19.9999 4.53165 19.763 3.07055 18.9481C1.50525 18.075 9.38884e-05 16.4143 0 13.7815ZM29.6288 0C30.9383 2.26081e-05 32 1.09107 32 2.43693C32 3.7828 30.9383 4.87385 29.6288 4.87387H14.5759C13.2664 4.87375 12.2046 3.78275 12.2046 2.43693C12.2046 1.09112 13.2664 0.000115545 14.5759 0H29.6288Z" fill="#F94B37" />
              </svg> */}
              <span className="text-black text-2xl font-bold">EVERFACTORY</span>
            </div>
          </Link>
        </div>
        <div className="flex-0">
          <ul>
            <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
              <Link href="/usr/1_dashboard" className={`flex items-center gap-3 p-2 rounded-lg ${pathname?.startsWith('/usr/1_dashboard') ? 'bg-[#FFF3F2] text-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.6758 3.6582C11.9147 3.44753 12.2806 3.44753 12.5195 3.6582L20.3936 10.5996C20.5258 10.7162 20.5976 10.8801 20.5977 11.0479V19.8945C20.5974 20.2155 20.3307 20.5 19.9717 20.5H4.22363C3.86456 20.5 3.59787 20.2155 3.59766 19.8945V11.0479C3.59768 10.8801 3.66953 10.7162 3.80176 10.5996L11.6758 3.6582Z" strokeWidth="2.2" className={`group-hover:stroke-primary-normal ${pathname?.startsWith('/usr/1_dashboard') ? 'stroke-primary-normal' : 'stroke-black'}`} />
                </svg>
                <span>대시보드</span>
              </Link>
            </li>
            <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
              <Link href="/usr/2_mychannel" className={`flex items-center gap-2 p-2 rounded-lg group-hover:text-primary-normal ${pathname?.startsWith('/usr/2_mychannel') ? 'bg-[#FFF3F2] text-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fillRule="evenodd" clipRule="evenodd" d="M19.3419 4.18083C19.2127 4.12797 19.0743 4.10137 18.9347 4.10258C18.7951 4.1038 18.6572 4.1328 18.5289 4.18789C18.4007 4.24299 18.2847 4.32308 18.1877 4.42348L18.1749 4.43652L9.45656 13.1548V14.6411H10.9428L19.6611 5.92279L19.6742 5.90998C19.7746 5.813 19.8547 5.697 19.9098 5.56874C19.9649 5.44049 19.9939 5.30254 19.9951 5.16295C19.9963 5.02337 19.9697 4.88494 19.9168 4.75573C19.864 4.62654 19.7859 4.50916 19.6872 4.41045C19.5885 4.31175 19.4711 4.23369 19.3419 4.18083ZM18.9164 2.00012C19.3352 1.99648 19.7505 2.07628 20.1381 2.23485C20.5257 2.39343 20.8778 2.62761 21.1739 2.92373C21.47 3.21985 21.7042 3.57198 21.8628 3.95957C22.0214 4.34716 22.1012 4.76246 22.0975 5.18122C22.0939 5.59998 22.0069 6.01383 21.8416 6.3986C21.6777 6.78029 21.4399 7.12579 21.1421 7.41528L12.1216 16.4357C11.9245 16.6329 11.6571 16.7436 11.3783 16.7436H8.40529C7.82469 16.7436 7.35402 16.273 7.35402 15.6924V12.7194C7.35402 12.4406 7.46477 12.1732 7.66193 11.976L16.6823 2.95559C16.9718 2.65776 17.3174 2.42001 17.6991 2.25605C18.0838 2.09076 18.4977 2.00376 18.9164 2.00012ZM3.02139 5.05211C3.61284 4.46066 4.41503 4.12838 5.25147 4.12838H10.5078C11.0884 4.12838 11.5591 4.59905 11.5591 5.17965C11.5591 5.76025 11.0884 6.23092 10.5078 6.23092H5.25147C4.97266 6.23092 4.70526 6.34168 4.50811 6.53883C4.31096 6.73599 4.2002 7.00338 4.2002 7.2822V18.8462C4.2002 19.125 4.31096 19.3924 4.50811 19.5895C4.70526 19.7867 4.97266 19.8975 5.25147 19.8975H16.8155C17.0943 19.8975 17.3617 19.7867 17.5588 19.5895C17.756 19.3924 17.8667 19.125 17.8667 18.8462V13.5898C17.8667 13.0092 18.3374 12.5386 18.918 12.5386C19.4986 12.5386 19.9693 13.0092 19.9693 13.5898V18.8462C19.9693 19.6826 19.637 20.4848 19.0455 21.0763C18.4541 21.6677 17.6519 22 16.8155 22H5.25147C4.41503 22 3.61284 21.6677 3.02139 21.0763C2.42993 20.4848 2.09766 19.6826 2.09766 18.8462V7.2822C2.09766 6.44575 2.42993 5.64357 3.02139 5.05211Z" className={`stroke-none ${pathname?.startsWith('/usr/2_mychannel') ? 'fill-primary-normal' : 'fill-black'} group-hover:fill-primary-normal`}/>
                </svg>
                <span>마이채널관리</span>
              </Link>
            </li>
            {false && user?.email === 'wsx204@naver.com' && (<li></li>)}
            {/* <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
              <Link href="/usr/3_jsmanage" className="flex items-center gap-2 p-2 group-hover:text-primary-normal" onClick={() => setIsOpen(false)}>
                <div className="w-[25px] h-[24px]">
                  <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fillRule="evenodd" clipRule="evenodd" d="M2.09766 3.05263C2.09766 2.47128 2.54537 2 3.09766 2H21.0977C21.6499 2 22.0977 2.47128 22.0977 3.05263C22.0977 3.63398 21.6499 4.10526 21.0977 4.10526V15.6842C21.0977 16.2426 20.8869 16.778 20.5119 17.1729C20.1368 17.5677 19.6281 17.7895 19.0977 17.7895H14.5119L16.8048 20.203C17.1953 20.6141 17.1953 21.2806 16.8048 21.6917C16.4142 22.1028 15.7811 22.1028 15.3905 21.6917L12.0977 18.2255L8.80476 21.6917C8.41424 22.1028 7.78107 22.1028 7.39055 21.6917C7.00003 21.2806 7.00003 20.6141 7.39055 20.203L9.68344 17.7895H5.09766C4.56722 17.7895 4.05852 17.5677 3.68344 17.1729C3.30837 16.778 3.09766 16.2426 3.09766 15.6842V4.10526C2.54537 4.10526 2.09766 3.63398 2.09766 3.05263ZM5.09766 4.10526V15.6842H12.097C12.0974 15.6842 12.0979 15.6842 12.0983 15.6842H19.0977V4.10526H5.09766ZM16.0977 6.21053C16.6499 6.21053 17.0977 6.68181 17.0977 7.26316V12.5263C17.0977 13.1077 16.6499 13.5789 16.0977 13.5789C15.5454 13.5789 15.0977 13.1077 15.0977 12.5263V7.26316C15.0977 6.68181 15.5454 6.21053 16.0977 6.21053ZM12.0977 8.31579C12.6499 8.31579 13.0977 8.78707 13.0977 9.36842V12.5263C13.0977 13.1077 12.6499 13.5789 12.0977 13.5789C11.5454 13.5789 11.0977 13.1077 11.0977 12.5263V9.36842C11.0977 8.78707 11.5454 8.31579 12.0977 8.31579ZM8.09766 10.4211C8.64994 10.4211 9.09766 10.8923 9.09766 11.4737V12.5263C9.09766 13.1077 8.64994 13.5789 8.09766 13.5789C7.54537 13.5789 7.09766 13.1077 7.09766 12.5263V11.4737C7.09766 10.8923 7.54537 10.4211 8.09766 10.4211Z" className="stroke-none group-hover:fill-primary-normal fill-black" />
                  </svg>
                </div>

                <span>정산관리</span>
              </Link>
            </li> */}
            <li className="mb-3 p-2 sidebar-menu-hover text-black text-xl font-bold group">
              <Link href="/usr/4_noticeboard" className={`flex items-center gap-2 p-2 rounded-lg group-hover:text-primary-normal ${pathname?.startsWith('/usr/4_noticeboard') ? 'bg-[#FFF3F2] text-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <div className="w-[25px] h-[24px] flex items-center justify-center">
                  <svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fillRule="evenodd" clipRule="evenodd" d="M0.446617 1.42007C1.79696 0.522928 3.58036 0 5.5 0C7.16769 0 8.73257 0.394673 10 1.08651C11.2674 0.394673 12.8323 0 14.5 0C16.4207 0 18.2031 0.522959 19.5534 1.42007C19.8323 1.60541 20 1.91809 20 2.253V15.253C20 15.6215 19.7973 15.9602 19.4726 16.1343C19.1478 16.3084 18.7536 16.2899 18.4466 16.0859C17.4609 15.431 16.0733 15 14.5 15C12.9276 15 11.539 15.4311 10.5534 16.0859C10.2181 16.3087 9.78191 16.3087 9.44662 16.0859C8.46096 15.4311 7.07236 15 5.5 15C3.92764 15 2.53904 15.4311 1.55338 16.0859C1.24644 16.2899 0.852214 16.3084 0.527445 16.1343C0.202675 15.9602 0 15.6215 0 15.253V2.253C0 1.91809 0.167658 1.60541 0.446617 1.42007ZM9 2.81949C8.06033 2.31667 6.84766 2 5.5 2C4.15234 2 2.93967 2.31667 2 2.81949V13.6261C3.0538 13.2225 4.24792 13 5.5 13C6.75208 13 7.9462 13.2225 9 13.6261V2.81949ZM11 13.6261C12.0538 13.2225 13.2479 13 14.5 13C15.7527 13 16.9465 13.2224 18 13.626V2.81947C17.0605 2.31664 15.8485 2 14.5 2C13.1523 2 11.9397 2.31667 11 2.81949V13.6261Z" className={`stroke-none ${pathname?.startsWith('/usr/4_noticeboard') ? 'fill-primary-normal' : 'fill-black'} group-hover:fill-primary-normal`} />
                  </svg>
                </div>
                <span>공지 게시판</span>
              </Link>
            </li>
          </ul>
        </div>
        <div className="flex-1 flex flex-col justify-end mb-10">
          {user?.email === 'wsx204@naver.com' && (
            <div className="mb-4">
              <Link href="/admin" className={`flex items-center gap-2 p-2 border-1 border-[#e6e9ef] rounded-lg hover:bg-[#F0F0F0] ${pathname?.startsWith('/admin') ? 'bg-[#FFF3F2] text-primary-normal border-primary-normal' : ''}`} onClick={() => setIsOpen(false)}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M12 2L15 8L22 9L17 14L18 21L12 18L6 21L7 14L2 9L9 8L12 2Z" className={`${pathname?.startsWith('/admin') ? 'fill-primary-normal' : 'fill-black'} stroke-none`}/>
                </svg>
                <span className="text-lg font-bold">관리자</span>
              </Link>
            </div>
          )}
          <div className="grid grid-cols-[5px_44px_1fr_5px] grid-rows-[24px_20px_auto] gap-0.5">
            <div className="col-[1/1] row-[1/3]"></div>

            <div className="row-[1/3] h-[44px] flex items-center justify-center">
             <Image src={user.image} alt="account" width={44} height={44} className="rounded-full" />
            </div>

            <div className="font-bold pl-2">{user.name}</div>

            <div className=" flex flex-row justify-between pointer text-sm cursor-pointer rounded-sm pl-1">
              <span className="text-sm text-[#848484] pl-1.5">
                {user.email}
              </span>
              {/* <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 15L12.5 10L7.5 5" stroke="#848484" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg> */}
            </div>

            <div className="row-[1/3] col-[4/4] "></div>

            <div className="h-[5px] col-[2/4]"></div>
            <div className="border-1 border-[#D5D5D5] col-[1/5] h-[54px] rounded-lg flex content-center items-center justify-center cursor-pointer hover:bg-[#F0F0F0] group" onClick={() => signOut({callbackUrl: "/"})}>
              <svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.14062 12.6406L1.50005 6.99999L7.14063 1.35941" className="stroke-[#848484] group-hover:stroke-black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M1.50006 7L13.5 7" className="stroke-[#848484] group-hover:stroke-[#000000] " strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M1 1V13" className="stroke-[#848484] group-hover:stroke-black" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <span className="text-md font-bold text-[#848484] group-hover:text-black">로그아웃</span>
            </div>
          </div>
        </div>
      </nav>

  );
};

export default NavBar;