import { test } from 'magnitude-test';

const TEST_HANDLE = process.env.TEST_BLUESKY_HANDLE;
const TEST_PASSWORD = process.env.TEST_BLUESKY_PASSWORD;

if (!TEST_HANDLE || !TEST_PASSWORD) {
  throw new Error('TEST_BLUESKY_HANDLE and TEST_BLUESKY_PASSWORD must be set in .env');
}

test('Theme selector in profile dropdown has three options', async (agent) => {
  // Act: Log in first (theme selector is in authenticated area)
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Open the profile dropdown menu
  await agent.act('Click on the profile avatar or "Profile" button');

  // Check: Verify the theme selector is visible with three options
  await agent.check('A "Theme" label is visible in the dropdown menu');
  await agent.check('A segmented control with three icon buttons is visible');
  await agent.check('A sun icon button is visible (for light mode)');
  await agent.check('A moon icon button is visible (for dark mode)');
  await agent.check('A desktop/monitor icon button is visible (for system/auto mode)');
});

test('Theme can be changed between light, dark, and auto modes', async (agent) => {
  // Act: Log in
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Open profile dropdown and select light mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the sun icon in the theme selector');

  // Check: Verify light mode is active
  await agent.check('The page has a light background color');
  await agent.check('The sun icon button appears selected/highlighted');

  // Act: Switch to dark mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the moon icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Check: Verify dark mode is active
  await agent.check('The page has a dark background color');
  await agent.check('The moon icon button appears selected/highlighted');

  // Act: Switch to auto/system mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the desktop icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Check: Verify auto mode is selected
  await agent.check('The desktop icon button appears selected/highlighted');
});

test('Light mode displays correct colors', async (agent) => {
  // Act: Log in
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Set to light mode via profile dropdown
  await agent.act('Click on the profile avatar');
  await agent.act('Click the sun icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Check: Verify light mode colors
  await agent.check('The page has a light background color');
  await agent.check('The sidebar has a light background');
  await agent.check('The text is dark colored for readability');
  await agent.check('The borders are subtle and light-colored');
});

test('Dark mode displays correct colors', async (agent) => {
  // Act: Log in
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Set to dark mode via profile dropdown
  await agent.act('Click on the profile avatar');
  await agent.act('Click the moon icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Check: Verify dark mode colors
  await agent.check('The page has a dark background color');
  await agent.check('The sidebar has a dark background');
  await agent.check('The text is light colored for readability');
  await agent.check('The borders are dark-colored');
});

test('Theme persists across page refreshes', async (agent) => {
  // Act: Log in
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Set to light mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the sun icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Act: Refresh the page
  await agent.act('Refresh the page');
  await agent.act('Wait for the page to load');

  // Check: Verify light mode persisted
  await agent.check('The page still has a light background color');

  // Act: Switch to dark mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the moon icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Act: Refresh the page again
  await agent.act('Refresh the page');
  await agent.act('Wait for the page to load');

  // Check: Verify dark mode persisted
  await agent.check('The page still has a dark background color');
});

test('Theme affects all UI components', async (agent) => {
  // Act: Log in
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Set to light mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the sun icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Check: Verify all components use light theme
  await agent.check('The navigation sidebar uses light colors');
  await agent.check('The main content area uses light colors');
  await agent.check('All buttons and inputs use light theme styling');

  // Act: Switch to dark mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the moon icon in the theme selector');
  await agent.act('Wait for 500 milliseconds');

  // Check: Verify all components use dark theme
  await agent.check('The navigation sidebar uses dark colors');
  await agent.check('The main content area uses dark colors');
  await agent.check('All buttons and inputs use dark theme styling');
});

test('Theme selector correctly indicates selected theme', async (agent) => {
  // Act: Log in
  await agent.act('Navigate to /login');
  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
  await agent.act('Click the "Log in with Bluesky" button');
  await agent.check('The page URL contains "bsky.social"');
  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
  await agent.act('Click the submit/authorize button');
  await agent.check('The page URL contains "/chat"');

  // Act: Set to light mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the sun icon in the theme selector');

  // Check: Verify sun icon is highlighted/selected
  await agent.check('The sun icon button appears selected or highlighted');

  // Act: Switch to dark mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the moon icon in the theme selector');

  // Check: Verify moon icon is highlighted/selected
  await agent.check('The moon icon button appears selected or highlighted');

  // Act: Switch to auto mode
  await agent.act('Click on the profile avatar');
  await agent.act('Click the desktop icon in the theme selector');

  // Check: Verify desktop icon is highlighted/selected
  await agent.check('The desktop icon button appears selected or highlighted');
});