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

import Builder from './Builder';

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    useForm: vi.fn(() => ({
      data: {
        name: '',
        template_id: null,
        sections: [],
        filters: {
          date_start: '',
          date_end: '',
          comparison_start: '',
          comparison_end: '',
          device: '',
          country: '',
        },
      },
      setData: vi.fn(),
      post: vi.fn(),
      processing: false,
      errors: {},
    })),
  };
});

vi.mock('@/Layouts/DashboardLayout', () => ({
  default: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="dashboard-layout">{children}</div>
  ),
}));

vi.mock('@/Components/Navigation/SiteNav', () => ({
  default: () => <div data-testid="site-nav" />,
}));

vi.mock('@/Components/Reports/TemplateCard', () => ({
  default: ({
    template,
    isSelected,
    onSelect,
  }: {
    template: { id: number; name: string };
    isSelected: boolean;
    onSelect: () => void;
  }) => (
    <div data-testid="template-card" data-selected={isSelected} onClick={onSelect}>
      {template.name}
    </div>
  ),
}));

vi.mock('@/Components/Reports/ReportSectionSelector', () => ({
  default: ({
    onChange,
  }: {
    selectedSections: string[];
    onChange: (s: string[]) => void;
    error?: string;
  }) => (
    <div data-testid="section-selector">
      <button onClick={() => onChange(['traffic_overview'])}>Select Section</button>
    </div>
  ),
}));

vi.mock('@/Components/Reports/ReportFilters', () => ({
  default: () => <div data-testid="report-filters" />,
}));

vi.mock('@/Components/ui/loading-button', () => ({
  LoadingButton: ({
    children,
    loading,
    disabled,
    type,
  }: {
    children: React.ReactNode;
    loading: boolean;
    disabled: boolean;
    type: string;
  }) => (
    <button type={type as 'submit'} disabled={disabled || loading} data-testid="submit-btn">
      {loading ? 'Loading...' : children}
    </button>
  ),
}));

const site = { id: 1, name: 'Test Site', domain: 'https://test.com' };

const templates: Array<{
  id: number;
  name: string;
  description: string;
  sections: Record<string, boolean>;
  filters: Record<string, string>;
  is_system: boolean;
}> = [
  {
    id: 1,
    name: 'Monthly Traffic Summary',
    description: 'Overview of monthly traffic',
    sections: { traffic_overview: true, recommendations: true } as Record<string, boolean>,
    filters: { date_start: '2026-01-01', date_end: '2026-01-31' },
    is_system: true,
  },
  {
    id: 2,
    name: 'Content Audit',
    description: 'Comprehensive content audit',
    sections: { content_quality: true } as Record<string, boolean>,
    filters: {},
    is_system: true,
  },
];

describe('Reports/Builder', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.stubGlobal(
      'route',
      vi.fn((name: string) => `/mock-route/${name}`),
    );
  });

  // ============================================
  // Rendering
  // ============================================

  describe('rendering', () => {
    it('renders without crashing', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByTestId('dashboard-layout')).toBeInTheDocument();
    });

    it('renders page heading', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByRole('heading', { name: 'Create Report' })).toBeInTheDocument();
    });

    it('renders page description', () => {
      render(<Builder site={site} templates={templates} />);
      expect(
        screen.getByText('Build a custom report or start with a template'),
      ).toBeInTheDocument();
    });

    it('renders site nav', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByTestId('site-nav')).toBeInTheDocument();
    });

    it('renders Report Configuration card', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByText('Report Configuration')).toBeInTheDocument();
    });
  });

  // ============================================
  // Template selection
  // ============================================

  describe('template list', () => {
    it('renders all templates', () => {
      render(<Builder site={site} templates={templates} />);
      const cards = screen.getAllByTestId('template-card');
      expect(cards).toHaveLength(2);
    });

    it('shows template names', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByText('Monthly Traffic Summary')).toBeInTheDocument();
      expect(screen.getByText('Content Audit')).toBeInTheDocument();
    });

    it('renders empty template list gracefully', () => {
      render(<Builder site={site} templates={[]} />);
      expect(screen.queryByTestId('template-card')).not.toBeInTheDocument();
    });
  });

  // ============================================
  // Form fields
  // ============================================

  describe('form fields', () => {
    it('renders report name input', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByLabelText(/Report Name/)).toBeInTheDocument();
    });

    it('renders section selector', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByTestId('section-selector')).toBeInTheDocument();
    });

    it('renders report filters', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByTestId('report-filters')).toBeInTheDocument();
    });

    it('renders submit button', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByTestId('submit-btn')).toBeInTheDocument();
    });

    it('disables Generate Report button when no sections selected', () => {
      render(<Builder site={site} templates={templates} />);
      const btn = screen.getByTestId('submit-btn');
      expect(btn).toBeDisabled();
    });

    it('shows hint text when no sections selected', () => {
      render(<Builder site={site} templates={templates} />);
      expect(screen.getByText('Select at least one section to continue')).toBeInTheDocument();
    });
  });

  // ============================================
  // Page title
  // ============================================

  describe('page title', () => {
    it('sets page title with site name', () => {
      render(<Builder site={site} templates={templates} />);
      expect(document.querySelector('title')).toHaveTextContent('Create Report - Test Site');
    });
  });
});