import VCard from './VCard.vue';
import VIcon from './VIcon.vue'; // For empty state icon
import VButton from './VButton.vue'; // For empty state actions slot
import type { Meta, StoryObj } from '@storybook/vue3';

const meta: Meta<typeof VCard> = {
  title: 'Valerie/VCard',
  component: VCard,
  tags: ['autodocs'],
  argTypes: {
    headerTitle: { control: 'text' },
    variant: { control: 'select', options: ['default', 'empty-state'] },
    emptyIcon: { control: 'text', if: { arg: 'variant', eq: 'empty-state' } },
    emptyTitle: { control: 'text', if: { arg: 'variant', eq: 'empty-state' } },
    emptyMessage: { control: 'text', if: { arg: 'variant', eq: 'empty-state' } },
    // Slots are documented via story examples
    header: { table: { disable: true } },
    default: { table: { disable: true } },
    footer: { table: { disable: true } },
    'empty-actions': { table: { disable: true } },
  },
  parameters: {
    docs: {
      description: {
        component: 'A versatile card component with support for header, body, footer, and an empty state variant.',
      },
    },
  },
};

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

export const DefaultWithAllSlots: Story = {
  render: (args) => ({
    components: { VCard, VButton },
    setup() {
      return { args };
    },
    template: `
      <VCard :headerTitle="args.headerTitle" :variant="args.variant">
        <template #header v-if="args.useCustomHeaderSlot">
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span>Custom Header Slot</span>
            <VButton size="sm" variant="neutral">Action</VButton>
          </div>
        </template>

        <p>This is the main body content of the card. It can contain any HTML or Vue components.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

        <template #footer v-if="args.useCustomFooterSlot">
          <VButton variant="primary">Save Changes</VButton>
          <VButton variant="neutral">Cancel</VButton>
        </template>
      </VCard>
    `,
  }),
  args: {
    headerTitle: 'Card Title (prop)',
    variant: 'default',
    useCustomHeaderSlot: false, // Control for story to switch between prop and slot
    useCustomFooterSlot: true,
  },
};

export const WithHeaderTitleAndFooterProp: Story = {
  // This story will use headerTitle prop and a simple text footer via slot for demo
   render: (args) => ({
    components: { VCard },
    setup() { return { args }; },
    template: `
      <VCard :headerTitle="args.headerTitle">
        <p>Card body content goes here.</p>
        <template #footer>
          <p style="font-size: 0.9em; color: #555;">Simple footer text.</p>
        </template>
      </VCard>
    `,
  }),
  args: {
    headerTitle: 'Report Summary',
  },
};


export const CustomHeaderAndFooterSlots: Story = {
  ...DefaultWithAllSlots, // Reuses render function from DefaultWithAllSlots
  args: {
    headerTitle: 'This will be overridden by slot', // Prop will be ignored due to slot
    variant: 'default',
    useCustomHeaderSlot: true,
    useCustomFooterSlot: true,
  },
};

export const BodyOnly: Story = {
  render: (args) => ({
    components: { VCard },
    setup() { return { args }; },
    template: `
      <VCard>
        <p>This card only has body content. No header or footer will be rendered.</p>
        <p>It's useful for simple information display.</p>
      </VCard>
    `,
  }),
  args: {},
};

export const HeaderAndBody: Story = {
   render: (args) => ({
    components: { VCard },
    setup() { return { args }; },
    template: `
      <VCard :headerTitle="args.headerTitle">
        <p>This card has a header (via prop) and body content, but no footer.</p>
      </VCard>
    `,
  }),
  args: {
    headerTitle: 'User Profile',
  },
};

export const EmptyState: Story = {
  render: (args) => ({
    components: { VCard, VIcon, VButton }, // VIcon is used internally by VCard
    setup() {
      return { args };
    },
    template: `
      <VCard
        variant="empty-state"
        :emptyIcon="args.emptyIcon"
        :emptyTitle="args.emptyTitle"
        :emptyMessage="args.emptyMessage"
      >
        <template #empty-actions v-if="args.showEmptyActions">
          <VButton variant="primary" @click="() => alert('Add Item Clicked!')">Add New Item</VButton>
          <VButton variant="neutral">Learn More</VButton>
        </template>
      </VCard>
    `,
  }),
  args: {
    variant: 'empty-state', // Already set, but good for clarity
    emptyIcon: 'search', // Example icon name, ensure VIcon supports it or it's mocked
    emptyTitle: 'No Items Found',
    emptyMessage: 'There are currently no items to display. Try adjusting your filters or add a new item.',
    showEmptyActions: true,
  },
};

export const EmptyStateMinimal: Story = {
  ...EmptyState, // Reuses render function
  args: {
    variant: 'empty-state',
    emptyIcon: '', // No icon
    emptyTitle: 'Nothing Here',
    emptyMessage: 'This space is intentionally blank.',
    showEmptyActions: false, // No actions
  },
};
