import type { Meta, StoryObj } from '@storybook/vue3-vite';
import UiFileItem from './UiFileItem.vue';

/**
 * `UiFileItem` is a single-row primitive that represents a file with
 * optional progress, error, and a remove control. Use it inside file-upload
 * flows or attachment lists; for the full uploader, see `UiFileUpload` pattern.
 */
const meta: Meta<typeof UiFileItem> = {
  title: 'Components/UiFileItem',
  component: UiFileItem,
  tags: ['autodocs'],
  args: {
    filename: 'document.pdf',
    typeLabel: 'PDF',
    sizeLabel: '1.2 MB',
    progress: null,
    error: '',
    disabled: false,
    removable: true,
    removeLabel: 'Remove file',
    progressLabel: undefined,
    size: 'default',
    mediaTone: undefined,
    mediaIcon: undefined,
  },
  argTypes: {
    progress: { control: { type: 'number', min: 0, max: 100 } },
    error: {
      control: 'text',
      description:
        'Error text. When non-empty the row enters the error state and replaces the type/size meta.',
    },
    removable: {
      control: 'boolean',
      description:
        'When false, the close icon is not rendered. Use for read-only previews.',
    },
    size: {
      control: 'select',
      options: ['default', 'small'],
      description:
        '`default` (12px padding, 14px title) for stand-alone uploader rows; `small` (8px padding, 12px title) for compact attachments next to a chat message.',
    },
    mediaTone: {
      control: 'select',
      options: [
        undefined,
        'default',
        'accent-pink',
        'accent-soft',
        'accent-yellow',
      ],
      description:
        'Color tone of the round media badge. Leave undefined to auto-derive from the filename extension (pdf/docx/txt → pink, html/md → soft, csv/xls/tsv → yellow); pass an explicit value to force a tone.',
    },
    mediaIcon: {
      control: 'text',
      description:
        'Lucide icon name rendered inside the media badge. Leave empty to auto-derive from the filename extension. Ignored in the error state.',
    },
  },
  decorators: [
    () => ({
      template: '<div class="max-w-md p-4"><story /></div>',
    }),
  ],
};

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

const renderArgs = (args: Story['args']) => ({
  components: { UiFileItem },
  setup() {
    const onRemove = () => undefined;
    const normalized = {
      ...args,
      mediaIcon: args?.mediaIcon || undefined,
      mediaTone: args?.mediaTone || undefined,
    };
    return { args: normalized, onRemove };
  },
  template: '<UiFileItem v-bind="args" @remove="onRemove" />',
});

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

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    filename="document.pdf"
    type-label="PDF"
    size-label="1.2 MB"
    @remove="onRemove"
  />
</template>`;

/** Interactive playground; toggle controls to switch between states and sizes. */
export const Default: Story = {
  render: renderArgs,
  parameters: {
    docs: { source: { code: defaultTemplateSource } },
  },
};

const defaultWithProgressTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    filename="Filename.pdf"
    :progress="30"
    @remove="onRemove"
  />
</template>`;

/** Upload in progress (0–100). */
export const DefaultWithProgress: Story = {
  args: {
    filename: 'Filename.pdf',
    typeLabel: undefined,
    sizeLabel: undefined,
    progress: 30,
    error: '',
    size: 'default',
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: defaultWithProgressTemplateSource } },
  },
};

const defaultSuccessTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    filename="Filename.pdf"
    type-label="PDF"
    size-label="12 MB"
    @remove="onRemove"
  />
</template>`;

/**
 * Default size · success. The pink media + `PDF | 12 MB` meta line are
 * driven entirely by the `.pdf` extension auto-detection.
 */
export const DefaultSuccess: Story = {
  args: {
    filename: 'Filename.pdf',
    typeLabel: 'PDF',
    sizeLabel: '12 MB',
    progress: null,
    error: '',
    size: 'default',
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: defaultSuccessTemplateSource } },
  },
};

const defaultErrorTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    filename="Filename.pdf"
    error="Upload failed"
    @remove="onRemove"
  />
</template>`;

/** Default size · error. CircleAlert media + destructive subtitle text. */
export const DefaultError: Story = {
  args: {
    filename: 'Filename.pdf',
    typeLabel: undefined,
    sizeLabel: undefined,
    progress: null,
    error: 'Upload failed',
    size: 'default',
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: defaultErrorTemplateSource } },
  },
};

const smallWithProgressTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    size="small"
    filename="Filename.pdf"
    :progress="30"
    @remove="onRemove"
  />
</template>`;

/** Small size · progress at 30%. */
export const SmallWithProgress: Story = {
  args: {
    filename: 'Filename.pdf',
    typeLabel: undefined,
    sizeLabel: undefined,
    progress: 30,
    error: '',
    size: 'small',
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: smallWithProgressTemplateSource } },
  },
};

const smallSuccessTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    size="small"
    filename="quarterly-report.csv"
    type-label="CSV"
    size-label="320 KB"
    @remove="onRemove"
  />
</template>`;

