"use client";

import React from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { Home, Rocket, Grid, Layers, LogOut, User, Wand2 } from "lucide-react";
import { useAuthStore } from "@/store/authStore";
import { Button } from "@/components/ui/Button";

export const Header: React.FC = () => {
  const pathname = usePathname();
  const router = useRouter();
  const { isAuthenticated, user, logout } = useAuthStore();
  
  const navItems = [
    { href: "/", label: "Dashboard", icon: Home },
    { href: "/generate", label: "Generate", icon: Rocket },
    { href: "/creative/modify", label: "Modify", icon: Wand2 },
    { href: "/gallery", label: "Gallery", icon: Grid },
    { href: "/matrix", label: "Matrix", icon: Layers },
  ];

  const handleLogout = () => {
    logout();
    router.push("/login");
  };
  
  return (
    <header className="sticky top-0 z-50 glass border-b border-white/20 backdrop-blur-xl transition-all duration-300">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          <div className="flex items-center">
            <Link href="/" className="flex items-center space-x-3 group">
              <div className="relative">
                <Rocket className="h-8 w-8 text-blue-500 group-hover:text-cyan-500 transition-all duration-300 group-hover:scale-110 group-hover:-translate-y-1" />
                <div className="absolute inset-0 bg-blue-500/20 rounded-full blur-xl group-hover:bg-cyan-500/20 transition-colors duration-300"></div>
              </div>
              <span className="text-2xl font-bold gradient-text group-hover:scale-105 transition-transform duration-300">
                PsyAdGenesis
              </span>
            </Link>
          </div>
          
          <div className="flex items-center space-x-4">
            <nav className="hidden md:flex space-x-2">
              {navItems.map((item) => {
                const Icon = item.icon;
                const isActive = pathname === item.href || 
                  (item.href !== "/" && pathname?.startsWith(item.href));
                
                return (
                  <Link
                    key={item.href}
                    href={item.href}
                    className={`relative flex items-center space-x-2 px-5 py-2.5 rounded-xl text-sm font-semibold transition-all duration-300 ${
                      isActive
                        ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg scale-105"
                        : "text-gray-700 hover:bg-white/50 hover:text-gray-900 hover:scale-105"
                    }`}
                  >
                    <Icon className={`h-4 w-4 transition-transform duration-300 ${isActive ? "scale-110" : ""}`} />
                    <span>{item.label}</span>
                    {isActive && (
                      <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500 opacity-50 blur-sm -z-10"></div>
                    )}
                  </Link>
                );
              })}
            </nav>

            {isAuthenticated ? (
              <div className="flex items-center space-x-3">
                <div className="hidden md:flex items-center space-x-2 px-4 py-2 rounded-xl bg-white/50 backdrop-blur-sm text-gray-700">
                  <User className="h-4 w-4" />
                  <span className="text-sm font-semibold">{user?.username}</span>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleLogout}
                >
                  <div className="flex items-center space-x-2">
                    <LogOut className="h-4 w-4" />
                    <span className="hidden sm:inline">Logout</span>
                  </div>
                </Button>
              </div>
            ) : (
              pathname !== "/login" && (
                <Link href="/login">
                  <Button variant="primary" size="sm">
                    Login
                  </Button>
                </Link>
              )
            )}
          </div>
        </div>
      </div>
    </header>
  );
};