'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { clsx } from 'clsx';
import { SHOPIFY_CONFIG } from '@/config/shopify';
import { APP_CONFIG } from '@/config/app';
import { useBranding } from '@/context/BrandingContext';
import AppLogo from '@/components/common/AppLogo';


const NAV_TABS = [
  { href: '/', label: 'Facebook Pixels', faIcon: 'fa-solid fa-satellite-dish' },
  { href: '/events', label: 'Conversions API (CAPI)', faIcon: 'fa-solid fa-bolt' },
  { href: '/catalog', label: 'Catalog Feeds & DPA', faIcon: 'fa-solid fa-layer-group' },
  { href: '/pricing', label: 'Pricing & Plans', faIcon: 'fa-solid fa-credit-card' },
  { href: '/settings', label: 'App Embed & Settings', faIcon: 'fa-solid fa-gear' },
];

export default function Navbar() {
  const pathname = usePathname();
  const { branding } = useBranding();
  const [storeDomain, setStoreDomain] = useState(SHOPIFY_CONFIG.defaultShopDomain);
  const [optimisticPath, setOptimisticPath] = useState<string | null>(null);

  useEffect(() => {
    setOptimisticPath(null);
  }, [pathname]);

  useEffect(() => {
    const handlePopState = () => setOptimisticPath(null);
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  const activePath = optimisticPath || pathname || '/';

  const isTabActive = (href: string) => {
    let current = activePath.split('?')[0];
    if (current.startsWith('/meta-connector')) current = current.replace('/meta-connector', '') || '/';
    if (current.startsWith('/meta_connector')) current = current.replace('/meta_connector', '') || '/';

    let target = href.split('?')[0];
    if (target.startsWith('/meta-connector')) target = target.replace('/meta-connector', '') || '/';
    if (target.startsWith('/meta_connector')) target = target.replace('/meta_connector', '') || '/';

    if (target === '/pixel' || target === '/') {
      return current === '/' || current === '/pixel';
    }
    return current === target || current.startsWith(`${target}/`);
  };

  useEffect(() => {
    fetch('/api/shops')
      .then((r) => r.json())
      .then((d) => {
        if (d.success && d.store?.domain) {
          setStoreDomain(d.store.domain);
        }
      })
      .catch(console.error);
  }, []);

  return (
    <header className="bg-white border-b border-slate-200 sticky top-0 z-30 shadow-sm">
      {/* Top Brand & Status Row */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 border-b border-slate-100">
          {/* Logo & Brand Identity */}
          <div className="flex items-center gap-3">
            <AppLogo size="lg" fallbackIcon="fa-solid fa-satellite-dish" />
            <div>
              <div className="flex items-center gap-2">
                <span className="font-extrabold text-slate-900 tracking-tight text-base">
                  {branding.appName}
                </span>
                <span className="px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-theme/10 text-theme border border-theme/20">
                  Multi-Pixel + CAPI
                </span>
              </div>
              <p className="text-[11px] text-slate-400 font-medium">
                Conversions API &middot; iOS 14.5+ Bypass &middot; Dynamic Product Feeds
              </p>
            </div>
          </div>

          {/* Right Actions & Store Pill */}
          <div className="flex items-center gap-3">
            {/* Store Pill */}
            <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-50 border border-slate-200 text-xs">
              <i className="fa-solid fa-store text-slate-500 text-xs" />
              <span className="font-semibold text-slate-800">{storeDomain}</span>
              <span className="inline-flex items-center gap-1 text-[10px] font-bold text-emerald-600 bg-emerald-50 px-1.5 py-0.5 rounded-md">
                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                Connected
              </span>
            </div>

            {/* Live Feed XML Link */}
            <a
              href={`/api/catalog/feed/meta.xml?shop=${encodeURIComponent(storeDomain)}`}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors"
            >
              <span>Catalog Feed</span>
              <i className="fa-solid fa-arrow-up-right-from-square text-xs text-slate-500" />
            </a>

            {/* Meta Commerce Link */}
            <a
              href="https://business.facebook.com/latest/settings"
              target="_blank"
              rel="noreferrer"
              className="hidden md:inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold bg-theme/10 text-theme hover:bg-theme/20 transition-colors"
            >
              <span>Meta Portfolio</span>
              <i className="fa-solid fa-arrow-up-right-from-square text-[10px]" />
            </a>
          </div>
        </div>

        {/* Horizontal Navigation Tabs */}
        <nav className="flex space-x-1 sm:space-x-2 overflow-x-auto py-2">
          {NAV_TABS.map((tab) => {
            const isActive = isTabActive(tab.href);

            return (
              <Link
                key={tab.href}
                href={tab.href}
                onClick={() => setOptimisticPath(tab.href)}
                className={clsx(
                  'inline-flex items-center gap-2 px-4 py-2 rounded-xl text-xs font-semibold whitespace-nowrap transition-all',
                  isActive
                    ? 'bg-theme text-white shadow-md shadow-theme/20'
                    : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100'
                )}
              >
                <i className={clsx(tab.faIcon, isActive ? 'text-white' : 'text-slate-500')} />
                <span>{tab.label}</span>
              </Link>
            );
          })}
        </nav>
      </div>
    </header>
  );
}