import React from 'react';
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import { TamaguiProvider, Theme } from 'tamagui';
import { useTheme } from '@tamagui/core';
import tamaguiConfig from '../../../../../tamagui.config';
import { useAdminTheme } from '../theme';

const ThemeProbe = () => {
  const adminTheme = useAdminTheme();
  const theme = useTheme();

  return (
    <div
      data-testid="probe"
      data-admin-bg={adminTheme.background}
      data-theme-bg={String(theme.background?.val ?? '')}
      data-admin-text={adminTheme.text}
      data-theme-text={String(theme.color?.val ?? '')}
    />
  );
};

const renderTree = (name: 'adminLight' | 'adminDark') => (
  <TamaguiProvider config={tamaguiConfig} defaultTheme={name}>
    <Theme name={name}>
      <ThemeProbe />
    </Theme>
  </TamaguiProvider>
);

describe('useAdminTheme', () => {
  it('tracks Tamagui theme values across light and dark modes', () => {
    const { rerender } = render(renderTree('adminLight'));
    const probe = screen.getByTestId('probe');
    const lightAdminBg = probe.getAttribute('data-admin-bg');
    const lightThemeBg = probe.getAttribute('data-theme-bg');
    const lightAdminText = probe.getAttribute('data-admin-text');
    const lightThemeText = probe.getAttribute('data-theme-text');

    expect(lightAdminBg).toBe(lightThemeBg);
    expect(lightAdminText).toBe(lightThemeText);

    rerender(renderTree('adminDark'));

    const darkProbe = screen.getByTestId('probe');
    const darkAdminBg = darkProbe.getAttribute('data-admin-bg');
    const darkThemeBg = darkProbe.getAttribute('data-theme-bg');

    expect(darkAdminBg).toBe(darkThemeBg);
    expect(darkAdminBg).not.toBe(lightAdminBg);
  });
});