"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import styles from "../styles/navigation.module.css";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { useUser } from "./UserContext";
import TabsNav from "./TabsNav";
import { useRouter } from "next/navigation";

interface NavItem {
  id: string;
  label: string;
  href: string;
}

const navItems: NavItem[] = [
  { id: "home", label: "Дашборд", href: "/" },
  { id: "stat", label: "Статистика", href: "/stat" },
  { id: "billing", label: "Финансы", href: "/billing" },
  { id: "category", label: "Категории товаров", href: "/category" },
];

const Navigation: React.FC = () => {
  const pathname = usePathname();
  const [login, setLogin] = useState<string>("");
  const { firstName, surname } = useUser();
  const router = useRouter();

  useEffect(() => {
    if (typeof document !== "undefined") {
      const userLogin = Cookies.get('user_login');
      if (userLogin) setLogin(userLogin);
    }
  }, []);

  const handleNavigationChange = (tabId: string) => {
    if (tabId === "home") {
      router.push("/");
    } else if (tabId === "stat") {
      router.push("/stat");
    } else if (tabId === "billing") {
      router.push("/billing");
    }
  };

  if (pathname === "/auth") return null;
  return (
    <nav className={styles.nav}>
      <div className={styles.logo}>RE:Premium Partner</div>
      <TabsNav activeTab={pathname} setActiveTab={handleNavigationChange} tabs={navItems} />
      <div className={styles.profile}>
        <Link href="/account" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <div className={styles.avatar}>
            {firstName && surname ? `${firstName[0]}${surname[0]}`.toUpperCase() : (login ? login.slice(0, 2).toUpperCase() : "ПП")}
          </div>
          <span className={styles.profileName}>
            {firstName && surname ? `${firstName} ${surname}` : (login ? login : "Партнер RE:Premium")}
          </span>
        </Link>
      </div>
    </nav>
  );
};

export default Navigation;