'use client'

import Link from 'next/link'
import { useState, useEffect } from 'react'
import { ShoppingCart, Menu, X, Store } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/Button'
import { useCart } from '@/lib/cart'

interface ShopHeaderProps {
  businessSlug: string
}

interface BusinessInfo {
  name: string
  slug: string
  logo_url?: string | null
  brand_color?: string | null
}

export function ShopHeader({ businessSlug }: ShopHeaderProps) {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const [business, setBusiness] = useState<BusinessInfo | null>(null)
  const { itemCount } = useCart()

  useEffect(() => {
    fetch(`/api/shop/business/${businessSlug}`)
      .then(res => res.json())
      .then(data => data.success && setBusiness(data.data))
      .catch(() => {})
  }, [businessSlug])

  const brandColor = business?.brand_color || undefined

  return (
    <header className="sticky top-0 z-50 w-full border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-950/80 backdrop-blur-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center gap-8">
            <Link href={`/shop/${businessSlug}`} className="flex items-center gap-2" aria-label="Go to storefront">
              {business?.logo_url ? (
                <img
                  src={business.logo_url}
                  alt={business?.name || 'Store logo'}
                  className="h-8 w-8 rounded object-cover"
                />
              ) : (
                <Store className="h-8 w-8" style={brandColor ? { color: brandColor } : undefined} />
              )}
              <span className="text-xl font-bold text-gray-900 dark:text-white">
                {business?.name || businessSlug.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase())}
              </span>
            </Link>

            <nav className="hidden md:flex items-center gap-6" aria-label="Main navigation">
              <Link
                href={`/shop/${businessSlug}`}
                className="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400"
                style={brandColor ? ({ ['--shop-brand' as string]: brandColor }) : undefined}
              >
                Products
              </Link>
            </nav>
          </div>

          <div className="flex items-center gap-4">
            <Link
              href={`/shop/${businessSlug}/cart`}
              className="relative p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
              aria-label={`Shopping cart (${itemCount} items)`}
            >
              <ShoppingCart className="h-6 w-6" />
              {itemCount > 0 && (
                <span
                  className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-indigo-600 text-xs font-medium text-white"
                  style={brandColor ? { backgroundColor: brandColor } : undefined}
                >
                  {itemCount > 99 ? '99+' : itemCount}
                </span>
              )}
            </Link>

            <button
              className="md:hidden p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              aria-expanded={isMobileMenuOpen}
              aria-controls="mobile-menu"
              aria-label="Toggle menu"
            >
              {isMobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>

        {isMobileMenuOpen && (
          <div id="mobile-menu" className="md:hidden py-4 border-t border-gray-200 dark:border-gray-800">
            <nav className="flex flex-col gap-4">
              <Link
                href={`/shop/${businessSlug}`}
                className="text-base font-medium text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Products
              </Link>
              <Link
                href={`/shop/${businessSlug}/cart`}
                className="text-base font-medium text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400"
                onClick={() => setIsMobileMenuOpen(false)}
              >
                Cart ({itemCount})
              </Link>
            </nav>
          </div>
        )}
      </div>
    </header>
  )
}