'use client';

import { Bot, X } from 'lucide-react';
import type { ReactNode } from 'react';

import {
  Button,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@djangocfg/ui-core/components';
import { cn } from '@djangocfg/ui-core/lib';

export interface ChatHeaderProps {
  /** Window title text. */
  title?: ReactNode;
  /** Icon next to the title. Defaults to a bot glyph. */
  icon?: ReactNode;
  /**
   * Action slot — appears to the right of the title, before the close button.
   * Use for reset / settings / minimize / etc. Compose with `ChatHeaderActionButton`.
   */
  actions?: ReactNode;
  /** Show the close (×) button. @default true */
  showClose?: boolean;
  /** Close click handler. */
  onClose?: () => void;
  /** ARIA label + tooltip for the close button. @default 'Close' */
  closeLabel?: string;
  /** Replace the close button entirely (rare — most hosts want the default). */
  closeSlot?: ReactNode;
  /** Extra classes on the `<header>` element. */
  className?: string;
}

/**
 * Standalone chat header — title + icon + action slot + close button.
 *
 * Used by `<ChatDock>` automatically, but can be rendered standalone when
 * the host owns the chat container (e.g. embedded inline in a page).
 */
export function ChatHeader({
  title,
  icon,
  actions,
  showClose = true,
  onClose,
  closeLabel = 'Close',
  closeSlot,
  className,
}: ChatHeaderProps) {
  return (
    <header
      className={cn(
        'border-border bg-muted/30 flex shrink-0 items-center justify-between border-b px-4 py-2.5',
        className,
      )}
    >
      <div className="flex min-w-0 items-center gap-2 text-sm font-semibold">
        {icon ?? <Bot className="text-primary h-4 w-4 shrink-0" />}
        <span className="truncate">{title}</span>
      </div>

      <div className="flex items-center gap-0.5">
        {actions}
        {closeSlot ??
          (showClose && onClose && (
            <Tooltip>
              <TooltipTrigger asChild>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={onClose}
                  aria-label={closeLabel}
                  className="-mr-1 h-7 w-7 p-0"
                >
                  <X className="h-4 w-4" />
                </Button>
              </TooltipTrigger>
              <TooltipContent side="bottom">{closeLabel}</TooltipContent>
            </Tooltip>
          ))}
      </div>
    </header>
  );
}