import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref, watch } from 'vue';
import { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent } from './index';

/**
 * UiTabs is a set of switchable content panels selected by their tab triggers.
 * Use it to organize related views inside a single page region without navigating away; for top-level page navigation, use `UiNavigationMenu`.
 */
const meta: Meta<typeof UiTabs> = {
  title: 'Components/UiTabs',
  component: UiTabs,
  tags: ['autodocs'],
  argTypes: {
    modelValue: {
      control: 'text',
      description: 'The controlled value of the active tab (use with v-model)',
    },
    defaultValue: {
      control: 'text',
      description: 'The default active tab value (uncontrolled)',
    },
    orientation: {
      control: 'select',
      options: ['horizontal', 'vertical'],
      description: 'The orientation of the tabs',
    },
    activationMode: {
      control: 'select',
      options: ['automatic', 'manual'],
      description: 'Whether tabs activate on focus or click',
    },
  },
  args: {
    orientation: 'horizontal',
    activationMode: 'automatic',
  },
};

export default meta;

type Story = StoryObj<typeof UiTabs>;

const defaultTemplateSource = `<script setup lang="ts">
import {
  UiTabs,
  UiTabsList,
  UiTabsTrigger,
  UiTabsContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTabs default-value="account">
    <UiTabsList>
      <UiTabsTrigger value="account">Account</UiTabsTrigger>
      <UiTabsTrigger value="password">Password</UiTabsTrigger>
      <UiTabsTrigger value="settings">Settings</UiTabsTrigger>
    </UiTabsList>
    <UiTabsContent value="account">
      <div class="p-4">
        <h3 class="text-lg font-medium">Account</h3>
        <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="password">
      <div class="p-4">
        <h3 class="text-lg font-medium">Password</h3>
        <p class="text-sm text-muted-foreground">Change your password and security settings.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="settings">
      <div class="p-4">
        <h3 class="text-lg font-medium">Settings</h3>
        <p class="text-sm text-muted-foreground">Configure your application settings.</p>
      </div>
    </UiTabsContent>
  </UiTabs>
</template>`;

/**
 * Default tabs with automatic tab switching.
 * Click on a tab to switch to its content.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
    setup() {
      const activeTab = ref(args.modelValue ?? 'account');
      watch(
        () => args.modelValue,
        (val) => {
          if (val) activeTab.value = val;
        },
      );
      return { args, activeTab };
    },
    template: `
      <UiTabs 
        v-model="activeTab" 
        :orientation="args.orientation"
        :activation-mode="args.activationMode"
      >
        <UiTabsList>
          <UiTabsTrigger value="account">Account</UiTabsTrigger>
          <UiTabsTrigger value="password">Password</UiTabsTrigger>
          <UiTabsTrigger value="settings">Settings</UiTabsTrigger>
        </UiTabsList>
        <UiTabsContent value="account">
          <div class="p-4">
            <h3 class="text-lg font-medium">Account</h3>
            <p class="text-sm text-muted-foreground">Manage your account settings and preferences.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="password">
          <div class="p-4">
            <h3 class="text-lg font-medium">Password</h3>
            <p class="text-sm text-muted-foreground">Change your password and security settings.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="settings">
          <div class="p-4">
            <h3 class="text-lg font-medium">Settings</h3>
            <p class="text-sm text-muted-foreground">Configure your application settings.</p>
          </div>
        </UiTabsContent>
      </UiTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: defaultTemplateSource,
      },
    },
  },
};

const withDisabledTabTemplateSource = `<script setup lang="ts">
import {
  UiTabs,
  UiTabsList,
  UiTabsTrigger,
  UiTabsContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTabs default-value="tab1">
    <UiTabsList>
      <UiTabsTrigger value="tab1">Active Tab</UiTabsTrigger>
      <UiTabsTrigger value="tab2" :disabled="true">Disabled Tab</UiTabsTrigger>
      <UiTabsTrigger value="tab3">Another Tab</UiTabsTrigger>
    </UiTabsList>
    <UiTabsContent value="tab1">
      <div class="p-4">
        <p class="text-sm text-muted-foreground">Content for the first tab.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="tab2">
      <div class="p-4">
        <p class="text-sm text-muted-foreground">This content is for the disabled tab.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="tab3">
      <div class="p-4">
        <p class="text-sm text-muted-foreground">Content for the third tab.</p>
      </div>
    </UiTabsContent>
  </UiTabs>
</template>`;

/**
 * Tabs with a disabled tab that cannot be selected.
 */
