import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import {
  UiAccordion,
  UiAccordionItem,
  UiAccordionTrigger,
  UiAccordionContent,
} from './index';
import { UiButton } from '@/components/UiButton';

/**
 * UiAccordion is a vertically stacked set of collapsible sections that share a single visible region.
 * Use it to organize long content into scannable groups or progressive-disclosure flows.
 * Configure single- or multi-open behavior via the `type` prop.
 */
const meta: Meta<typeof UiAccordion> = {
  title: 'Components/UiAccordion',
  component: UiAccordion,
  tags: ['autodocs'],
  argTypes: {
    type: {
      control: 'select',
      options: ['single', 'multiple'],
      description:
        'Accordion type - single allows only one item open, multiple allows many',
    },
    collapsible: {
      control: 'boolean',
      description:
        'Whether all items can be collapsed (only for type="single")',
    },
    disabled: {
      control: 'boolean',
      description: 'Whether the accordion is disabled',
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description:
        'Keyboard navigation direction: vertical = Up/Down arrows, horizontal = Left/Right arrows. Does not change visual layout.',
    },
  },
  args: {
    type: 'single',
    collapsible: true,
    disabled: false,
    orientation: 'vertical',
  },
};

export default meta;

type Story = StoryObj<typeof UiAccordion>;

const defaultTemplateSource = `<script setup lang="ts">
import {
  UiAccordion,
  UiAccordionItem,
  UiAccordionTrigger,
  UiAccordionContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
    <UiAccordionItem value="item-1">
      <UiAccordionTrigger>Product Information</UiAccordionTrigger>
      <UiAccordionContent>
        <p>
          Our flagship product combines cutting-edge technology with sleek
          design. Built with premium materials, it offers unparalleled
          performance and reliability.
        </p>
        <p class="mt-2">
          Key features include advanced processing capabilities, and an
          intuitive user interface designed for both beginners and experts.
        </p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-2">
      <UiAccordionTrigger>Shipping Details</UiAccordionTrigger>
      <UiAccordionContent>
        <p>
          We offer worldwide shipping through trusted courier partners.
          Standard delivery takes 3-5 business days, while express shipping
          ensures delivery within 1-2 business days.
        </p>
        <p class="mt-2">
          All orders are carefully packaged and fully insured. Track your
          shipment in real-time through our dedicated tracking portal.
        </p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-3">
      <UiAccordionTrigger>Return Policy</UiAccordionTrigger>
      <UiAccordionContent>
        <p>
          We stand behind our products with a comprehensive 30-day return
          policy. If you're not completely satisfied, simply return the
          item in its original condition.
        </p>
        <p class="mt-2">
          Our hassle-free return process includes free return shipping and
          full refunds processed within 48 hours of receiving the returned
          item.
        </p>
      </UiAccordionContent>
    </UiAccordionItem>
  </UiAccordion>
</template>`;

/**
 * Default single-mode accordion with collapsible items.
 * Only one item can be open at a time.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiAccordion,
      UiAccordionItem,
      UiAccordionTrigger,
      UiAccordionContent,
    },
    setup() {
      const activeItem = ref<string | undefined>('item-1');
      watch(
        () => args.modelValue,
        (val) => {
          if (val) activeItem.value = val as string;
        },
      );
      return { args, activeItem };
    },
    template: `
      <UiAccordion 
        v-model="activeItem"
        :type="args.type"
        :collapsible="args.collapsible"
        :disabled="args.disabled"
        :orientation="args.orientation"
        class="w-full"
      >
        <UiAccordionItem value="item-1">
          <UiAccordionTrigger>Product Information</UiAccordionTrigger>
          <UiAccordionContent>
            <p>
              Our flagship product combines cutting-edge technology with sleek
              design. Built with premium materials, it offers unparalleled
              performance and reliability.
            </p>
            <p class="mt-2">
              Key features include advanced processing capabilities, and an
              intuitive user interface designed for both beginners and experts.
            </p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-2">
          <UiAccordionTrigger>Shipping Details</UiAccordionTrigger>
          <UiAccordionContent>
            <p>
              We offer worldwide shipping through trusted courier partners.
              Standard delivery takes 3-5 business days, while express shipping
              ensures delivery within 1-2 business days.
            </p>
            <p class="mt-2">
              All orders are carefully packaged and fully insured. Track your
              shipment in real-time through our dedicated tracking portal.
            </p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-3">
          <UiAccordionTrigger>Return Policy</UiAccordionTrigger>
          <UiAccordionContent>
            <p>
              We stand behind our products with a comprehensive 30-day return
              policy. If you're not completely satisfied, simply return the
              item in its original condition.
            </p>
            <p class="mt-2">
              Our hassle-free return process includes free return shipping and
              full refunds processed within 48 hours of receiving the returned
              item.
            </p>
          </UiAccordionContent>
        </UiAccordionItem>
      </UiAccordion>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const multipleTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiAccordion,
  UiAccordionItem,
  UiAccordionTrigger,
  UiAccordionContent,
} from '@aleph-alpha/ui-library'

const openItems = ref(['item-1', 'item-2'])
</script>

<template>
  <UiAccordion v-model="openItems" type="multiple" class="w-full">
    <UiAccordionItem value="item-1">
      <UiAccordionTrigger>First Section</UiAccordionTrigger>
      <UiAccordionContent>
        <p>This section can be open at the same time as other sections.</p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-2">
      <UiAccordionTrigger>Second Section</UiAccordionTrigger>
      <UiAccordionContent>
        <p>Multiple sections can be expanded simultaneously.</p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-3">
      <UiAccordionTrigger>Third Section</UiAccordionTrigger>
      <UiAccordionContent>
        <p>Click to expand or collapse any section independently.</p>
      </UiAccordionContent>
    </UiAccordionItem>
  </UiAccordion>
</template>`;

/**
 * Multiple-mode accordion allows multiple items to be open simultaneously.
 */
