import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'

import CpAlert from '@/components/CpAlert.vue'

import { docCellStyle, docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'

const alertColors = ['neutral', 'accent', 'success', 'warning', 'error'] as const
const alertTypes = ['expanded', 'inline'] as const

const alertStackStyle = `${docCellStyle} width: 100%; min-width: 420px;`

const meta = {
  title: 'Molecules/CpAlert',
  component: CpAlert,
  argTypes: {
    color: {
      control: 'select',
      options: alertColors,
      description: 'The color variant of the alert',
    },
    type: {
      control: 'select',
      options: alertTypes,
      description: 'The layout type of the alert',
    },
    title: {
      control: 'text',
      description: 'The title of the alert',
    },
    content: {
      control: 'text',
      description: 'The text content of the alert (expanded type only)',
    },
    icon: {
      control: 'select',
      options: ['', 'info', 'check', 'alert-triangle', 'x-octagon', 'bell', 'star'],
      description: 'Custom icon override. Defaults to the color-specific icon when empty.',
    },
    isClosable: {
      control: 'boolean',
      description: 'Whether the alert shows a close button',
    },
    primaryActionLabel: {
      control: 'text',
      description: 'Label for the primary action button',
    },
    secondaryActionLabel: {
      control: 'text',
      description: 'Label for the secondary action button',
    },
  },
} satisfies Meta<typeof CpAlert>

export default meta

type Story = StoryObj<typeof meta>

const defaultTemplate = '<CpAlert v-bind="args" />'
const defaultRender = (args: Args) => ({
  components: { CpAlert },
  setup() {
    return { args }
  },
  template: defaultTemplate,
})

/**
 * Default alert with a neutral color, expanded layout, a title and a content
 * message. Use the controls to experiment with each prop in isolation.
 */
export const Default: Story = {
  args: {
    color: 'neutral',
    type: 'expanded',
    title: 'Alert title',
    content: 'This is an informational alert message.',
    isClosable: false,
    icon: undefined,
    primaryActionLabel: undefined,
    secondaryActionLabel: undefined,
  },
  render: defaultRender,
}

/* -------------------------------------------------------------------------- */
/* Colors                                                                     */
/* -------------------------------------------------------------------------- */

/**
 * Every semantic color available for the alert, stacked vertically.
 */
export const Colors: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpAlert },
    setup() {
      return { alertColors, docRowColumnStyle, alertStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div v-for="color in alertColors" :key="color" :style="alertStackStyle">
          <span :style="docLabelStyle">{{ color }}</span>
          <CpAlert
            :color="color"
            :title="color.charAt(0).toUpperCase() + color.slice(1) + ' alert'"
            content="This is an informational alert message."
          />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Layout types                                                               */
/* -------------------------------------------------------------------------- */

/**
 * `expanded` stacks the title, content and actions vertically. `inline` keeps
 * them on a single line and hides the content area — best for short messages.
 */
export const Types: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpAlert },
    setup() {
      return { alertTypes, docRowColumnStyle, alertStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div v-for="type in alertTypes" :key="type" :style="alertStackStyle">
          <span :style="docLabelStyle">{{ type }}</span>
          <CpAlert
            color="accent"
            :type="type"
            title="Alert title"
            content="This is an informational alert message."
            primary-action-label="Action"
          />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Content combinations                                                       */
/* -------------------------------------------------------------------------- */

/**
 * The three supported content combinations: title only, content only, and
 * both title and content.
 */
export const ContentLayouts: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpAlert },
    setup() {
      return { docRowColumnStyle, alertStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Title only</span>
          <CpAlert color="accent" title="Title only" />
        </div>
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Content only</span>
          <CpAlert color="accent" content="Only a description, without a title on top." />
        </div>
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Title and content</span>
          <CpAlert
            color="accent"
            title="Title and content"
            content="The full layout with both title and description."
          />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Dismiss & actions                                                          */
/* -------------------------------------------------------------------------- */

/**
 * All dismiss and action affordances shown side by side: closable, primary
 * action, secondary action, and both actions together.
 */
export const Actions: Story = {
  parameters: { controls: { disable: true } },
  render: () => ({
    components: { CpAlert },
    setup() {
      return { docRowColumnStyle, alertStackStyle, docLabelStyle }
    },
    template: `
      <div :style="docRowColumnStyle">
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Closable</span>
          <CpAlert
            color="accent"
            title="Closable alert"
            content="Click the × to dismiss."
            :is-closable="true"
          />
        </div>
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Primary action</span>
          <CpAlert
            color="accent"
            title="Action required"
            content="Use the primary action to move forward."
            primary-action-label="Confirm"
          />
        </div>
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Secondary action</span>
          <CpAlert
            color="accent"
            title="Optional action"
            content="The secondary action is visually less prominent."
            secondary-action-label="Learn more"
          />
        </div>
        <div :style="alertStackStyle">
          <span :style="docLabelStyle">Both actions</span>
          <CpAlert
            color="accent"
            title="Choose what to do"
            content="Two actions are shown side by side."
            primary-action-label="Confirm"
            secondary-action-label="Cancel"
          />
        </div>
      </div>
    `,
  }),
}

/* -------------------------------------------------------------------------- */
/* Icon                                                                       */
/* -------------------------------------------------------------------------- */

/**
 * Override the default color-specific icon with any icon name.
 */
export const CustomIcon: Story = {
  args: {
    ...Default.args,
    color: 'accent',
    title: 'Custom icon',
    content: 'Any icon from the design system can replace the default one.',
    icon: 'bell',
  },
  render: defaultRender,
}

/* -------------------------------------------------------------------------- */
/* Slots                                                                      */
/* -------------------------------------------------------------------------- */

/**
 * Customize every part of the alert using slots: `icon`, `title`, default
 * (content), `primary-action` and `secondary-action`.
 */
export const WithSlots: Story = {
  args: {
    color: 'accent',
    type: 'expanded',
    isClosable: true,
  },
  render: (args: Args) => ({
    components: { CpAlert },
    setup() {
      return { args }
    },
    template: `
      <CpAlert v-bind="args">
        <template #icon>
          <span style="font-size: 18px;">🔔</span>
        </template>
        <template #title>
          <strong>Custom title</strong> with <em>HTML formatting</em>
        </template>
        <span>Custom default slot with <a href="#" style="color: inherit; font-weight: 600;">a link</a> and <code style="background: rgba(0,0,0,0.1); padding: 2px 4px; border-radius: 3px;">inline code</code>.</span>
        <template #primary-action>
          <button style="padding: 4px 12px; border-radius: 4px; background: currentColor; border: none; cursor: pointer;">
            <span style="color: white; font-size: 12px;">Custom Primary</span>
          </button>
        </template>
        <template #secondary-action>
          <button style="padding: 4px 12px; border-radius: 4px; background: transparent; border: 1px solid currentColor; cursor: pointer; color: inherit; font-size: 12px;">
            Custom Secondary
          </button>
        </template>
      </CpAlert>
    `,
  }),
}