import type { Meta, StoryObj } from '@storybook/vue3-vite';
import {
  UiSheet,
  UiSheetClose,
  UiSheetContent,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetTrigger,
} from '.';
import { UiButton } from '../UiButton';
import { UiInput } from '../UiInput';
import { UiLabel } from '../UiLabel';
import { ref, watch } from 'vue';

/**
 * UiSheet slides a panel in from the edge of the screen.
 * Use it for supplementary content like forms, filters, detail views, or settings
 * that shouldn't navigate away from the current page.
 */
const meta: Meta<typeof UiSheet> = {
  title: 'Components/UiSheet',
  component: UiSheet,
  tags: ['autodocs'],
  argTypes: {
    open: {
      control: 'boolean',
      description:
        'Controlled open state (use `v-model:open` for controlled mode).',
    },
    modal: {
      control: 'boolean',
      description:
        'If true, traps focus and blocks interaction with the page while open.',
    },
  },
  args: {
    open: false,
    modal: true,
  },
};

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

const defaultTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiSheet>
    <UiSheetTrigger as-child>
      <UiButton variant="outline">Open Sheet</UiButton>
    </UiSheetTrigger>
    <UiSheetContent>
      <UiSheetHeader>
        <UiSheetTitle>Sheet title</UiSheetTitle>
        <UiSheetDescription>
          A slide-out panel for supplementary content.
        </UiSheetDescription>
      </UiSheetHeader>
      <div class="flex-1 overflow-auto px-4 py-4 text-sm">
        Put any content here.
      </div>
      <UiSheetFooter>
        <UiSheetClose as-child>
          <UiButton>Close</UiButton>
        </UiSheetClose>
      </UiSheetFooter>
    </UiSheetContent>
  </UiSheet>
</template>`;

/**
 * Basic sheet composition showing Trigger + Content + Header/Footer.
 * Opens from the right side by default.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetFooter,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
    },
    setup() {
      const open = ref(args.open);
      const modal = ref(args.modal);

      watch(
        () => args.open,
        (val) => {
          open.value = val;
        },
      );
      watch(
        () => args.modal,
        (val) => {
          modal.value = val;
        },
      );

      return { open, modal };
    },
    template: `
      <UiSheet v-model:open="open" :modal="modal">
        <UiSheetTrigger as-child>
          <UiButton variant="outline">Open Sheet</UiButton>
        </UiSheetTrigger>
        <UiSheetContent>
          <UiSheetHeader>
            <UiSheetTitle>Sheet title</UiSheetTitle>
            <UiSheetDescription>
              A slide-out panel for supplementary content.
            </UiSheetDescription>
          </UiSheetHeader>
          <div class="flex-1 overflow-auto px-4 py-4 text-sm">
            Put any content here.
          </div>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton>Close</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </UiSheetContent>
      </UiSheet>
    `,
  }),
  parameters: {
    docs: { source: { code: defaultTemplateSource } },
  },
};

const controlledTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetClose,
  UiButton,
} from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <UiSheet v-model:open="open">
    <UiSheetTrigger as-child>
      <UiButton variant="outline">
        {{ open ? 'Close' : 'Open' }} Sheet
      </UiButton>
    </UiSheetTrigger>
    <UiSheetContent>
      <UiSheetHeader>
        <UiSheetTitle>Controlled sheet</UiSheetTitle>
        <UiSheetDescription>
          This sheet is controlled via v-model:open.
        </UiSheetDescription>
      </UiSheetHeader>
      <div class="flex-1 overflow-auto px-4 py-4 text-sm gap-y-3">
        <p>Click the buttons below to close programmatically.</p>
        <div class="flex gap-2 flex-wrap">
          <UiButton size="sm" @click="open = false">Close via model</UiButton>
          <UiSheetClose as-child>
            <UiButton size="sm" variant="outline">Close via UiSheetClose</UiButton>
          </UiSheetClose>
        </div>
      </div>
    </UiSheetContent>
  </UiSheet>
</template>`;

