import { describe, it, expect, beforeEach } from 'vitest';
import { screen, fireEvent } from '@testing-library/react';
import { renderWithProviders } from '../../test/utils';
import SettingsLayout, { menuForRole } from './SettingsLayout';
import { useAuthStore } from '../../stores/authStore';

beforeEach(() => {
  useAuthStore.setState({ primaryRole: 'doctor' });
});

describe('SettingsLayout', () => {
  it('renders the shared settings sidebar and the content', () => {
    renderWithProviders(
      <SettingsLayout active="subscription">
        <div>محتوای اشتراک</div>
      </SettingsLayout>,
    );
    expect(screen.getByText('خرید اشتراک')).toBeInTheDocument();
    expect(screen.getByText('محتوای اشتراک')).toBeInTheDocument();
  });

  it('marks the active item with aria-current=page', () => {
    renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
    const active = screen.getByText('خرید اشتراک').closest('a');
    expect(active).toHaveAttribute('aria-current', 'page');
    expect(active).toHaveAttribute('href', '/admin/subscription');
  });

  it('renders the shared menu items as navigable links', () => {
    renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
    expect(screen.getByText('مدیریت نوبت دهی').closest('a')).toHaveAttribute('href', '/admin/appointment-settings');
    expect(screen.getByText('برچسب‌ها').closest('a')).toHaveAttribute('href', '/admin/tags-settings');
    // 'مدیریت پزشک' lives in the main nav, not the settings menu
    expect(screen.queryByText('مدیریت پزشک')).not.toBeInTheDocument();
  });

  /**
   * سایدبار و فهرست موبایل یک منبع دارند؛ آیتمی که به منو اضافه می‌شود باید در هر دو
   * دیده شود. قبلاً دو کپی بود و «منابع»/«دسته‌بندی‌ها» فقط در موبایل ظاهر شدند.
   */
  it('shows the resource-first entries in the desktop sidebar too', () => {
    useAuthStore.setState({ primaryRole: 'clinic' });
    renderWithProviders(<SettingsLayout active="resources"><div /></SettingsLayout>);

    expect(screen.getByText('منابع').closest('a')).toHaveAttribute('href', '/admin/resources');
    expect(screen.getByText('دسته‌بندی‌ها').closest('a')).toHaveAttribute('href', '/admin/service-categories');
    expect(screen.getByText('منابع').closest('a')).toHaveAttribute('aria-current', 'page');
  });

  it('role-gates the desktop sidebar: a doctor does not see the clinic-doctors tab', () => {
    renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
    expect(screen.queryByText('پزشکان کلینیک')).not.toBeInTheDocument();
    // the removed 'مدیریت مطب' tab must be gone for everyone
    expect(screen.queryByText('مدیریت مطب')).not.toBeInTheDocument();
  });

  it('shows the clinic-doctors tab to a clinic owner', () => {
    useAuthStore.setState({ primaryRole: 'clinic' });
    renderWithProviders(<SettingsLayout active="clinic-doctors"><div /></SettingsLayout>);
    expect(screen.getByText('پزشکان کلینیک').closest('a')).toHaveAttribute('href', '/admin/settings/clinic-doctors');
  });

  it('filters the menu by the search query', () => {
    renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
    fireEvent.change(screen.getByLabelText('جستجو در تنظیمات'), { target: { value: 'اشتراک' } });
    expect(screen.getByText('خرید اشتراک')).toBeInTheDocument();
    expect(screen.queryByText('خدمات')).not.toBeInTheDocument();
  });

  it('menuForRole still role-gates the mobile settings list', () => {
    // SettingsMenuPage (mobile) keeps using menuForRole / SETTINGS_MENU
    expect(menuForRole('clinic').map((i) => i.key)).toContain('clinic-doctors');
    expect(menuForRole('clinic').map((i) => i.key)).not.toContain('doctor');
    // کلینیک ورودی تنظیمات نوبت‌دهیِ مخصوص خودش را دارد
    expect(menuForRole('clinic').find((i) => i.key === 'appointment')?.to)
      .toBe('/admin/settings/appointment-settings');
    // a plain doctor must not get the clinic-doctors management tab
    expect(menuForRole('doctor').map((i) => i.key)).not.toContain('clinic-doctors');
  });
});