export const WithDisabledTab: Story = {
  render: () => ({
    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
    template: `
      <UiTabs default-value="tab1">
        <UiTabsList>
          <UiTabsTrigger value="tab1">Active Tab</UiTabsTrigger>
          <UiTabsTrigger value="tab2" :disabled="true">Disabled Tab</UiTabsTrigger>
          <UiTabsTrigger value="tab3">Another Tab</UiTabsTrigger>
        </UiTabsList>
        <UiTabsContent value="tab1">
          <div class="p-4">
            <p class="text-sm text-muted-foreground">Content for the first tab.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="tab2">
          <div class="p-4">
            <p class="text-sm text-muted-foreground">This content is for the disabled tab.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="tab3">
          <div class="p-4">
            <p class="text-sm text-muted-foreground">Content for the third tab.</p>
          </div>
        </UiTabsContent>
      </UiTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: withDisabledTabTemplateSource,
      },
    },
  },
};

const verticalTemplateSource = `<script setup lang="ts">
import {
  UiTabs,
  UiTabsList,
  UiTabsTrigger,
  UiTabsContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTabs default-value="general" orientation="vertical" class="flex-row">
    <UiTabsList class="flex-col h-auto">
      <UiTabsTrigger value="general">General</UiTabsTrigger>
      <UiTabsTrigger value="security">Security</UiTabsTrigger>
      <UiTabsTrigger value="notifications">Notifications</UiTabsTrigger>
    </UiTabsList>
    <UiTabsContent value="general">
      <div class="p-4">
        <h3 class="text-lg font-medium">General</h3>
        <p class="text-sm text-muted-foreground">General settings content.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="security">
      <div class="p-4">
        <h3 class="text-lg font-medium">Security</h3>
        <p class="text-sm text-muted-foreground">Security settings content.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="notifications">
      <div class="p-4">
        <h3 class="text-lg font-medium">Notifications</h3>
        <p class="text-sm text-muted-foreground">Notification preferences content.</p>
      </div>
    </UiTabsContent>
  </UiTabs>
</template>`;

/**
 * Vertical tabs with side-by-side layout.
 * Set `orientation="vertical"` for vertically stacked tabs.
 */
export const Vertical: Story = {
  render: () => ({
    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
    template: `
      <UiTabs default-value="general" orientation="vertical" class="flex-row">
        <UiTabsList class="flex-col h-auto">
          <UiTabsTrigger value="general">General</UiTabsTrigger>
          <UiTabsTrigger value="security">Security</UiTabsTrigger>
          <UiTabsTrigger value="notifications">Notifications</UiTabsTrigger>
        </UiTabsList>
        <UiTabsContent value="general">
          <div class="p-4">
            <h3 class="text-lg font-medium">General</h3>
            <p class="text-sm text-muted-foreground">General settings content.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="security">
          <div class="p-4">
            <h3 class="text-lg font-medium">Security</h3>
            <p class="text-sm text-muted-foreground">Security settings content.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="notifications">
          <div class="p-4">
            <h3 class="text-lg font-medium">Notifications</h3>
            <p class="text-sm text-muted-foreground">Notification preferences content.</p>
          </div>
        </UiTabsContent>
      </UiTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: verticalTemplateSource,
      },
    },
  },
};

const manualActivationTemplateSource = `<script setup lang="ts">
import {
  UiTabs,
  UiTabsList,
  UiTabsTrigger,
  UiTabsContent,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiTabs default-value="tab1" activation-mode="manual">
    <UiTabsList>
      <UiTabsTrigger value="tab1">Tab 1</UiTabsTrigger>
      <UiTabsTrigger value="tab2">Tab 2</UiTabsTrigger>
      <UiTabsTrigger value="tab3">Tab 3</UiTabsTrigger>
    </UiTabsList>
    <UiTabsContent value="tab1">
      <div class="p-4">
        <p class="text-sm text-muted-foreground">Click to activate tabs (keyboard focus won't auto-switch).</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="tab2">
      <div class="p-4">
        <p class="text-sm text-muted-foreground">Second tab content.</p>
      </div>
    </UiTabsContent>
    <UiTabsContent value="tab3">
      <div class="p-4">
        <p class="text-sm text-muted-foreground">Third tab content.</p>
      </div>
    </UiTabsContent>
  </UiTabs>
</template>`;

