/**
 * AdminDangerZonePanel Component Tests
 *
 * Tests for the AdminDangerZonePanel component that wraps the DangerZone UI component.
 * Tests cover rendering, props, and interaction behavior.
 */

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

// Mock the DangerZone UI component
vi.mock('@/ui/DangerZone', () => ({
  DangerZone: ({ title, description, children }: any) => (
    <div data-testid="danger-zone">
      <h2>{title}</h2>
      <p>{description}</p>
      {children}
    </div>
  ),
}));

describe('AdminDangerZonePanel', () => {
  it('should render with title and description', () => {
    render(
      <AdminDangerZonePanel
        title="Delete Account"
        description="This action cannot be undone"
      >
        <button>Delete</button>
      </AdminDangerZonePanel>
    );

    expect(screen.getByText('Delete Account')).toBeTruthy();
    expect(screen.getByText('This action cannot be undone')).toBeTruthy();
  });

  it('should render children content', () => {
    render(
      <AdminDangerZonePanel
        title="Danger Zone"
        description="Proceed with caution"
      >
        <button data-testid="danger-button">Delete</button>
      </AdminDangerZonePanel>
    );

    expect(screen.getByTestId('danger-button')).toBeTruthy();
    expect(screen.getByText('Delete')).toBeTruthy();
  });

  it('should render with minimal props', () => {
    render(
      <AdminDangerZonePanel title="Danger Zone" description="">
        <button>Proceed</button>
      </AdminDangerZonePanel>
    );

    expect(screen.getByText('Danger Zone')).toBeTruthy();
    expect(screen.getByText('Proceed')).toBeTruthy();
  });

  it('should render multiple children', () => {
    render(
      <AdminDangerZonePanel
        title="Multiple Actions"
        description="Select an action"
      >
        <button>Option 1</button>
        <button>Option 2</button>
        <button>Option 3</button>
      </AdminDangerZonePanel>
    );

    expect(screen.getByText('Option 1')).toBeTruthy();
    expect(screen.getByText('Option 2')).toBeTruthy();
    expect(screen.getByText('Option 3')).toBeTruthy();
  });

  it('should render with complex children components', () => {
    const ComplexChild = () => (
      <div>
        <span>Complex</span>
        <button>Click me</button>
      </div>
    );

    render(
      <AdminDangerZonePanel
        title="Complex Content"
        description="With nested elements"
      >
        <ComplexChild />
      </AdminDangerZonePanel>
    );

    expect(screen.getByText('Complex')).toBeTruthy();
    expect(screen.getByText('Click me')).toBeTruthy();
  });
});