import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiTooltip from './UiTooltip.vue';
import { UiButton } from '@/components/UiButton';
import { UiIcon } from '@/components/UiIcon';

/**
 * UiTooltip is a non-modal text hint that appears next to its trigger on hover or focus.
 * Use it sparingly for terse supplementary info; do not put primary actions or critical content inside.
 */
const meta: Meta<typeof UiTooltip> = {
  title: 'Components/UiTooltip',
  component: UiTooltip,
  tags: ['autodocs'],
  argTypes: {
    content: {
      control: 'text',
      description: 'The text content to display in the tooltip',
    },
    side: {
      control: 'select',
      options: ['top', 'right', 'bottom', 'left'],
      description: 'The side of the trigger where the tooltip should appear',
    },
    align: {
      control: 'select',
      options: ['start', 'center', 'end'],
      description: 'The preferred alignment against the trigger',
    },
    sideOffset: {
      control: 'number',
      description: 'The distance in pixels from the trigger',
    },
    delayDuration: {
      control: 'number',
      description:
        'The duration from when the pointer enters until the tooltip opens',
    },
    disabled: {
      control: 'boolean',
      description: 'Prevents the tooltip from opening',
    },
  },
  args: {
    content: 'This is a helpful tooltip',
    side: 'top',
    align: 'center',
    sideOffset: 4,
    delayDuration: 500,
    disabled: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiTooltip>;

/**
 * The default tooltip story. Hover over the button to see the tooltip.
 */

const defaultTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="This is a helpful tooltip" side="top" align="center" :delay-duration="500" :disabled="false">
    <UiButton>Hover me</UiButton>
  </UiTooltip>
</template>`;

/**
 * Default tooltip that appears on hover.
 * Customize content, position, and delay via props.
 */
export const Default: Story = {
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
  render: (args) => ({
    components: { UiTooltip, UiButton },
    setup() {
      return { args };
    },
    template: `
      <div class="flex justify-center p-8">
        <UiTooltip 
          :content="args.content" 
          :side="args.side" 
          :align="args.align" 
          :side-offset="args.sideOffset"
          :delay-duration="args.delayDuration" 
          :disabled="args.disabled"
        >
          <UiButton>Hover me</UiButton>
        </UiTooltip>
      </div>
    `,
  }),
};

/**
 * Tooltip with an icon-only `UiButton`.
 */

const withIconTriggerTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
import { UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
    <UiButton size="icon" variant="ghost" aria-label="Information">
      <UiIcon name="info" :size="16" />
    </UiButton>
  </UiTooltip>
</template>`;

const withIconTriggerTemplate = `
  <div class="flex justify-center p-8">
    <UiTooltip content="More information" side="top" align="center" :delay-duration="500">
      <UiButton size="icon" variant="ghost" aria-label="Information">
        <UiIcon name="info" :size="16" />
      </UiButton>
    </UiTooltip>
  </div>
`;

/**
 * Tooltip with an icon-only `UiButton` trigger.
 */
export const WithIconTrigger: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: withIconTriggerTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton, UiIcon },
    template: withIconTriggerTemplate,
  }),
};

const instantDelayTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Appears instantly" side="top" align="center" :delay-duration="0">
    <UiButton>Instant tooltip</UiButton>
  </UiTooltip>
</template>`;

const instantDelayTemplate = `
  <div class="flex justify-center p-8">
    <UiTooltip content="Appears instantly" side="top" align="center" :delay-duration="0">
      <UiButton>Instant tooltip</UiButton>
    </UiTooltip>
  </div>
`;

/**
 * Tooltip with instant appearance (no delay).
 */
export const InstantDelay: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: instantDelayTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton },
    template: instantDelayTemplate,
  }),
};

const longDelayTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Takes a moment to appear" side="top" align="center" :delay-duration="1500">
    <UiButton>Slow tooltip</UiButton>
  </UiTooltip>
</template>`;

const longDelayTemplate = `
  <div class="flex justify-center p-8">
    <UiTooltip content="Takes a moment to appear" side="top" align="center" :delay-duration="1500">
      <UiButton>Slow tooltip</UiButton>
    </UiTooltip>
  </div>
`;