/**
 * Manual activation mode requires pressing Enter/Space to switch tabs.
 * Useful when tab content is expensive to render.
 */
export const ManualActivation: Story = {
  render: () => ({
    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
    template: `
      <UiTabs default-value="tab1" activation-mode="manual">
        <UiTabsList>
          <UiTabsTrigger value="tab1">Tab 1</UiTabsTrigger>
          <UiTabsTrigger value="tab2">Tab 2</UiTabsTrigger>
          <UiTabsTrigger value="tab3">Tab 3</UiTabsTrigger>
        </UiTabsList>
        <UiTabsContent value="tab1">
          <div class="p-4">
            <p class="text-sm text-muted-foreground">Click to activate tabs (keyboard focus won't auto-switch).</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="tab2">
          <div class="p-4">
            <p class="text-sm text-muted-foreground">Second tab content.</p>
          </div>
        </UiTabsContent>
        <UiTabsContent value="tab3">
          <div class="p-4">
            <p class="text-sm text-muted-foreground">Third tab content.</p>
          </div>
        </UiTabsContent>
      </UiTabs>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: manualActivationTemplateSource,
      },
    },
  },
};

const controlledTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import {
  UiTabs,
  UiTabsList,
  UiTabsTrigger,
  UiTabsContent,
} from '@aleph-alpha/ui-library'

const activeTab = ref('overview')

function goToDetails() {
  activeTab.value = 'details'
}
</script>

<template>
  <div class="gap-y-4">
    <div class="flex items-center gap-4">
      <p class="text-sm">Current tab: <strong>{{ activeTab }}</strong></p>
      <button 
        class="px-3 py-1 text-sm bg-primary text-primary-foreground rounded-md"
        @click="goToDetails"
      >
        Go to Details
      </button>
    </div>
    
    <UiTabs v-model="activeTab">
      <UiTabsList>
        <UiTabsTrigger value="overview">Overview</UiTabsTrigger>
        <UiTabsTrigger value="details">Details</UiTabsTrigger>
        <UiTabsTrigger value="history">History</UiTabsTrigger>
      </UiTabsList>
      <UiTabsContent value="overview">
        <div class="p-4">
          <p class="text-sm text-muted-foreground">Overview content.</p>
        </div>
      </UiTabsContent>
      <UiTabsContent value="details">
        <div class="p-4">
          <p class="text-sm text-muted-foreground">Details content.</p>
        </div>
      </UiTabsContent>
      <UiTabsContent value="history">
        <div class="p-4">
          <p class="text-sm text-muted-foreground">History content.</p>
        </div>
      </UiTabsContent>
    </UiTabs>
  </div>
</template>`;

/**
 * Controlled tabs with programmatic tab switching.
 * Use `v-model` to control the active tab from parent.
 */
export const Controlled: Story = {
  render: () => ({
    components: { UiTabs, UiTabsList, UiTabsTrigger, UiTabsContent },
    setup() {
      const activeTab = ref('overview');
      function goToDetails() {
        activeTab.value = 'details';
      }
      return { activeTab, goToDetails };
    },
    template: `
      <div class="gap-y-4">
        <div class="flex items-center gap-4">
          <p class="text-sm">Current tab: <strong>{{ activeTab }}</strong></p>
          <button 
            class="px-3 py-1 text-sm bg-primary text-primary-foreground rounded-md"
            @click="goToDetails"
          >
            Go to Details
          </button>
        </div>
        
        <UiTabs v-model="activeTab">
          <UiTabsList>
            <UiTabsTrigger value="overview">Overview</UiTabsTrigger>
            <UiTabsTrigger value="details">Details</UiTabsTrigger>
            <UiTabsTrigger value="history">History</UiTabsTrigger>
          </UiTabsList>
          <UiTabsContent value="overview">
            <div class="p-4">
              <p class="text-sm text-muted-foreground">Overview content.</p>
            </div>
          </UiTabsContent>
          <UiTabsContent value="details">
            <div class="p-4">
              <p class="text-sm text-muted-foreground">Details content.</p>
            </div>
          </UiTabsContent>
          <UiTabsContent value="history">
            <div class="p-4">
              <p class="text-sm text-muted-foreground">History content.</p>
            </div>
          </UiTabsContent>
        </UiTabs>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: {
        code: controlledTemplateSource,
      },
    },
  },
};
