'use client';

import { useState } from 'react';
import {
  Search,
  Smartphone,
  MapPin,
  Heart,
  ShoppingBag,
  User,
  ChevronDown,
  Flame,
  Truck,
  Store,
  RotateCw,
  Box,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const platformBenefits = [
  { icon: RotateCw, label: 'Buyback Platform' },
  { icon: Box, label: 'Free Pickup' },
];

const appBenefits = [{ icon: Truck, label: 'Free Shipping' }];

const navigationItems = [
  { label: 'HOME' },
  { label: 'SHOP', dropdown: true },
  { label: 'SELL YOUR DEVICE' },
  { label: 'BUYBACK' },
  { label: 'BRANDS' },
  { label: 'ABOUT US' },
  { label: 'CONTACT US' },
];

const quickLinks = [
  { icon: Flame, label: 'HOT DEALS' },
  { icon: Truck, label: 'TRACK YOUR ORDER' },
  { icon: MapPin, label: 'STORE LOCATOR' },
];

export function SiteHeader() {
  const [cartCount] = useState(0);

  return (
    <header className="relative z-10 flex w-full flex-col bg-white">
      {/* Top bar */}
      <div className="flex min-h-[38px] items-center justify-between bg-main px-4 py-2.5 sm:px-8 lg:px-16">
        <div className="flex items-center gap-4">
          {platformBenefits.map((benefit) => (
            <div key={benefit.label} className="flex items-center gap-2">
              <benefit.icon className="h-[18px] w-[18px] text-white" />
              <span className="font-satoshi text-xs font-medium tracking-[0.5px] text-white">
                {benefit.label}
              </span>
            </div>
          ))}
        </div>
        <div className="flex items-center justify-end gap-4">
          {appBenefits.map((benefit) => (
            <div key={benefit.label} className="flex items-center gap-2">
              <benefit.icon className="h-[18px] w-[18px] text-white" />
              <span className="font-satoshi text-xs font-medium tracking-[0.5px] text-white">
                {benefit.label}
              </span>
            </div>
          ))}
          <div className="flex items-center gap-4">
            <span className="font-satoshi text-xs font-medium text-white">Download App</span>
            <div className="flex items-center gap-3">
              <button aria-label="Google Play" className="text-white hover:opacity-80">
                <Smartphone className="h-[18px] w-[18px]" />
              </button>
              <button aria-label="App Store" className="text-white hover:opacity-80">
                <Smartphone className="h-[18px] w-[18px]" />
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Logo + search + actions */}
      <div className="border-b border-app px-4 sm:px-8 lg:px-16">
        <div className="flex min-h-[80px] items-center justify-between gap-6 py-4">
          <button
            className="flex shrink-0 items-center gap-2"
            aria-label="BuyBack Device home"
          >
            <span className="flex items-center justify-center rounded-md bg-sec p-1.5">
              <Smartphone className="h-6 w-6 text-white" />
            </span>
            <span className="font-satoshi text-xl leading-5 font-bold">
              <span className="font-bold text-slate-900">BuyBack </span>
              <span className="font-bold text-sec">Device</span>
            </span>
          </button>

          <form
            className="flex min-w-0 max-w-[636px] flex-1 items-center overflow-hidden rounded-[48px] border border-app bg-white"
            role="search"
          >
            <Select defaultValue="all-categories">
              <SelectTrigger
                aria-label="Device category"
                className="h-10 w-auto shrink-0 gap-2 rounded-none border-0 border-r border-app px-4 py-2 font-satoshi text-sm font-medium text-main shadow-none focus:ring-0"
              >
                <SelectValue placeholder="All Categories" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all-categories">All Categories</SelectItem>
                <SelectItem value="phones">Phones</SelectItem>
                <SelectItem value="laptops">Laptops</SelectItem>
                <SelectItem value="tablets">Tablets</SelectItem>
              </SelectContent>
            </Select>
            <Input
              type="search"
              aria-label="Search devices, brands and more"
              placeholder="Search for devices, brands and more..."
              className="h-10 min-w-0 flex-1 rounded-none border-0 px-4 font-sans text-sm text-mtext shadow-none placeholder:text-mtext focus-visible:ring-0"
            />
            <Button
              type="submit"
              className="h-10 shrink-0 rounded-none bg-sec px-5 text-white hover:bg-sec/90"
              aria-label="Search"
            >
              <Search className="h-5 w-5" aria-hidden="true" />
            </Button>
          </form>

          <div className="flex shrink-0 items-center gap-6">
            <button className="flex items-center gap-2">
              <span className="flex items-center justify-center rounded-full bg-main p-2">
                <MapPin className="h-5 w-5 text-white" />
              </span>
              <span className="flex flex-col items-start">
                <span className="font-satoshi text-[10px] font-bold leading-none text-mtext">
                  SELL DEVICE
                </span>
                <span className="mt-1 font-satoshi text-xs font-bold leading-none text-sec">
                  Get Instant Quote
                </span>
              </span>
            </button>
            <button aria-label="Wishlist" className="hover:opacity-70">
              <Heart className="h-6 w-6 text-main" />
            </button>
            <button aria-label={`Shopping bag, ${cartCount} items`} className="relative hover:opacity-70">
              <ShoppingBag className="h-6 w-6 text-main" />
              <span className="absolute -right-1 -top-1 flex min-w-[18px] items-center justify-center rounded-full bg-sec px-1 py-[3px] text-xs leading-[11px] text-white">
                {cartCount}
              </span>
            </button>
            <button className="flex items-center gap-2">
              <span className="flex items-center justify-center rounded-full bg-main p-2">
                <User className="h-5 w-5 text-white" />
              </span>
              <span className="flex flex-col items-start">
                <span className="font-satoshi text-[10px] font-bold leading-none text-mtext">
                  LOGIN
                </span>
                <span className="mt-1 font-satoshi text-xs font-bold leading-none text-sec">
                  My Account
                </span>
              </span>
            </button>
          </div>
        </div>
      </div>

      {/* Nav bar */}
      <div className="border-b border-app px-4 py-4 sm:px-8 lg:px-16">
        <div className="flex items-center justify-between gap-6">
          <nav aria-label="Primary navigation">
            <ul className="flex items-center gap-8">
              {navigationItems.map((item, index) => (
                <li key={item.label}>
                  <button
                    className={`flex items-center gap-1 font-satoshi text-xs font-bold tracking-[0.5px] text-main hover:opacity-70 ${
                      index === 0 ? 'pr-5' : ''
                    }`}
                  >
                    {item.label}
                    {item.dropdown && <ChevronDown className="h-[18px] w-[18px]" />}
                  </button>
                </li>
              ))}
            </ul>
          </nav>
          <nav aria-label="Quick links">
            <ul className="flex items-center justify-end gap-6">
              {quickLinks.map((link) => (
                <li key={link.label}>
                  <button className="flex items-center gap-1 font-satoshi text-xs font-bold tracking-[0.5px] text-main hover:opacity-70">
                    <link.icon className="h-[18px] w-[18px]" />
                    {link.label}
                  </button>
                </li>
              ))}
            </ul>
          </nav>
        </div>
      </div>
    </header>
  );
}