import 'package:cyberhybridhub/theme/app_theme.dart';
import 'package:cyberhybridhub/widgets/spelling_question_tile.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('shows green canonical word then shows Next button and submits when clicked', (tester) async {
    var submitCount = 0;

    await tester.pumpWidget(
      MaterialApp(
        theme: buildAppTheme(),
        home: Scaffold(
          body: SpellingQuestionTile(
            questionId: 'spell-1',
            questionText: 'Spell the word you hear.',
            spokenWord: 'colour',
            canonicalWord: 'colour',
            onSubmitAnswer: (_) async {
              submitCount++;
            },
            onDefer: () async {},
          ),
        ),
      ),
    );

    await tester.enterText(find.byKey(const Key('spelling-answer-field')), 'colour');
    await tester.tap(find.byKey(const Key('spelling-submit-answer')));
    await tester.pump();

    expect(submitCount, 0);
    final Text feedback = tester.widget<Text>(
      find.byKey(const Key('spelling-feedback-word')),
    );
    expect(feedback.data, 'colour');
    expect(feedback.style?.color, AppColors.success);
    expect(find.byKey(const Key('spelling-next-question')), findsOneWidget);
    expect(submitCount, 0);

    await tester.tap(find.byKey(const Key('spelling-next-question')));
    await tester.pump();

    expect(submitCount, 1);
  });

  testWidgets('shows red canonical word when answer is wrong', (tester) async {
    await tester.pumpWidget(
      MaterialApp(
        theme: buildAppTheme(),
        home: Scaffold(
          body: SpellingQuestionTile(
            questionId: 'spell-2',
            questionText: 'Spell the word you hear.',
            spokenWord: 'colour',
            canonicalWord: 'colour',
            onSubmitAnswer: (_) async {},
            onDefer: () async {},
          ),
        ),
      ),
    );

    await tester.enterText(find.byKey(const Key('spelling-answer-field')), 'color');
    await tester.tap(find.byKey(const Key('spelling-submit-answer')));
    await tester.pump();

    final Text feedback = tester.widget<Text>(
      find.byKey(const Key('spelling-feedback-word')),
    );
    expect(feedback.data, 'colour');
    expect(feedback.style?.color, AppColors.error);
    expect(find.byKey(const Key('spelling-next-question')), findsOneWidget);
  });

  testWidgets('submits answer when pressing Enter a second time', (tester) async {
    var submitCount = 0;

    await tester.pumpWidget(
      MaterialApp(
        theme: buildAppTheme(),
        home: Scaffold(
          body: SpellingQuestionTile(
            questionId: 'spell-3',
            questionText: 'Spell the word you hear.',
            spokenWord: 'colour',
            canonicalWord: 'colour',
            onSubmitAnswer: (_) async {
              submitCount++;
            },
            onDefer: () async {},
          ),
        ),
      ),
    );

    await tester.enterText(find.byKey(const Key('spelling-answer-field')), 'colour');
    await tester.showKeyboard(find.byKey(const Key('spelling-answer-field')));
    await tester.testTextInput.receiveAction(TextInputAction.done);
    await tester.pump();

    expect(submitCount, 0);
    expect(find.byKey(const Key('spelling-feedback-word')), findsOneWidget);
    expect(find.byKey(const Key('spelling-next-question')), findsOneWidget);
 
    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
    await tester.pump();

    expect(submitCount, 1);
  });
}