import { test, expect } from '@playwright/test';

test.describe('User Interface and Navigation', () => {
  test.beforeEach(async ({ page }) => {
    // Login as admin
    await page.goto('/');
    await page.fill('input[type="email"]', 'admin@localhost');
    await page.fill('input[type="password"]', 'admin123!');
    await page.click('button[type="submit"]');
    await expect(page.locator('h1')).toContainText('Medication Reminder');
  });

  test('should display main navigation elements', async ({ page }) => {
    await expect(
      page.locator('button:has-text("Add Medication")')
    ).toBeVisible();
    await expect(page.locator('button:has-text("Manage")')).toBeVisible();
    await expect(page.locator('button:has-text("History")')).toBeVisible();
    await expect(page.locator('button:has-text("Stats")')).toBeVisible();
  });

  test('should toggle theme', async ({ page }) => {
    // Click theme switcher
    await page.click('[data-testid="theme-switcher"]');

    // Check if dark mode is applied
    await expect(page.locator('html')).toHaveClass(/dark/);

    // Toggle back to light mode
    await page.click('[data-testid="theme-switcher"]');
    await expect(page.locator('html')).not.toHaveClass(/dark/);
  });

  test('should open and close account modal', async ({ page }) => {
    // Click account button
    await page.click('button:has-text("Account")');

    // Should show account modal
    await expect(page.locator('text=Account Settings')).toBeVisible();

    // Close modal
    await page.click('button:has-text("Close")');
    await expect(page.locator('text=Account Settings')).not.toBeVisible();
  });

  test('should open stats modal', async ({ page }) => {
    await page.click('button:has-text("Stats")');

    await expect(page.locator('text=Medication Statistics')).toBeVisible();
    await expect(page.locator('text=Weekly Adherence')).toBeVisible();

    await page.click('button:has-text("Close")');
  });

  test('should show current time and date', async ({ page }) => {
    // Should display current time somewhere on the page
    const timeElement = page.locator('[data-testid="current-time"]');
    await expect(timeElement).toBeVisible();
  });

  test('should handle responsive design', async ({ page }) => {
    // Test mobile viewport
    await page.setViewportSize({ width: 375, height: 667 });

    // Should still show main elements
    await expect(page.locator('h1')).toBeVisible();
    await expect(
      page.locator('button:has-text("Add Medication")')
    ).toBeVisible();

    // Reset to desktop
    await page.setViewportSize({ width: 1280, height: 720 });
  });

  test('should search medications', async ({ page }) => {
    // Add a test medication first
    await page.click('button:has-text("Add Medication")');
    await page.fill('input[name="name"]', 'Searchable Medicine');
    await page.fill('input[name="dosage"]', '10mg');
    await page.click('button[type="submit"]');

    // Use search functionality
    await page.fill('input[placeholder*="search"]', 'Searchable');

    // Should show filtered results
    await expect(page.locator('text=Searchable Medicine')).toBeVisible();

    // Clear search
    await page.fill('input[placeholder*="search"]', '');
  });

  test('should logout user', async ({ page }) => {
    // Click logout (usually in avatar dropdown)
    await page.click('[data-testid="avatar-dropdown"]');
    await page.click('button:has-text("Logout")');

    // Should return to login page
    await expect(page.locator('h2')).toContainText(['Sign In', 'Login']);
  });
});