// src/app/deck.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, Observable, switchMap } from 'rxjs';

export interface Deck {
  name: string;
  images: DeckImage[];
}

export interface DeckImage {
  boxes: Box[];
  name: string;
  id:string;
}

export interface Box {
  id?:number;
  x1:number;
  x2:number;
  y1:number;
  y2:number;
  due?: number;
  ivl?: number;
  factor?: number;
  reps?: number;
  lapses?: number;
  isGraduated?:boolean;
}

export interface BackendBox {
  bildname: string;
  deckid: number;
  iconindex: number;
  id: number;
  x1: number;
  x2: number;
  y1: number;
  y2: number;
}

// Definiert ein einzelnes Punktpaar [x, y]
type OcrPoint = [number, number];

// Definiert die Box als Array von vier Punkten
type OcrBox = [OcrPoint, OcrPoint, OcrPoint, OcrPoint];

// Interface für jedes JSON-Objekt
export interface OcrResult {
  box: OcrBox;
  confidence: number;
  name: string;
  text: string;
}

@Injectable({
  providedIn: 'root'
})
export class DeckService {
  private apiUrl = '/api/decks';

  constructor(private http: HttpClient) { }

  getDecks(): Observable<Deck[]> {
    return this.http.get<any[]>(this.apiUrl).pipe(
      map(decks => decks.map(deck => ({
        name: deck.name,
        images: this.groupImagesByName(deck.images)
      })))
    );
  }
  private groupImagesByName(images: any[]): DeckImage[] {
    const imageMap: { [key: string]: DeckImage } = {};

    images.forEach(image => {
      if (!imageMap[image.id]) {
        imageMap[image.id] = {
          name: image.name,
          id:image.id,
          boxes: []
        };
      }
      imageMap[image.id].boxes.push({
        id: image.boxid,
        x1: image.x1,
        x2: image.x2,
        y1: image.y1,
        y2: image.y2,
        due: image.due,
        ivl:image.ivl,
        factor:image.factor,
        reps:image.reps,
        lapses:image.lapses,
        isGraduated:image.isGraduated?true:false
      });
    });

    return Object.values(imageMap);
  }
  getDeck(deckname:string): Observable<Deck> {
    return this.http.get<Deck>(`${this.apiUrl}/${deckname}/images`);
  }

  createDeck(deckname: string): Observable<any> {
    return this.http.post(this.apiUrl, { deckname });
  }

  deleteDeck(deckName: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/${encodeURIComponent(deckName)}`);
  }

  saveImageData(data:any): Observable<any> {
    return this.http.post(`${this.apiUrl}/image`, data);
  }
  
  // Neue Methode zum Löschen eines Bildes
  deleteImage(imageName: string): Observable<any> {
    return this.http.delete(`${this.apiUrl}/image/${imageName}`);
  }

  // Neue Methode zum Verschieben eines Bildes
  moveImage(imageId: string, targetDeckId: number): Observable<any> {
    return this.http.post(`${this.apiUrl}/images/${imageId}/move`, { targetDeckId });
  }

  updateBox(box: Box): Observable<any> {
    return this.http.put(`${this.apiUrl}/boxes/${box.id}`, box);
  }
}