import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import {
  UiAlertDialog,
  UiAlertDialogAction,
  UiAlertDialogCancel,
  UiAlertDialogContent,
  UiAlertDialogDescription,
  UiAlertDialogFooter,
  UiAlertDialogHeader,
  UiAlertDialogTitle,
  UiAlertDialogTrigger,
} from './index';
import { UiButton } from '../UiButton';

/**
 * UiAlertDialog is for confirmations that block the page (destructive actions, irreversible steps).
 * Use **`v-model:model`** for controlled mode (not `v-model:open`). Close via **Cancel** / **Action** in the footer (no header dismiss icon).
 */
const meta: Meta<typeof UiAlertDialog> = {
  title: 'Components/UiAlertDialog',
  component: UiAlertDialog,
  tags: ['autodocs'],
  argTypes: {
    model: {
      control: 'boolean',
      description: 'Controlled open state (use `v-model:model`).',
    },
  },
  args: {
    model: false,
  },
};

export default meta;

type Story = StoryObj<typeof UiAlertDialog>;

const defaultTemplateSource = `<script setup lang="ts">
import {
  UiAlertDialog,
  UiAlertDialogAction,
  UiAlertDialogCancel,
  UiAlertDialogContent,
  UiAlertDialogDescription,
  UiAlertDialogFooter,
  UiAlertDialogHeader,
  UiAlertDialogTitle,
  UiAlertDialogTrigger,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAlertDialog>
    <UiAlertDialogTrigger as-child>
      <UiButton variant="outline">Show Dialog</UiButton>
    </UiAlertDialogTrigger>
    <UiAlertDialogContent max-width="max-w-lg">
      <UiAlertDialogHeader>
        <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
        <UiAlertDialogDescription>
          This action cannot be undone. This will permanently delete your
          account and remove your data from our servers.
        </UiAlertDialogDescription>
      </UiAlertDialogHeader>
      <UiAlertDialogFooter>
        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
        <UiAlertDialogAction>Continue</UiAlertDialogAction>
      </UiAlertDialogFooter>
    </UiAlertDialogContent>
  </UiAlertDialog>
</template>`;

/**
 * Recommended pattern: `UiButton` trigger with `as-child`, and `max-width` on content for readable line length.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiAlertDialog,
      UiAlertDialogAction,
      UiAlertDialogCancel,
      UiAlertDialogContent,
      UiAlertDialogDescription,
      UiAlertDialogFooter,
      UiAlertDialogHeader,
      UiAlertDialogTitle,
      UiAlertDialogTrigger,
      UiButton,
    },
    setup() {
      const dialogModel = ref(args.model);
      watch(
        () => args.model,
        (v) => {
          dialogModel.value = v;
        },
      );
      return { dialogModel };
    },
    template: `
      <UiAlertDialog v-model:model="dialogModel">
        <UiAlertDialogTrigger as-child>
          <UiButton variant="outline">Show Dialog</UiButton>
        </UiAlertDialogTrigger>
        <UiAlertDialogContent max-width="max-w-lg">
          <UiAlertDialogHeader>
            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
            <UiAlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </UiAlertDialogDescription>
          </UiAlertDialogHeader>
          <UiAlertDialogFooter>
            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
            <UiAlertDialogAction>Continue</UiAlertDialogAction>
          </UiAlertDialogFooter>
        </UiAlertDialogContent>
      </UiAlertDialog>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const simpleTemplateSource = `<script setup lang="ts">
import {
  UiAlertDialog,
  UiAlertDialogAction,
  UiAlertDialogCancel,
  UiAlertDialogContent,
  UiAlertDialogDescription,
  UiAlertDialogFooter,
  UiAlertDialogHeader,
  UiAlertDialogTitle,
  UiAlertDialogTrigger,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAlertDialog>
    <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
    <UiAlertDialogContent max-width="max-w-lg">
      <UiAlertDialogHeader>
        <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
        <UiAlertDialogDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </UiAlertDialogDescription>
      </UiAlertDialogHeader>
      <UiAlertDialogFooter>
        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
        <UiAlertDialogAction>Continue</UiAlertDialogAction>
      </UiAlertDialogFooter>
    </UiAlertDialogContent>
  </UiAlertDialog>
</template>`;

/**
 * Plain text trigger (renders the default trigger button).
 */
