//src/components/admin/Topbar.tsx
"use client"

import { useRouter } from "next/navigation"
import { useLocale, useTranslations } from "next-intl"
import { LogOut, Shield } from "lucide-react"

import { LocaleSwitcher } from "@/src/components/LocaleSwitcher"
import { logout } from "@/src/lib/api/auth-session"
import { getLoginRoute } from "@/src/lib/auth/login-route"
import { ProfileDropdown } from "@/src/components/shared/ProfileDropdown"

const NAVY = "#1a3578"
const TEAL = "#4dba96"

export default function Topbar() {
  const t = useTranslations("common")
  const router = useRouter()
  const locale = useLocale()

  function onLogout() {
    logout()
    router.replace(getLoginRoute(locale))
  }

  return (
    <div className="flex items-center justify-between gap-3 w-full">
      {/* Breadcrumb / contexte */}
      <div className="flex items-center gap-2.5">
        <div
          className="h-7 w-7 rounded-lg flex items-center justify-center shrink-0"
          style={{ background: `${NAVY}12`, border: `1px solid ${NAVY}18` }}
        >
          <Shield className="h-3.5 w-3.5" style={{ color: NAVY }} />
        </div>
        <div>
          <div className="text-sm font-semibold text-slate-800 leading-tight">{t("admin_area")}</div>
          <div className="text-[11px] text-slate-400 leading-tight">ACX Platform</div>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <LocaleSwitcher />
        <ProfileDropdown accentColor={NAVY} secondaryColor={TEAL} />

        <button
          onClick={onLogout}
          className="inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium transition hover:bg-red-50"
          style={{ border: "1px solid rgba(15,23,42,.08)", color: "#64748b" }}
          onMouseEnter={(e) => {
            (e.currentTarget as HTMLElement).style.borderColor = "rgba(239,68,68,0.25)"
            ;(e.currentTarget as HTMLElement).style.color = "#dc2626"
          }}
          onMouseLeave={(e) => {
            (e.currentTarget as HTMLElement).style.borderColor = "rgba(15,23,42,.08)"
            ;(e.currentTarget as HTMLElement).style.color = "#64748b"
          }}
        >
          <LogOut className="h-4 w-4" />
          <span className="hidden sm:inline">{t("logout")}</span>
        </button>
      </div>
    </div>
  )
}