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 renderWithTheme = (name: 'light' | 'dark') =>
  render(
    <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 } = renderWithTheme('light');
    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(
      <TamaguiProvider config={tamaguiConfig} defaultTheme="dark">
        <Theme name="dark">
          <ThemeProbe />
        </Theme>
      </TamaguiProvider>
    );

    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);
  });
});