'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { motion } from 'framer-motion';
import { FaFacebook, FaTwitter, FaLinkedin, FaInstagram, FaYoutube, FaWhatsapp, FaPhone, FaUserShield } from 'react-icons/fa';

const navItems = [
  { label: 'Home', href: '/' },
  { label: 'About', href: '/about' },
  { label: 'Services', href: '/services' },
  { label: 'Projects', href: '/projects' },
  { label: 'Contact', href: '/contact' },
  { label: 'Admin', href: 'https://teamjoint.co.ke.branchbusinessadvance.co.ke/admin/', icon: FaUserShield }
];

export default function Navigation() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const isActive = (path: string) => pathname === path;

  return (
    <motion.nav
      className={`fixed w-full z-50 transition-all duration-300 ${
        isScrolled ? 'bg-white shadow-md' : 'bg-transparent'
      }`}
    >
      <div className="container mx-auto px-4 md:px-6">
        <div className="flex justify-between items-center h-16 md:h-20">
          <Link href="/" className={`text-2xl font-bold ${isScrolled ? 'text-primary' : 'text-white'}`}>
            TEAMJOINT Company Limited
          </Link>

          {/* Desktop Menu */}
          <div className="hidden md:flex items-center space-x-8">
            {navItems.map((item) => {
              // Handle external admin link differently
              if (item.label === 'Admin') {
                return (
                  <a
                    key={item.label}
                    href="https://teamjoint.co.ke.branchbusinessadvance.co.ke/admin/"
                    className={`hover:text-secondary transition-colors flex items-center space-x-1 ${
                      isScrolled ? 'text-gray-800' : 'text-white'
                    }`}
                  >
                    {item.icon && <item.icon />}
                    <span>{item.label}</span>
                  </a>
                );
              }
              
              return (
                <Link
                  key={item.label}
                  href={item.href}
                  className={`hover:text-secondary transition-colors flex items-center space-x-1 ${
                    isScrolled ? 'text-gray-800' : 'text-white'
                  } ${isActive(item.href) ? 'text-secondary font-semibold' : ''}`}
                >
                {item.icon && <item.icon className="text-sm" />}
                <span>{item.label}</span>
              </Link>
            );
          })}
            
            {/* Social Media Icons */}
            <div className="flex space-x-4 ml-8 border-l pl-8 border-gray-300">
              <a
                href="tel:+254715210069"
                className={`hover:opacity-80 transition-opacity duration-300 ${isScrolled ? 'text-[#4CAF50]' : 'text-white hover:text-[#4CAF50]'}`}
                aria-label="Call us"
              >
                <FaPhone size={20} />
              </a>
              <a
                href="https://www.facebook.com/profile.php?id=61564514841023"
                target="_blank"
                rel="noopener noreferrer"
                className={`hover:opacity-80 transition-opacity duration-300 ${isScrolled ? 'text-[#1877F2]' : 'text-white hover:text-[#1877F2]'}`}
                aria-label="Visit our Facebook page"
              >
                <FaFacebook size={20} />
              </a>
              <a
                href="https://www.youtube.com/channel/UCtuNNE_IJ4eCFASL84EEquQ"
                target="_blank"
                rel="noopener noreferrer"
                className={`hover:opacity-80 transition-opacity duration-300 ${isScrolled ? 'text-[#FF0000]' : 'text-white hover:text-[#FF0000]'}`}
                aria-label="Visit our YouTube channel"
              >
                <FaYoutube size={20} />
              </a>
              <a
                href="https://www.instagram.com/grizzly_technologies/"
                target="_blank"
                rel="noopener noreferrer"
                className={`hover:opacity-80 transition-opacity duration-300 ${isScrolled ? 'text-[#E4405F]' : 'text-white hover:text-[#E4405F]'}`}
                aria-label="Visit our Instagram profile"
              >
                <FaInstagram size={20} />
              </a>
              <a
                href="https://wa.me/+254115 366185"
                target="_blank"
                rel="noopener noreferrer"
                className={`hover:opacity-80 transition-opacity duration-300 ${isScrolled ? 'text-[#25D366]' : 'text-white hover:text-[#25D366]'}`}
                aria-label="Chat with us on WhatsApp"
              >
                <FaWhatsapp size={20} />
              </a>
            </div>
          </div>

          {/* Mobile Menu Button */}
          <button
            className={`md:hidden text-2xl ${isScrolled ? 'text-gray-800' : 'text-white'}`}
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? '✕' : '☰'}
          </button>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -20 }}
            className="md:hidden bg-white shadow-lg rounded-lg mt-2 p-4"
          >
            {navItems.map((item) => (
              <Link
                key={item.label}
                href={item.href}
                className={`block py-2 text-gray-800 hover:text-secondary transition-colors flex items-center space-x-2 ${
                  isActive(item.href) ? 'text-secondary font-semibold' : ''
                }`}
                onClick={() => setIsMobileMenuOpen(false)}
              >
                {item.icon && <item.icon className="text-sm" />}
                <span>{item.label}</span>
              </Link>
            ))}
            
            {/* Mobile Social Media Icons */}
            <div className="flex space-x-4 mt-4 pt-4 border-t border-gray-200">
              <a
                href="tel:+254715210069"
                className="text-[#4CAF50] hover:opacity-80 transition-opacity duration-300"
                aria-label="Call us"
              >
                <FaPhone size={20} />
              </a>
              <a
                href="https://www.facebook.com/profile.php?id=61564514841023"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#1877F2] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our Facebook page"
              >
                <FaFacebook size={20} />
              </a>
              <a
                href="https://www.youtube.com/channel/UCtuNNE_IJ4eCFASL84EEquQ"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#FF0000] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our YouTube channel"
              >
                <FaYoutube size={20} />
              </a>
              <a
                href="https://www.instagram.com/grizzly_technologies/"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#E4405F] hover:opacity-80 transition-opacity duration-300"
                aria-label="Visit our Instagram profile"
              >
                <FaInstagram size={20} />
              </a>
              <a
                href="https://wa.me/+254115 366185"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#25D366] hover:opacity-80 transition-opacity duration-300"
                aria-label="Chat with us on WhatsApp"
              >
                <FaWhatsapp size={20} />
              </a>
            </div>
          </motion.div>
        )}
      </div>
    </motion.nav>
  );
}