export const Simple: Story = {
  render: (args) => ({
    components: {
      UiAlertDialog,
      UiAlertDialogAction,
      UiAlertDialogCancel,
      UiAlertDialogContent,
      UiAlertDialogDescription,
      UiAlertDialogFooter,
      UiAlertDialogHeader,
      UiAlertDialogTitle,
      UiAlertDialogTrigger,
    },
    setup() {
      const dialogModel = ref(args.model);
      watch(
        () => args.model,
        (v) => {
          dialogModel.value = v;
        },
      );
      return { dialogModel };
    },
    template: `
      <UiAlertDialog v-model:model="dialogModel">
        <UiAlertDialogTrigger>Open</UiAlertDialogTrigger>
        <UiAlertDialogContent max-width="max-w-lg">
          <UiAlertDialogHeader>
            <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
            <UiAlertDialogDescription>
              This action cannot be undone. This will permanently delete your account
              and remove your data from our servers.
            </UiAlertDialogDescription>
          </UiAlertDialogHeader>
          <UiAlertDialogFooter>
            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
            <UiAlertDialogAction>Continue</UiAlertDialogAction>
          </UiAlertDialogFooter>
        </UiAlertDialogContent>
      </UiAlertDialog>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: simpleTemplateSource,
      },
    },
  },
};

const fullWidthTemplateSource = `<script setup lang="ts">
import {
  UiAlertDialog,
  UiAlertDialogAction,
  UiAlertDialogCancel,
  UiAlertDialogContent,
  UiAlertDialogDescription,
  UiAlertDialogFooter,
  UiAlertDialogHeader,
  UiAlertDialogTitle,
  UiAlertDialogTrigger,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAlertDialog>
    <UiAlertDialogTrigger as-child>
      <UiButton variant="outline">Wide alert</UiButton>
    </UiAlertDialogTrigger>
    <UiAlertDialogContent>
      <UiAlertDialogHeader>
        <UiAlertDialogTitle>Delete all items?</UiAlertDialogTitle>
        <UiAlertDialogDescription>
          Omit <code>max-width</code> on content for full width within page margins (same as default dialog).
        </UiAlertDialogDescription>
      </UiAlertDialogHeader>
      <UiAlertDialogFooter>
        <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
        <UiAlertDialogAction>Delete</UiAlertDialogAction>
      </UiAlertDialogFooter>
    </UiAlertDialogContent>
  </UiAlertDialog>
</template>`;

/**
 * No `max-width` on content — uses full width within horizontal margins (for wider confirmation copy).
 */
export const FullWidthContent: Story = {
  render: (args) => ({
    components: {
      UiAlertDialog,
      UiAlertDialogAction,
      UiAlertDialogCancel,
      UiAlertDialogContent,
      UiAlertDialogDescription,
      UiAlertDialogFooter,
      UiAlertDialogHeader,
      UiAlertDialogTitle,
      UiAlertDialogTrigger,
      UiButton,
    },
    setup() {
      const dialogModel = ref(args.model);
      watch(
        () => args.model,
        (v) => {
          dialogModel.value = v;
        },
      );
      return { dialogModel };
    },
    template: `
      <UiAlertDialog v-model:model="dialogModel">
        <UiAlertDialogTrigger as-child>
          <UiButton variant="outline">Wide alert</UiButton>
        </UiAlertDialogTrigger>
        <UiAlertDialogContent>
          <UiAlertDialogHeader>
            <UiAlertDialogTitle>Delete all items?</UiAlertDialogTitle>
            <UiAlertDialogDescription>
              Omit max-width on content for full width within page margins (same as default dialog).
            </UiAlertDialogDescription>
          </UiAlertDialogHeader>
          <UiAlertDialogFooter>
            <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
            <UiAlertDialogAction>Delete</UiAlertDialogAction>
          </UiAlertDialogFooter>
        </UiAlertDialogContent>
      </UiAlertDialog>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: fullWidthTemplateSource,
      },
    },
  },
};
