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

const SearchIcon = {
  components: { UiIcon },
  template: '<UiIcon name="search" :size="48" />',
};

/**
 * UiEmpty is a placeholder layout for empty states, displaying an icon, title, description, and optional actions.
 * Use it whenever a list, search, or page has no content to show, to give users a clear next step.
 */
const meta: Meta<typeof UiEmpty> = {
  title: 'Components/UiEmpty',
  component: UiEmpty,
  tags: ['autodocs'],
  argTypes: {
    title: {
      control: 'text',
      description: 'The title text to display',
    },
    description: {
      control: 'text',
      description: 'The description text to display below the title',
    },
    icon: {
      control: false,
      description: 'Custom icon component to display',
    },
  },
  args: {
    title: 'No items found',
    description: 'There are no items to display at the moment.',
  },
};

export default meta;

type Story = StoryObj<typeof UiEmpty>;

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

<template>
  <UiEmpty
    title="No items found"
    description="There are no items to display at the moment."
  />
</template>`;

/**
 * Default empty state with title and description.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiEmpty },
    setup() {
      return { args };
    },
    template: `<UiEmpty :title="args.title" :description="args.description" />`,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

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

<template>
  <UiEmpty title="No data available" />
</template>`;

/**
 * Empty state with title only.
 */
export const TitleOnly: Story = {
  render: () => ({
    components: { UiEmpty },
    template: `<UiEmpty title="No data available" />`,
  }),
  parameters: {
    docs: {
      source: {
        code: titleOnlyTemplateSource,
      },
    },
  },
};

const withCustomIconTemplateSource = `<script setup lang="ts">
import { UiEmpty, UiIcon } from '@aleph-alpha/ui-library'

const SearchIcon = {
  components: { UiIcon },
  template: '<UiIcon name="search" :size="48" />',
}
</script>

<template>
  <UiEmpty
    :icon="SearchIcon"
    title="No search results"
    description="Try adjusting your search terms or filters."
  />
</template>`;

/**
 * Empty state with a custom icon.
 */
export const WithCustomIcon: Story = {
  render: () => ({
    components: { UiEmpty },
    setup() {
      return { SearchIcon };
    },
    template: `
      <UiEmpty
        :icon="SearchIcon"
        title="No search results"
        description="Try adjusting your search terms or filters."
      />
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withCustomIconTemplateSource,
      },
    },
  },
};

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

<template>
  <UiEmpty
    title="No projects yet"
    description="Get started by creating your first project."
  >
    <UiButton>Create Project</UiButton>
  </UiEmpty>
</template>`;

/**
 * Empty state with an action button in the slot.
 */
export const WithAction: Story = {
  render: () => ({
    components: { UiEmpty, UiButton },
    template: `
      <UiEmpty
        title="No projects yet"
        description="Get started by creating your first project."
      >
        <UiButton>Create Project</UiButton>
      </UiEmpty>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withActionTemplateSource,
      },
    },
  },
};

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

<template>
  <UiEmpty
    title="No files uploaded"
    description="Upload files to get started or import from another source."
  >
    <div class="flex gap-2">
      <UiButton>Upload Files</UiButton>
      <UiButton variant="outline">Import</UiButton>
    </div>
  </UiEmpty>
</template>`;

/**
 * Empty state with multiple action buttons.
 */
export const WithMultipleActions: Story = {
  render: () => ({
    components: { UiEmpty, UiButton },
    template: `
      <UiEmpty
        title="No files uploaded"
        description="Upload files to get started or import from another source."
      >
        <div class="flex gap-2">
          <UiButton>Upload Files</UiButton>
          <UiButton variant="outline">Import</UiButton>
        </div>
      </UiEmpty>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withMultipleActionsTemplateSource,
      },
    },
  },
};

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

<template>
  <UiEmpty />
</template>`;

/**
 * Minimal empty state with just the default icon.
 */
export const Minimal: Story = {
  render: () => ({
    components: { UiEmpty },
    template: `<UiEmpty />`,
  }),
  parameters: {
    docs: {
      source: {
        code: minimalTemplateSource,
      },
    },
  },
};
