"use client"

import { Bell, HelpCircle, Search, Globe } from "lucide-react"
import { useTranslation } from "react-i18next"
import { UserMenu, type UserMenuUser } from "@/components/layout/user-menu"
import { NotificationDropdown } from "@/components/layout/notification-dropdown"

export function AppHeader({
  user,
}: {
  user: UserMenuUser
}) {
  const { t, i18n } = useTranslation()

  const toggleLanguage = () => {
    const newLang = i18n.language === "ar" ? "en" : "ar"
    i18n.changeLanguage(newLang)
    localStorage.setItem("language", newLang)
    window.location.reload()
  }

  return (
    <header
      className="sticky top-0 z-30 flex h-16 items-center gap-4 border-b border-border bg-card/80 backdrop-blur-md px-6"
    >
      <div className="flex-1 max-w-xl">
        <div className="relative">
          <Search className="absolute ltr:right-3 rtl:left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
          <input
            type="search"
            placeholder={t('components.layout.app-header.text_1')}
            className="w-full h-10 ltr:pr-10 rtl:pl-10 ltr:pl-4 rtl:pr-4 rounded-lg border border-border bg-muted/50 text-[13px] text-foreground placeholder:text-muted-foreground focus:outline-none focus:bg-card focus:border-gold-400 focus:ring-2 focus:ring-gold-400/20 transition"
          />
        </div>
      </div>

      <div className="hidden md:flex items-center gap-2 rounded-full border border-border bg-card px-3 py-1.5">
        <span className="relative flex h-2 w-2">
          <span className="absolute inline-flex h-full w-full rounded-full bg-success opacity-70 animate-ping" />
          <span className="relative inline-flex h-2 w-2 rounded-full bg-success" />
        </span>
        <span className="text-[11.5px] font-medium text-foreground">{t('components.layout.app-header.text_2')}</span>
      </div>

      <button 
        onClick={toggleLanguage}
        className="hidden md:flex items-center gap-1.5 text-[12.5px] text-muted-foreground hover:text-foreground transition"
      >
        <Globe className="h-4 w-4" />
        <span className="font-medium">{i18n.language === 'ar' ? 'English' : i18n.t('components.layout.app-header.text_3')}</span>
      </button>

      <button className="h-9 w-9 inline-flex items-center justify-center rounded-lg hover:bg-muted transition">
        <HelpCircle className="h-[18px] w-[18px] text-muted-foreground" />
      </button>

      <NotificationDropdown />

      <div className="h-8 w-px bg-border" />

      <UserMenu user={user} />
    </header>
  )
}
