import { describe, expect, it } from 'vitest';
import { extractBrandingForm } from '../brandingForm';

const defaults = {
  primary: '#111111',
  accent: '#222222',
  background: '#ffffff',
  surface: '#f0f0f0',
  mode: 'auto' as const,
  buttonStyle: 'filled' as const,
  buttonRadius: 12,
  buttonPrimary: '#111111',
  buttonSecondary: '#222222',
  linkColor: '#222222',
  fontSize: 'm' as const,
  logoMode: 'upload' as const,
  logoPosition: 'left' as const,
  logoSize: 'm' as const,
};

describe('extractBrandingForm', () => {
  it('prefers palette values when available', () => {
    const settings = {
      branding: {
        palette: {
          primary: '#aa0000',
          secondary: '#00aa00',
          background: '#000000',
          surface: '#111111',
        },
        primary_color: '#bbbbbb',
        secondary_color: '#cccccc',
        background_color: '#dddddd',
        surface_color: '#eeeeee',
        mode: 'dark',
      },
    };

    const result = extractBrandingForm(settings, defaults);

    expect(result.primary).toBe('#aa0000');
    expect(result.accent).toBe('#00aa00');
    expect(result.background).toBe('#000000');
    expect(result.surface).toBe('#111111');
    expect(result.mode).toBe('dark');
    expect(result.fontSize).toBe('m');
  });

  it('falls back to legacy keys and defaults', () => {
    const settings = {
      branding: {
        accent_color: '#123456',
        background_color: '#abcdef',
        mode: 'light',
      },
    };

    const result = extractBrandingForm(settings, defaults);

    expect(result.primary).toBe(defaults.primary);
    expect(result.accent).toBe('#123456');
    expect(result.background).toBe('#abcdef');
    expect(result.surface).toBe('#abcdef');
    expect(result.mode).toBe('light');
    expect(result.buttonStyle).toBe(defaults.buttonStyle);
    expect(result.buttonRadius).toBe(defaults.buttonRadius);
  });

  it('extracts buttons, logo, and typography settings', () => {
    const settings = {
      branding: {
        typography: {
          heading: 'Display Font',
          body: 'Body Font',
          size: 'l',
        },
        buttons: {
          style: 'outline',
          radius: 24,
          primary: '#333333',
          secondary: '#444444',
          link_color: '#555555',
        },
        logo: {
          mode: 'emoticon',
          value: '🎉',
          position: 'center',
          size: 'l',
        },
        use_default_branding: true,
      },
    };

    const result = extractBrandingForm(settings, defaults);

    expect(result.headingFont).toBe('Display Font');
    expect(result.bodyFont).toBe('Body Font');
    expect(result.fontSize).toBe('l');
    expect(result.buttonStyle).toBe('outline');
    expect(result.buttonRadius).toBe(24);
    expect(result.buttonPrimary).toBe('#333333');
    expect(result.buttonSecondary).toBe('#444444');
    expect(result.linkColor).toBe('#555555');
    expect(result.logoMode).toBe('emoticon');
    expect(result.logoValue).toBe('🎉');
    expect(result.logoPosition).toBe('center');
    expect(result.logoSize).toBe('l');
    expect(result.useDefaultBranding).toBe(true);
  });

  it('normalizes stored logo paths for previews', () => {
    const settings = {
      branding: {
        logo_url: 'branding/logos/event-123.png',
        logo_mode: 'upload',
      },
    };

    const result = extractBrandingForm(settings, defaults);

    expect(result.logoDataUrl).toBe('/storage/branding/logos/event-123.png');
  });
});
