"use client";
/**
 * ChatHeader 顶部栏
 *
 * 顶部保持返回、首充优惠、收藏入口三段结构。
 */
import type { ReactNode } from "react";
import { Lock, Phone } 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();
  const voiceCallEnabled = process.env.NEXT_PUBLIC_ENABLE_VOICE_CALL === "true";

  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>

        <div className="flex items-center gap-2">
          {voiceCallEnabled ? (
            <button
              type="button"
              className="inline-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-white shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition hover:bg-[rgba(28,24,39,0.82)] active:scale-96"
              aria-label={`Call ${character.shortName}`}
              data-analytics-key="chat.start_voice_call"
              data-analytics-label="Start voice call"
              onClick={() => navigator.push(characterRoutes.call)}
            >
              <Phone size={19} strokeWidth={2.3} aria-hidden="true" />
            </button>
          ) : null}
          <FavoriteEntryButton
            characterSlug={character.slug}
            tone="dark"
          />
        </div>
      </div>
    </header>
  );
}
