"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 { ROUTES } from "@/router/routes";
import { useAppNavigator } from "@/router/use-app-navigator";

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

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

  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(ROUTES.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
      )}

      {!isGuest ? (
        <div className="flex items-center justify-between px-(--spacing-md,12px) py-(--spacing-sm,8px)">
          <BackButton
            href={ROUTES.splash}
            variant="dark"
            ariaLabel="Back to home"
            analyticsKey="chat.back_to_home"
          />

          <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(ROUTES.sidebar)}
            aria-label="Menu"
          >
            <Menu size={24} aria-hidden="true" />
          </button>
        </div>
      ) : null}
    </header>
  );
}
