import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Menu, X, Building2, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const PublicHeader = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const location = useLocation();

  const services = [
    { name: 'Virtual Office Dubai', href: '/addresses' },
    { name: 'Mail Forwarding', href: '/services/mail' },
    { name: 'Phone Services', href: '/services/phone' },
    { name: 'Business Setup', href: '/business-setup' },
  ];

  const company = [
    { name: 'About Us', href: '/about' },
    { name: 'Our Addresses', href: '/addresses' },
    { name: 'Blog', href: '/blog' },
    { name: 'FAQ', href: '/faq' },
    { name: 'Contact Us', href: '/contact' },
  ];

  const navigation = [
    { name: 'Home', href: '/' },
    { name: 'Pricing', href: '/pricing' },
  ];

  const isActive = (path) => location.pathname === path;
  const isPartiallyActive = (path) => location.pathname.startsWith(path);

  return (
    <header className="sticky top-0 z-50 bg-gray-900 border-b border-gray-700">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <Link to="/" className="flex items-center space-x-2">
            <div className="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center">
              <Building2 className="w-5 h-5 text-white" />
            </div>
            <span className="text-xl font-bold text-white">
              Virtual Office Dubai
            </span>
          </Link>

          <nav className="hidden md:flex items-center space-x-8">
            {navigation.map((item) => (
              <Link
                key={item.name}
                to={item.href}
                className={`nav-link text-sm font-medium transition-colors ${
                  isActive(item.href) ? 'text-red-400 active' : 'text-gray-200 hover:text-red-400'
                }`}
              >
                {item.name}
              </Link>
            ))}

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className={`nav-link text-sm font-medium transition-colors group ${ isPartiallyActive('/addresses') || isPartiallyActive('/business-setup') || isPartiallyActive('/services') ? 'text-red-400' : 'text-gray-200 hover:text-red-400'}`}>
                  Services
                  <ChevronDown className="relative top-[1px] ml-1 h-4 w-4 transition duration-200 group-data-[state=open]:rotate-180" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                {services.map((item) => (
                   <DropdownMenuItem key={item.name} asChild>
                     <Link to={item.href}>{item.name}</Link>
                   </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>

            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className={`nav-link text-sm font-medium transition-colors group ${ isPartiallyActive('/about') || isPartiallyActive('/blog') || isPartiallyActive('/faq') || isPartiallyActive('/contact') ? 'text-red-400' : 'text-gray-200 hover:text-red-400'}`}>
                  Company
                  <ChevronDown className="relative top-[1px] ml-1 h-4 w-4 transition duration-200 group-data-[state=open]:rotate-180" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                {company.map((item) => (
                   <DropdownMenuItem key={item.name} asChild>
                     <Link to={item.href}>{item.name}</Link>
                   </DropdownMenuItem>
                ))}
              </DropdownMenuContent>
            </DropdownMenu>
          </nav>

          <div className="hidden md:flex items-center space-x-4">
            <Link to="/login">
              <Button variant="ghost" className="text-gray-200 hover:text-red-400">
                Login
              </Button>
            </Link>
            <Link to="/signup">
              <Button className="btn-primary">Get Started</Button>
            </Link>
          </div>

          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden p-2 rounded-md text-gray-200 hover:text-red-400"
            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          >
            {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {isMenuOpen && (
          <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="md:hidden py-4 border-t border-gray-700 bg-gray-900">
            <div className="flex flex-col space-y-4">
              {navigation.map((item) => (
                <Link key={item.name} to={item.href} onClick={() => setIsMenuOpen(false)} className={`text-base font-medium transition-colors ${isActive(item.href) ? 'text-red-400' : 'text-gray-200 hover:text-red-400'}`}>
                  {item.name}
                </Link>
              ))}
              <div className="pt-2">
                <p className="text-sm font-semibold text-gray-400 mb-2">Services</p>
                {services.map((item) => (
                  <Link key={item.name} to={item.href} onClick={() => setIsMenuOpen(false)} className="block py-2 text-base font-medium text-gray-200 hover:text-red-400">
                    {item.name}
                  </Link>
                ))}
              </div>
              <div className="pt-2">
                <p className="text-sm font-semibold text-gray-400 mb-2">Company</p>
                {company.map((item) => (
                  <Link key={item.name} to={item.href} onClick={() => setIsMenuOpen(false)} className="block py-2 text-base font-medium text-gray-200 hover:text-red-400">
                    {item.name}
                  </Link>
                ))}
              </div>
              <div className="flex flex-col space-y-2 pt-4 border-t border-gray-700">
                <Link to="/login" onClick={() => setIsMenuOpen(false)}>
                  <Button variant="ghost" className="w-full justify-start text-gray-200 text-base">Login</Button>
                </Link>
                <Link to="/signup" onClick={() => setIsMenuOpen(false)}>
                  <Button className="w-full btn-primary text-base">Get Started</Button>
                </Link>
              </div>
            </div>
          </motion.div>
        )}
      </div>
    </header>
  );
};

export default PublicHeader;