"use client"

import Link from "next/link"
import { useLocale, useTranslations } from "next-intl"
import { Menu, LogOut, Search } from "lucide-react"

import { LocaleSwitcher } from "@/src/components/LocaleSwitcher"
import { logout } from "@/src/lib/api/auth-session"

export function ClientTopbar() {
  const t = useTranslations("clientPortal")
  const locale = useLocale()

  return (
    <div className="mx-auto max-w-7xl px-4 sm:px-6 py-3 flex items-center justify-between gap-3">
      {/* Left */}
      <div className="flex items-center gap-3 min-w-0">
        <div className="lg:hidden rounded-xl border bg-white p-2">
          <Menu className="h-4 w-4 text-neutral-600" />
        </div>

        <div className="min-w-0">
          <div className="text-sm font-semibold text-[#42210b] truncate">
            {t("topbar.title")}
          </div>
          <div className="text-xs text-neutral-500 truncate">
            {t("topbar.subtitle")}
          </div>
        </div>
      </div>

      {/* Center (search placeholder) */}
      <div className="hidden md:flex items-center gap-2 rounded-2xl border bg-white px-3 py-2 w-[420px] max-w-[40vw]">
        <Search className="h-4 w-4 text-neutral-400" />
        <input
          className="w-full outline-none text-sm"
          placeholder={t("topbar.searchPlaceholder")}
        />
      </div>

      {/* Right */}
      <div className="flex items-center gap-2">
        <div className="[&_select]:bg-white [&_select]:text-[#42210b] [&_svg]:text-[#42210b]">
          <LocaleSwitcher />
        </div>

        <button
          onClick={() => {
            logout()
            window.location.href = `/${locale}/client/login`
          }}
          className="inline-flex items-center gap-2 rounded-xl border bg-white px-3 py-2 text-sm hover:bg-neutral-50"
          style={{ borderColor: "rgba(66,33,11,0.15)" }}
          title={t("common.logout")}
        >
          <LogOut className="h-4 w-4 text-neutral-500" />
          <span className="hidden sm:inline">{t("common.logout")}</span>
        </button>
      </div>
    </div>
  )
}