import { Button } from '@learnitive/ui-components';
import { Sparkles, SquareTerminal } from 'lucide-react';
import React from 'react';

export const FLOATING_RESEARCH_DOCK_GAP_CLASS = 'gap-1';

export function FloatingResearchDock({
  aiOpen,
  terminalOpen,
  onToggleAi,
  onToggleTerminal,
  terminalKind = 'local',
}: {
  aiOpen: boolean;
  terminalOpen: boolean;
  onToggleAi: () => void;
  onToggleTerminal: () => void;
  terminalKind?: 'local' | 'cloud';
}) {
  const mobileVisibility = terminalOpen || aiOpen ? 'hidden sm:flex' : 'flex';
  const terminalLabel = terminalKind === 'cloud' ? 'Terminal' : 'Local';

  return (
    <div
      className={`pointer-events-none fixed bottom-4 right-4 z-[75] items-center ${mobileVisibility} ${FLOATING_RESEARCH_DOCK_GAP_CLASS}`}
      data-testid="interactive-research-dock"
      role="group"
      aria-label="Research tools"
    >
      <Button
        className={`pointer-events-auto h-8 rounded-full bg-[#242424] px-2.5 text-xs leading-none text-white shadow-lg hover:bg-[#111827] hover:text-white dark:bg-[#fce94f] dark:text-[#24101f] dark:hover:bg-[#ffe96b] dark:hover:text-[#24101f] ${terminalOpen ? 'ring-2 ring-[#fce94f]/50 dark:ring-white/35' : ''}`}

        data-testid="terminal-open"
        aria-label={terminalOpen ? `Minimize ${terminalLabel}` : `Open ${terminalLabel}`}
        aria-pressed={terminalOpen}
        variant="ghost"
        onClick={onToggleTerminal}
      >
        <SquareTerminal className="mr-1 size-3.5" />
        <span className="inline-flex h-full items-center">{terminalLabel}</span>
      </Button>
      <Button
        className="pointer-events-auto rounded-full shadow-lg"
        data-testid="interactive-ai-open"
        aria-label={aiOpen ? 'Minimize Interactive AI' : 'Open Interactive AI'}
        aria-pressed={aiOpen}
        size="icon"
        variant={aiOpen ? 'secondary' : 'default'}
        onClick={onToggleAi}
      >
        <Sparkles className="size-4" />
      </Button>
    </div>
  );
}