import React from 'react';
import {
  HomeIcon,
  Maximize2Icon,
  Minimize2Icon,
  PlusIcon,
  XIcon,
} from 'lucide-react';

import type { ICopilotThreadSummary } from '../../../service/copilot/copilot.interface';
import { Button } from '../../ui/button';
import { ThreadSwitcher } from '../ThreadSwitcher';

/**
 * The docked panel's header: the mark, the conversation being read, and the
 * four things that can be done to the panel itself.
 *
 * @param props - Component props.
 * @param props.logo - The plugin icon WordPress localized, when there is one.
 * @param props.threads - The merchant's saved conversations.
 * @param props.activeThreadId - The one open, when it has been saved.
 * @param props.canStartNew - There is a conversation to leave behind.
 * @param props.isWide - The panel is at its wider width.
 * @param props.onHome - Go back to the copilot's home surface.
 * @param props.onNew - Start a new conversation.
 * @param props.onOpenThread - Open a saved conversation.
 * @param props.onDeleteThread - Delete one.
 * @param props.onRenameThread - Rename one.
 * @param props.onToggleWidth - Widen or narrow the panel.
 * @param props.onClose - Close the panel.
 * @return The header.
 */
export function PanelHeader({
  logo,
  threads,
  activeThreadId,
  canStartNew,
  isWide,
  onHome,
  onNew,
  onOpenThread,
  onDeleteThread,
  onRenameThread,
  onToggleWidth,
  onClose,
}: {
  logo: string;
  threads: ICopilotThreadSummary[];
  activeThreadId: string | null;
  canStartNew: boolean;
  isWide: boolean;
  onHome: () => void;
  onNew: () => void;
  onOpenThread: (threadId: string) => void;
  onDeleteThread: (threadId: string) => void;
  onRenameThread: (threadId: string, title: string) => void;
  onToggleWidth: () => void;
  onClose: () => void;
}): React.ReactElement {
  return (
    <header className="relative flex items-center justify-between border-b border-brand/20 bg-linear-to-br from-pink-500 to-brand px-4 py-3">
      <div className="flex min-w-0 flex-1 items-center gap-2">
        <span className="flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-white/20">
          {logo ? (
            <img src={logo} alt="Recomaze" className="h-5 w-5 object-contain" />
          ) : (
            <span className="text-sm font-bold text-white">R</span>
          )}
        </span>
        <ThreadSwitcher
          threads={threads}
          activeThreadId={activeThreadId}
          onOpen={onOpenThread}
          onNew={onNew}
          onDelete={onDeleteThread}
          onRename={onRenameThread}
        />
      </div>
      <div className="flex items-center gap-1 text-white/80">
        <Button
          onClick={onHome}
          aria-label="Home"
          variant="ghost"
          size="icon-sm"
        >
          <HomeIcon className="h-4 w-4" />
        </Button>
        {canStartNew && (
          <Button
            onClick={onNew}
            aria-label="New conversation"
            title="New conversation"
            variant="ghost"
            size="icon-sm"
          >
            <PlusIcon className="h-4 w-4" />
          </Button>
        )}
        <Button
          onClick={onToggleWidth}
          aria-label={isWide ? 'Shrink panel' : 'Expand panel'}
          variant="ghost"
          size="icon-sm"
        >
          {isWide ? (
            <Minimize2Icon className="h-4 w-4" />
          ) : (
            <Maximize2Icon className="h-4 w-4" />
          )}
        </Button>
        <Button
          onClick={onClose}
          aria-label="Close copilot"
          variant="ghost"
          size="icon-sm"
        >
          <XIcon className="h-4 w-4" />
        </Button>
      </div>
    </header>
  );
}