import { describe, it, expect, vi, beforeEach } from 'vitest'
import { render, screen, fireEvent } from '@testing-library/react'
import App from './App'

// Mock fetch
global.fetch = vi.fn(() => Promise.resolve({
  ok: true,
  json: () => Promise.resolve({ files: [] }),
  text: () => Promise.resolve(''),
})) as any

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

  it('renders the markdown editor', () => {
    render(<App />)
    expect(screen.getByText('Markdown Editor')).toBeInTheDocument()
  })

  it('displays theme selector', () => {
    render(<App />)
    expect(screen.getByText('System')).toBeInTheDocument()
    expect(screen.getByText('Light')).toBeInTheDocument()
    expect(screen.getByText('Dark')).toBeInTheDocument()
  })

  it('toggles theme', () => {
    render(<App />)
    const select = screen.getByRole('combobox')
    fireEvent.change(select, { target: { value: 'dark' } })
    expect(select).toHaveValue('dark')
  })

  it('displays files list', () => {
    render(<App />)
    expect(screen.getByText('Files')).toBeInTheDocument()
    expect(screen.getByText('New Document')).toBeInTheDocument()
  })

  it('displays editor and preview', () => {
    render(<App />)
    expect(screen.getByText('Editor')).toBeInTheDocument()
    expect(screen.getByText('Preview')).toBeInTheDocument()
  })

  it('displays save button when file is selected', () => {
    render(<App />)
    expect(screen.queryByText('Save')).not.toBeInTheDocument()
    // After selecting a file, save button should appear
  })
})
