'use client';

import { PanelRightOpen, PanelRightClose } from 'lucide-react';

import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';

import { ChatHeaderActionButton } from './ChatHeaderActionButton';
import type { ChatDockMode } from '../ChatDock';

export interface ChatHeaderModeToggleProps {
  /** Current dock mode. */
  mode: ChatDockMode;
  /** Toggle handler. Wire to `useChatDockPrefs().toggleMode`. */
  onToggle: () => void;
  /** Override aria/tooltip label for popover→side. */
  expandLabel?: string;
  /** Override aria/tooltip label for side→popover. */
  collapseLabel?: string;
  /**
   * Always render — useful for stories. By default the toggle hides itself on
   * viewports below `lg` (1024px) since side mode falls back to popover there.
   */
  forceVisible?: boolean;
}

/**
 * "Dock to side" / "back to popover" toggle.
 *
 * Side mode is desktop-only — on viewports below `lg` (1024px) `<ChatDock>`
 * silently falls back to popover anyway, so the toggle has nothing to do
 * and auto-hides. Pass `forceVisible` to override (e.g. in stories).
 */
export function ChatHeaderModeToggle({
  mode,
  onToggle,
  expandLabel = 'Dock to side',
  collapseLabel = 'Back to popover',
  forceVisible = false,
}: ChatHeaderModeToggleProps) {
  const isBelowDesktop = useIsTabletOrBelow();
  if (isBelowDesktop && !forceVisible) return null;

  const isSide = mode === 'side';
  return (
    <ChatHeaderActionButton
      icon={
        isSide ? (
          <PanelRightClose className="h-3.5 w-3.5" />
        ) : (
          <PanelRightOpen className="h-3.5 w-3.5" />
        )
      }
      ariaLabel={isSide ? collapseLabel : expandLabel}
      onClick={onToggle}
    />
  );
}