/**
 * Small size · success. Yellow media + `table-2` icon are derived from the
 * `.csv` filename
 */
export const SmallSuccess: Story = {
  args: {
    filename: 'quarterly-report.csv',
    typeLabel: 'CSV',
    sizeLabel: '320 KB',
    progress: null,
    error: '',
    size: 'small',
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: smallSuccessTemplateSource } },
  },
};

const smallErrorTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    size="small"
    filename="Filename.pdf"
    error="Upload failed"
    @remove="onRemove"
  />
</template>`;

/** Small size · error. CircleAlert media + destructive subtitle. */
export const SmallError: Story = {
  args: {
    filename: 'Filename.pdf',
    typeLabel: undefined,
    sizeLabel: undefined,
    progress: null,
    error: 'Upload failed',
    size: 'small',
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: smallErrorTemplateSource } },
  },
};

const nonRemovableTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'
</script>

<template>
  <UiFileItem
    filename="release-notes.md"
    type-label="MD"
    size-label="14 KB"
    :removable="false"
  />
</template>`;

/** Read-only preview: no close icon. */
export const NonRemovable: Story = {
  args: {
    filename: 'release-notes.md',
    typeLabel: 'MD',
    sizeLabel: '14 KB',
    progress: null,
    error: '',
    disabled: false,
    removable: false,
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: nonRemovableTemplateSource } },
  },
};

const disabledTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <UiFileItem
    filename="locked.pdf"
    type-label="PDF"
    size-label="2 MB"
    disabled
    @remove="onRemove"
  />
</template>`;

/** Disabled row: inert + 50% opacity, remove control disabled. */
export const Disabled: Story = {
  args: {
    filename: 'locked.pdf',
    typeLabel: 'PDF',
    sizeLabel: '2 MB',
    progress: null,
    error: '',
    disabled: true,
  },
  render: renderArgs,
  parameters: {
    docs: { source: { code: disabledTemplateSource } },
  },
};

const allVariantsTemplateSource = `<script setup lang="ts">
import { UiFileItem } from '@aleph-alpha/ui-library'

const onRemove = () => undefined;
</script>

<template>
  <div class="flex flex-wrap gap-8">
    <div class="flex max-w-md flex-1 flex-col gap-3">
      <p class="label-12-medium text-content-on-surface-muted">Default size</p>
      <UiFileItem filename="Filename.pdf" :progress="30" @remove="onRemove" />
      <UiFileItem
        filename="Filename.pdf"
        type-label="PDF"
        size-label="12 MB"
        @remove="onRemove"
      />
      <UiFileItem filename="Filename.pdf" error="Upload failed" @remove="onRemove" />
    </div>
    <div class="flex max-w-64 flex-1 flex-col gap-3">
      <p class="label-12-medium text-content-on-surface-muted">Small size</p>
      <UiFileItem size="small" filename="Filename.pdf" :progress="30" @remove="onRemove" />
      <UiFileItem
        size="small"
        filename="Filename.pdf"
        type-label="PDF"
        size-label="12 MB"
        @remove="onRemove"
      />
      <UiFileItem size="small" filename="Filename.pdf" error="Upload failed" @remove="onRemove" />
    </div>
  </div>
</template>`;

/** All variants in one column for quick visual comparison. */
export const AllVariants: Story = {
  parameters: {
    controls: { disable: true },
    docs: { source: { code: allVariantsTemplateSource } },
  },
  decorators: [
    () => ({
      template: '<div class="p-6"><story /></div>',
    }),
  ],
  render: () => ({
    components: { UiFileItem },
    setup() {
      const onRemove = () => undefined;
      return { onRemove };
    },
    template: `
      <div class="flex flex-wrap gap-8">
        <div class="flex max-w-md flex-1 flex-col gap-3">
          <p class="label-12-medium text-content-on-surface-muted">Default size</p>
          <UiFileItem filename="Filename.pdf" :progress="30" @remove="onRemove" />
          <UiFileItem
            filename="Filename.pdf"
            type-label="PDF"
            size-label="12 MB"
            @remove="onRemove"
          />
          <UiFileItem filename="Filename.pdf" error="Upload failed" @remove="onRemove" />
        </div>
        <div class="flex max-w-64 flex-1 flex-col gap-3">
          <p class="label-12-medium text-content-on-surface-muted">Small size</p>
          <UiFileItem size="small" filename="Filename.pdf" :progress="30" @remove="onRemove" />
          <UiFileItem
            size="small"
            filename="Filename.pdf"
            type-label="PDF"
            size-label="12 MB"
            @remove="onRemove"
          />
          <UiFileItem size="small" filename="Filename.pdf" error="Upload failed" @remove="onRemove" />
        </div>
      </div>
    `,
  }),
};
