'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import { ShoppingCart } from 'lucide-react';
import { Container } from '@/components/ui/container';
import { Button } from '@/components/ui/button';
import { LanguageSwitcher } from './language-switcher';
import { useCartStore } from '@/lib/cart-store';
import { BrandName } from '@/components/ui/brand-name';
import { siteConfig } from '@/data/site-config';
import type { Locale } from '@/i18n/config';

export function Header({ locale }: { locale: Locale }) {
  const t = useTranslations('nav');
  const items = useCartStore((s) => s.items);
  const toggleCart = useCartStore((s) => s.toggle);
  const itemCount = items.reduce((sum, i) => sum + i.quantity, 0);

  const links: { href: string; label: string }[] = [
    { href: `/${locale}`, label: t('home') },
    { href: `/${locale}/services`, label: t('services') },
    { href: `/${locale}/products`, label: t('products') },
    { href: `/${locale}/projects`, label: t('projects') },
    { href: `/${locale}/blog`, label: t('blog') },
    { href: `/${locale}/about`, label: t('about') },
    { href: `/${locale}/contact`, label: t('contact') }
  ];

  return (
    <header className="sticky top-0 z-40 border-b border-graphite-800/10 bg-paper-50/90 backdrop-blur">
      <Container className="flex h-16 items-center justify-between gap-4">
        <Link href={`/${locale}`} className="flex items-center gap-2.5 font-display text-lg font-semibold">
          <Image
            src="/images/logo-square.jpg"
            alt={`${siteConfig.companyName} logo`}
            width={40}
            height={40}
            className="h-9 w-9 rounded-full object-cover ring-2 ring-copper-500/20"
            priority
          />
          <span className="hidden sm:inline">
            <BrandName className="text-graphite-950" accentClass="text-copper-600" />
          </span>
        </Link>

        <nav className="hidden items-center gap-6 text-sm font-medium lg:flex">
          {links.map((link) => (
            <Link key={link.href} href={link.href} className="text-graphite-900/80 hover:text-graphite-950">
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <LanguageSwitcher locale={locale} />
          <button
            onClick={toggleCart}
            className="relative rounded-full p-2 text-graphite-900 hover:bg-graphite-900/5"
            aria-label={t('quote')}
          >
            <ShoppingCart className="h-5 w-5" aria-hidden="true" />
            {itemCount > 0 && (
              <span className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-copper-500 text-[10px] font-bold text-graphite-950">
                {itemCount}
              </span>
            )}
          </button>
          <Button href={`/${locale}/devis`} className="hidden sm:inline-flex">
            {t('quote')}
          </Button>
        </div>
      </Container>
    </header>
  );
}