import { render } from '@testing-library/vue';
import { describe, expect, test } from 'vitest';
import UiFileType from '../UiFileType.vue';

describe('UiFileType', () => {
  describe('file-extension auto-detection', () => {
    // Assert via the stable `data-tone` attribute on the badge rather than
    // the underlying utility class, so refactors to the styling don't
    // silently change which tone the component picks for a given file type.
    test.each([
      { filename: 'report.pdf', tone: 'accent-pink', icon: 'lucide-file' },
      { filename: 'README.md', tone: 'accent-soft', icon: 'lucide-code-xml' },
      { filename: 'data.csv', tone: 'accent-yellow', icon: 'lucide-table-2' },
      { filename: 'archive.zip', tone: 'default', icon: 'lucide-file' },
      { filename: undefined, tone: 'default', icon: 'lucide-file' },
    ])('$filename → $tone + $icon', ({ filename, tone, icon }) => {
      const { container } = render(UiFileType, { props: { filename } });
      const badge = container.querySelector('[data-slot="file-type"]');
      expect(badge?.getAttribute('data-tone')).toBe(tone);
      expect(badge?.querySelector(`svg.${icon}`)).not.toBeNull();
    });
  });

  test('error forces the neutral badge + circle-alert icon regardless of file type', () => {
    const { container } = render(UiFileType, {
      props: { filename: 'data.csv', error: true },
    });
    const badge = container.querySelector('[data-slot="file-type"]');
    expect(badge?.getAttribute('data-tone')).toBe('default');
    expect(badge?.querySelector('svg.lucide-circle-alert')).not.toBeNull();
  });

  test('loading forces the neutral badge but keeps the filename icon', () => {
    const { container } = render(UiFileType, {
      props: { filename: 'data.csv', loading: true },
    });
    const badge = container.querySelector('[data-slot="file-type"]');
    expect(badge?.getAttribute('data-tone')).toBe('default');
    expect(badge?.querySelector('svg.lucide-table-2')).not.toBeNull();
  });

  test('explicit tone and icon props override the auto-derived values', () => {
    const { container } = render(UiFileType, {
      props: { filename: 'archive.zip', tone: 'accent-pink', icon: 'star' },
    });
    const badge = container.querySelector('[data-slot="file-type"]');
    expect(badge?.getAttribute('data-tone')).toBe('accent-pink');
    expect(badge?.querySelector('svg.lucide-star')).not.toBeNull();
  });
});
