"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { useState, useEffect } from "react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

const mainNavItems = [
  { href: "/", label: "ALL SPORTS" },
  { href: "/live", label: "LIVE" },
  { href: "/virtual", label: "VIRTUAL" },
  { href: "/special-games", label: "SPECIAL GAMES" },
  { href: "/aviator", label: "AVIATOR" },
]

const extraNavItems = [
  { href: "/multi-hot-5", label: "MULTI HOT 5" },
  { href: "/poker", label: "POKER", isNew: true },
  { href: "/race", label: "RACE", isNew: true },
  { href: "/promo", label: "PROMO" },
]

export function SiteHeader() {
  const pathname = usePathname()
  const isLivePage = pathname === "/live"
  const [time, setTime] = useState("")

  useEffect(() => {
    const updateClock = () => {
      const now = new Date()
      setTime(now.toLocaleTimeString("en-GB", { hour12: false }))
    }
    updateClock()
    const interval = setInterval(updateClock, 1000)
    return () => clearInterval(interval)
  }, [])

  return (
    <header className="bg-[#121212] sticky top-0 z-50">
      {/* Top bar */}
      <div className="bg-[#1a1a1a] px-3 py-1 flex items-center justify-between text-[11px] text-white">
        <div className="flex items-center gap-4">
          <button className="flex items-center gap-1.5 hover:text-primary transition-colors">
             <img src="https://flagcdn.com/w20/gb.png" srcSet="https://flagcdn.com/w40/gb.png 2x" width="16" alt="English" className="rounded-sm" />
             <span className="font-bold flex items-center gap-1">en <span className="text-[8px]">▼</span></span>
          </button>
          <div className="flex items-center gap-2 font-bold">
            <span className="text-[14px]">🕒</span>
            <span className="tabular-nums">{time || "00:00:00"}</span>
          </div>
        </div>
        <div className="flex items-center gap-6">
          <div className="flex items-center gap-3">
            <span className="text-white font-bold tracking-tight">+251 (0) Number</span>
            <Input type="password" placeholder="Password" className="bg-[#2a2a2a] border-none px-2 py-0.5 w-32 text-[11px] h-7 rounded-none shadow-none text-white placeholder:text-gray-500" />
          </div>
          <div className="flex items-center gap-1">
            <Button asChild className="bg-[#e67e22] text-white hover:bg-[#d35400] px-5 h-7 text-[11px] font-bold rounded-none uppercase">
              <Link href="/login">Login</Link>
            </Button>
            <Button asChild className="bg-[#d35400] text-white hover:bg-[#c0392b] px-5 h-7 text-[11px] font-bold rounded-none uppercase">
               <Link href="/register">Sign Up</Link>
            </Button>
          </div>
        </div>
      </div>

      {/* Main header */}
      <div className="flex items-center px-0 bg-[#333] h-[60px]">
        {/* Logo Section */}
        <Link href="/" className="flex items-center shrink-0">
          <div className="flex items-center bg-[#1a1a1a] h-[60px] px-4">
            <div className="bg-[#852222] px-3 py-1 -skew-x-12 flex items-center h-[34px]">
               <span className="text-2xl font-black text-white italic tracking-tighter skew-x-12 inline-block leading-none">HARIF</span>
            </div>
            <span className="text-2xl font-black text-[#ff9800] italic tracking-tighter ml-1 leading-none">SPORT</span>
          </div>
        </Link>


        {/* Navigation Wrapper - Pushed to Right */}
        <div className="flex items-center flex-1 justify-end px-4 h-full gap-0">
        {/* Home icon as button */}
        <Link href="/" className="flex items-center justify-center bg-[#ff9800] h-[60px] w-[50px] shrink-0 hover:bg-[#e68900] transition-colors">
          <svg viewBox="0 0 24 24" className="size-6 fill-black"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
        </Link>
          {/* Main Nav Group */}
          <nav className="flex items-center text-[10.5px] font-bold h-full">
            {mainNavItems.map((item) => {
              const isActive = pathname === item.href
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "px-4 flex items-center h-full transition-colors uppercase border-white/5",
                    isActive 
                      ? (item.label === "LIVE" ? "bg-[#ff9800] text-black" : "text-primary bg-black/10") 
                      : "text-white hover:text-primary"
                  )}
                >
                  {item.label}
                </Link>
              )
            })}
          </nav>

          {/* Spacing Gap between groups if needed, but the user says "All in the right" */}

          {/* Extra Nav Group */}
          <nav className="flex items-center text-[10.5px] font-bold h-full">
            {extraNavItems.map((item) => {
              const isActive = pathname === item.href
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={cn(
                    "px-4 flex flex-col items-center justify-center h-full transition-colors relative uppercase",
                    isActive ? "text-primary bg-black/10" : "text-white hover:text-primary"
                  )}
                >
                  {item.isNew && (
                    <span className="absolute top-3 text-[7px] text-primary font-black tracking-tighter leading-none">NEW</span>
                  )}
                  <span className={cn(item.isNew && "mt-1.5")}>{item.label}</span>
                </Link>
              )
            })}
          </nav>
        </div>
      </div>

      {/* Secondary Sub Header */}
      <div className="bg-[#2a2a2a] border-t border-white/5 h-8 px-3 flex items-center gap-6 text-[11px]">
        {[
          { label: "Sport Home", href: "/" },
          { label: "General View", href: "/live", forceActive: isLivePage },
          { label: "Event View", href: "/live/event" },
        ].map((tab) => {
          const isActive = tab.forceActive || pathname === tab.href
          return (
            <Link 
              key={tab.label}
              href={tab.href} 
              className={cn(
                "relative h-full flex items-center text-[10px] font-bold uppercase transition-colors tracking-tight px-1",
                isActive ? "text-[#ff9800]" : "text-white/60 hover:text-white"
              )}
            >
              {tab.label}
              {isActive && tab.label !== "Sport Home" && (
                <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#ff9800]" />
              )}
            </Link>
          )
        })}
      </div>
    </header>
  )
}