/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

import { CommonModule } from "@angular/common";
import { Component, inject, input, signal } from "@angular/core";
import { ActivatedRoute, RouterModule } from "@angular/router";
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
import { faLeftLong, faRightLong } from "@fortawesome/free-solid-svg-icons";
import { ComicService } from "../comic-service.js";

@Component({
  imports:     [ CommonModule, RouterModule, FontAwesomeModule ],
  selector:    "app-comic",
  styleUrl:    "./comic.css",
  templateUrl: "./comic.html",
})
export class Comic {
  public comicId = signal("");
  public readonly id = input<string | undefined>("id");
  // eslint-disable-next-line stylistic/max-len -- I dunno.
  public comic:           { number: number; title: string; date: string } | undefined;
  public error:           string | undefined;
  public previousComicId: string | undefined;
  public nextComicId:     string | undefined;
  public readonly backIcon = faLeftLong;
  public readonly forwardIcon = faRightLong;
  private readonly activatedRoute = inject(ActivatedRoute);

  public constructor(private readonly comicService: ComicService) {
    this.comicService.
      loadComics().
      then(() => {
        this.activatedRoute.params.subscribe((parameters_) => {
          const parameters: Record<string, string> = parameters_;
          console.log(`FoundID: ${parameters["id"]}`);
          this.comicId.set(
            parameters["id"] ?? this.comicService.getLatestComicId(),
          );
          this.previousComicId = this.comicService.
            getComicById(String(Number.parseInt(this.comicId(), 10) - 1))?.
            number.toString();
          this.nextComicId = this.comicService.
            getComicById(String(Number.parseInt(this.comicId(), 10) + 1))?.
            number.toString();

          // Load the comic data for the new ID
          this.comic = this.comicService.getComicById(this.comicId());
          if (this.comic) {
            // Clear any previous error
            this.error = undefined;
          } else {
            this.error = `Cannot find comic with ID ${this.comicId()}.`;
          }
        });
      }).
      catch((error: unknown) => {
        this.error = `Failed to load comics: ${
          error instanceof Error
            ? error.message
            : "Please check the browser console for more details."
        }`;
        console.error("Error loading comics:", error);
      });
  }
}