import { render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

import ReportPreview from './ReportPreview';

vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  LineChart: () => <div data-testid="line-chart" />,
  Line: () => null,
  XAxis: () => null,
  YAxis: () => null,
  CartesianGrid: () => null,
  Tooltip: () => null,
  Legend: () => null,
}));

const baseReport = {
  id: 1,
  name: 'Test Report',
  sections: ['traffic_overview'],
  data: {
    site: { id: 1, name: 'Test Site', domain: 'example.com' },
    generated_at: '2026-01-15 10:00:00',
    filters: {},
    branding: null,
  },
};

describe('ReportPreview', () => {
  it('renders RankWiz branding footer when no branding data', () => {
    render(<ReportPreview report={baseReport} />);

    expect(screen.getByText('RankWiz AI')).toBeInTheDocument();
    expect(screen.getByText(/Report generated with/)).toBeInTheDocument();
  });

  it('renders site name in header when no branding', () => {
    render(<ReportPreview report={baseReport} />);

    expect(screen.getByText('Test Site')).toBeInTheDocument();
    expect(screen.getByText('example.com')).toBeInTheDocument();
  });

  it('renders branded company name in header when white-labeled', () => {
    const report = {
      ...baseReport,
      data: {
        ...baseReport.data,
        branding: {
          company_name: 'Acme SEO Agency',
          logo_url: null,
          primary_color: '#ff6b35',
          secondary_color: '#004e89',
          remove_rankwiz_branding: true,
        },
      },
    };

    render(<ReportPreview report={report} />);

    // Company name appears in header and footer
    const acmeElements = screen.getAllByText('Acme SEO Agency');
    expect(acmeElements.length).toBe(2);
    expect(screen.queryByText('Test Site')).not.toBeInTheDocument();
  });

  it('renders branded logo in header when logo_url provided', () => {
    const report = {
      ...baseReport,
      data: {
        ...baseReport.data,
        branding: {
          company_name: 'Acme SEO Agency',
          logo_url: 'https://example.com/logo.png',
          primary_color: '#ff6b35',
          secondary_color: '#004e89',
          remove_rankwiz_branding: true,
        },
      },
    };

    render(<ReportPreview report={report} />);

    const logo = screen.getByAltText('Acme SEO Agency');
    expect(logo).toBeInTheDocument();
    expect(logo).toHaveAttribute('src', 'https://example.com/logo.png');
  });

  it('renders branded footer when white-labeled', () => {
    const report = {
      ...baseReport,
      data: {
        ...baseReport.data,
        branding: {
          company_name: 'Acme SEO Agency',
          logo_url: null,
          primary_color: '#ff6b35',
          secondary_color: '#004e89',
          remove_rankwiz_branding: true,
        },
      },
    };

    render(<ReportPreview report={report} />);

    expect(screen.getByText(/Report generated by/)).toBeInTheDocument();
    expect(screen.queryByText('RankWiz AI')).not.toBeInTheDocument();
  });

  it('renders default RankWiz branding when remove_rankwiz_branding is false', () => {
    const report = {
      ...baseReport,
      data: {
        ...baseReport.data,
        branding: {
          company_name: 'Some Company',
          logo_url: null,
          primary_color: '#3b82f6',
          secondary_color: '#1e40af',
          remove_rankwiz_branding: false,
        },
      },
    };

    render(<ReportPreview report={report} />);

    expect(screen.getByText('RankWiz AI')).toBeInTheDocument();
    expect(screen.getByText('Test Site')).toBeInTheDocument();
  });

  it('returns null when report has no data', () => {
    const report = { ...baseReport, data: null };
    const { container } = render(<ReportPreview report={report} />);

    expect(container.firstChild).toBeNull();
  });
});