"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import Logo from "@/components/ui/Logo";
import { Phone, Globe, Menu, X, ChevronDown } from "lucide-react";

interface NavItem {
  id: number;
  label: string;
  href: string;
  isHighlighted: boolean;
}

interface NavbarProps {
  navItems: NavItem[];
  phone: string;
  siteName: string;
}

export default function Navbar({ navItems, phone, siteName }: NavbarProps) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [activeItem, setActiveItem] = useState("Home");

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled
          ? "bg-white/95 backdrop-blur-md shadow-md"
          : "bg-white shadow-sm"
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Logo />

          {/* Desktop Nav */}
          <nav className="hidden lg:flex items-center gap-6">
            {navItems.map((item) => (
              <Link
                key={item.id}
                href={item.href}
                onClick={() => setActiveItem(item.label)}
                className={`text-sm font-medium transition-colors relative group ${
                  activeItem === item.label
                    ? "text-green-600"
                    : "text-slate-600 hover:text-green-600"
                }`}
              >
                {item.label}
                {activeItem === item.label && (
                  <span className="absolute -bottom-1 left-0 right-0 h-0.5 bg-green-500 rounded-full" />
                )}
              </Link>
            ))}
          </nav>

          {/* Right Actions */}
          <div className="hidden lg:flex items-center gap-3">
            {/* Language */}
            <button className="flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors">
              <Globe className="w-4 h-4" />
              <span>EN</span>
              <ChevronDown className="w-3 h-3" />
            </button>
            <span className="text-slate-300">|</span>
            <button className="text-sm text-slate-600 hover:text-slate-900 transition-colors font-medium">
              বাংলা
            </button>

            {/* Phone */}
            <a
              href={`tel:${phone}`}
              className="flex items-center gap-2 text-sm text-slate-700 hover:text-green-600 transition-colors font-medium"
            >
              <div className="w-7 h-7 bg-green-500 rounded-full flex items-center justify-center">
                <svg viewBox="0 0 24 24" fill="white" className="w-3.5 h-3.5">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" />
                  <path d="M11.5 2.25C6.385 2.25 2.25 6.385 2.25 11.5c0 1.827.524 3.527 1.428 4.967L2.25 21.75l5.432-1.414c1.397.845 3.035 1.336 4.818 1.336 5.115 0 9.25-4.135 9.25-9.25S16.615 2.25 11.5 2.25z" />
                </svg>
              </div>
              {phone}
            </a>

            {/* CTA */}
            <Link
              href="#consultation"
              className="bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-all hover:shadow-lg hover:-translate-y-0.5"
            >
              Free Consultation
            </Link>
          </div>

          {/* Mobile Menu Toggle */}
          <button
            className="lg:hidden p-2 text-slate-600 hover:text-slate-900"
            onClick={() => setMobileOpen(!mobileOpen)}
            aria-label="Toggle menu"
          >
            {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      {mobileOpen && (
        <div className="lg:hidden bg-white border-t border-slate-100 shadow-lg">
          <div className="max-w-7xl mx-auto px-4 py-4 flex flex-col gap-1">
            {navItems.map((item) => (
              <Link
                key={item.id}
                href={item.href}
                onClick={() => { setActiveItem(item.label); setMobileOpen(false); }}
                className={`px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  activeItem === item.label
                    ? "bg-green-50 text-green-600"
                    : "text-slate-600 hover:bg-slate-50"
                }`}
              >
                {item.label}
              </Link>
            ))}
            <div className="pt-3 border-t border-slate-100 flex flex-col gap-2 mt-1">
              <a
                href={`tel:${phone}`}
                className="flex items-center gap-2 text-sm text-slate-700 font-medium px-3 py-2"
              >
                <Phone className="w-4 h-4 text-green-500" />
                {phone}
              </a>
              <Link
                href="#consultation"
                onClick={() => setMobileOpen(false)}
                className="bg-purple-600 text-white text-sm font-semibold px-4 py-2.5 rounded-lg text-center"
              >
                Free Consultation
              </Link>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}