import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { MemoryRouter } from 'react-router-dom'
import { vi, describe, it, expect, beforeEach } from 'vitest'
import SystemSettings from '../SystemSettings'
import * as settingsApi from '../../api/settings'
import * as featureFlagsApi from '../../api/featureFlags'
import client from '../../api/client'
import { LanguageProvider } from '../../context/LanguageContext'

// Note: react-i18next mock is provided globally by src/test/setup.ts

// Mock API modules
vi.mock('../../api/settings', () => ({
  getSettings: vi.fn(),
  updateSetting: vi.fn(),
  validatePublicURL: vi.fn(),
  testPublicURL: vi.fn(),
}))

vi.mock('../../api/featureFlags', () => ({
  getFeatureFlags: vi.fn(),
  updateFeatureFlags: vi.fn(),
}))

vi.mock('../../api/client', () => ({
  default: {
    get: vi.fn(),
    post: vi.fn(),
  },
}))

const createQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: { retry: false },
      mutations: { retry: false },
    },
  })

const renderWithProviders = (ui: React.ReactNode) => {
  const queryClient = createQueryClient()
  return render(
    <QueryClientProvider client={queryClient}>
      <LanguageProvider>
        <MemoryRouter>{ui}</MemoryRouter>
      </LanguageProvider>
    </QueryClientProvider>
  )
}

