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

/**
 * `UiFileType` renders the round 32×32 file-type badge from the AA26
 * design system. It auto-derives its color tone and Lucide icon from the
 * filename extension (or accepts explicit `tone` / `icon` props), and
 * forces a neutral `circle-alert` state when `error` is true. Used inside
 * `UiFileItem`, but also available standalone for any file/attachment UI.
 */
const meta: Meta<typeof UiFileType> = {
  title: 'Components/UiFileType',
  component: UiFileType,
  tags: ['autodocs'],
  args: {
    filename: 'document.pdf',
    tone: undefined,
    icon: undefined,
    error: false,
  },
  argTypes: {
    tone: {
      control: 'select',
      options: [
        undefined,
        'default',
        'accent-pink',
        'accent-soft',
        'accent-yellow',
      ],
      description:
        'Color tone override. Leave undefined to auto-derive from the filename extension (pdf/docx/txt → pink, html/md → soft, csv/xls/tsv → yellow).',
    },
    icon: {
      control: 'text',
      description:
        'Lucide icon name override. Leave empty to auto-derive from the filename. Ignored in the error state.',
    },
  },
  decorators: [
    () => ({
      template: '<div class="p-4"><story /></div>',
    }),
  ],
};

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

const renderArgs = (args: Story['args']) => ({
  components: { UiFileType },
  setup() {
    // Storybook's text controls emit `''` when cleared; the component
    // treats that as "unset", so normalize here so the playground matches
    // what consumers would actually pass.
    const normalized = {
      ...args,
      tone: args?.tone || undefined,
      icon: args?.icon || undefined,
    };
    return { args: normalized };
  },
  template: '<UiFileType v-bind="args" />',
});

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

<template>
  <UiFileType filename="document.pdf" />
</template>`;

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

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

<template>
  <UiFileType filename="data.csv" :error="true" />
</template>`;

/** Error state — neutral badge + `circle-alert`, regardless of file type. */
export const ErrorState: Story = {
  args: { filename: 'data.csv', error: true },
  render: renderArgs,
  parameters: {
    docs: { source: { code: errorTemplateSource } },
  },
};

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

<template>
  <div class="flex items-center gap-3">
    <UiFileType filename="report.pdf" />
    <UiFileType filename="README.md" />
    <UiFileType filename="data.csv" />
    <UiFileType filename="archive.zip" />
    <UiFileType filename="data.csv" :error="true" />
  </div>
</template>`;

/**
 * All Figma `Filetype` variants in one row plus the `default` fallback and
 * the error state for quick visual comparison.
 */
export const AllTypes: Story = {
  parameters: {
    controls: { disable: true },
    docs: { source: { code: allTypesTemplateSource } },
  },
  render: () => ({
    components: { UiFileType },
    template: `
      <div class="flex items-center gap-3">
        <UiFileType filename="report.pdf" />
        <UiFileType filename="README.md" />
        <UiFileType filename="data.csv" />
        <UiFileType filename="archive.zip" />
        <UiFileType filename="data.csv" :error="true" />
      </div>
    `,
  }),
};

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

<template>
  <div class="grid gap-3">
    <div class="flex items-center gap-3">
      <UiFileType tone="default" icon="file" />
      <span class="body-14-regular text-content-on-surface-secondary">default</span>
    </div>
    <div class="flex items-center gap-3">
      <UiFileType tone="accent-pink" icon="file" />
      <span class="body-14-regular text-content-on-surface-secondary">accent-pink</span>
    </div>
    <div class="flex items-center gap-3">
      <UiFileType tone="accent-soft" icon="code-xml" />
      <span class="body-14-regular text-content-on-surface-secondary">accent-soft</span>
    </div>
    <div class="flex items-center gap-3">
      <UiFileType tone="accent-yellow" icon="table-2" />
      <span class="body-14-regular text-content-on-surface-secondary">accent-yellow</span>
    </div>
  </div>
</template>`;

/**
 * Explicit tone overrides for checking the token-backed badge colors,
 * including the pink and yellow accent tokens.
 */
export const ToneOverrides: Story = {
  parameters: {
    controls: { disable: true },
    docs: { source: { code: toneOverridesTemplateSource } },
  },
  render: () => ({
    components: { UiFileType },
    template: `
      <div class="grid gap-3">
        <div class="flex items-center gap-3">
          <UiFileType tone="default" icon="file" />
          <span class="body-14-regular text-content-on-surface-secondary">default</span>
        </div>
        <div class="flex items-center gap-3">
          <UiFileType tone="accent-pink" icon="file" />
          <span class="body-14-regular text-content-on-surface-secondary">accent-pink</span>
        </div>
        <div class="flex items-center gap-3">
          <UiFileType tone="accent-soft" icon="code-xml" />
          <span class="body-14-regular text-content-on-surface-secondary">accent-soft</span>
        </div>
        <div class="flex items-center gap-3">
          <UiFileType tone="accent-yellow" icon="table-2" />
          <span class="body-14-regular text-content-on-surface-secondary">accent-yellow</span>
        </div>
      </div>
    `,
  }),
};
