import VAlert from './VAlert.vue';
import VIcon from './VIcon.vue'; // Used by VAlert
import VButton from './VButton.vue'; // For actions slot
import type { Meta, StoryObj } from '@storybook/vue3';
import { ref, watch } from 'vue';

const meta: Meta<typeof VAlert> = {
  title: 'Valerie/VAlert',
  component: VAlert,
  tags: ['autodocs'],
  argTypes: {
    modelValue: { control: 'boolean', description: 'Controls alert visibility (v-model).' },
    message: { control: 'text' },
    type: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
    closable: { control: 'boolean' },
    icon: { control: 'text', description: 'Custom VIcon name. Overrides default type-based icon.' },
    showIcon: { control: 'boolean' },
    // Events
    'update:modelValue': { action: 'update:modelValue', table: { disable: true } },
    close: { action: 'close' },
    // Slots
    default: { table: { disable: true } },
    actions: { table: { disable: true } },
  },
  parameters: {
    docs: {
      description: {
        component: 'An alert component to display contextual messages. Supports different types, icons, closable behavior, and custom actions.',
      },
    },
  },
};

export default meta;
type Story = StoryObj<typeof VAlert>;

// Template for managing v-model in stories for dismissible alerts
const DismissibleAlertTemplate: Story = {
  render: (args) => ({
    components: { VAlert, VButton, VIcon }, // VIcon may not be needed directly in template if VAlert handles it
    setup() {
      const isVisible = ref(args.modelValue);
      watch(() => args.modelValue, (newVal) => {
        isVisible.value = newVal;
      });

      const onUpdateModelValue = (val: boolean) => {
        isVisible.value = val;
        // args.modelValue = val; // Update Storybook control
      };

      const resetAlert = () => { // Helper to show alert again in story
        isVisible.value = true;
        // args.modelValue = true;
      };

      return { ...args, isVisible, onUpdateModelValue, resetAlert };
    },
    template: `
      <div>
        <VAlert
          :modelValue="isVisible"
          @update:modelValue="onUpdateModelValue"
          :message="message"
          :type="type"
          :closable="closable"
          :icon="icon"
          :showIcon="showIcon"
          @close="() => $emit('close')"
        >
          <template #default v-if="args.customDefaultSlot">
            <slot name="storyDefaultContent"></slot>
          </template>
          <template #actions v-if="args.showActionsSlot">
            <slot name="storyActionsContent"></slot>
          </template>
        </VAlert>
        <VButton v-if="!isVisible && closable" @click="resetAlert" size="sm" style="margin-top: 10px;">
          Show Alert Again
        </VButton>
      </div>
    `,
  }),
};

export const Info: Story = {
  ...DismissibleAlertTemplate,
  args: {
    modelValue: true,
    message: 'This is an informational alert. Check it out!',
    type: 'info',
    closable: false,
  },
};

export const Success: Story = {
  ...DismissibleAlertTemplate,
  args: {
    modelValue: true,
    message: 'Your operation was completed successfully.',
    type: 'success',
    closable: true,
  },
};

export const Warning: Story = {
  ...DismissibleAlertTemplate,
  args: {
    modelValue: true,
    message: 'Warning! Something might require your attention.',
    type: 'warning',
    closable: true,
  },
};

export const ErrorAlert: Story = { // Renamed from 'Error' to avoid conflict with JS Error type
  ...DismissibleAlertTemplate,
  args: {
    modelValue: true,
    message: 'An error occurred while processing your request.',
    type: 'error',
    closable: true,
  },
};

export const Closable: Story = {
  ...DismissibleAlertTemplate,
  args: {
    ...Info.args, // Start with info type
    closable: true,
    message: 'This alert can be closed by clicking the "x" button.',
  },
};

export const WithCustomIcon: Story = {
  ...DismissibleAlertTemplate,
  args: {
    ...Info.args,
    icon: 'alert', // Example: using 'alert' icon from VIcon for an info message
    message: 'This alert uses a custom icon ("alert").',
  },
};

export const NoIcon: Story = {
  ...DismissibleAlertTemplate,
  args: {
    ...Info.args,
    showIcon: false,
    message: 'This alert is displayed without any icon.',
  },
};

export const CustomSlotContent: Story = {
  ...DismissibleAlertTemplate,
  render: (args) => ({
    components: { VAlert, VButton, VIcon },
     setup() {
      const isVisible = ref(args.modelValue);
      watch(() => args.modelValue, (newVal) => { isVisible.value = newVal; });
      const onUpdateModelValue = (val: boolean) => { isVisible.value = val; };
      const resetAlert = () => { isVisible.value = true; };
      return { ...args, isVisible, onUpdateModelValue, resetAlert };
    },
    template: `
       <div>
        <VAlert
          :modelValue="isVisible"
          @update:modelValue="onUpdateModelValue"
          :type="type"
          :closable="closable"
          :icon="icon"
          :showIcon="showIcon"
        >
          <h4>Custom Title via Slot!</h4>
          <p>This is <strong>bold text</strong> and <em>italic text</em> inside the alert's default slot.</p>
          <p>It overrides the 'message' prop.</p>
        </VAlert>
         <VButton v-if="!isVisible && closable" @click="resetAlert" size="sm" style="margin-top: 10px;">
          Show Alert Again
        </VButton>
      </div>
    `
  }),
  args: {
    modelValue: true,
    type: 'info',
    closable: true,
    customDefaultSlot: true, // Flag for template logic, not a prop of VAlert
    // message prop is ignored due to slot
  },
};

export const WithActions: Story = {
   ...DismissibleAlertTemplate,
  render: (args) => ({
    components: { VAlert, VButton, VIcon },
     setup() {
      const isVisible = ref(args.modelValue);
      watch(() => args.modelValue, (newVal) => { isVisible.value = newVal; });
      const onUpdateModelValue = (val: boolean) => { isVisible.value = val;};
      const resetAlert = () => { isVisible.value = true; };
      return { ...args, isVisible, onUpdateModelValue, resetAlert };
    },
    template: `
      <div>
        <VAlert
          :modelValue="isVisible"
          @update:modelValue="onUpdateModelValue"
          :message="message"
          :type="type"
          :closable="closable"
        >
          <template #actions>
            <VButton :variant="type === 'error' || type === 'warning' ? 'danger' : 'primary'" size="sm" @click="() => alert('Primary action clicked!')">
              Take Action
            </VButton>
            <VButton variant="neutral" size="sm" @click="onUpdateModelValue(false)">
              Dismiss
            </VButton>
          </template>
        </VAlert>
        <VButton v-if="!isVisible && (closable || args.showActionsSlot)" @click="resetAlert" size="sm" style="margin-top: 10px;">
          Show Alert Again
        </VButton>
      </div>
    `
  }),
  args: {
    modelValue: true,
    message: 'This alert has actions associated with it.',
    type: 'warning',
    closable: false, // Actions slot provides its own dismiss usually
    showActionsSlot: true, // Flag for template logic
  },
};

export const NotInitiallyVisible: Story = {
  ...DismissibleAlertTemplate,
  args: {
    ...Success.args,
    modelValue: false, // Start hidden
    message: 'This alert is initially hidden and can be shown by the button below (or Storybook control).',
    closable: true,
  },
};
