'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { useLanguage } from '@/context/LanguageContext';
import LanguageSwitcher from '@/components/ui/LanguageSwitcher';

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const { t } = useLanguage();

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

  const menuItems = [
    { key: 'nav.treatments', href: '/treatments', dropdown: [
      { key: 'nav.treatments.facial', href: '/treatments' },
      { key: 'nav.treatments.hair-removal', href: '/treatments' },
      { key: 'nav.treatments.brightening', href: '/treatments' },
      { key: 'nav.treatments.acne', href: '/treatments' },
      { key: 'nav.treatments.anti-aging', href: '/treatments' },
      { key: 'nav.treatments.all', href: '/treatments', isHighlight: true },
    ]},
    { key: 'nav.product', href: '/product' },
    { key: 'nav.promo', href: '/promo' },
    { key: 'nav.locations', href: '/locations' },
    { key: 'nav.blog', href: '/blog' },
    { key: 'nav.about', href: '/about' },
  ];

  const mobileMenuItems = [
    { key: 'nav.treatments', href: '/treatments' },
    { key: 'nav.product', href: '/product' },
    { key: 'nav.promo', href: '/promo' },
    { key: 'nav.locations', href: '/locations' },
    { key: 'nav.blog', href: '/blog' },
    { key: 'nav.liputan', href: '/liputan' },
    { key: 'nav.about', href: '/about' },
  ];

  return (
    <>
      <header
        className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
          scrolled ? 'bg-ivory shadow-md' : 'bg-ivory bg-opacity-95'
        }`}
      >
        <nav className="container-custom">
          <ul className="flex items-center gap-3 xl:gap-6 py-3">
            {/* Logo */}
            <li className="flex-shrink-0">
              <Link href="/">
                <Image
                  src="/images/Logo-Carla.png"
                  alt="Carla Skin Clinic"
                  width={200}
                  height={75}
                  priority
                  className="h-14 md:h-16 w-auto"
                />
              </Link>
            </li>

            {/* Desktop Navigation */}
            <div className="hidden lg:flex items-center gap-4 xl:gap-6 ms-auto">
              {menuItems.map((item) =>
                item.dropdown ? (
                  <div key={item.key} className="relative group">
                    <span className="text-xs xl:text-sm font-semibold uppercase tracking-widest text-espresso hover:text-gold transition duration-300 flex items-center cursor-pointer py-2">
                      {t(item.key)}
                      <svg xmlns="http://www.w3.org/2000/svg" className="w-3 h-3 xl:w-3.5 xl:h-3.5 ml-1 transition-transform duration-300 group-hover:rotate-180" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M6 9l6 6l6 -6"></path>
                      </svg>
                    </span>
                    <div className="absolute top-10 left-0 bg-white shadow-xl rounded-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 py-2 min-w-[200px] z-50">
                      {item.dropdown.map((sub) => (
                        <Link
                          key={sub.key}
                          href={sub.href}
                          className={`block px-5 py-2.5 text-sm transition ${
                            sub.isHighlight
                              ? 'text-gold font-semibold hover:text-espresso'
                              : 'text-espresso hover:text-gold hover:bg-blush'
                          }`}
                        >
                          {t(sub.key)}
                        </Link>
                      ))}
                    </div>
                  </div>
                ) : (
                  <Link
                    key={item.key}
                    href={item.href}
                    className="text-xs xl:text-sm font-semibold uppercase tracking-widest text-espresso hover:text-gold transition duration-300"
                  >
                    {t(item.key)}
                  </Link>
                )
              )}
            </div>

            {/* Right: Language Switcher + Booking + Burger */}
            <li className="flex items-center gap-2 xl:gap-3 ms-auto lg:ms-0">
              {/* Language Switcher */}
              <LanguageSwitcher />

              {/* CTA Online Booking */}
              <Link
                href="/online-booking"
                className="hidden sm:block px-4 xl:px-5 py-2 bg-gold text-white text-xs uppercase tracking-widest font-semibold rounded hover:bg-gold-dark hover:text-white transition duration-300"
              >
                {t('nav.booking')}
              </Link>

              {/* Mobile Burger */}
              <button
                onClick={() => setIsOpen(!isOpen)}
                className="lg:hidden flex flex-col gap-1 p-1"
              >
                <span className={`w-5 h-0.5 bg-espresso transition-all duration-300 origin-top-right ${isOpen ? 'rotate-45 -translate-y-0.5' : ''}`}></span>
                <span className={`w-5 h-0.5 bg-espresso transition-all duration-300 ${isOpen ? 'opacity-0' : ''}`}></span>
                <span className={`w-5 h-0.5 bg-espresso transition-all duration-300 origin-bottom-right ${isOpen ? '-rotate-45 translate-y-0.5' : ''}`}></span>
              </button>
            </li>
          </ul>
        </nav>

        {/* Mobile Navigation */}
        <div
          className={`lg:hidden fixed top-0 right-0 h-screen w-full bg-white transition-transform duration-500 z-50 ${
            isOpen ? 'translate-x-0' : 'translate-x-full'
          }`}
        >
          <div className="container-custom py-4">
            <div className="flex justify-between items-center mb-8">
              <Image src="/images/Logo-Carla.png" alt="Carla" width={180} height={65} priority className="h-14 w-auto" />
              <div className="flex items-center gap-3">
                <LanguageSwitcher />
                <button onClick={() => setIsOpen(false)} className="p-2">
                  <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-espresso" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path>
                  </svg>
                </button>
              </div>
            </div>
            <ul className="flex flex-col gap-5 text-base uppercase tracking-wider">
              {mobileMenuItems.map((item) => (
                <li key={item.key}>
                  <Link
                    href={item.href}
                    onClick={() => setIsOpen(false)}
                    className="hover:text-gold transition duration-300"
                  >
                    {t(item.key)}
                  </Link>
                </li>
              ))}
              <li className="mt-6 pt-6 border-t border-blush">
                <Link
                  href="/online-booking"
                  className="inline-block w-full text-center px-6 py-3 bg-gold text-white text-sm rounded uppercase tracking-widest hover:bg-gold-dark hover:text-white transition duration-300"
                >
                  {t('nav.booking')}
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </header>

      {/* Spacer */}
      <div className="h-14"></div>
    </>
  );
}
