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

import ContentBriefShow 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>
    ),
    router: { post: vi.fn(), delete: vi.fn() },
  };
});

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,
    disabled,
  }: {
    children: React.ReactNode;
    onClick?: () => void;
    disabled?: boolean;
  }) => (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  ),
}));

vi.mock('@/Components/ui/card', () => ({
  Card: ({ children }: { children: React.ReactNode }) => <div data-testid="card">{children}</div>,
  CardContent: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardHeader: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  CardTitle: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

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/alert', () => ({
  Alert: ({ children }: { children: React.ReactNode }) => <div role="alert">{children}</div>,
  AlertDescription: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

vi.mock('@/Components/ui/radio-group', () => ({
  RadioGroup: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
  RadioGroupItem: () => <input type="radio" />,
}));

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

vi.mock('@/Components/ui/breadcrumb', () => ({
  Breadcrumb: ({ children }: { children: React.ReactNode }) => <nav>{children}</nav>,
  BreadcrumbItem: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
  BreadcrumbLink: ({ children, href }: { children: React.ReactNode; href?: string }) => (
    <a href={href}>{children}</a>
  ),
  BreadcrumbList: ({ children }: { children: React.ReactNode }) => <ol>{children}</ol>,
  BreadcrumbPage: ({ children }: { children: React.ReactNode }) => <span>{children}</span>,
  BreadcrumbSeparator: () => <span>/</span>,
}));

vi.mock('@/lib/analytics', () => ({
  trackProductEvent: vi.fn(),
}));

vi.mock('@/lib/format', () => ({
  formatNumber: (n: number) => String(n),
  formatDateTime: (d: string) => d,
}));

const mockBrief = {
  id: 1,
  target_keyword: 'best seo tools',
  h1_recommendation: 'Best SEO Tools for 2026',
  h2_structure: ['Introduction', 'Top Features'],
  key_entities: ['Semrush', 'Ahrefs'],
  target_word_count_min: 1500,
  target_word_count_max: 2500,
  internal_links: null,
  audience_context: 'Marketing professionals',
  competitive_notes: 'Competitors cover feature comparisons',
  custom_instructions: null,
  brief_content: 'Generated brief content here',
  status: 'completed',
  generation_error: null,
  prompt_tokens: 500,
  completion_tokens: 1200,
  model_used: 'gpt-4o-mini',
  generated_at: '2026-01-15T10:00:00Z',
  edited_at: null,
  created_at: '2026-01-15T09:00:00Z',
};

const mockProps = {
  site: { id: 1, name: 'Test Site', domain: 'https://test.com' },
  brief: mockBrief,
  source: { type: 'KeywordOpportunity', id: 1, name: 'best seo tools' },
  aiJob: null,
};

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

  it('renders the target keyword as heading', () => {
    render(<ContentBriefShow {...mockProps} />);
    expect(screen.getByRole('heading', { name: /best seo tools/i })).toBeInTheDocument();
  });

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

  it('displays the completed status badge', () => {
    render(<ContentBriefShow {...mockProps} />);
    const badges = screen.getAllByTestId('badge');
    const completedBadge = badges.find((b) => b.textContent === 'Completed');
    expect(completedBadge).toBeInTheDocument();
  });

  it('displays H1 recommendation', () => {
    render(<ContentBriefShow {...mockProps} />);
    expect(screen.getByText('Best SEO Tools for 2026')).toBeInTheDocument();
  });

  it('displays key entities', () => {
    render(<ContentBriefShow {...mockProps} />);
    expect(screen.getByText('Semrush')).toBeInTheDocument();
    expect(screen.getByText('Ahrefs')).toBeInTheDocument();
  });

  it('shows export button', () => {
    render(<ContentBriefShow {...mockProps} />);
    const exportButtons = screen.getAllByRole('button', { name: /export/i });
    expect(exportButtons.length).toBeGreaterThanOrEqual(1);
  });

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

  it('shows generating state badge for generating status', () => {
    render(<ContentBriefShow {...mockProps} brief={{ ...mockBrief, status: 'generating' }} />);
    const badges = screen.getAllByTestId('badge');
    const generatingBadge = badges.find((b) => b.textContent === 'Generating');
    expect(generatingBadge).toBeInTheDocument();
  });
});