"use client"

import { useState } from "react"
import Link from "next/link"
import { Search, ShoppingCart, User, Menu, X } from "lucide-react"
import { useCart } from "@/lib/cart-context"

export function Header() {
  const [searchQuery, setSearchQuery] = useState("")
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const { totalItems } = useCart()

  return (
    <header className="sticky top-0 z-50 w-full">
      <div className="bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 py-2">
          <div className="flex items-center justify-between text-sm flex-wrap gap-2">
            <span className="hidden sm:block">Fast Delivery in Peshawar & All Pakistan</span>
            <span className="text-center flex-1 sm:flex-none">Call us: 03128627995</span>
          </div>
        </div>
      </div>

      {/* Main Header */}
      <div className="bg-background border-b border-border shadow-sm">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center justify-between gap-4">
            <Link href="/" className="flex items-center gap-3 shrink-0">
              {/* Red rounded square with white V */}
              <div className="w-11 h-11 bg-red-600 rounded-xl flex items-center justify-center shadow-lg">
                <svg viewBox="0 0 24 24" className="w-7 h-7" fill="none">
                  <path
                    d="M5 6L12 18L19 6"
                    stroke="white"
                    strokeWidth="3"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              </div>
              {/* Brand text */}
              <div className="flex flex-col">
                <span className="text-2xl font-extrabold text-red-600 leading-none tracking-tight">Vimax</span>
                <span className="text-[11px] text-gray-500 font-medium tracking-wide">by Khan Traders</span>
              </div>
            </Link>

            {/* Search Bar */}
            <div className="flex-1 max-w-2xl hidden md:block">
              <div className="relative">
                <input
                  type="text"
                  placeholder="Search for products..."
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="w-full px-4 py-3 pl-12 rounded-full border border-border bg-muted focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-foreground"
                />
                <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                <button className="absolute right-2 top-1/2 -translate-y-1/2 bg-primary text-primary-foreground px-6 py-2 rounded-full text-sm font-medium hover:bg-primary/90 transition-colors">
                  Search
                </button>
              </div>
            </div>

            {/* Right Section */}
            <div className="flex items-center gap-4">
              {/* Cart */}
              <Link
                href="/cart"
                className="relative flex items-center gap-2 text-foreground hover:text-primary transition-colors"
              >
                <ShoppingCart className="w-6 h-6" />
                {totalItems > 0 && (
                  <span className="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
                    {totalItems}
                  </span>
                )}
                <span className="hidden lg:block text-sm font-medium">Cart</span>
              </Link>

              {/* Login */}
              <Link
                href="/login"
                className="hidden sm:flex items-center gap-2 text-foreground hover:text-primary transition-colors"
              >
                <User className="w-6 h-6" />
                <span className="text-sm font-medium">Login</span>
              </Link>

              {/* Mobile Menu Toggle */}
              <button className="md:hidden text-foreground" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
              </button>
            </div>
          </div>

          {/* Mobile Search */}
          <div className="mt-4 md:hidden">
            <div className="relative">
              <input
                type="text"
                placeholder="Search products..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full px-4 py-3 pl-12 rounded-full border border-border bg-muted focus:outline-none focus:ring-2 focus:ring-primary text-foreground"
              />
              <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
            </div>
          </div>
        </div>

        {/* Mobile Menu */}
        {mobileMenuOpen && (
          <div className="md:hidden border-t border-border bg-background">
            <div className="container mx-auto px-4 py-4 space-y-4">
              <Link href="/login" className="flex items-center gap-2 text-foreground hover:text-primary">
                <User className="w-5 h-5" />
                <span>Login / Register</span>
              </Link>
              <Link href="/cart" className="flex items-center gap-2 text-foreground hover:text-primary">
                <ShoppingCart className="w-5 h-5" />
                <span>Cart ({totalItems})</span>
              </Link>
            </div>
          </div>
        )}
      </div>
    </header>
  )
}
