import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, expect, it } from 'vitest'
import App from './App'

describe('Learning Planner', () => {
  it('renders a useful seeded dashboard', () => {
    render(<App />)
    expect(screen.getByRole('heading', { name: /good progress starts/i })).toBeInTheDocument()
    expect(screen.getAllByText('Master practical TypeScript patterns').length).toBeGreaterThan(0)
    expect(screen.getByText('Due this week')).toBeInTheDocument()
  })

  it('validates and creates a goal', async () => {
    const user = userEvent.setup()
    render(<App />)
    await user.click(screen.getByRole('button', { name: 'Learning goals' }))
    await user.click(screen.getByRole('button', { name: 'New goal' }))
    await user.click(screen.getByRole('button', { name: 'Save goal' }))
    expect(screen.getByText('Enter a goal title.')).toBeInTheDocument()
    await user.type(screen.getByLabelText(/Goal title/), 'Learn browser APIs')
    await user.type(screen.getByLabelText(/Category/), 'Web platform')
    await user.type(screen.getByLabelText(/Target date/), '2026-12-01')
    await user.click(screen.getByRole('button', { name: 'Save goal' }))
    expect(screen.getByRole('heading', { name: 'Learn browser APIs' })).toBeInTheDocument()
  })

  it('filters the task library', async () => {
    const user = userEvent.setup()
    render(<App />)
    await user.click(screen.getByRole('button', { name: 'All tasks' }))
    await user.type(screen.getByLabelText('Search tasks'), 'Firefox')
    expect(screen.getByRole('heading', { name: 'Run Firefox regression suite' })).toBeInTheDocument()
    expect(screen.queryByRole('heading', { name: 'Add safe import validation' })).not.toBeInTheDocument()
  })
})