import VTabs from './VTabs.vue';
import VTabList from './VTabList.vue';
import VTab from './VTab.vue';
import VTabPanels from './VTabPanels.vue';
import VTabPanel from './VTabPanel.vue';
import VButton from '../VButton.vue'; // For v-model interaction demo

import type { Meta, StoryObj } from '@storybook/vue3';
import { ref, computed } from 'vue';

const meta: Meta<typeof VTabs> = {
  title: 'Valerie/Tabs System',
  component: VTabs,
  subcomponents: { VTabList, VTab, VTabPanels, VTabPanel },
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'A flexible and accessible tabs system composed of `VTabs`, `VTabList`, `VTab`, `VTabPanels`, and `VTabPanel`. Use `v-model` on `VTabs` to control the active tab.',
      },
    },
  },
  argTypes: {
    modelValue: { control: 'select', options: ['profile', 'settings', 'billing', null], description: 'ID of the active tab (for v-model).' },
    initialTab: { control: 'select', options: ['profile', 'settings', 'billing', null], description: 'ID of the initially active tab.' },
  }
};

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

export const BasicTabs: Story = {
  render: (args) => ({
    components: { VTabs, VTabList, VTab, VTabPanels, VTabPanel },
    setup() {
      // For stories not directly testing v-model, manage active tab locally or use initialTab
      const currentTab = ref(args.modelValue || args.initialTab || 'profile');
      return { args, currentTab };
    },
    template: `
      <VTabs v-model="currentTab">
        <VTabList aria-label="User Account Tabs">
          <VTab id="profile" title="Profile" />
          <VTab id="settings" title="Settings" />
          <VTab id="billing" title="Billing" />
          <VTab id="disabled" title="Disabled" :disabled="true" />
        </VTabList>
        <VTabPanels>
          <VTabPanel id="profile">
            <p><strong>Profile Tab Content:</strong> Information about the user.</p>
            <input type="text" placeholder="User name" />
          </VTabPanel>
          <VTabPanel id="settings">
            <p><strong>Settings Tab Content:</strong> Configuration options.</p>
            <label><input type="checkbox" /> Enable notifications</label>
          </VTabPanel>
          <VTabPanel id="billing">
            <p><strong>Billing Tab Content:</strong> Payment methods and history.</p>
            <VButton variant="primary">Add Payment Method</VButton>
          </VTabPanel>
          <VTabPanel id="disabled">
            <p>This panel should not be reachable if the tab is truly disabled.</p>
          </VTabPanel>
        </VTabPanels>
      </VTabs>
    `,
  }),
  args: {
    // modelValue: 'profile', // Let VTabs default logic or initialTab handle it
    initialTab: 'settings',
  },
};

export const WithCustomTabContent: Story = {
   render: (args) => ({
    components: { VTabs, VTabList, VTab, VTabPanels, VTabPanel, VIcon: meta.subcomponents.VIcon }, // Assuming VIcon for demo
    setup() {
      const currentTab = ref(args.initialTab || 'alerts');
      return { args, currentTab };
    },
    template: `
      <VTabs v-model="currentTab">
        <VTabList aria-label="Notification Tabs">
          <VTab id="alerts">
            <!-- Using VIcon as an example, ensure it's available or replace -->
            <span style="color: red; margin-right: 4px;">🔔</span> Alerts
          </VTab>
          <VTab id="messages">
            Messages <span style="background: #007bff; color: white; border-radius: 10px; padding: 2px 6px; font-size: 0.8em; margin-left: 5px;">3</span>
          </VTab>
        </VTabList>
        <VTabPanels>
          <VTabPanel id="alerts">
            <p>Content for Alerts. Example of custom content in VTab.</p>
          </VTabPanel>
          <VTabPanel id="messages">
            <p>Content for Messages. Also has custom content in its VTab.</p>
            <ul>
              <li>Message 1</li>
              <li>Message 2</li>
              <li>Message 3</li>
            </ul>
          </VTabPanel>
        </VTabPanels>
      </VTabs>
    `,
  }),
  args: {
    initialTab: 'alerts',
  }
};

export const VModelInteraction: Story = {
  render: (args) => ({
    components: { VTabs, VTabList, VTab, VTabPanels, VTabPanel, VButton },
    setup() {
      // This story uses args.modelValue directly, which Storybook controls can manipulate.
      // Vue's v-model on the component will work with Storybook's arg system.
      const currentTab = ref(args.modelValue || 'first');
      watch(() => args.modelValue, (newVal) => { // Keep local ref in sync if arg changes externally
        if (newVal !== undefined && newVal !== null) currentTab.value = newVal;
      });

      const availableTabs = ['first', 'second', 'third'];
      const selectNextTab = () => {
        const currentIndex = availableTabs.indexOf(currentTab.value);
        const nextIndex = (currentIndex + 1) % availableTabs.length;
        currentTab.value = availableTabs[nextIndex];
        // args.modelValue = availableTabs[nextIndex]; // Update arg for SB control
      };

      return { args, currentTab, selectNextTab, availableTabs };
    },
    template: `
      <div>
        <VTabs v-model="currentTab">
          <VTabList aria-label="Interactive Tabs">
            <VTab v-for="tabId in availableTabs" :key="tabId" :id="tabId" :title="tabId.charAt(0).toUpperCase() + tabId.slice(1) + ' Tab'" />
          </VTabList>
          <VTabPanels>
            <VTabPanel v-for="tabId in availableTabs" :key="tabId" :id="tabId">
              <p>Content for <strong>{{ tabId }}</strong> tab.</p>
            </VTabPanel>
          </VTabPanels>
        </VTabs>
        <div style="margin-top: 20px;">
          <p>Current active tab (v-model): {{ currentTab || 'None' }}</p>
          <VButton @click="selectNextTab">Select Next Tab Programmatically</VButton>
          <p><em>Note: Storybook control for 'modelValue' can also change the tab.</em></p>
        </div>
      </div>
    `,
  }),
  args: {
    modelValue: 'first', // Initial value for the v-model
  },
};

export const EmptyTabs: Story = {
   render: (args) => ({
    components: { VTabs, VTabList, VTabPanels },
    setup() { return { args }; },
    template: `
      <VTabs :modelValue="args.modelValue">
        <VTabList aria-label="Empty Tab List"></VTabList>
        <VTabPanels>
          <!-- No VTabPanel components -->
        </VTabPanels>
      </VTabs>
    `,
  }),
  args: {
    modelValue: null,
  },
  parameters: {
    docs: {
      description: { story: 'Demonstrates the Tabs system with no tabs or panels defined. The `VTabs` onMounted logic should handle this gracefully (no default tab selected).' },
    },
  },
};

export const TabsWithOnlyOnePanel: Story = {
   render: (args) => ({
    components: { VTabs, VTabList, VTab, VTabPanels, VTabPanel },
    setup() {
      const currentTab = ref(args.modelValue || 'single');
      return { args, currentTab };
    },
    template: `
      <VTabs v-model="currentTab">
        <VTabList aria-label="Single Tab Example">
          <VTab id="single" title="The Only Tab" />
        </VTabList>
        <VTabPanels>
          <VTabPanel id="single">
            <p>This is the content of the only tab panel.</p>
            <p>The `VTabs` `onMounted` logic should select this tab by default if no other tab is specified via `modelValue` or `initialTab`.</p>
          </VTabPanel>
        </VTabPanels>
      </VTabs>
    `,
  }),
  args: {
    // modelValue: 'single', // Let default selection logic work
  },
};
