import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { ref } from 'vue';
import { UiFileUploadBox } from '@/components/UiFileUploadBox';

/**
 * UiFileUploadBox is an inline drop zone primitive for selecting and uploading files via click or drag-and-drop.
 * Use it directly when you need a compact uploader; for a full dialog flow with file list and progress, use the `UiFileUpload` pattern.
 */
const meta: Meta<typeof UiFileUploadBox> = {
  title: 'Components/UiFileUploadBox',
  component: UiFileUploadBox,
  tags: ['autodocs'],
  decorators: [
    () => ({
      template: '<div class="w-full max-w-lg p-4"><story /></div>',
    }),
  ],
  args: {
    accept: '.pdf,.docx,.txt,application/pdf',
    multiple: true,
    maxFileSizeBytes: 500 * 1024 * 1024,
    disabled: false,
    supportedTypesLabel: 'Supported file types: PDF, DOCX, TXT',
    maxSizeLabel: '',
    dropLabel: 'Drop files here',
    chooseLabel: 'Choose files',
    ariaLabel: 'File upload',
  },
  argTypes: {
    accept: { control: 'text' },
    multiple: { control: 'boolean' },
    maxFileSizeBytes: {
      control: 'number',
      description:
        'Max file size in bytes (validation). When **maxSizeLabel** is blank, the footer shows `Max size: …` from this value.',
    },
    disabled: { control: 'boolean' },
    supportedTypesLabel: {
      control: 'text',
      description:
        'Footer left: supported-types hint. Clear to hide. Edit in Controls.',
    },
    maxSizeLabel: {
      control: 'text',
      description:
        'Footer right: max-size line. Leave blank for auto `Max size: …` from **maxFileSizeBytes**; type any text to override.',
    },
    dropLabel: { control: 'text' },
    chooseLabel: { control: 'text' },
    ariaLabel: { control: 'text' },
  },
};

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

const defaultTemplateSource = `<script setup lang="ts">
import { ref } from 'vue'
import { UiFileUploadBox } from '@aleph-alpha/ui-library'

const names = ref<string[]>([])
const lastError = ref('')

function onFiles(files: File[]) {
  lastError.value = ''
  names.value = files.map((f) => f.name)
}

function onError(e: { message: string }) {
  lastError.value = e.message
}
</script>

<template>
  <div class="max-w-md gap-y-2">
    <UiFileUploadBox
      accept=".pdf,.docx,.txt,application/pdf"
      :multiple="true"
      :max-file-size-bytes="524288000"
      supported-types-label="Supported file types: PDF, DOCX, TXT"
      max-size-label="Max attachment size: 500 MB per file"
      @update:files="onFiles"
      @error="onError"
    />
    <p v-if="lastError" class="body-14-regular text-destructive">{{ lastError }}</p>
    <p v-if="names.length" class="body-14-regular text-muted-foreground">Selected: {{ names.join(', ') }}</p>
  </div>
</template>`;

/**
 * Inline drop zone; use **Controls** to adjust props. Footer lines: **supportedTypesLabel** (left), **maxSizeLabel** (right; blank = auto from **maxFileSizeBytes**).
 * Handle `update:files` and `error` in your app. For dialog + file list, see **Patterns / UiFileUpload**.
 */
export const Default: Story = {
  render: (args) => ({
    components: { UiFileUploadBox },
    setup() {
      const names = ref<string[]>([]);
      const lastError = ref('');
      function onFiles(files: File[]) {
        lastError.value = '';
        names.value = files.map((x) => x.name);
      }
      function onError(e: { message: string }) {
        lastError.value = e.message;
      }
      return { args, names, lastError, onFiles, onError };
    },
    template: `
      <div class="max-w-md gap-y-2">
        <UiFileUploadBox v-bind="args" @update:files="onFiles" @error="onError" />
        <p v-if="lastError" class="body-14-regular text-destructive">{{ lastError }}</p>
        <p v-if="names.length" class="body-14-regular text-muted-foreground">Selected: {{ names.join(', ') }}</p>
      </div>
    `,
  }),
  parameters: {
    docs: {
      source: { code: defaultTemplateSource },
    },
  },
};
