'use client';

import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Cloud, Moon, Sun } from 'lucide-react';
import { useTheme } from 'next-themes';
import { usePathname, useRouter } from 'next/navigation';
import { useI18n } from '../../i18n/provider';

export default function Header() {
  const [isScrolled, setIsScrolled] = useState(false);
  const { locale, t } = useI18n();
  const dir = locale === 'en' ? 'ltr' : 'rtl';
  const { theme, setTheme } = useTheme();
  const router = useRouter();
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      // حساسیت اسکرول تنظیم شده تا تغییرات به موقع انجام شود
      if (window.scrollY > 40) {
        setIsScrolled(true);
      } else {
        setIsScrolled(false);
      }
    };

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

  return (
    // حذف پدینگ ثابت از بالا تا هدر بتواند به سقف بچسبد
    <div className="fixed top-0 left-0 right-0 z-50 flex justify-center transition-all duration-500 px-4 sm:px-6">
      <motion.header
        initial={{ y: -50, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className={`flex items-center justify-between text-[color:var(--text-primary)] transition-all duration-700 ease-in-out w-full ${
          isScrolled
            ? 'mt-4 max-w-4xl px-6 py-3 bg-[color:var(--glass-05)] backdrop-blur-lg border border-[color:var(--border-10)] rounded-full ' // حالت اسکرول شده: کپسول شناور
            : 'mt-0 max-w-7xl px-8 py-5 bg-[color:var(--glass-05)] backdrop-blur-md border-b border-x border-[color:var(--border-10)] rounded-t-none rounded-b-[2.5rem] ' // حالت بالای صفحه: چسبیده به سقف با پایین گرد
        }`}
        dir={dir}
      >
        {/* بخش لوگو */}
        <div className="flex items-center gap-2 cursor-pointer">
          <div className="w-8 h-8 rounded-full bg-[color:var(--glass-10)] flex items-center justify-center transition-transform hover:scale-110 duration-300">
             <Cloud className="w-5 h-5 text-blue-400" />
          </div>
          <span className="font-bold text-lg tracking-wide">MugCloud</span>
        </div>

        {/* منوی دسکتاپ */}
        <nav className={`hidden md:flex items-center transition-all duration-500 ${isScrolled ? 'gap-6' : 'gap-10'}`}>
          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_products')}</a>
          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_pricing')}</a>
          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_network')}</a>
          <a href="#" className="text-[color:var(--text-muted)] hover:text-[color:var(--text-primary)] transition-colors text-sm font-medium">{t('nav_support')}</a>
        </nav>

        {/* بخش اکشن‌ها */}
        <div className="flex items-center gap-3">
          {/* دکمه انتخاب زبان (در حالت کپسولی پنهان می‌شود) */}
          <div className={`overflow-hidden transition-all duration-500 `}>
            <button
              type="button"
              onClick={() => {
                const target = locale === 'fa' ? 'en' : 'fa';
                const next = pathname.replace(/^\/(fa|en)(\/|$)/, `/${target}$2`);
                router.push(next === pathname ? `/${target}` : next);
              }}
              className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)] text-sm text-[color:var(--text-muted)] transition-colors whitespace-nowrap"
            >
              <span>{locale === 'fa' ? t('nav_lang_en') : t('nav_lang_fa')}</span>
              <span className="text-[color:var(--text-muted-3)]">{locale === 'fa' ? t('nav_lang_fa') : t('nav_lang_en')}</span>
            </button>
          </div>

          {/* دکمه تغییر تم */}
          <button
            type="button"
            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
            className="p-2 rounded-full bg-[color:var(--glass-05)] hover:bg-[color:var(--glass-10)] border border-[color:var(--border-10)] transition-colors flex items-center justify-center"
          >
            {theme === 'light' ? (
              <Sun className="w-4 h-4 text-[color:var(--text-muted)]" />
            ) : (
              <Moon className="w-4 h-4 text-[color:var(--text-muted)]" />
            )}
          </button>

          {/* دکمه شروع کنید */}
          <button className="px-5 py-2 rounded-full bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold transition-all hover:shadow-[0_0_15px_rgba(37,99,235,0.5)]">
            {t('nav_start')}
          </button>
        </div>
      </motion.header>
    </div>
  );
}
