import { screen } from '@testing-library/react';
import { renderWithProviders as render } from '../../../test/render';
import { describe, it, expect } from 'vitest';
import { AuthPageShell } from './AuthPageShell';
import React from 'react';

describe('AuthPageShell', () => {
  it('renders children inside the form panel', () => {
    render(
      <AuthPageShell leftPanel="isotype">
        <div data-testid="form-content">Login form</div>
      </AuthPageShell>
    );
    expect(screen.getByTestId('form-content')).toBeInTheDocument();
    expect(screen.getByText('Login form')).toBeInTheDocument();
  });

  it('renders the brand isotype mark and bg-card form panel when leftPanel is "isotype"', () => {
    const { container } = render(
      <AuthPageShell leftPanel="isotype">
        <div>content</div>
      </AuthPageShell>
    );
    // Isotipo renders a decorative svg-bearing div (aria-hidden, no accessible name)
    expect(container.querySelector('svg')).toBeInTheDocument();
    // No hero <img> should be rendered for the isotype variant
    expect(screen.queryByRole('img')).not.toBeInTheDocument();
  });

  it('renders the hero image with bg-muted form panel by default (image variant)', () => {
    render(
      <AuthPageShell imageSrc="/hero.jpg" imageAlt="Team collaborating">
        <div>content</div>
      </AuthPageShell>
    );
    const img = screen.getByAltText('Team collaborating');
    expect(img).toBeInTheDocument();
    expect(img).toHaveAttribute('src', '/hero.jpg');
  });

  it('applies the default gradient overlay class when gradientClassName is not provided', () => {
    const { container } = render(
      <AuthPageShell imageSrc="/hero.jpg" imageAlt="Hero">
        <div>content</div>
      </AuthPageShell>
    );
    const overlays = container.querySelectorAll('.bg-\\[image\\:var\\(--gradient-diagonal\\)\\]');
    // One overlay on the hero panel + one (hidden on lg) on the mobile form panel
    expect(overlays.length).toBeGreaterThanOrEqual(1);
  });

  it('applies a custom gradientClassName override instead of the default gradient', () => {
    const { container } = render(
      <AuthPageShell
        imageSrc="/hero.jpg"
        imageAlt="Hero"
        gradientClassName="bg-gradient-to-r from-red-500 to-blue-500"
      >
        <div>content</div>
      </AuthPageShell>
    );
    expect(container.querySelector('.from-red-500')).toBeInTheDocument();
    expect(
      container.querySelector('.bg-\\[image\\:var\\(--gradient-diagonal\\)\\]')
    ).not.toBeInTheDocument();
  });

  it('renders the language selector in the top-right corner', () => {
    render(
      <AuthPageShell leftPanel="isotype">
        <div>content</div>
      </AuthPageShell>
    );
    // Default language (pt-BR) rendered with the minimal short label
    expect(screen.getByText('PT')).toBeInTheDocument();
  });
});