export const Multiple: Story = {
  render: () => ({
    components: {
      UiAccordion,
      UiAccordionItem,
      UiAccordionTrigger,
      UiAccordionContent,
    },
    setup() {
      const openItems = ref(['item-1', 'item-2']);
      return { openItems };
    },
    template: `
      <UiAccordion v-model="openItems" type="multiple" class="w-full">
        <UiAccordionItem value="item-1">
          <UiAccordionTrigger>First Section</UiAccordionTrigger>
          <UiAccordionContent>
            <p>This section can be open at the same time as other sections.</p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-2">
          <UiAccordionTrigger>Second Section</UiAccordionTrigger>
          <UiAccordionContent>
            <p>Multiple sections can be expanded simultaneously.</p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-3">
          <UiAccordionTrigger>Third Section</UiAccordionTrigger>
          <UiAccordionContent>
            <p>Click to expand or collapse any section independently.</p>
          </UiAccordionContent>
        </UiAccordionItem>
      </UiAccordion>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: multipleTemplateSource,
      },
    },
  },
};

const nonCollapsibleTemplateSource = `<script setup lang="ts">
import {
  UiAccordion,
  UiAccordionItem,
  UiAccordionTrigger,
  UiAccordionContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAccordion type="single" :collapsible="false" default-value="item-1" class="w-full">
    <UiAccordionItem value="item-1">
      <UiAccordionTrigger>Always One Open</UiAccordionTrigger>
      <UiAccordionContent>
        <p>Click this trigger - it won't close. One item must always be open.</p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-2">
      <UiAccordionTrigger>Click to Switch</UiAccordionTrigger>
      <UiAccordionContent>
        <p>Clicking another item switches to it, but you can't close all.</p>
      </UiAccordionContent>
    </UiAccordionItem>
  </UiAccordion>
</template>`;

/**
 * Non-collapsible accordion ensures one item is always open.
 * Set `collapsible` to `false` to prevent all items from being closed.
 */
export const NonCollapsible: Story = {
  render: () => ({
    components: {
      UiAccordion,
      UiAccordionItem,
      UiAccordionTrigger,
      UiAccordionContent,
    },
    template: `
      <UiAccordion type="single" :collapsible="false" default-value="item-1" class="w-full">
        <UiAccordionItem value="item-1">
          <UiAccordionTrigger>Always One Open</UiAccordionTrigger>
          <UiAccordionContent>
            <p>Click this trigger - it won't close. One item must always be open.</p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-2">
          <UiAccordionTrigger>Click to Switch</UiAccordionTrigger>
          <UiAccordionContent>
            <p>Clicking another item switches to it, but you can't close all.</p>
          </UiAccordionContent>
        </UiAccordionItem>
      </UiAccordion>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: nonCollapsibleTemplateSource,
      },
    },
  },
};

const withDisabledItemTemplateSource = `<script setup lang="ts">
import {
  UiAccordion,
  UiAccordionItem,
  UiAccordionTrigger,
  UiAccordionContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
    <UiAccordionItem value="item-1">
      <UiAccordionTrigger>Available Item</UiAccordionTrigger>
      <UiAccordionContent>
        <p>This item is available and can be expanded or collapsed.</p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-2" :disabled="true">
      <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
      <UiAccordionContent>
        <p>This content cannot be accessed because the item is disabled.</p>
      </UiAccordionContent>
    </UiAccordionItem>
    <UiAccordionItem value="item-3">
      <UiAccordionTrigger>Another Available Item</UiAccordionTrigger>
      <UiAccordionContent>
        <p>This item is also available for interaction.</p>
      </UiAccordionContent>
    </UiAccordionItem>
  </UiAccordion>
</template>`;

