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

// Mock dependencies BEFORE importing columns to avoid server-side imports
vi.mock('next/navigation', () => ({
  useRouter: () => ({
    refresh: vi.fn(),
    push: vi.fn(),
  }),
}));

vi.mock('next/link', () => ({
  default: ({ children, href }: { children: React.ReactNode; href: string }) => (
    <a href={href}>{children}</a>
  ),
}));

vi.mock('sonner', () => ({
  toast: {
    success: vi.fn(),
    error: vi.fn(),
  },
}));

vi.mock('@/actions/user', () => ({
  deleteUser: vi.fn(),
}));

// Mock CopyButton to verify it's rendered
vi.mock('@/components/ui/CopyButton', () => ({
  CopyButton: ({ value }: { value: string }) => (
    <button data-testid="copy-button" data-value={value}>Copy</button>
  ),
}));

// Mock useAction hook
vi.mock('@/hooks/useAction', () => ({
  useAction: vi.fn(() => ({
    execute: vi.fn(),
    isLoading: false,
  })),
}));

import { columns } from '@/app/(private)/dashboard/users/overview/columns';
import { DataTable } from '@/components/ui/data-table';

describe('Users Table Columns Rendering', () => {
  const mockData = [
    {
      id: 'user-123',
      firstName: 'John',
      lastName: 'Doe',
      email: 'john@example.com',
      role: 'admin',
    },
  ];

  it('renders CopyButton in the ID column', () => {
    render(<DataTable columns={columns as any} data={mockData} />);

    // Check if ID is rendered
    expect(screen.getByText('#user-123')).toBeInTheDocument();

    // Check if CopyButton is rendered with correct value
    const copyButtons = screen.getAllByTestId('copy-button');
    const idCopyButton = copyButtons.find(btn => btn.getAttribute('data-value') === 'user-123');
    expect(idCopyButton).toBeDefined();
  });

  it('renders CopyButton in the Email column', () => {
    render(<DataTable columns={columns as any} data={mockData} />);

    // Check if Email is rendered
    expect(screen.getByText('john@example.com')).toBeInTheDocument();

    // Check if CopyButton is rendered with correct value
    const copyButtons = screen.getAllByTestId('copy-button');
    const emailCopyButton = copyButtons.find(btn => btn.getAttribute('data-value') === 'john@example.com');
    expect(emailCopyButton).toBeDefined();
  });

  it('renders the actions menu button', () => {
    render(<DataTable columns={columns as any} data={mockData} />);

    // The "Menü öffnen" is the sr-only text in the actions button
    expect(screen.getByText('Menü öffnen')).toBeInTheDocument();
  });
});