/**
 * Tooltip with longer delay duration (1500ms).
 */
export const LongDelay: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: longDelayTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton },
    template: longDelayTemplate,
  }),
};

const disabledTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="You should not see this" :disabled="true">
    <UiButton>Hover me (disabled tooltip)</UiButton>
  </UiTooltip>
</template>`;

const disabledTemplate = `
  <div class="flex justify-center p-8">
    <UiTooltip content="You should not see this" :disabled="true">
      <UiButton>Hover me (disabled tooltip)</UiButton>
    </UiTooltip>
  </div>
`;

/**
 * Disabled tooltip that will not show on hover.
 */
export const Disabled: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: disabledTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton },
    template: disabledTemplate,
  }),
};

const alignmentOptionsTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Aligned to the start" side="bottom" align="start">
    <UiButton>Hover me</UiButton>
  </UiTooltip>

  <UiTooltip content="Aligned to the center" side="bottom" align="center">
    <UiButton>Hover me</UiButton>
  </UiTooltip>

  <UiTooltip content="Aligned to the end" side="bottom" align="end">
    <UiButton>Hover me</UiButton>
  </UiTooltip>
</template>`;

const alignmentOptionsTemplate = `
	<div class="flex flex-col gap-8 items-center p-8">
		<div class="flex flex-col items-center gap-2">
			<span class="label-12-regular text-muted-foreground">Align Start</span>
			<UiTooltip content="Aligned to the start" side="bottom" align="start">
				<UiButton>Hover me</UiButton>
			</UiTooltip>
		</div>

		<div class="flex flex-col items-center gap-2">
			<span class="label-12-regular text-muted-foreground">Align Center</span>
			<UiTooltip content="Aligned to the center" side="bottom" align="center">
				<UiButton>Hover me</UiButton>
			</UiTooltip>
		</div>
		
		<div class="flex flex-col items-center gap-2">
			<span class="label-12-regular text-muted-foreground">Align End</span>
			<UiTooltip content="Aligned to the end" side="bottom" align="end">
				<UiButton>Hover me</UiButton>
			</UiTooltip>
		</div>
	</div>
`;

/**
 * Tooltip with different alignment options (start, center, end).
 */
export const AlignmentOptions: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: alignmentOptionsTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton },
    template: alignmentOptionsTemplate,
  }),
};

const allSidesTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Top tooltip" side="top" align="center">
    <UiButton>Top</UiButton>
  </UiTooltip>

  <UiTooltip content="Right tooltip" side="right" align="center">
    <UiButton>Right</UiButton>
  </UiTooltip>

  <UiTooltip content="Bottom tooltip" side="bottom" align="center">
    <UiButton>Bottom</UiButton>
  </UiTooltip>

  <UiTooltip content="Left tooltip" side="left" align="center">
    <UiButton>Left</UiButton>
  </UiTooltip>
</template>`;

const allSidesTemplate = `
  <div class="flex items-center justify-center gap-8 p-16">
    <UiTooltip content="Top tooltip" side="top" align="center">
      <UiButton>Top</UiButton>
    </UiTooltip>
    
    <UiTooltip content="Right tooltip" side="right" align="center">
      <UiButton>Right</UiButton>
    </UiTooltip>
    
    <UiTooltip content="Bottom tooltip" side="bottom" align="center">
      <UiButton>Bottom</UiButton>
    </UiTooltip>
    
    <UiTooltip content="Left tooltip" side="left" align="center">
      <UiButton>Left</UiButton>
    </UiTooltip>
  </div>
