/* eslint-disable import-x/order */
/**
 * Kiểm thử layout dashboard: header role=banner, status bar role=status,
 * ticker hiển thị, sidebar và main content.
 */
import { render, screen } from '@testing-library/react';
import * as React from 'react';
import { describe, expect, it } from 'vitest';

import { DashboardLayout } from '@/components/design-system/dashboard-layout';

describe('DashboardLayout', () => {
  it('renders header với role=banner', () => {
    render(
      <DashboardLayout
        header={<header role="banner">Header</header>}
        statusBar={<span>Online</span>}
      >
        <div>Content</div>
      </DashboardLayout>,
    );
    expect(screen.getByRole('banner')).toBeInTheDocument();
  });

  it('renders status bar với role=status', () => {
    render(
      <DashboardLayout
        header={<header role="banner">Header</header>}
        statusBar={<span>Đã kết nối</span>}
      >
        <div>Content</div>
      </DashboardLayout>,
    );
    expect(screen.getByRole('status')).toBeInTheDocument();
    expect(screen.getByRole('status')).toHaveTextContent('Đã kết nối');
  });

  it('renders ticker strip khi được truyền prop ticker', () => {
    render(
      <DashboardLayout
        ticker={<div data-testid="ticker">Ticker</div>}
        header={<header role="banner">Header</header>}
      >
        <div>Content</div>
      </DashboardLayout>,
    );
    expect(screen.getByTestId('ticker')).toBeInTheDocument();
  });

  it('không render ticker khi không truyền prop', () => {
    render(
      <DashboardLayout header={<header role="banner">Header</header>}>
        <div>Content</div>
      </DashboardLayout>,
    );
    // Không có vùng ticker
    expect(screen.queryByTestId('ticker')).not.toBeInTheDocument();
  });

  it('renders sidebar khi được truyền prop', () => {
    render(
      <DashboardLayout
        sidebar={<nav aria-label="sidebar-nav">Sidebar</nav>}
        header={<header role="banner">Header</header>}
      >
        <div>Nội dung chính</div>
      </DashboardLayout>,
    );
    expect(screen.getByRole('navigation', { name: 'sidebar-nav' })).toBeInTheDocument();
  });

  it('renders children trong main content', () => {
    render(
      <DashboardLayout header={<header role="banner">Header</header>}>
        <p>Nội dung con</p>
      </DashboardLayout>,
    );
    expect(screen.getByText('Nội dung con')).toBeInTheDocument();
  });

  it('sidebar collapsed có width 56px', () => {
    const { container } = render(
      <DashboardLayout
        sidebar={<nav>Nav</nav>}
        sidebarCollapsed
        header={<header role="banner">Header</header>}
      >
        <div>Content</div>
      </DashboardLayout>,
    );
    // aside phải có inline style width: 56px
    const aside = container.querySelector('aside');
    expect(aside).toHaveStyle({ width: '56px' });
  });

  it('sidebar expanded sử dụng sidebarWidth prop', () => {
    const { container } = render(
      <DashboardLayout
        sidebar={<nav>Nav</nav>}
        sidebarCollapsed={false}
        sidebarWidth={240}
        header={<header role="banner">Header</header>}
      >
        <div>Content</div>
      </DashboardLayout>,
    );
    const aside = container.querySelector('aside');
    expect(aside).toHaveStyle({ width: '240px' });
  });
});