/**
 * Controlled sheet using `v-model:open`.
 * Use this when visibility is driven by app state (router, async flows, programmatic close).
 */
export const Controlled: Story = {
  render: () => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetFooter,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
    },
    setup() {
      const open = ref(false);
      return { open };
    },
    template: `
      <UiSheet v-model:open="open">
        <UiSheetTrigger as-child>
          <UiButton variant="outline">
            {{ open ? 'Close' : 'Open' }} Sheet
          </UiButton>
        </UiSheetTrigger>
        <UiSheetContent>
          <UiSheetHeader>
            <UiSheetTitle>Controlled sheet</UiSheetTitle>
            <UiSheetDescription>
              This sheet is controlled via v-model:open.
            </UiSheetDescription>
          </UiSheetHeader>
          <div class="flex-1 overflow-auto px-4 py-4 text-sm gap-y-3">
            <p>Click the buttons below to close programmatically.</p>
            <div class="flex gap-2 flex-wrap">
              <UiButton size="sm" @click="open = false">Close via model</UiButton>
              <UiSheetClose as-child>
                <UiButton size="sm" variant="outline">Close via UiSheetClose</UiButton>
              </UiSheetClose>
            </div>
          </div>
        </UiSheetContent>
      </UiSheet>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: controlledTemplateSource } },
  },
};

const sideVariantsTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <UiSheet v-for="side in ['top', 'right', 'bottom', 'left']" :key="side">
      <UiSheetTrigger as-child>
        <UiButton variant="outline">{{ side }}</UiButton>
      </UiSheetTrigger>
      <UiSheetContent :side="side">
        <UiSheetHeader>
          <UiSheetTitle>{{ side }} sheet</UiSheetTitle>
          <UiSheetDescription>
            This sheet slides in from the {{ side }}.
          </UiSheetDescription>
        </UiSheetHeader>
        <div class="flex-1 overflow-auto px-4 py-4 text-sm">
          Content for the {{ side }} sheet.
        </div>
        <UiSheetClose as-child>
          <UiButton class="mx-4 mb-4">Close</UiButton>
        </UiSheetClose>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>`;

/**
 * All four side variants: top, right, bottom, left.
 * The `side` prop on `UiSheetContent` controls the slide-in direction.
 */
export const SideVariants: Story = {
  render: () => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
    },
    template: `
      <div class="flex flex-wrap gap-2">
        <UiSheet v-for="side in ['top', 'right', 'bottom', 'left']" :key="side">
          <UiSheetTrigger as-child>
            <UiButton variant="outline">{{ side }}</UiButton>
          </UiSheetTrigger>
          <UiSheetContent :side="side">
            <UiSheetHeader>
              <UiSheetTitle>{{ side }} sheet</UiSheetTitle>
              <UiSheetDescription>
                This sheet slides in from the {{ side }}.
              </UiSheetDescription>
            </UiSheetHeader>
            <div class="flex-1 overflow-auto px-4 py-4 text-sm">
              Content for the {{ side }} sheet.
            </div>
            <UiSheetClose as-child>
              <UiButton class="mx-4 mb-4">Close</UiButton>
            </UiSheetClose>
          </UiSheetContent>
        </UiSheet>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: sideVariantsTemplateSource } },
  },
};

const nonModalTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="gap-y-4">
    <p class="text-sm text-muted-foreground">
      Non-modal sheet: you can still interact with the page while it is open.
    </p>
    <UiSheet :modal="false">
      <UiSheetTrigger as-child>
        <UiButton variant="outline">Open non-modal</UiButton>
      </UiSheetTrigger>
      <UiSheetContent>
        <UiSheetHeader>
          <UiSheetTitle>Non-modal sheet</UiSheetTitle>
          <UiSheetDescription>
            Outside interaction is allowed.
          </UiSheetDescription>
        </UiSheetHeader>
        <div class="flex-1 overflow-auto px-4 py-4 text-sm">
          Try selecting text outside the sheet.
        </div>
        <UiSheetFooter>
          <UiSheetClose as-child>
            <UiButton>Close</UiButton>
          </UiSheetClose>
        </UiSheetFooter>
      </UiSheetContent>
    </UiSheet>
  </div>
</template>`;

