'use client';

import Link from 'next/link';
import { SignOut } from '@/utils/auth-helpers/server';
import { handleRequest } from '@/utils/auth-helpers/client';
import { usePathname, useRouter } from 'next/navigation';
import Logo from '@/components/icons/Logo';
import s from './Navbar.module.css';
import { IoCallOutline } from 'react-icons/io5';
import { LuPartyPopper } from 'react-icons/lu';
import { FaUserCog } from 'react-icons/fa';
import { MdLocalOffer } from 'react-icons/md';
import { getRedirectMethod } from '@/utils/auth-helpers/settings';
import { useEffect, useState } from 'react';
import { createClient } from '@/utils/supabase/client';

interface NavlinksProps {
  user?: any;
}

export default function Navlinks({ user }: NavlinksProps) {
  const router = useRouter();
  const pathname = usePathname();
  const [userRole, setUserRole] = useState<string | null>(null);

  useEffect(() => {
    const fetchUserRole = async () => {
      if (user) {
        const supabase = createClient();
        const { data: userRole } = await supabase
          .from('user_roles')
          .select('role')
          .eq('user_id', user.id)
          .single();
        setUserRole(userRole?.role || null);
      }
    };
    fetchUserRole();
  }, [user]);

  if (pathname?.startsWith('/admin')) {
    return null;
  }

  const showAdminButton = userRole === 'admin' || userRole === 'team';

  return (
    <nav className={s.root}>
      <a href="#skip" className="sr-only focus:not-sr-only">
        Skip to content
      </a>
      <div className="max-w-6xl px-6 mx-auto">
        <div className="relative flex flex-row justify-between py-1 align-center md:py-2">
          <div className="flex items-center flex-1">
            <Link href="/" className={s.logo} aria-label="Logo">
              <Logo
                style={{
                  width: 70,
                  height: 70,
                  objectFit: 'contain'
                }}
              />
            </Link>
            <nav className="ml-6 space-x-2 hidden md:block">
              <Link href="/events" className="btn btn-sm btn-outline bg-red-700 text-white hover:bg-red-800 hover:text-white">
                <LuPartyPopper className="mr-1" />
                Събития
              </Link>
              <Link href="/deals" className="btn btn-sm btn-ghost btn-warning">
                <MdLocalOffer className="mr-1" />
                Оферти
              </Link>
            </nav>
          </div>
          <div className="flex justify-end space-x-8">
            {user ? (
              <>
                {showAdminButton && (
                  <Link href="/admin/reservations" className={s.link}>
                    <FaUserCog className="w-4 h-4" />
                  </Link>
                )}
                <Link href="/account" className={s.link}>
                  Профил
                </Link>
                <form
                  onSubmit={(e) => handleRequest(e, SignOut, getRedirectMethod() === 'client' ? router : null)}
                  className="py-0 px-2 flex"
                >
                  <input type="hidden" name="pathName" value={pathname || ''} />
                  <button type="submit" className={`${s.link} flex-grow`}>
                    Излез
                  </button>
                </form>
              </>
            ) : (
              <a href="tel:+359886644460" className={s.link}>
                <IoCallOutline className="mr-1" />
                Обади се
              </a>
            )}
          </div>
        </div>
      </div>
    </nav>
  );
}