`;

/**
 * All available position options for the tooltip (top, right, bottom, left).
 */
export const AllSides: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: allSidesTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton },
    template: allSidesTemplate,
  }),
};

const useCasesTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
import { UiIcon } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Click to submit the form" side="top" align="center">
    <UiButton>Submit</UiButton>
  </UiTooltip>

  <UiTooltip content="This action is permanent and cannot be undone" side="top" align="center">
    <UiButton variant="destructive">Delete</UiButton>
  </UiTooltip>

  <UiTooltip content="Need help? Click for documentation" side="top" align="center">
    <UiButton size="icon" variant="ghost" aria-label="Help">
      <UiIcon name="circle-help" :size="16" />
    </UiButton>
  </UiTooltip>

  <UiTooltip content="Important information about this feature" side="top" align="center">
    <UiButton size="icon" variant="outline" aria-label="Information">
      <UiIcon name="info" :size="16" />
    </UiButton>
  </UiTooltip>

  <UiTooltip content="Warning: This may affect other settings" side="top" align="center">
    <UiButton size="icon" variant="secondary" aria-label="Warning">
      <UiIcon name="triangle-alert" :size="16" />
    </UiButton>
  </UiTooltip>

  <UiTooltip content="Disabled buttons can also have tooltips" side="top" align="center">
    <UiButton :disabled="true">Disabled</UiButton>
  </UiTooltip>
</template>`;

const useCasesTemplate = `
	<div class="flex flex-wrap gap-4 items-center justify-center p-8">
		<UiTooltip content="Click to submit the form" side="top" align="center">
			<UiButton>Submit</UiButton>
		</UiTooltip>

		<UiTooltip content="This action is permanent and cannot be undone" side="top" align="center">
			<UiButton variant="destructive">Delete</UiButton>
		</UiTooltip>

		<UiTooltip content="Need help? Click for documentation" side="top" align="center">
			<UiButton size="icon" variant="ghost" aria-label="Help">
				<UiIcon name="circle-help" :size="16" />
			</UiButton>
		</UiTooltip>

		<UiTooltip content="Important information about this feature" side="top" align="center">
			<UiButton size="icon" variant="outline" aria-label="Information">
				<UiIcon name="info" :size="16" />
			</UiButton>
		</UiTooltip>

		<UiTooltip content="Warning: This may affect other settings" side="top" align="center">
			<UiButton size="icon" variant="secondary" aria-label="Warning">
				<UiIcon name="triangle-alert" :size="16" />
			</UiButton>
		</UiTooltip>

		<UiTooltip content="Disabled buttons can also have tooltips" side="top" align="center">
			<UiButton :disabled="true">Disabled</UiButton>
		</UiTooltip>
	</div>
`;

/**
 * Various tooltip use cases with different trigger elements and purposes.
 */
export const UseCases: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: useCasesTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton, UiIcon },
    template: useCasesTemplate,
  }),
};

const withTextTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Additional context for this text" side="top" align="center">
    <span class="underline decoration-dashed cursor-help">Hover over this text</span>
  </UiTooltip>
</template>`;

const withTextTemplate = `
  <div class="flex justify-center p-8">
    <UiTooltip content="Additional context for this text" side="top" align="center">
      <span class="underline decoration-dashed cursor-help">Hover over this text</span>
    </UiTooltip>
  </div>
`;

/**
 * Tooltip wrapping inline text instead of a button.
 */
export const WithText: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: withTextTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip },
    template: withTextTemplate,
  }),
};

const customOffsetTemplateSource = `<script setup lang="ts">
import { UiTooltip } from '@aleph-alpha/ui-library'
import { UiButton } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTooltip content="Tooltip with 16px offset" side="top" align="center" :side-offset="16">
    <UiButton>Hover me</UiButton>
  </UiTooltip>
</template>`;

const customOffsetTemplate = `
  <div class="flex justify-center p-8">
    <UiTooltip content="Tooltip with 16px offset" side="top" align="center" :side-offset="16">
      <UiButton>Hover me</UiButton>
    </UiTooltip>
  </div>
`;

/**
 * Tooltip with a custom offset from the trigger (16px instead of default 4px).
 */
export const CustomOffset: Story = {
  parameters: {
    docs: {
      source: {
        type: 'code',
        code: customOffsetTemplateSource,
      },
    },
  },
  render: () => ({
    components: { UiTooltip, UiButton },
    template: customOffsetTemplate,
  }),
};
