'use client'

import { Button } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { History, Home, LogOut, Search, Settings } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { useState } from 'react'
import { CommandMenu } from './Searcher'

export default function LayoutWrapper ({
  children
}: {
  children: React.ReactNode
}) {
  const [open, setOpen] = useState<boolean>(false)
  const pathname = usePathname()

  async function signOut () {
    try {
      const response = await fetch('/api/auth/logout', { method: 'POST' })
      if (response.ok) {
        console.log('Logged out successfully')
        window.location.href = '/access'
      } else {
        console.error('Failed to log out')
      }
    } catch (error) {
      console.error('Error logging out:', error)
    }
  }

  return (
    //   <>
    //     <div className='flex flex-col md:!flex-row !h-full !min-h-screen overflow-auto'>
    //       <div className='px-4 py-6 md:!p-0 w-full md:!w-[66px] md:border-r flex-row md:!flex-col flex items-center justify-between md:!justify-center'>
    //         <div className='flex items-center justify-center md:!h-[52px] w-fit md:!w-full '>
    //           <svg
    //             width='24'
    //             height='24'
    //             viewBox='0 0 1000 1000'
    //             fill='none'
    //             xmlns='http://www.w3.org/2000/svg'
    //             className='w-6 h-6'
    //           >
    //             <path
    //               d='M500.268 179.189L726.13 665.598L499.732 820.811L273.594 665.221L500.268 179.189Z'
    //               stroke='white'
    //               strokeWidth={89}
    //             />
    //           </svg>
    //         </div>
    //         <div className='hidden md:block shrink-0 bg-border h-[1px] w-full'></div>
    //         <div className='flex flex-row md:flex-col justify-between h-full md:!py-5 gap-4'>
    //           <div className='flex flex-row md:!flex-col h-full  items-center gap-4'>
    //             <Button
    //               variant={'outline'}
    //               className='p-2'
    //               onClick={() => setOpen(true)}
    //             >
    //               <Search />
    //             </Button>
    //             <Link
    //               href='/dashboard'
    //               className={cn(
    //                 pathname === '/dashboard' ? 'bg-muted' : '',
    //                 'flex items-center justify-center p-2 transition-all ease-in-out hover:bg-muted rounded-md'
    //               )}
    //             >
    //               <Home className='w-5 h-5' />
    //             </Link>
    //             {/* <Link
    //               href='/dashboard/victims'
    //               className={cn(
    //                 pathname === '/dashboard/victims' ? 'bg-muted' : '',
    //                 'flex items-center justify-center p-2 transition-all ease-in-out hover:bg-muted rounded-md'
    //               )}
    //             >
    //               <User className='w-5 h-5' />
    //             </Link> */}
    //             <Link
    //               href='/dashboard/'

    //               className={cn(
    //                 pathname === '/dashboard/history' ? 'bg-muted' : '',
    //                 'flex items-center justify-center p-2 transition-all ease-in-out hover:bg-muted rounded-md'
    //               )}
    //             >
    //               <History className='w-5 h-5' />
    //             </Link>
    //             <Link
    //               href='/dashboard/settings'
    //               className={cn(
    //                 pathname === '/dashboard/settings' ? 'bg-muted' : '',
    //                 'flex items-center justify-center p-2 transition-all ease-in-out hover:bg-muted rounded-md'
    //               )}
    //             >
    //               <Settings className='w-5 h-5' />
    //             </Link>
    //           </div>
    //           <Button variant={'outline'} className='p-2 hidden sm:block' onClick={signOut}>
    //             <LogOut />
    //           </Button>
    //         </div>
    //       </div>
    //       {children}
    //     </div>
    //     <CommandMenu open={open} setOpen={setOpen} />
    //   </>
    <>
      <div className='flex flex-col items-center justify-center min-h-screen h-full relative'>
        {/* <div className='absolute -z-20 bg-primary w-[600px] h-[500px] -top-[40%] rounded-full blur-[200px]'></div> */}
        <div className='flex items-center justify-center container p-2 pr-4'>
          <div className='flex items-center w-full justify-between p-4 rounded-full border backdrop-blur'>
            <svg
              width='24'
              height='24'
              viewBox='0 0 1000 1000'
              fill='none'
              xmlns='http://www.w3.org/2000/svg'
              className='w-6 h-6'
            >
              <path
                d='M500.268 179.189L726.13 665.598L499.732 820.811L273.594 665.221L500.268 179.189Z'
                stroke='currentColor'
                strokeWidth={89}
              />
            </svg>
            <div className='flex items-center flex-row gap-5 mr-4'>
              <Link
                href={'/dashboard'}
                className={cn(
                  pathname === '/dashboard' ? 'text-foreground' : 'opacity-50',
                  'text-[14px]'
                )}
              >
                Home
              </Link>
              <Link
                href={'/dashboard/mailer'}
                className={cn(
                  pathname === '/dashboard/mailer'
                    ? 'text-foreground'
                    : 'opacity-50',
                  'text-[14px]'
                )}
              >
                Mailer
              </Link>
              <Link
                href={'/dashboard/history'}
                className={cn(
                  pathname === '/dashboard/history'
                    ? 'text-foreground'
                    : 'opacity-50',
                  'text-[14px]'
                )}
              >
                History
              </Link>
              <Link
                href={'/dashboard/settings'}
                className={cn(
                  pathname === '/dashboard/settings'
                    ? 'text-foreground'
                    : 'opacity-50',
                  'text-[14px]'
                )}
              >
                Settings
              </Link>
              <Button
                variant={'ghost'}
                className='py-1 px-2 border-border rounded-full h-[34px]'
                onClick={signOut}
              >
                <LogOut />
              </Button>
            </div>
          </div>
        </div>
        <div className='flex justify-center container flex-grow h-full'>{children}</div>
      </div>
      <CommandMenu open={open} setOpen={setOpen} />
    </>
  )
}