import * as React from 'react';
import { cn } from '@/lib/utils';
import { KROW_LOGO_URL } from '@/assets/brand';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { useAssistantPanel } from './AssistantPanelContext';

/**
 * AssistantTrigger — the KROW mark used as a secondary action.
 *
 * This is not the application's branding: the navigation logo is untouched.
 * Here the mark is deliberately smaller and sits in a page's action row, where
 * it reads as "the intelligent thing this page can do" rather than as a chrome
 * element. Pages render it beside their own actions.
 *
 * It self-hides on pages with no assistant, so a page can render it
 * unconditionally and never needs to know the placement rules.
 */
/** @param {any} props */
export function AssistantTrigger({ className = '', size = 'default' }) {
  const { supported, isOpen, toggle, context } = useAssistantPanel();

  if (!supported) return null;

  const label = isOpen ? 'Close Owliver' : `Ask Owliver about ${context.page}`;
  const heights = { sm: 'h-8 px-2.5', default: 'h-9 px-3' };
  const logoHeights = { sm: 'h-3.5', default: 'h-4' };

  return (
    <TooltipProvider delayDuration={250}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            type="button"
            onClick={toggle}
            aria-label={label}
            aria-expanded={isOpen}
            className={cn(
              'group relative inline-flex items-center justify-center rounded-full border',
              'transition-all duration-base ease-out cursor-pointer',
              'outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/60 focus-visible:ring-offset-2',
              'hover:scale-[1.04] active:scale-100',
              heights[size],
              isOpen
                ? 'border-krow-blue/40 bg-krow-blue-tint shadow-[0_0_0_3px_rgba(10,57,223,0.10)]'
                : 'border-border bg-surface shadow-xs hover:border-krow-blue/40 hover:bg-krow-blue-tint hover:shadow-[0_0_18px_-2px_rgba(10,57,223,0.35)]',
              className
            )}
          >
            <img
              src={KROW_LOGO_URL}
              alt=""
              aria-hidden="true"
              className={cn('w-auto object-contain', logoHeights[size])}
            />

            {/* A quiet indicator that this mark does something intelligent —
                enough signal without adding a competing icon or label. */}
            <span
              aria-hidden="true"
              className={cn(
                'absolute -top-0.5 -right-0.5 block w-2 h-2 rounded-full ring-2 ring-white transition-colors duration-base',
                isOpen ? 'bg-krow-blue' : 'bg-krow-yellow group-hover:bg-krow-blue'
              )}
            />
          </button>
        </TooltipTrigger>
        <TooltipContent side="bottom">{label}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

export default AssistantTrigger;