import type { Meta, StoryObj } from '@storybook/vue3-vite';
import {
  UiDrawer,
  UiDrawerClose,
  UiDrawerContent,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerTrigger,
} from '.';
import { UiButton } from '../UiButton';
import { ref, watch } from 'vue';

/**
 * UiDrawer presents content in a bottom-sheet style overlay.
 * Use it for mobile-friendly secondary flows (filters, details, quick actions) that shouldn't navigate away.
 */
const meta: Meta<typeof UiDrawer> = {
  title: 'Components/UiDrawer',
  component: UiDrawer,
  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 UiDrawer>;

const defaultTemplateSource = `<script setup lang="ts">
import {
  UiDrawer,
  UiDrawerTrigger,
  UiDrawerContent,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiDrawer>
    <UiDrawerTrigger as-child>
      <UiButton variant="outline">Open Drawer</UiButton>
    </UiDrawerTrigger>
    <UiDrawerContent>
      <UiDrawerHeader>
        <UiDrawerTitle>Drawer title</UiDrawerTitle>
        <UiDrawerDescription>
          This is a shadcn-style drawer built on top of reka-ui Dialog primitives.
        </UiDrawerDescription>
      </UiDrawerHeader>
      <div class="p-4 pt-0 body-14-regular">
        Put any content here.
      </div>
      <UiDrawerFooter>
        <UiDrawerClose as-child>
          <UiButton>Close</UiButton>
        </UiDrawerClose>
      </UiDrawerFooter>
    </UiDrawerContent>
  </UiDrawer>
</template>`;

/**
 * Basic drawer composition showing Trigger + Content + Header/Footer.
 * Use this as the starting point for simple bottom-sheet flows.
 */
export const Default: Story = {
  render: (args) => ({
    components: {
      UiDrawer,
      UiDrawerClose,
      UiDrawerContent,
      UiDrawerDescription,
      UiDrawerFooter,
      UiDrawerHeader,
      UiDrawerTitle,
      UiDrawerTrigger,
      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: `
      <UiDrawer v-model:open="open" :modal="modal">
        <UiDrawerTrigger as-child>
          <UiButton variant="outline">Open Drawer</UiButton>
        </UiDrawerTrigger>
        <UiDrawerContent>
          <UiDrawerHeader>
            <UiDrawerTitle>Drawer title</UiDrawerTitle>
            <UiDrawerDescription>
              This is a shadcn-style drawer built on top of reka-ui Dialog primitives.
            </UiDrawerDescription>
          </UiDrawerHeader>
          <div class="p-4 pt-0 body-14-regular">
            Put any content here.
          </div>
          <UiDrawerFooter>
            <UiDrawerClose as-child>
              <UiButton>Close</UiButton>
            </UiDrawerClose>
          </UiDrawerFooter>
        </UiDrawerContent>
      </UiDrawer>
    `,
  }),
  parameters: {
    docs: { source: { code: defaultTemplateSource } },
  },
};

const controlledTemplateSource = `<script setup lang="ts">
import {
  UiDrawer,
  UiDrawerTrigger,
  UiDrawerContent,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerClose,
  UiButton,
} from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <UiDrawer v-model:open="open">
    <UiDrawerTrigger as-child>
      <UiButton variant="outline">
        {{ open ? 'Close' : 'Open' }} Drawer
      </UiButton>
    </UiDrawerTrigger>
    <UiDrawerContent>
      <UiDrawerHeader>
        <UiDrawerTitle>Controlled drawer</UiDrawerTitle>
        <UiDrawerDescription>
          This drawer is controlled via v-model:open.
        </UiDrawerDescription>
      </UiDrawerHeader>
      <div class="p-4 pt-0 body-14-regular 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>
          <UiDrawerClose as-child>
            <UiButton size="sm" variant="outline">Close via UiDrawerClose</UiButton>
          </UiDrawerClose>
        </div>
      </div>
    </UiDrawerContent>
  </UiDrawer>
</template>`;

/**
 * Controlled drawer using `v-model:open`.
 * Use this when visibility is driven by app state (router, async flows, programmatic close).
 */
export const Controlled: Story = {
  render: () => ({
    components: {
      UiDrawer,
      UiDrawerClose,
      UiDrawerContent,
      UiDrawerDescription,
      UiDrawerFooter,
      UiDrawerHeader,
      UiDrawerTitle,
      UiDrawerTrigger,
      UiButton,
    },
    setup() {
      const open = ref(false);
      return { open };
    },
    template: `
      <UiDrawer v-model:open="open">
        <UiDrawerTrigger as-child>
          <UiButton variant="outline">
            {{ open ? 'Close' : 'Open' }} Drawer
          </UiButton>
        </UiDrawerTrigger>
        <UiDrawerContent>
          <UiDrawerHeader>
            <UiDrawerTitle>Controlled drawer</UiDrawerTitle>
            <UiDrawerDescription>
              This drawer is controlled via v-model:open.
            </UiDrawerDescription>
          </UiDrawerHeader>
          <div class="p-4 pt-0 body-14-regular 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>
              <UiDrawerClose as-child>
                <UiButton size="sm" variant="outline">Close via UiDrawerClose</UiButton>
              </UiDrawerClose>
            </div>
          </div>
        </UiDrawerContent>
      </UiDrawer>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: controlledTemplateSource } },
  },
};

const nonModalTemplateSource = `<script setup lang="ts">
import {
  UiDrawer,
  UiDrawerTrigger,
  UiDrawerContent,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <div class="gap-y-4">
    <p class="body-14-regular text-muted-foreground">
      Non-modal drawer: you can still interact with the page while it is open.
    </p>
    <UiDrawer :modal="false">
      <UiDrawerTrigger as-child>
        <UiButton variant="outline">Open non-modal</UiButton>
      </UiDrawerTrigger>
      <UiDrawerContent>
        <UiDrawerHeader>
          <UiDrawerTitle>Non-modal drawer</UiDrawerTitle>
          <UiDrawerDescription>
            Outside interaction is allowed.
          </UiDrawerDescription>
        </UiDrawerHeader>
        <div class="p-4 pt-0 body-14-regular">
          Try selecting text outside the drawer.
        </div>
        <UiDrawerFooter>
          <UiDrawerClose as-child>
            <UiButton>Close</UiButton>
          </UiDrawerClose>
        </UiDrawerFooter>
      </UiDrawerContent>
    </UiDrawer>
  </div>
</template>`;

/**
 * Non-modal drawer (`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: {
      UiDrawer,
      UiDrawerClose,
      UiDrawerContent,
      UiDrawerDescription,
      UiDrawerFooter,
      UiDrawerHeader,
      UiDrawerTitle,
      UiDrawerTrigger,
      UiButton,
    },
    template: `
      <div class="gap-y-4">
        <p class="body-14-regular text-muted-foreground">
          Non-modal drawer: you can still interact with the page while it is open.
        </p>
        <UiDrawer :modal="false">
          <UiDrawerTrigger as-child>
            <UiButton variant="outline">Open non-modal</UiButton>
          </UiDrawerTrigger>
          <UiDrawerContent>
            <UiDrawerHeader>
              <UiDrawerTitle>Non-modal drawer</UiDrawerTitle>
              <UiDrawerDescription>
                Outside interaction is allowed.
              </UiDrawerDescription>
            </UiDrawerHeader>
            <div class="p-4 pt-0 body-14-regular">
              Try selecting text outside the drawer.
            </div>
            <UiDrawerFooter>
              <UiDrawerClose as-child>
                <UiButton>Close</UiButton>
              </UiDrawerClose>
            </UiDrawerFooter>
          </UiDrawerContent>
        </UiDrawer>
      </div>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: nonModalTemplateSource } },
  },
};

const withoutHandleTemplateSource = `<script setup lang="ts">
import {
  UiDrawer,
  UiDrawerTrigger,
  UiDrawerContent,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiDrawer>
    <UiDrawerTrigger as-child>
      <UiButton variant="outline">Open (no handle)</UiButton>
    </UiDrawerTrigger>
    <UiDrawerContent :show-handle="false">
      <UiDrawerHeader>
        <UiDrawerTitle>No handle</UiDrawerTitle>
        <UiDrawerDescription>
          The drawer handle bar is disabled via showHandle.
        </UiDrawerDescription>
      </UiDrawerHeader>
      <div class="p-4 pt-0 body-14-regular">
        Content without handle.
      </div>
      <UiDrawerFooter>
        <UiDrawerClose as-child>
          <UiButton>Close</UiButton>
        </UiDrawerClose>
      </UiDrawerFooter>
    </UiDrawerContent>
  </UiDrawer>
</template>`;

/**
 * Drawer content without the top "handle" bar.
 * Use this when the handle is visually distracting or you provide explicit close actions.
 */
export const WithoutHandle: Story = {
  render: () => ({
    components: {
      UiDrawer,
      UiDrawerClose,
      UiDrawerContent,
      UiDrawerDescription,
      UiDrawerFooter,
      UiDrawerHeader,
      UiDrawerTitle,
      UiDrawerTrigger,
      UiButton,
    },
    template: `
      <UiDrawer>
        <UiDrawerTrigger as-child>
          <UiButton variant="outline">Open (no handle)</UiButton>
        </UiDrawerTrigger>
        <UiDrawerContent :show-handle="false">
          <UiDrawerHeader>
            <UiDrawerTitle>No handle</UiDrawerTitle>
            <UiDrawerDescription>
              The drawer handle bar is disabled via showHandle.
            </UiDrawerDescription>
          </UiDrawerHeader>
          <div class="p-4 pt-0 body-14-regular">
            Content without handle.
          </div>
          <UiDrawerFooter>
            <UiDrawerClose as-child>
              <UiButton>Close</UiButton>
            </UiDrawerClose>
          </UiDrawerFooter>
        </UiDrawerContent>
      </UiDrawer>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: withoutHandleTemplateSource } },
  },
};

const longContentTemplateSource = `<script setup lang="ts">
import {
  UiDrawer,
  UiDrawerTrigger,
  UiDrawerContent,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerClose,
  UiButton,
} from '@aleph-alpha/ui-library'
</script>

<template>
  <UiDrawer>
    <UiDrawerTrigger as-child>
      <UiButton variant="outline">Open long content</UiButton>
    </UiDrawerTrigger>
    <UiDrawerContent>
      <UiDrawerHeader>
        <UiDrawerTitle>Long content</UiDrawerTitle>
        <UiDrawerDescription>
          Demonstrates scrolling content inside the drawer.
        </UiDrawerDescription>
      </UiDrawerHeader>
      <div class="px-4 pb-4 pt-0">
        <div class="h-80 overflow-auto rounded-md border p-3 body-14-regular gap-y-2">
          <p v-for="i in 30" :key="i">Row {{ i }}</p>
        </div>
      </div>
      <UiDrawerFooter>
        <UiDrawerClose as-child>
          <UiButton>Close</UiButton>
        </UiDrawerClose>
      </UiDrawerFooter>
    </UiDrawerContent>
  </UiDrawer>
</template>`;

/**
 * Drawer with scrollable content inside the sheet.
 * Use this for lists/forms that exceed the viewport height.
 */
export const LongContent: Story = {
  render: () => ({
    components: {
      UiDrawer,
      UiDrawerClose,
      UiDrawerContent,
      UiDrawerDescription,
      UiDrawerFooter,
      UiDrawerHeader,
      UiDrawerTitle,
      UiDrawerTrigger,
      UiButton,
    },
    template: `
      <UiDrawer>
        <UiDrawerTrigger as-child>
          <UiButton variant="outline">Open long content</UiButton>
        </UiDrawerTrigger>
        <UiDrawerContent>
          <UiDrawerHeader>
            <UiDrawerTitle>Long content</UiDrawerTitle>
            <UiDrawerDescription>
              Demonstrates scrolling content inside the drawer.
            </UiDrawerDescription>
          </UiDrawerHeader>
          <div class="px-4 pb-4 pt-0">
            <div class="h-80 overflow-auto rounded-md border p-3 body-14-regular gap-y-2">
              <p v-for="i in 30" :key="i">Row {{ i }}</p>
            </div>
          </div>
          <UiDrawerFooter>
            <UiDrawerClose as-child>
              <UiButton>Close</UiButton>
            </UiDrawerClose>
          </UiDrawerFooter>
        </UiDrawerContent>
      </UiDrawer>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: longContentTemplateSource } },
  },
};

const openByDefaultTemplateSource = `<script setup lang="ts">
import {
  UiDrawer,
  UiDrawerTrigger,
  UiDrawerContent,
  UiDrawerHeader,
  UiDrawerTitle,
  UiDrawerDescription,
  UiDrawerFooter,
  UiDrawerClose,
  UiButton,
} from '@aleph-alpha/ui-library'
import { ref } from 'vue'

const open = ref(true)
</script>

<template>
  <UiDrawer v-model:open="open">
    <UiDrawerTrigger as-child>
      <UiButton variant="outline">Toggle Drawer</UiButton>
    </UiDrawerTrigger>
    <UiDrawerContent>
      <UiDrawerHeader>
        <UiDrawerTitle>Open by default</UiDrawerTitle>
        <UiDrawerDescription>
          Useful for visual regression testing.
        </UiDrawerDescription>
      </UiDrawerHeader>
      <div class="p-4 pt-0 body-14-regular">
        This drawer starts open.
      </div>
      <UiDrawerFooter>
        <UiDrawerClose as-child>
          <UiButton>Close</UiButton>
        </UiDrawerClose>
      </UiDrawerFooter>
    </UiDrawerContent>
  </UiDrawer>
</template>`;

/**
 * Drawer that starts open.
 * Use this for visual regression testing to capture drawer content without user interaction.
 */
export const OpenByDefault: Story = {
  render: () => ({
    components: {
      UiDrawer,
      UiDrawerClose,
      UiDrawerContent,
      UiDrawerDescription,
      UiDrawerFooter,
      UiDrawerHeader,
      UiDrawerTitle,
      UiDrawerTrigger,
      UiButton,
    },
    setup() {
      const open = ref(true);
      return { open };
    },
    template: `
      <UiDrawer v-model:open="open">
        <UiDrawerTrigger as-child>
          <UiButton variant="outline">Toggle Drawer</UiButton>
        </UiDrawerTrigger>
        <UiDrawerContent>
          <UiDrawerHeader>
            <UiDrawerTitle>Open by default</UiDrawerTitle>
            <UiDrawerDescription>
              Useful for visual regression testing.
            </UiDrawerDescription>
          </UiDrawerHeader>
          <div class="p-4 pt-0 body-14-regular">
            This drawer starts open.
          </div>
          <UiDrawerFooter>
            <UiDrawerClose as-child>
              <UiButton>Close</UiButton>
            </UiDrawerClose>
          </UiDrawerFooter>
        </UiDrawerContent>
      </UiDrawer>
    `,
  }),
  parameters: {
    controls: { disable: true },
    docs: { source: { code: openByDefaultTemplateSource } },
  },
};
