"use client";
/**
 * ChatHeader 顶部栏
 *
 * 顶部保持返回、首充优惠、收藏入口三段结构。
 */
import type { ReactNode } from "react";
import { Lock } from "lucide-react";

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

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

export function ChatHeader({
  isGuest,
  offerBanner,
}: ChatHeaderProps) {
  const navigator = useAppNavigator();
  const character = useActiveCharacter();
  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>
      ) : null}

      <div className="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"
        />

        <div className="flex min-w-0 justify-center">{offerBanner}</div>

        <FavoriteEntryButton
          characterSlug={character.slug}
          tone="dark"
        />
      </div>
    </header>
  );
}