"use client";

import Link from "next/link";
import { CircleHelp, LogOut, Search } from "lucide-react";

import { LogoutButton } from "@/components/auth/logout-button";
import { LanguageSwitcher } from "@/components/layout/language-switcher";
import { useLocale } from "@/components/providers/locale-provider";
import type { SessionUser } from "@/lib/auth";

type TopbarProps = {
  title: string;
  description: string;
  user: SessionUser;
};

export function Topbar({ title, description, user }: TopbarProps) {
  const { dict } = useLocale();

  return (
    <>
      <header className="sticky top-0 z-40 flex h-14 items-center justify-between border-b border-line/70 bg-white px-6 shadow-panel">
        <div className="flex flex-1 items-center">
          <div className="relative hidden w-72 lg:block">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
            <input
              className="w-full rounded-lg border-none bg-slate-50 py-1.5 pl-9 pr-3 text-sm outline-none ring-0 focus:ring-2 focus:ring-moss/20"
              placeholder={dict.shell.searchPlaceholder}
              type="text"
            />
          </div>
        </div>
        <div className="flex items-center gap-4">
          <LanguageSwitcher />
          <Link
            href="/help"
            className="rounded-lg p-2 text-slate-600 transition hover:bg-slate-50"
            aria-label={dict.common.help}
          >
            <CircleHelp className="h-5 w-5" />
          </Link>
          <LogoutButton
            className="inline-flex items-center gap-2 rounded-lg border border-line/70 px-3 py-2 text-[13px] font-semibold text-slate-700 transition hover:bg-slate-50"
            label={dict.common.logout}
            icon={<LogOut className="h-4 w-4" />}
          />
          <div className="flex items-center gap-3">
            <div className="text-right">
              <p className="text-[13px] font-semibold text-ink">{user.name}</p>
              <p className="text-[11px] uppercase tracking-[0.05em] text-slate-500">
                {user.role}
              </p>
            </div>
            <div className="flex h-8 w-8 items-center justify-center rounded-full border border-slate-200 bg-slate-100 text-xs font-bold text-moss">
              {user.name
                .split(" ")
                .map((part) => part[0])
                .slice(0, 2)
                .join("")}
            </div>
          </div>
        </div>
      </header>
      <div className="border-b border-line/50 bg-white px-6 py-5">
        <h1 className="text-[20px] font-semibold leading-7 text-ink">{title}</h1>
        <p className="mt-1 max-w-3xl text-[13px] leading-[18px] text-slate-500">
          {description}
        </p>
      </div>
    </>
  );
}
