<script setup lang="ts">
import { computed, inject } from 'vue';
import { SidebarGroupLabel } from '@/components/core/sidebar';
import { UiButton } from '@/components/UiButton';
import { UiIcon } from '@/components/UiIcon';
import { UiTooltip } from '@/components/UiTooltip';
import { cn } from '@/lib/utils';
import { uiSidebarGroupContextKey } from './groupContext';
import type {
  UiSidebarGroupLabelEmits,
  UiSidebarGroupLabelProps,
} from './types';

defineOptions({
  name: 'UiSidebarGroupLabel',
  inheritAttrs: false,
});

const emit = defineEmits<UiSidebarGroupLabelEmits>();

const props = withDefaults(defineProps<UiSidebarGroupLabelProps>(), {
  size: 'sm',
  collapseTooltip: '',
  collapseAriaLabel: 'Collapse group',
  actionTooltip: '',
  actionAriaLabel: 'Group action',
  showAction: true,
  showActionOnHover: true,
  showCollapse: true,
});

const group = inject(uiSidebarGroupContextKey, null);

/** Group title: Label 12 / medium, muted (see design tokens). */
const labelClass = 'label-12-medium text-content-on-surface-muted';

const collapseRotationClass = computed(() => {
  if (!group) return 'rotate-0';
  return group.open.value ? 'rotate-0' : 'rotate-180';
});

const collapseIconClass = computed(() =>
  // `ease-linear` + 200ms matches the sidebar collapse animation and the
  // group content height transition, so the chevron and panel move as one.
  cn(
    'transition-transform duration-200 ease-linear',
    collapseRotationClass.value,
  ),
);

/**
 * Hover-reveal for the trailing icon buttons. We also gate `pointer-events`
 * so the invisible buttons can't be the tooltip's hover target — without
 * this, `UiTooltip` would trigger while the button is still `opacity-0`
 * (the user sees a tooltip even though they aren't hovering a visible icon).
 */
const hoverRevealClass = computed(() =>
  props.showActionOnHover
    ? 'pointer-events-none opacity-0 transition-opacity group-hover/sidebar-group-label:pointer-events-auto group-hover/sidebar-group-label:opacity-100 group-focus-within/sidebar-group-label:pointer-events-auto group-focus-within/sidebar-group-label:opacity-100'
    : '',
);

/**
 * Icon tint for the chevron and action buttons: muted by default, promoted
 * to the primary content color on hover/focus so the affordance stands out
 * without pulling attention at rest.
 */
const iconTintClass =
  'text-content-on-surface-muted hover:text-content-on-surface-primary focus-visible:text-content-on-surface-primary';

const collapseButtonClass = computed(() =>
  cn('ml-1', iconTintClass, hoverRevealClass.value),
);
const actionClass = computed(() =>
  cn('ml-auto', iconTintClass, hoverRevealClass.value),
);

function onCollapseClick(event: MouseEvent) {
  group?.toggle();
  // Public kebab-case event preserved for backwards compatibility.
  // eslint-disable-next-line vue/custom-event-name-casing
  emit('collapse-click', event);
}

function onActionClick(event: MouseEvent) {
  // Public kebab-case event preserved for backwards compatibility.
  // eslint-disable-next-line vue/custom-event-name-casing
  emit('action-click', event);
}
</script>

<template>
  <SidebarGroupLabel
    v-bind="$attrs"
    :data-size="props.size"
    :class="
      cn(
        '!h-auto !rounded-md !border !border-transparent !px-2 !py-0',
        'group/sidebar-group-label',
        $attrs.class ?? '',
      )
    "
  >
    <div class="flex min-w-0 w-full items-center">
      <span :class="cn('min-w-0 truncate', labelClass)">
        <slot />
      </span>

      <UiTooltip
        v-if="props.showCollapse && props.collapseTooltip"
        :content="props.collapseTooltip"
        side="right"
      >
        <UiButton
          variant="ghost"
          size="icon-sm-no-padding"
          :aria-label="props.collapseAriaLabel"
          :aria-expanded="group?.open.value"
          :class="collapseButtonClass"
          @click="onCollapseClick"
        >
          <component
            :is="props.collapseIcon"
            v-if="props.collapseIcon"
            :size="16"
            :class="collapseIconClass"
          />
          <UiIcon
            v-else
            name="chevron-up"
            size="s"
            :class="collapseIconClass"
          />
        </UiButton>
      </UiTooltip>
      <UiButton
        v-else-if="props.showCollapse"
        variant="ghost"
        size="icon-sm-no-padding"
        :aria-label="props.collapseAriaLabel"
        :aria-expanded="group?.open.value"
        :class="collapseButtonClass"
        @click="onCollapseClick"
      >
        <component
          :is="props.collapseIcon"
          v-if="props.collapseIcon"
          :size="16"
          :class="collapseIconClass"
        />
        <UiIcon v-else name="chevron-up" size="s" :class="collapseIconClass" />
      </UiButton>

      <UiTooltip
        v-if="props.showAction && props.actionTooltip"
        :content="props.actionTooltip"
        side="right"
      >
        <UiButton
          variant="ghost"
          size="icon-sm-no-padding"
          :aria-label="props.actionAriaLabel"
          :class="actionClass"
          @click="onActionClick"
        >
          <component
            :is="props.actionIcon"
            v-if="props.actionIcon"
            :size="16"
          />
          <UiIcon v-else name="plus" size="s" />
        </UiButton>
      </UiTooltip>
      <UiButton
        v-else-if="props.showAction"
        variant="ghost"
        size="icon-sm-no-padding"
        :aria-label="props.actionAriaLabel"
        :class="actionClass"
        @click="onActionClick"
      >
        <component :is="props.actionIcon" v-if="props.actionIcon" :size="16" />
        <UiIcon v-else name="plus" size="s" />
      </UiButton>
    </div>
  </SidebarGroupLabel>
</template>
