'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
import Logo from '@/app/ui/logo';
import DropDownList from '@/app/ui/navigation/nav-link-dropdown';
import { logout } from '@/app/actions/auth';
import { useTranslations } from 'next-intl';
import navigation from './navigation.json';
import { useSideMenuStore } from '@/app/stores/sideMenuStore';
import { useRef } from 'react';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import { fetchReferralUserStats } from '@/app/actions/referralsActions';
import { useQuery } from '@tanstack/react-query';
import { env } from 'process';
import { getBuildData } from '@/app/actions/action';

export default function NavLinks() {
	const {
		data: referralLink,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['referralUserStats'],
		queryFn: () => {
			return fetchReferralUserStats();
		},
		select: (data) => {
			if (data?.referralLink) {
				return data?.referralLink;
			} else {
				return null;
			}
		}
	});

	const {
		data: frontendBuildDate,
	} = useQuery({
		queryKey: ['frontendBuildDate'],
		queryFn: async () => {
			try {
				const response = await fetch('/build-info.json');
				if (!response.ok) {
					return null;
				}
				return response.json();
			} catch (error) {
				return null;
			}
		},
		select: (data) => {
			if (data?.buildTime) {
				return data.buildTime;
			}
			return null;
		},
		retry: false
	});

	const {
		data: backendBuildDate,
	} = useQuery({
		queryKey: ['backendBuildDate'],
		queryFn: () => getBuildData(),
		select: (data) => {
			if (data) {
				return data;
			}
			return null;
		},
		retry: false
	});

	const pathname = usePathname().replace('/en/', '/').replace('/ru/', '/');
	const t = useTranslations('Global');

	const setMenuState = useSideMenuStore(s => s.setValue);
	const menuState = useSideMenuStore(s => s.value);
	const links = navigation;

	const sideMenuRef = useRef<HTMLDivElement>(null)
	useClickOutside(
		sideMenuRef,
		() => {
			setMenuState(false);
		},
		menuState
	);

	return (
		<nav
			className={`sidebar ${menuState ? 'show' : ''}`}
			ref={sideMenuRef}
		>
			<div className="flex justify-between">
				<Logo />
				<button
					className="sidebar-close-button"
					onClick={() => {
						setMenuState(false);
					}}
				>
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z" /></svg>
				</button>
			</div>

			<ul>
				<Link
					key={t('home')}
					href='/pages/dashboard'
					className={clsx(
						"flex nav-link",
						{
							'bg-[#5659f1]': pathname === '/pages/dashboard',
						},
					)}
					onClick={() => {
						setMenuState(false);
					}}
				>
					<svg viewBox="0 0 24 24" fill="currentColor">
						<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
					</svg>
					<p className="">{t('home')}</p>
				</Link>

				<DropDownList referralLink={referralLink} />

				{links.map((link) => {
					if (!referralLink && link.name === 'referral-program') {
						return null;
					}

					return (
						<Link
							key={link.name}
							href={link.href}
							className={clsx(
								`flex nav-link`,
								{
									'bg-[#5659f1]': pathname === link.href,
								},
							)}
							onClick={() => {
								setMenuState(false);
							}}
						>
							<svg viewBox="0 0 24 24" fill="currentColor">
								<path d={link.img}></path>
							</svg>
							<p className="">
								{t(link.name)}
							</p>
						</Link>
					);
				})}
				<Link
					key={t('exit')}
					href='/login'
					className="flex nav-link"
					onClick={(e) => {
						e.preventDefault();
						setMenuState(false);
						logout();
					}}
				>
					<svg viewBox="0 0 24 24" fill="currentColor">
						<path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"></path>
					</svg>
					<p className="">{t('exit')}</p>
				</Link>
			</ul>

			<div className="build-versions">
				{frontendBuildDate && (
					<div className="">
						front: {frontendBuildDate}
					</div>
				)}
				{backendBuildDate && (
					<div className="">
						back: {backendBuildDate}
					</div>
				)}
			</div>
		</nav>
	);
}