"use client";
/**
 * ChatHeader 顶部栏
 *
 * 图标：lucide-react <Lock />（游客 banner）+ <Menu />（菜单按钮）
 *   tree-shakable，currentColor 继承父 color
 */
import type { ReactNode } from "react";
import { Lock, Menu } from "lucide-react";

import { BackButton } from "@/app/_components";
import { useActiveCharacterRoutes } from "@/providers/character-provider";
import { useAppNavigator } from "@/router/use-app-navigator";

import { BrowserHintOverlay } from "./browser-hint-overlay";

export interface ChatHeaderProps {
  isGuest: boolean;
  offerBanner?: ReactNode;
  showBrowserHint?: boolean;
}

export function ChatHeader({
  isGuest,
  offerBanner,
  showBrowserHint = false,
}: ChatHeaderProps) {
  const navigator = useAppNavigator();
  const characterRoutes = useActiveCharacterRoutes();

  return (
    <header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
      {isGuest ? (
        <button
          type="button"
          data-analytics-key="chat.open_signup"
          data-analytics-label="Open sign up"
          className="flex w-full cursor-pointer items-center justify-center gap-(--spacing-sm,8px) border-0 bg-accent px-(--spacing-md,12px) py-(--spacing-sm,8px) text-center text-(length:--responsive-caption,var(--font-size-sm,12px)) font-medium text-white"
          onClick={() => navigator.openAuth(characterRoutes.chat)}
          aria-label="Sign up to unlock more features"
        >
          <Lock
            className="size-(--icon-size-sm,16px)"
            size={16}
            aria-hidden="true"
          />
          <span>Sign up to unlock more features</span>
        </button>
      ) : (
        offerBanner
      )}

      <div
        className={
          isGuest
            ? "flex items-center px-(--chat-inline-padding,16px) py-(--spacing-sm,8px)"
            : "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-(--spacing-sm,8px) px-(--chat-inline-padding,16px) py-(--spacing-sm,8px)"
        }
      >
        <BackButton
          href={characterRoutes.splash}
          variant="dark"
          ariaLabel="Back to home"
          analyticsKey="chat.back_to_home"
        />

        {!isGuest ? (
          <>
            <div className="flex min-w-0 justify-center">
              {showBrowserHint ? <BrowserHintOverlay /> : null}
            </div>

            <button
              type="button"
              data-analytics-key="chat.open_menu"
              data-analytics-label="Open chat menu"
              className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
              onClick={() => navigator.push(characterRoutes.sidebar)}
              aria-label="Menu"
            >
              <Menu size={24} aria-hidden="true" />
            </button>
          </>
        ) : null}
      </div>
    </header>
  );
}