'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Logo } from '@/components/icons';
import { cn } from '@/lib/utils';
import { Button } from '../ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
import { Home, Info, Mail, LayoutGrid, Globe } from 'lucide-react';
import { availableLanguages } from '@/lib/data';
import { useState } from 'react';
import dynamic from 'next/dynamic';
import { Skeleton } from '../ui/skeleton';
import { useFirestore, useDoc, useMemoFirebase } from '@/firebase';
import { doc } from 'firebase/firestore';
import type { AppSettings } from '@/lib/types';


const HeaderAuth = dynamic(() => import('./header-auth'), {
  ssr: false,
  loading: () => <Skeleton className="h-10 w-24" />,
});


const navLinks = [
  { href: '/home', label: 'Home', icon: Home },
  { href: '/categories', label: 'Categories', icon: LayoutGrid },
  { href: '/about-us', label: 'About Us', icon: Info },
  { href: '/contact-us', label: 'Contact Us', icon: Mail },
];

export default function Header() {
  const pathname = usePathname();
  const [selectedLanguage, setSelectedLanguage] = useState('en');
  const firestore = useFirestore();
  const settingsDocRef = useMemoFirebase(() => firestore ? doc(firestore, 'settings', 'app') : null, [firestore]);
  const { data: appSettings } = useDoc<AppSettings>(settingsDocRef);

  return (
    <header className="sticky top-0 z-50 hidden w-full border-b bg-card/80 backdrop-blur-sm md:block">
      <div className="container mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
        <Link href="/home" className="flex items-center gap-2">
          <Logo className="h-8 w-8" />
          <span className="text-xl font-bold text-primary">{appSettings?.appName || 'BizAround'}</span>
        </Link>
        <nav className="flex items-center gap-6 text-sm">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={cn(
                'transition-colors hover:text-accent',
                pathname === link.href ? 'font-semibold text-accent' : 'text-muted-foreground'
              )}
            >
              {link.label}
            </Link>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" size="sm">
                <Globe className="mr-2 h-4 w-4" />
                {selectedLanguage.toUpperCase()}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              {availableLanguages.map(lang => (
                <DropdownMenuItem key={lang.code} onSelect={() => setSelectedLanguage(lang.code)}>
                  {lang.name}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
          
          <HeaderAuth />
        </div>
      </div>
    </header>
  );
}