'use client';

import {Icon} from '@astryxdesign/core/Icon';
import {IconButton} from '@astryxdesign/core/IconButton';
import {useLoyalyAi} from '@/features/loyaly-ai/providers/LoyalyAiProvider';
import {isPanelInline, useBreakpoint} from '@/shared/hooks/useBreakpoint';
import {ICONS} from '@/shared/utils/icons';

/**
 * One control, two behaviours: above the laptop breakpoint it collapses the
 * inline panel to give the workspace full width; below it, it opens the
 * slide-over. Both read and write the same provider, so the assistant's
 * contents never notice which one is in play.
 */
export function LoyalyAiToggle() {
  const bp = useBreakpoint();
  const {isOpen, toggle, isSlideOverOpen, setSlideOverOpen} = useLoyalyAi();
  const inline = isPanelInline(bp);

  const isShown = inline ? isOpen : isSlideOverOpen;

  return (
    <IconButton
      icon={<Icon icon={isShown ? ICONS.panelClose : ICONS.panelOpen} />}
      label={isShown ? 'Hide Loyaly AI' : 'Show Loyaly AI'}
      tooltip={isShown ? 'Hide Loyaly AI' : 'Show Loyaly AI'}
      variant="ghost"
      onClick={() => (inline ? toggle() : setSlideOverOpen(!isSlideOverOpen))}
    />
  );
}