/**
 * Non-modal sheet (`modal=false`) where outside interaction remains possible.
 * Use this for lightweight panels that shouldn't block the rest of the UI.
 */
export const NonModal: Story = {
  render: () => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetFooter,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
    },
    template: `
      <div class="gap-y-4">
        <p class="text-sm text-muted-foreground">
          Non-modal sheet: you can still interact with the page while it is open.
        </p>
        <UiSheet :modal="false">
          <UiSheetTrigger as-child>
            <UiButton variant="outline">Open non-modal</UiButton>
          </UiSheetTrigger>
          <UiSheetContent>
            <UiSheetHeader>
              <UiSheetTitle>Non-modal sheet</UiSheetTitle>
              <UiSheetDescription>
                Outside interaction is allowed.
              </UiSheetDescription>
            </UiSheetHeader>
            <div class="flex-1 overflow-auto px-4 py-4 text-sm">
              Try selecting text outside the sheet.
            </div>
            <UiSheetFooter>
              <UiSheetClose as-child>
                <UiButton>Close</UiButton>
              </UiSheetClose>
            </UiSheetFooter>
          </UiSheetContent>
        </UiSheet>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: nonModalTemplateSource } },
  },
};

const withFormTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetClose,
  UiButton,
  UiInput,
  UiLabel,
} from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <UiSheet v-model:open="open">
    <UiSheetTrigger as-child>
      <UiButton variant="outline">Edit Profile</UiButton>
    </UiSheetTrigger>
    <UiSheetContent>
      <UiSheetHeader>
        <UiSheetTitle>Edit profile</UiSheetTitle>
        <UiSheetDescription>
          Make changes to your profile here. Click save when you're done.
        </UiSheetDescription>
      </UiSheetHeader>
      <div class="flex-1 overflow-auto px-4 py-4 gap-y-4">
        <div class="gap-y-2">
          <UiLabel for="name">Name</UiLabel>
          <UiInput id="name" placeholder="Enter your name" />
        </div>
        <div class="gap-y-2">
          <UiLabel for="email">Email</UiLabel>
          <UiInput id="email" placeholder="Enter your email" />
        </div>
      </div>
      <UiSheetFooter>
        <UiSheetClose as-child>
          <UiButton variant="outline">Cancel</UiButton>
        </UiSheetClose>
        <UiButton @click="open = false">Save changes</UiButton>
      </UiSheetFooter>
    </UiSheetContent>
  </UiSheet>
</template>`;

/**
 * Sheet with a form layout for editing data.
 * A common pattern for settings panels, profile editing, or filter configuration.
 */
export const WithForm: Story = {
  render: () => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetFooter,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
      UiInput,
      UiLabel,
    },
    setup() {
      const open = ref(false);
      return { open };
    },
    template: `
      <UiSheet v-model:open="open">
        <UiSheetTrigger as-child>
          <UiButton variant="outline">Edit Profile</UiButton>
        </UiSheetTrigger>
        <UiSheetContent>
          <UiSheetHeader>
            <UiSheetTitle>Edit profile</UiSheetTitle>
            <UiSheetDescription>
              Make changes to your profile here. Click save when you're done.
            </UiSheetDescription>
          </UiSheetHeader>
          <div class="flex-1 overflow-auto px-4 py-4 gap-y-4">
            <div class="gap-y-2">
              <UiLabel for="name">Name</UiLabel>
              <UiInput id="name" placeholder="Enter your name" />
            </div>
            <div class="gap-y-2">
              <UiLabel for="email">Email</UiLabel>
              <UiInput id="email" placeholder="Enter your email" />
            </div>
          </div>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton variant="outline">Cancel</UiButton>
            </UiSheetClose>
            <UiButton @click="open = false">Save changes</UiButton>
          </UiSheetFooter>
        </UiSheetContent>
      </UiSheet>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: withFormTemplateSource } },
  },
};

const longContentTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiSheet>
    <UiSheetTrigger as-child>
      <UiButton variant="outline">Open long content</UiButton>
    </UiSheetTrigger>
    <UiSheetContent>
      <UiSheetHeader>
        <UiSheetTitle>Long content</UiSheetTitle>
        <UiSheetDescription>
          Demonstrates scrolling content inside the sheet.
        </UiSheetDescription>
      </UiSheetHeader>
      <div class="flex-1 overflow-auto px-4 py-4">
        <div class="gap-y-2 text-sm">
          <p v-for="i in 30" :key="i">Item {{ i }} — Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <UiSheetFooter>
        <UiSheetClose as-child>
          <UiButton>Close</UiButton>
        </UiSheetClose>
      </UiSheetFooter>
    </UiSheetContent>
  </UiSheet>
</template>`;

