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

import TopicClusterShow from './Show';

vi.mock('@inertiajs/react', async () => {
  const actual = await vi.importActual('@inertiajs/react');
  return {
    ...actual,
    Head: ({ title }: { title: string }) => <title>{title}</title>,
    Link: ({ children, href }: { children: React.ReactNode; href: string }) => (
      <a href={href}>{children}</a>
    ),
    useForm: () => ({
      data: {},
      setData: vi.fn(),
      post: vi.fn(),
      processing: false,
      reset: vi.fn(),
      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/ui/badge', () => ({
  Badge: ({ children, variant }: { children: React.ReactNode; variant?: string }) => (
    <span data-testid="badge" data-variant={variant}>{children}</span>
  ),
}));

vi.mock('@/Components/ui/button', () => ({
  Button: ({
    children,
    onClick,
    asChild,
  }: {
    children: React.ReactNode;
    onClick?: () => void;
    asChild?: boolean;
  }) => (asChild ? <>{children}</> : <button onClick={onClick}>{children}</button>),
}));

vi.mock('@/Components/ui/dialog', () => ({
  Dialog: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DialogContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DialogDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DialogFooter: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DialogHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  DialogTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/Components/ui/empty-state', () => ({
  EmptyState: ({ title }: { title: string }) => <div data-testid="empty-state">{title}</div>,
}));

vi.mock('@/Components/ui/input', () => ({
  Input: (props: React.InputHTMLAttributes<HTMLInputElement>) => <input {...props} />,
}));

vi.mock('@/Components/ui/label', () => ({
  Label: ({ children }: { children: React.ReactNode }) => <label>{children}</label>,
}));

vi.mock('@/Components/ui/loading-button', () => ({
  LoadingButton: ({ children }: { children: React.ReactNode }) => (
    <button>{children}</button>
  ),
}));

vi.mock('@/Components/ui/textarea', () => ({
  Textarea: (props: React.TextareaHTMLAttributes<HTMLTextAreaElement>) => <textarea {...props} />,
}));

const mockCluster = {
  id: 1,
  name: 'SEO Content Strategy',
  total_demand: 8000,
  coverage_percentage: 55,
  hub_page_url: '/seo-content',
  metadata: null,
};

const mockProps = {
  site: { id: 1, name: 'Test Site', domain: 'https://test.com' },
  cluster: mockCluster,
  members: [
    {
      id: 1,
      member_type: 'page',
      member_value: '/seo-guide',
      clicks: 500,
      impressions: 5000,
      position: 4.2,
      is_hub: true,
    },
    {
      id: 2,
      member_type: 'query',
      member_value: 'seo content strategy',
      clicks: 200,
      impressions: 2000,
      position: 6.1,
      is_hub: false,
    },
  ],
  entities: [
    {
      id: 1,
      entity_text: 'Google Search Console',
      entity_type: 'tool',
      demand_volume: 1200,
      coverage_strength: 0.8,
      source: 'gsc',
    },
  ],
  gapSuggestions: [],
};

describe('TopicClusters/Show', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.stubGlobal('route', vi.fn((...args: string[]) => `/mock-route/${args[0]}`));
  });

  it('renders page title with site and cluster name', () => {
    render(<TopicClusterShow {...mockProps} />);
    expect(document.querySelector('title')).toHaveTextContent(
      'Test Site - SEO Content Strategy',
    );
  });

  it('renders cluster name as heading', () => {
    render(<TopicClusterShow {...mockProps} />);
    expect(screen.getByRole('heading', { name: 'SEO Content Strategy' })).toBeInTheDocument();
  });

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

  it('renders entity text', () => {
    render(<TopicClusterShow {...mockProps} />);
    expect(screen.getByText('Google Search Console')).toBeInTheDocument();
  });

  it('assigns DashboardLayout as layout', () => {
    expect(TopicClusterShow.layout).toBeDefined();
  });
});