describe('SystemSettings', () => {
  beforeEach(() => {
    vi.clearAllMocks()

    // Default mock responses
    vi.mocked(settingsApi.getSettings).mockResolvedValue({
      'caddy.admin_api': 'http://localhost:2019',
      'caddy.ssl_provider': 'auto',
      'ui.domain_link_behavior': 'new_tab',
      'security.cerberus.enabled': 'false',
    })

    vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
      'feature.cerberus.enabled': false,
      'feature.crowdsec.console_enrollment': false,
      'feature.uptime.enabled': false,
    })

    vi.mocked(client.get).mockResolvedValue({
      data: {
        status: 'healthy',
        service: 'charon',
        version: '0.1.0',
        git_commit: 'abc123',
        build_time: '2025-01-01T00:00:00Z',
      },
    })
  })

  describe('SSL Provider Selection', () => {
    it('renders SSL Provider label', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('SSL Provider')).toBeTruthy()
      })
    })

    it('displays the correct help text for SSL provider', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText(/Choose the Certificate Authority/i)).toBeTruthy()
      })
    })

    it('renders the SSL provider select trigger', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('SSL Provider')).toBeTruthy()
      })

      // Radix UI Select uses a button as the trigger
      const selectTrigger = screen.getByRole('combobox', { name: /ssl provider/i })
      expect(selectTrigger).toBeTruthy()
    })

    it('displays Auto as default selection', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Auto (Recommended)')).toBeTruthy()
      })
    })

    it('saves SSL provider setting when save button is clicked', async () => {
      vi.mocked(settingsApi.updateSetting).mockResolvedValue(undefined)

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('SSL Provider')).toBeTruthy()
      })

      const user = userEvent.setup()
      const saveButtons = screen.getAllByRole('button', { name: /Save Settings/i })
      await user.click(saveButtons[0])

      await waitFor(() => {
        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
          'caddy.ssl_provider',
          expect.any(String),
          'caddy',
          'string'
        )
      })
    })
  })

  describe('General Settings', () => {
    it('renders the page title', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('System Settings')).toBeTruthy()
      })
    })

    it('loads and displays Caddy Admin API setting', async () => {
      vi.mocked(settingsApi.getSettings).mockResolvedValue({
        'caddy.admin_api': 'http://custom:2019',
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        const input = screen.getByPlaceholderText('http://localhost:2019') as HTMLInputElement
        expect(input.value).toBe('http://custom:2019')
      })
    })

    it('saves all settings when save button is clicked', async () => {
      vi.mocked(settingsApi.updateSetting).mockResolvedValue(undefined)

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getAllByText('Save Settings')).toHaveLength(2)
      })

      const user = userEvent.setup()
      const saveButtons = screen.getAllByRole('button', { name: /Save Settings/i })
      await user.click(saveButtons[0])

      await waitFor(() => {
        expect(settingsApi.updateSetting).toHaveBeenCalledTimes(4)
        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
          'caddy.admin_api',
          expect.any(String),
          'caddy',
          'string'
        )
        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
          'caddy.ssl_provider',
          expect.any(String),
          'caddy',
          'string'
        )
        expect(settingsApi.updateSetting).toHaveBeenCalledWith(
          'ui.domain_link_behavior',
          expect.any(String),
          'ui',
          'string'
        )
      })
    })
  })

  describe('System Status', () => {
    it('displays system health information', async () => {
      vi.mocked(client.get).mockResolvedValue({
        data: {
          status: 'healthy',
          service: 'charon',
          version: '1.0.0',
          git_commit: 'abc123def',
          build_time: '2025-12-06T00:00:00Z',
        },
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('charon')).toBeTruthy()
        expect(screen.getByText('1.0.0')).toBeTruthy()
        expect(screen.getByText('abc123def')).toBeTruthy()
      })
    })

    it('displays System Status section', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('System Status')).toBeTruthy()
      })
    })
  })

  describe('Features', () => {
    it('renders the Features section', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Features')).toBeTruthy()
      })
    })

    it('displays all feature flag toggles', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
        'feature.uptime.enabled': false,
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
        expect(screen.getByText('CrowdSec Console Enrollment')).toBeTruthy()
        expect(screen.getByText('Uptime Monitoring')).toBeTruthy()
      })
    })

    it('shows Cerberus toggle as checked when enabled', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.cerberus.enabled': true,
        'feature.crowdsec.console_enrollment': false,
        'feature.uptime.enabled': false,
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
      })

      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })
      expect(switchInput).toBeChecked()
    })

    it('shows Uptime toggle as checked when enabled', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.uptime.enabled': true,
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Uptime Monitoring')).toBeTruthy()
      })

      const switchInput = screen.getByRole('checkbox', { name: /uptime monitoring toggle/i })
      expect(switchInput).toBeChecked()
    })

    it('shows Cerberus toggle as unchecked when disabled', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
        'feature.uptime.enabled': false,
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
      })

      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })
      expect(switchInput).not.toBeChecked()
    })

    it('toggles Cerberus feature flag when switch is clicked', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
        'feature.uptime.enabled': false,
      })
      vi.mocked(featureFlagsApi.updateFeatureFlags).mockResolvedValue(undefined)

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
      })

      const user = userEvent.setup()
      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })

      await user.click(switchInput)

      await waitFor(() => {
        expect(featureFlagsApi.updateFeatureFlags).toHaveBeenCalledWith({
          'feature.cerberus.enabled': true,
        })
      })
    })

    it('toggles CrowdSec Console Enrollment feature flag when switch is clicked', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
        'feature.uptime.enabled': false,
      })
      vi.mocked(featureFlagsApi.updateFeatureFlags).mockResolvedValue(undefined)

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('CrowdSec Console Enrollment')).toBeTruthy()
      })

      const user = userEvent.setup()
      const switchInput = screen.getByRole('checkbox', { name: /crowdsec console enrollment toggle/i })

      await user.click(switchInput)

      await waitFor(() => {
        expect(featureFlagsApi.updateFeatureFlags).toHaveBeenCalledWith({
          'feature.crowdsec.console_enrollment': true,
        })
      })
    })

    it('toggles Uptime feature flag when switch is clicked', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.uptime.enabled': true,
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
      })
      vi.mocked(featureFlagsApi.updateFeatureFlags).mockResolvedValue(undefined)

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Uptime Monitoring')).toBeTruthy()
      })

      const user = userEvent.setup()
      const switchInput = screen.getByRole('checkbox', { name: /uptime monitoring toggle/i })

      await user.click(switchInput)

      await waitFor(() => {
        expect(featureFlagsApi.updateFeatureFlags).toHaveBeenCalledWith({
          'feature.uptime.enabled': false,
        })
      })
    })

    it('shows loading skeleton when feature flags are not loaded', async () => {
      // Set settings to resolve but feature flags to never resolve (pending state)
      vi.mocked(settingsApi.getSettings).mockResolvedValue({
        'caddy.admin_api': 'http://localhost:2019',
        'caddy.ssl_provider': 'auto',
        'ui.domain_link_behavior': 'new_tab',
      })
      vi.mocked(featureFlagsApi.getFeatureFlags).mockReturnValue(new Promise(() => {}))

      renderWithProviders(<SystemSettings />)

      // When featureFlags is undefined but settings is loaded, it shows skeleton in the Features card
      await waitFor(() => {
        expect(screen.getByText('Features')).toBeTruthy()
      })

      // Verify skeleton elements are rendered (Skeleton component uses animate-pulse class)
      const skeletons = document.querySelectorAll('.animate-pulse')
      expect(skeletons.length).toBeGreaterThan(0)
    })

    it('shows loading overlay while toggling a feature flag', async () => {
      vi.mocked(featureFlagsApi.getFeatureFlags).mockResolvedValue({
        'feature.cerberus.enabled': false,
        'feature.crowdsec.console_enrollment': false,
        'feature.uptime.enabled': false,
      })
      vi.mocked(featureFlagsApi.updateFeatureFlags).mockImplementation(
        () => new Promise(() => {})
      )

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByText('Cerberus Security Suite')).toBeTruthy()
      })

      const user = userEvent.setup()
      const switchInput = screen.getByRole('checkbox', { name: /cerberus security suite toggle/i })

      await user.click(switchInput)

      await waitFor(() => {
        expect(screen.getByText('Updating features...')).toBeInTheDocument()
      })
    })
  })

  describe('Application URL Card', () => {
    it('renders public URL input field', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
      })
    })

    it('shows green border and checkmark when URL is valid', async () => {
      vi.mocked(client.get).mockResolvedValue({
        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
      })

      const user = userEvent.setup()
      const input = screen.getByPlaceholderText('https://charon.example.com')

      // Mock validation response for valid URL
      vi.mocked(client.post).mockResolvedValue({
        data: { valid: true, normalized: 'https://example.com' },
      })

      await user.clear(input)
      await user.type(input, 'https://example.com')

      // Wait for debounced validation
      await waitFor(() => {
        expect(client.post).toHaveBeenCalledWith('/settings/validate-url', {
          url: 'https://example.com',
        })
      }, { timeout: 1000 })

      await waitFor(() => {
        const checkIcon = document.querySelector('.text-green-500')
        expect(checkIcon).toBeTruthy()
      })

      await waitFor(() => {
        expect(input.className).toContain('border-green-500')
      })
    })

    it('shows red border and X icon when URL is invalid', async () => {
      vi.mocked(client.get).mockResolvedValue({
        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
      })

      const user = userEvent.setup()
      const input = screen.getByPlaceholderText('https://charon.example.com')

      // Mock validation response for invalid URL
      vi.mocked(client.post).mockResolvedValue({
        data: { valid: false, error: 'Invalid URL format' },
      })

      await user.clear(input)
      await user.type(input, 'invalid-url')

      await waitFor(() => {
        expect(client.post).toHaveBeenCalledWith('/settings/validate-url', {
          url: 'invalid-url',
        })
      }, { timeout: 1000 })

      await waitFor(() => {
        const xIcon = document.querySelector('.text-red-500')
        expect(xIcon).toBeTruthy()
      })

      await waitFor(() => {
        expect(input.className).toContain('border-red-500')
      })
    })

    it('shows invalid URL error message when validation fails', async () => {
      vi.mocked(client.get).mockResolvedValue({
        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
      })

      const user = userEvent.setup()
      const input = screen.getByPlaceholderText('https://charon.example.com')

      vi.mocked(client.post).mockResolvedValue({
        data: { valid: false, error: 'Invalid URL format' },
      })

      await user.clear(input)
      await user.type(input, 'bad-url')

      // Wait for debounce and validation
      await new Promise(resolve => setTimeout(resolve, 400))

      await waitFor(() => {
        // Check for red border class indicating invalid state
        const inputElement = screen.getByPlaceholderText('https://charon.example.com')
        expect(inputElement.className).toContain('border-red')
      }, { timeout: 1000 })
    })

    it('clears validation state when URL is cleared', async () => {
      vi.mocked(settingsApi.getSettings).mockResolvedValue({
        'app.public_url': 'https://example.com',
      })
      vi.mocked(client.get).mockResolvedValue({
        data: { status: 'healthy', service: 'charon', version: '1.0.0' },
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        const input = screen.getByPlaceholderText('https://charon.example.com') as HTMLInputElement
        expect(input.value).toBe('https://example.com')
      })

      const user = userEvent.setup()
      const input = screen.getByPlaceholderText('https://charon.example.com')

      await user.clear(input)

      await waitFor(() => {
        expect(input.className).not.toContain('border-green-500')
        expect(input.className).not.toContain('border-red-500')
      })
    })

    it('renders test button and verifies functionality', async () => {
      vi.mocked(settingsApi.getSettings).mockResolvedValue({
        'app.public_url': 'https://example.com',
      })
      vi.mocked(settingsApi.testPublicURL).mockResolvedValue({
        reachable: true,
        latency: 42,
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
      })

      // Find test button by looking for buttons with External Link icon
      const buttons = screen.getAllByRole('button')
      const testButton = buttons.find((btn) => btn.querySelector('.lucide-external-link'))
      expect(testButton).toBeTruthy()
      expect(testButton).not.toBeDisabled()

      const user = userEvent.setup()
      await user.click(testButton!)

      await waitFor(() => {
        expect(settingsApi.testPublicURL).toHaveBeenCalledWith('https://example.com')
      })
    })

    it('disables test button when URL is empty', async () => {
      vi.mocked(settingsApi.getSettings).mockResolvedValue({
        'app.public_url': '',
      })

      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        const input = screen.getByPlaceholderText('https://charon.example.com') as HTMLInputElement
        expect(input.value).toBe('')
      })

      const buttons = screen.getAllByRole('button')
      const testButton = buttons.find((btn) => btn.querySelector('.lucide-external-link'))
      expect(testButton).toBeDisabled()
    })

    it('handles validation API error gracefully', async () => {
      renderWithProviders(<SystemSettings />)

      await waitFor(() => {
        expect(screen.getByPlaceholderText('https://charon.example.com')).toBeTruthy()
      })

      const user = userEvent.setup()
      const input = screen.getByPlaceholderText('https://charon.example.com')

      vi.mocked(client.post).mockRejectedValue(new Error('Network error'))

      await user.clear(input)
      await user.type(input, 'https://example.com')

      await waitFor(() => {
        const xIcon = document.querySelector('.text-red-500')
        expect(xIcon).toBeTruthy()
      }, { timeout: 1000 })
    })
  })
})