/**
 * Sheet with scrollable content.
 * Use this for lists or forms that exceed the viewport height.
 */
export const LongContent: Story = {
  render: () => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetFooter,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
    },
    template: `
      <UiSheet>
        <UiSheetTrigger as-child>
          <UiButton variant="outline">Open long content</UiButton>
        </UiSheetTrigger>
        <UiSheetContent>
          <UiSheetHeader>
            <UiSheetTitle>Long content</UiSheetTitle>
            <UiSheetDescription>
              Demonstrates scrolling content inside the sheet.
            </UiSheetDescription>
          </UiSheetHeader>
          <div class="flex-1 overflow-auto px-4 py-4">
            <div class="gap-y-2 text-sm">
              <p v-for="i in 30" :key="i">Item {{ i }} — Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton>Close</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </UiSheetContent>
      </UiSheet>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: longContentTemplateSource } },
  },
};

const openByDefaultTemplateSource = `<script setup lang="ts">
import {
  UiSheet,
  UiSheetTrigger,
  UiSheetContent,
  UiSheetHeader,
  UiSheetTitle,
  UiSheetDescription,
  UiSheetFooter,
  UiSheetClose,
  UiButton,
} from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <UiSheet v-model:open="open">
    <UiSheetTrigger as-child>
      <UiButton variant="outline">Toggle Sheet</UiButton>
    </UiSheetTrigger>
    <UiSheetContent>
      <UiSheetHeader>
        <UiSheetTitle>Open by default</UiSheetTitle>
        <UiSheetDescription>
          Useful for visual regression testing.
        </UiSheetDescription>
      </UiSheetHeader>
      <div class="flex-1 overflow-auto px-4 py-4 text-sm">
        This sheet starts open.
      </div>
      <UiSheetFooter>
        <UiSheetClose as-child>
          <UiButton>Close</UiButton>
        </UiSheetClose>
      </UiSheetFooter>
    </UiSheetContent>
  </UiSheet>
</template>`;

/**
 * Sheet that starts open.
 * Use this for visual regression testing to capture sheet content without user interaction.
 */
export const OpenByDefault: Story = {
  render: () => ({
    components: {
      UiSheet,
      UiSheetClose,
      UiSheetContent,
      UiSheetDescription,
      UiSheetFooter,
      UiSheetHeader,
      UiSheetTitle,
      UiSheetTrigger,
      UiButton,
    },
    setup() {
      const open = ref(true);
      return { open };
    },
    template: `
      <UiSheet v-model:open="open">
        <UiSheetTrigger as-child>
          <UiButton variant="outline">Toggle Sheet</UiButton>
        </UiSheetTrigger>
        <UiSheetContent>
          <UiSheetHeader>
            <UiSheetTitle>Open by default</UiSheetTitle>
            <UiSheetDescription>
              Useful for visual regression testing.
            </UiSheetDescription>
          </UiSheetHeader>
          <div class="flex-1 overflow-auto px-4 py-4 text-sm">
            This sheet starts open.
          </div>
          <UiSheetFooter>
            <UiSheetClose as-child>
              <UiButton>Close</UiButton>
            </UiSheetClose>
          </UiSheetFooter>
        </UiSheetContent>
      </UiSheet>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: openByDefaultTemplateSource } },
  },
};