/**
 * Accordion with a disabled item. Disabled items cannot be expanded or collapsed.
 */
export const WithDisabledItem: Story = {
  render: () => ({
    components: {
      UiAccordion,
      UiAccordionItem,
      UiAccordionTrigger,
      UiAccordionContent,
    },
    template: `
      <UiAccordion type="single" collapsible default-value="item-1" class="w-full">
        <UiAccordionItem value="item-1">
          <UiAccordionTrigger>Available Item</UiAccordionTrigger>
          <UiAccordionContent>
            <p>This item is available and can be expanded or collapsed.</p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-2" :disabled="true">
          <UiAccordionTrigger>Disabled Item</UiAccordionTrigger>
          <UiAccordionContent>
            <p>This content cannot be accessed because the item is disabled.</p>
          </UiAccordionContent>
        </UiAccordionItem>
        <UiAccordionItem value="item-3">
          <UiAccordionTrigger>Another Available Item</UiAccordionTrigger>
          <UiAccordionContent>
            <p>This item is also available for interaction.</p>
          </UiAccordionContent>
        </UiAccordionItem>
      </UiAccordion>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withDisabledItemTemplateSource,
      },
    },
  },
};

const controlledTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiAccordion,
  UiAccordionItem,
  UiAccordionTrigger,
  UiAccordionContent,
  UiButton,
} from '@aleph-alpha/ui-library'

const activeItem = ref<string | undefined>('overview')

function goToDetails() {
  activeItem.value = 'details'
}

function closeAll() {
  activeItem.value = undefined
}
</script>

<template>
  <div class="gap-y-4">
    <div class="flex items-center gap-4">
      <p class="text-sm">Current: <strong>{{ activeItem ?? 'none' }}</strong></p>
      <UiButton size="sm" @click="goToDetails">Go to Details</UiButton>
      <UiButton size="sm" variant="secondary" @click="closeAll">Close All</UiButton>
    </div>
    
    <UiAccordion v-model="activeItem" type="single" collapsible class="w-full">
      <UiAccordionItem value="overview">
        <UiAccordionTrigger>Overview</UiAccordionTrigger>
        <UiAccordionContent>
          <p>Overview content goes here.</p>
        </UiAccordionContent>
      </UiAccordionItem>
      <UiAccordionItem value="details">
        <UiAccordionTrigger>Details</UiAccordionTrigger>
        <UiAccordionContent>
          <p>Detailed information goes here.</p>
        </UiAccordionContent>
      </UiAccordionItem>
      <UiAccordionItem value="history">
        <UiAccordionTrigger>History</UiAccordionTrigger>
        <UiAccordionContent>
          <p>Historical data goes here.</p>
        </UiAccordionContent>
      </UiAccordionItem>
    </UiAccordion>
  </div>
</template>`;

/**
 * Controlled accordion with programmatic state management.
 * Use `v-model` to control which items are open from parent component.
 */
export const Controlled: Story = {
  render: () => ({
    components: {
      UiAccordion,
      UiAccordionItem,
      UiAccordionTrigger,
      UiAccordionContent,
      UiButton,
    },
    setup() {
      const activeItem = ref<string | undefined>('overview');
      /**
       *
       */
      function goToDetails() {
        activeItem.value = 'details';
      }
      /**
       *
       */
      function closeAll() {
        activeItem.value = undefined;
      }
      return { activeItem, goToDetails, closeAll };
    },
    template: `
      <div class="gap-y-4">
        <div class="flex items-center gap-4">
          <p class="text-sm">Current: <strong>{{ activeItem ?? 'none' }}</strong></p>
          <UiButton size="sm" @click="goToDetails">Go to Details</UiButton>
          <UiButton size="sm" variant="secondary" @click="closeAll">Close All</UiButton>
        </div>
        
        <UiAccordion v-model="activeItem" type="single" collapsible class="w-full">
          <UiAccordionItem value="overview">
            <UiAccordionTrigger>Overview</UiAccordionTrigger>
            <UiAccordionContent>
              <p>Overview content goes here.</p>
            </UiAccordionContent>
          </UiAccordionItem>
          <UiAccordionItem value="details">
            <UiAccordionTrigger>Details</UiAccordionTrigger>
            <UiAccordionContent>
              <p>Detailed information goes here.</p>
            </UiAccordionContent>
          </UiAccordionItem>
          <UiAccordionItem value="history">
            <UiAccordionTrigger>History</UiAccordionTrigger>
            <UiAccordionContent>
              <p>Historical data goes here.</p>
            </UiAccordionContent>
          </UiAccordionItem>
        </UiAccordion>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: controlledTemplateSource,
      },
    },
  },
};
