"use client"

import Link from "next/link"
import { useLocale } from "@/lib/i18n/context"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Search, Menu, User, LogIn, PenSquare, X, Sparkles } from "lucide-react"
import { useState } from "react"
import { LocaleSwitcher } from "@/components/i18n/locale-switcher"
import { AllSeeingEyeLogo } from "@/components/ui/mysterious-background"

export function Header() {
  const { t } = useLocale()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [searchOpen, setSearchOpen] = useState(false)

  const isLoggedIn = false

  return (
    <header className="sticky top-0 z-50 border-b border-border/30 bg-background/90 backdrop-blur-xl">
      {/* Subtle top accent line */}
      <div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-primary/50 to-transparent" />
      
      <div className="mx-auto flex h-16 max-w-7xl items-center gap-6 px-4 lg:px-8">
        {/* Logo with All-Seeing Eye */}
        <Link href="/" className="group flex items-center gap-3 shrink-0">
          <div className="relative flex h-11 w-11 items-center justify-center">
            <AllSeeingEyeLogo className="h-11 w-11 transition-all group-hover:scale-110" animated={false} />
            {/* Glow effect on hover */}
            <div className="absolute inset-0 rounded-full bg-primary/0 blur-xl transition-all group-hover:bg-primary/20" />
          </div>
          <div className="hidden sm:block">
            <span className="text-xl font-bold tracking-tight text-foreground">
              DERIN<span className="text-primary">DEVLET</span>
            </span>
            <p className="text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              Gerceklerin Pesinde
            </p>
          </div>
        </Link>

        {/* Desktop Nav */}
        <nav className="hidden items-center gap-1 md:flex">
          <Link href="/">
            <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground hover:bg-secondary/80">
              {t.nav.home}
            </Button>
          </Link>
          <Link href="/categories">
            <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground hover:bg-secondary/80">
              {t.nav.categories}
            </Button>
          </Link>
        </nav>

        {/* Search & Actions */}
        <div className="flex flex-1 items-center justify-end gap-3">
          {searchOpen ? (
            <div className="flex flex-1 items-center gap-2 md:max-w-md">
              <div className="relative flex-1">
                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                <Input
                  placeholder={t.nav.search}
                  className="h-10 bg-secondary/50 border-border/50 pl-10 text-sm placeholder:text-muted-foreground focus:bg-secondary focus:border-primary/50"
                  autoFocus
                />
              </div>
              <Button variant="ghost" size="icon" className="h-10 w-10 shrink-0 text-muted-foreground hover:text-foreground" onClick={() => setSearchOpen(false)}>
                <X className="h-4 w-4" />
                <span className="sr-only">Close search</span>
              </Button>
            </div>
          ) : (
            <Button 
              variant="ghost" 
              size="icon" 
              className="h-10 w-10 text-muted-foreground hover:text-foreground hover:bg-secondary/80" 
              onClick={() => setSearchOpen(true)}
            >
              <Search className="h-4 w-4" />
              <span className="sr-only">Search</span>
            </Button>
          )}

          {/* Locale Switcher */}
          <LocaleSwitcher />

          {/* Auth / Profile */}
          {isLoggedIn ? (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="icon" className="h-10 w-10 text-muted-foreground hover:text-foreground">
                  <User className="h-4 w-4" />
                  <span className="sr-only">Profile</span>
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48 bg-card border-border/50">
                <DropdownMenuItem asChild>
                  <Link href="/profile/me">{t.nav.profile}</Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
                  <Link href="/profile/settings">{t.nav.settings}</Link>
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>{t.nav.logout}</DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          ) : (
            <div className="hidden items-center gap-2 sm:flex">
              <Link href="/auth/login">
                <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
                  <LogIn className="mr-2 h-4 w-4" />
                  {t.nav.login}
                </Button>
              </Link>
              <Link href="/auth/sign-up">
                <Button size="sm" className="bg-primary/90 hover:bg-primary text-primary-foreground shadow-lg shadow-primary/30 transition-all hover:shadow-primary/50">
                  {t.nav.signUp}
                </Button>
              </Link>
            </div>
          )}

          {/* New Thread Button (Desktop) */}
          <Link href="/threads/new" className="hidden lg:block">
            <Button size="sm" className="gap-2 bg-gradient-to-r from-accent to-accent/80 text-accent-foreground shadow-lg shadow-accent/30 transition-all hover:shadow-accent/50 hover:scale-[1.02]">
              <Sparkles className="h-4 w-4" />
              {t.nav.newThread}
            </Button>
          </Link>

          {/* Mobile Menu Toggle */}
          <Button
            variant="ghost"
            size="icon"
            className="h-10 w-10 md:hidden text-muted-foreground hover:text-foreground"
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          >
            {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            <span className="sr-only">Menu</span>
          </Button>
        </div>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="border-t border-border/30 bg-card/95 backdrop-blur-xl px-4 py-4 md:hidden">
          <nav className="flex flex-col gap-1">
            <Link href="/" onClick={() => setMobileMenuOpen(false)}>
              <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground hover:text-foreground">
                {t.nav.home}
              </Button>
            </Link>
            <Link href="/categories" onClick={() => setMobileMenuOpen(false)}>
              <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground hover:text-foreground">
                {t.nav.categories}
              </Button>
            </Link>
            <Link href="/threads/new" onClick={() => setMobileMenuOpen(false)}>
              <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground hover:text-foreground">
                <PenSquare className="mr-2 h-4 w-4" />
                {t.nav.newThread}
              </Button>
            </Link>
            {!isLoggedIn && (
              <>
                <div className="my-2 border-t border-border/30" />
                <Link href="/auth/login" onClick={() => setMobileMenuOpen(false)}>
                  <Button variant="ghost" size="sm" className="w-full justify-start text-muted-foreground hover:text-foreground">
                    <LogIn className="mr-2 h-4 w-4" />
                    {t.nav.login}
                  </Button>
                </Link>
                <Link href="/auth/sign-up" onClick={() => setMobileMenuOpen(false)}>
                  <Button size="sm" className="w-full bg-primary hover:bg-primary/90 text-primary-foreground">
                    {t.nav.signUp}
                  </Button>
                </Link>
              </>
            )}
          </nav>
        </div>
      )}
    </header>
  )
}