'use client'

import React from 'react'

import { Suspense } from 'react'

import { auth } from '@/auth'
import { clearChats } from '@/app/actions'
import { Sidebar } from '@/components/sidebar'
import { SidebarList } from '@/components/sidebar-list'
import { IconSeparator } from '@/components/ui/icons'
import { SidebarFooter } from '@/components/sidebar-footer'
import { ClearHistory } from '@/components/clear-history'
import { UserMenu, UserData } from '@/components/user-menu'
import { LoginButton } from '@/components/login-button'
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger
} from '@/components/ui/tooltip'
import { Badge } from '@/components/ui/badge'
import { ConnectButton } from '@/components/connect-button'
import { SettingsDropDown } from './settings-drop-down'


import { useLocalStorage } from '@/lib/hooks/use-local-storage'
import { Button } from './ui/button'

import Image from 'next/image';
import logoImage from '@/components/images/logo.png';
import { useRouter } from 'next/navigation'

// import { Button } from './ui/button'
import { Flex, Text } from '@radix-ui/themes';
import Link from 'next/link'
import { useTranslation } from 'react-i18next'
import { message } from 'antd'
import { LogoAI } from '@/components/chat'


export function Header() {
  
  const router = useRouter();
  const { t } = useTranslation();

  const [userData, setUserData] = useLocalStorage(
    'UserData',
    {
      auth_token: "",
      id: 1,
      login_ip: "",
      login_time: 0,
      role: "",
      user_name: "",
      version: ""
    } as UserData
  )

  const soonFunc = () => {
    message.info(t("soon"))
  }
//w-11/12 sm:w-5/6 md:w-3/4 lg:w-2/3 xl:w-3/5 2xl:w-1/2
  return (
    <header className="sticky top-0 z-50 flex shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem] w-[80%]  mx-auto">

      <a href="/">
      <LogoAI className="flex text-center ml-0" />
      </a>

      <div className="flex items-center justify-between ">
        <div className="flex items-center ">
          {/* <IconSeparator className="size-6 text-muted-foreground/50" /> */}

          {(!!userData && !!userData.user_name) ? (
            <div className='flex text-[#1A1A1A]'>
              {/* <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'
                onClick={() => {
                  router.push("/subscribe")
                }}
              > {t("subscribe.subscribe")}</Button> */}
              <UserMenu user={userData} />
            </div>

          ) : (
            <div className='flex gap-4 grid-cols-2 text-[#1A1A1A]'>
              <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'>
                <Link href="/#subscribe-target"
                >
                  {t('subscribe.subscribe')}
                </Link>
              </Button>


              <LoginButton
                variant="ghost"
                // variant="link"
                showGithubIcon={true}
                text={t('login')}
                className="-ml-2 text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]"
              />
            </div>


          )}
        </div>
      </div>

    </header>
  )
}


// export function Header() {
  
//   const router = useRouter();
//   const { t } = useTranslation();

//   const [userData, setUserData] = useLocalStorage(
//     'UserData',
//     {
//       auth_token: "",
//       id: 1,
//       login_ip: "",
//       login_time: 0,
//       role: "",
//       user_name: "",
//       version: ""
//     } as UserData
//   )

//   const soonFunc = () => {
//     message.info(t("soon"))
//   }

//   return (
//     <header className="sticky top-0 z-50 flex  w-full shrink-0 items-center justify-between  bg-background px-4 py-[1.5rem]">

//       {/* <MobileLinks className="lg:hidden" />
//         <DesktopLinks className="hidden lg:flex" /> */}
//       <div className="lg:hidden" ></div>

//       <div className="hidden lg:flex" >
//         {/* <Button variant="ghost" className='text-base font-bold  hover:bg-[#e5e7eb]' onClick={soonFunc}>
//           {t("header.course")}
//         </Button>
//         <Button variant="ghost" className='text-base font-bold hover:bg-[#e5e7eb]' onClick={soonFunc}>
//           {t("header.models")}
//         </Button>
//         <Button variant="ghost" className='text-base font-bold hover:bg-[#e5e7eb]' onClick={soonFunc}>
//           {t("header.resources")}
//         </Button> */}
//       </div>

//       {/* <Image src={logoImage} height={40} alt="show" className="cursor-pointer" onClick={() => {
//         router.push("/")
//         // toast.success('coming soon')
//       }} /> */}

//       <LogoAI
//         className='flex text-center m-auto'
//       />

//       <div className="flex items-center justify-between ">
//         <div className="flex items-center ">
//           {/* <IconSeparator className="size-6 text-muted-foreground/50" /> */}

//           {(!!userData && !!userData.user_name) ? (
//             <div className='flex text-[#1A1A1A]'>
//               {/* <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'
//                 onClick={() => {
//                   router.push("/subscribe")
//                 }}
//               > {t("subscribe.subscribe")}</Button> */}
//               <UserMenu user={userData} />
//             </div>

//           ) : (
//             <div className='flex gap-4 grid-cols-2 text-[#1A1A1A]'>
//               <Button variant="ghost" className='text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]'>
//                 <Link href="/#subscribe-target"
//                 >
//                   {t('subscribe.subscribe')}
//                 </Link>
//               </Button>


//               <LoginButton
//                 variant="ghost"
//                 // variant="link"
//                 showGithubIcon={true}
//                 text={t('login')}
//                 className="-ml-2 text-base bg-[#f4f4f5] hover:bg-[#e5e7eb]"
//               />
//             </div>


//           )}
//         </div>
//       </div>

//     </header>
//   )
// }


export function NavBack() {


  const router = useRouter();
  const { t } = useTranslation();

  // const query = router.query; // 假设页面 URL 是 /mypage?id=123

  console.log("query", router)
  return (
    <nav className="fixed top-[4.25rem] container flex items-center justify-between " >
      <Link href="/">
        {t("home")}
      </Link>
    </nav>
  )
}

export function TimeP({
  date,
}: {
  date: string
}) {


  const router = useRouter();
  const { t } = useTranslation();


  return (
    <p className=" text-left text-[1rem]   text-[#808080]">{date}  {t("JellyAI")}</p>
  )
}