'use client';

import {Icon} from '@astryxdesign/core/Icon';
import {IconButton} from '@astryxdesign/core/IconButton';
import {HStack} from '@astryxdesign/core/Layout';
import {Text} from '@astryxdesign/core/Text';
import {useLoyalyAi} from '@/features/loyaly-ai/providers/LoyalyAiProvider';
import {ICONS} from '@/shared/utils/icons';

/**
 * Minimal by design: a wordmark and three controls.
 *
 * What used to be here — a three-tab strip (AI / Analytics / Chat) — made the
 * assistant read as a dashboard widget with a chat feature. A conversational
 * product does not ask you to choose a mode before it will talk to you, so the
 * tabs are gone and the conversation is the surface.
 *
 * `onClose` is optional because the two hosts differ: the slide-over closes
 * itself, the inline panel is collapsed by the top bar's toggle, and rendering
 * a close button with nothing to close would be a lie.
 */
import {BrandLogo} from '@/shared/components/brand/BrandLogo';

export function ChatHeader({onClose}: {onClose?: () => void}) {
  const {
    newChat,
    isHistoryOpen,
    setHistoryOpen,
    panelMode,
    toggleExpand,
    toggleFullscreen,
  } = useLoyalyAi();

  const isExpanded = panelMode === 'expanded';
  const isFullscreen = panelMode === 'fullscreen';

  return (
    <HStack
      vAlign="center"
      hAlign="between"
      gap={2}
      paddingInline={4}
      paddingBlock={3}
      width="100%"
      // The header is the only thing pinned above the scroll area, so it owns
      // the hairline that separates the conversation from the chrome.
      className="border-b border-border shrink-0"
    >
      <HStack gap={2} vAlign="center">
        <BrandLogo height={20} />
      </HStack>

      <HStack gap={0.5} vAlign="center">
        <IconButton
          variant="ghost"
          size="sm"
          label={isExpanded ? 'Restore width' : 'Expand panel'}
          tooltip={isExpanded ? 'Restore' : 'Expand'}
          icon={<Icon icon={isExpanded ? ICONS.restore : ICONS.expand} size="sm" />}
          onClick={toggleExpand}
        />
        <IconButton
          variant="ghost"
          size="sm"
          label={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
          tooltip={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
          icon={<Icon icon={isFullscreen ? ICONS.minimize : ICONS.fullscreen} size="sm" />}
          onClick={toggleFullscreen}
        />
        <IconButton
          variant="ghost"
          size="sm"
          label="New chat"
          tooltip="New chat"
          icon={<Icon icon={ICONS.newChat} size="sm" />}
          onClick={newChat}
        />
        <IconButton
          variant="ghost"
          size="sm"
          label="Chat history"
          tooltip="History"
          icon={<Icon icon={ICONS.history} size="sm" />}
          onClick={() => setHistoryOpen(!isHistoryOpen)}
          aria-expanded={isHistoryOpen}
        />
        {onClose ? (
          <IconButton
            variant="ghost"
            size="sm"
            label="Close Loyaly AI"
            tooltip="Close"
            icon={<Icon icon="close" size="sm" />}
            onClick={onClose}
          />
        ) : null}
      </HStack>
    </HStack>
  );
}
