"use client"

import { useState } from "react"
import Link from "next/link"
import { Search } from "./search"
import { Button } from "./ui/button"
import { ShoppingCart, Heart, Package2, User, Menu } from 'lucide-react'
import { CatalogMenu } from "./catalog-menu"
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
import { useCart } from "@/contexts/cart-context"
import { useFavorites } from "@/contexts/favorites-context"
import { Badge } from "./ui/badge"

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const { getTotalItems } = useCart()
  const { getTotalFavorites } = useFavorites()

  return (
    <header className="border-b sticky top-0 bg-white z-50">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/" className="text-2xl font-bold text-blue-600">
              STORE
            </Link>
            <div className="hidden md:block">
              <CatalogMenu />
            </div>
          </div>
          <div className="hidden md:block flex-1 max-w-xl mx-4">
            <Search />
          </div>
          <div className="flex items-center gap-4">
            <div className="hidden md:flex items-center gap-4">
              <Button variant="ghost" size="icon" asChild>
                <Link href="/profile">
                  <User className="h-5 w-5" />
                </Link>
              </Button>
              <Button variant="ghost" size="icon">
                <Package2 className="h-5 w-5" />
              </Button>
              <Button variant="ghost" size="icon" className="relative" asChild>
                <Link href="/favorites">
                  <Heart className="h-5 w-5" />
                  {getTotalFavorites() > 0 && (
                    <Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
                      {getTotalFavorites()}
                    </Badge>
                  )}
                </Link>
              </Button>
            </div>
            <Button variant="ghost" size="icon" asChild className="relative">
              <Link href="/cart">
                <ShoppingCart className="h-5 w-5" />
                {getTotalItems() > 0 && (
                  <Badge variant="destructive" className="absolute -top-2 -right-2 h-5 w-5 flex items-center justify-center p-0">
                    {getTotalItems()}
                  </Badge>
                )}
              </Link>
            </Button>
            <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
              <SheetTrigger asChild>
                <Button variant="ghost" size="icon" className="md:hidden">
                  <Menu className="h-5 w-5" />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-[300px] sm:w-[400px]">
                <nav className="flex flex-col gap-4">
                  <Link href="/" onClick={() => setIsMenuOpen(false)}>Главная</Link>
                  <Link href="/profile" onClick={() => setIsMenuOpen(false)}>Профиль</Link>
                  <Link href="/cart" onClick={() => setIsMenuOpen(false)}>Корзина</Link>
                  <div className="md:hidden">
                    <CatalogMenu />
                  </div>
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
        <div className="md:hidden mt-2 mb-4">
          <Search />
        </div>
      </div>
    </header>
  )
}