'use client';
import { Link } from '@/shared/config/i18n/navigation';
import { Button } from '@/shared/ui/button';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from '@/shared/ui/navigation-menu';
import SubMenuLink from './SubMenuLink';
import { ChangeLang } from './ChangeLang';
import { useLoginModal, useRegisterModal } from '@/shared/zustand/auth';
import { useTranslations } from 'next-intl';
import { useUserPlagiatStore } from '@/shared/zustand/user';
import { LogOut } from 'lucide-react';
import { useEffect, useState } from 'react';

function AuthButtons() {
  const t = useTranslations('Navbar');
  const [localUser, setLocalUser] = useState<{
    id: number;
    name: string;
    surname: string;
  } | null>(null);

  const auth = {
    login: { title: t('login'), url: '#' },
    signup: { title: t('signup'), url: '#' },
  };

  const userItem = [{ title: t('logout'), url: '/', icon: LogOut }];

  const toggleLoginModal = useLoginModal((state) => state.toggleLoginModal);
  const toggleRegisterModal = useRegisterModal(
    (state) => state.toggleRegisterModal,
  );
  const user = useUserPlagiatStore((state) => state.user);
  const clearUser = useUserPlagiatStore((state) => state.clearUser);
  const clearTokens = () => {
    localStorage.removeItem('access');
    localStorage.removeItem('refresh');
    localStorage.removeItem('user');
    clearUser();
  };
  console.log('Current user:', user);

  useEffect(() => {
    const data = localStorage.getItem('user');

    if (data) {
      setLocalUser(JSON.parse(data));
    } else {
      setLocalUser(null);
    }
  }, [user]);

  if (localUser) {
    return (
      <div className="flex flex-row max-sm:items-center max-sm:justify-around  gap-3">
        <div className="sm:flex hidden">
          <ChangeLang />
        </div>
        <NavigationMenu>
          <NavigationMenuItem>
            <NavigationMenuTrigger className="text-xl">
              {localUser.name} {localUser.surname}
            </NavigationMenuTrigger>
            <NavigationMenuContent className="bg-popover text-popover-foreground">
              {userItem.map((subItem) => (
                <NavigationMenuLink
                  asChild
                  key={subItem.title}
                  className="w-80"
                >
                  <SubMenuLink logOut={clearTokens} item={subItem} />
                </NavigationMenuLink>
              ))}
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenu>
      </div>
    );
  }

  return (
    <div className="flex flex-row max-sm:items-center max-sm:justify-around  gap-3">
      <div className="sm:flex hidden">
        <ChangeLang />
      </div>
      <Button variant="outline" onClick={() => toggleLoginModal()}>
        <Link href={auth.login.url}>{auth.login.title}</Link>
      </Button>
      <Button onClick={() => toggleRegisterModal()}>
        <Link href={auth.signup.url}>{auth.signup.title}</Link>
      </Button>
    </div>
  );
}

export { AuthButtons };