src/app/writing/writing.component.ts

import { Component } from '@angular/core';
import { WritingService } from './writing.service';
import { Router } from '@angular/router';
import { HeaderComponent } from '../shared/header/header.component';
import { ButtonComponent } from '../shared/button/button.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-writing',
  templateUrl: './writing.component.html',
  styleUrls: ['./writing.component.css'],
  standalone: true,
  imports: [ButtonComponent, CommonModule, FormsModule, HeaderComponent]
})
export class WritingComponent {
  gradeLevel = 'lower';
  topic: string | null = null;
  errorMessage: string | null = null;
  userAnswer: string = '';
  feedback: string | null = null;
  isFeedbackVisible: boolean = false;
  isSubmitDisabled: boolean = true;
  isTopicFetching: boolean = false;
  isLoading: boolean = false;
  isSubmitInProgress: boolean = false;
  feedbackList: string[] = [];
  showStarAnimation: boolean = false;
  isLoaderVisible: boolean = false;
  wordCount: number = 0;
  showIntro: boolean = true;
  showWriting: boolean = false;
  showFeedback: boolean = false;

  constructor(private writingService: WritingService, private router: Router) { }

  fetchTopic(): void {
    this.isLoaderVisible = true;
    this.isTopicFetching = true;
    this.errorMessage = null;
    this.topic = null;
    this.feedback = null;
    this.showWriting = false;
    this.showIntro = true;
    this.showFeedback = false;
    this.userAnswer = '';

    this.writingService.getWritingTopic(this.gradeLevel).subscribe(
      (response) => {
        this.isLoaderVisible = false;
        this.isTopicFetching = false;

        if (response && response.topic) {
          console.log("Generated Writing Topic:", response.topic);
          this.topic = response.topic;
          this.showIntro = false;
          this.showWriting = true;
        } else {
          console.warn("Unexpected response format:", response);
          this.topic = "No topic generated. Try again.";
        }
      },
      (error) => {
        console.error("Error fetching writing topic:", error);
        this.topic = "Failed to load topic.";
        this.isLoaderVisible = false;
        this.isTopicFetching = false;
      }
    );
  }

  submitAnswer(): void {
    if (this.userAnswer.trim() === '') {
      this.errorMessage = 'Please write an answer before submitting.';
      return;
    }
    if (!this.topic) {
      this.errorMessage = 'Please generate a topic first.';
      return;
    }

    this.errorMessage = null;
    this.isLoading = true;
    this.isSubmitInProgress = true;
    this.isLoaderVisible = true;

    this.showIntro = false;
    this.showWriting = true;
    this.showFeedback = false;

    this.writingService.validateResponse(this.topic, this.userAnswer).subscribe({
      next: (response) => {
        this.feedback = response.feedback;
        this.feedbackList = response.feedback.split(/(?=\d+\.)/g).map(item => item.trim());
        this.isFeedbackVisible = true;

        this.isLoading = false;
        this.isSubmitInProgress = false;
        this.isLoaderVisible = false;

        this.showWriting = false;
        this.showFeedback = true;
      },
      error: (error) => {
        this.errorMessage = error.message;

        this.isSubmitInProgress = false;
        this.isLoaderVisible = false;

        this.showWriting = false;
        this.showFeedback = true;
      }
    });
  }

  checkWordCount(): void {
    setTimeout(() => {
      const wordCount = this.userAnswer.trim().split(/\s+/).length;
      this.isSubmitDisabled = wordCount < 10;
    });
  }

  resetForm(): void {
    this.gradeLevel = 'lower';
    this.topic = null;
    this.userAnswer = '';
    this.feedback = null;
    this.errorMessage = null;
    this.isFeedbackVisible = false;
    this.isSubmitDisabled = true;
    this.isTopicFetching = false;
    this.isSubmitInProgress = false;
    this.showIntro = true;
    this.showWriting = false;
    this.showFeedback = false;
  }

  goBack(from: string): void {
    if (from === 'writing') {
      this.showWriting = false;
      this.showIntro = true;
    } else if (from === 'feedback') {
      this.showFeedback = false;
      this.showWriting = true;
    }
  }

  goToHome(): void {
    this.router.navigate(['/home']);
  }

  goToListening(): void {
    this.router.navigate(['/listening']);
  }
}