import { Component, inject, computed } from '@angular/core';
import { PlaylistService } from '../../services/playlist.service';
import { CantiService } from '../../services/canti.service';
import { ComunitaService } from '../../services/comunita.service';
import { MyCantiService } from '../../services/my-canti.service';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { AlertController, ToastController, ModalController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-playlist',
  templateUrl: './playlist.page.html',
  styleUrls: ['./playlist.page.scss'],
  standalone: false
})
export class PlaylistPage {
  public playlistService = inject(PlaylistService);
  public cantiService = inject(CantiService);
  public comunitaService = inject(ComunitaService);
  public myCantiService = inject(MyCantiService);
  private alertCtrl = inject(AlertController);
  private toastCtrl = inject(ToastController);
  private router = inject(Router);

  public selectedSongs = computed(() => {
    const ids = Array.from(this.playlistService.selectedIds());
    const allCanti = this.cantiService.canti();
    const myCantiList = this.myCantiService.myCanti();
    const comunitaCantiPers = this.comunitaService.comunitaCantiPersonali();
    const communityActive = this.comunitaService.comunitaCode() && this.comunitaService.isFilterActive();

    return ids.map(id => {
      let found: any = null;
      if (communityActive) {
        found = comunitaCantiPers.find(c => c.id === id);
      }
      if (!found) {
        found = allCanti.find(c => c.id === id);
      }
      if (!found) {
        found = myCantiList.find(c => c.id === id);
      }
      if (!found) {
        found = comunitaCantiPers.find(c => c.id === id);
      }
      return found;
    }).filter(c => !!c);
  });

  public localSongs: any[] = [];
  public qrCodeImage: string | null = null;
  public savedPlaylistName: string | null = null;

  constructor() {
    // Initial copy to allow local reordering
    this.localSongs = [...this.selectedSongs()];
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.localSongs, event.previousIndex, event.currentIndex);
  }

  getPlaylistSongSettings(): any {
    const activeId = this.playlistService.activePlaylistId();
    if (activeId) {
      const pl = this.playlistService.playlists().find(p => p.id === activeId);
      return pl ? pl.songSettings : undefined;
    }
    return undefined;
  }

  async savePlaylist() {
    const alert = await this.alertCtrl.create({
      header: 'Salva Playlist',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: 'Nome della playlist',
          value: this.savedPlaylistName || ''
        }
      ],
      buttons: [
        {
          text: 'Annulla',
          role: 'cancel'
        },
        {
          text: 'Salva',
          handler: (data) => {
            if (data.name) {
              this.savedPlaylistName = data.name;
              this.playlistService.savePlaylist(data.name, this.localSongs.map(s => s.id));
              this.showToast('Playlist salvata!');
              this.router.navigate(['/settings']);
              return true;
            }
            return false;
          }
        }
      ]
    });
    await alert.present();
  }

  async saveAndExport() {
    const alert = await this.alertCtrl.create({
      header: 'Salva ed Esporta QR',
      message: 'Inserisci un nome per la playlist. Verrà salvata e generato il QR Code.',
      inputs: [
        {
          name: 'name',
          type: 'text',
          placeholder: 'Nome della playlist',
          value: this.savedPlaylistName || ''
        }
      ],
      buttons: [
        {
          text: 'Annulla',
          role: 'cancel'
        },
        {
          text: 'Salva ed Esporta',
          handler: async (data) => {
            if (data.name) {
              this.savedPlaylistName = data.name;
              const ids = this.localSongs.map(s => s.id);
              await this.playlistService.savePlaylist(data.name, ids);
              const songSettings = this.getPlaylistSongSettings();
              this.qrCodeImage = await this.playlistService.generateQR(ids, data.name, songSettings);
              this.showToast('Playlist salvata!');
              return true;
            }
            return false;
          }
        }
      ]
    });
    await alert.present();
  }

  async sharePlaylist() {
    if (this.localSongs.length === 0) return;
    
    const ids = this.localSongs.map(s => s.id);
    const name = this.savedPlaylistName || 'Playlist Condivisa';
    const songSettings = this.getPlaylistSongSettings();
    this.qrCodeImage = await this.playlistService.generateQR(ids, name, songSettings);
  }

  downloadQR() {
    if (!this.qrCodeImage) return;
    
    const name = this.savedPlaylistName || 'playlist';
    const fileName = `${name.toLowerCase().replace(/\s+/g, '_')}_qr.png`;
    
    const link = document.createElement('a');
    link.href = this.qrCodeImage;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    this.showToast('Immagine scaricata!');
  }

  async shareQR() {
    if (!this.qrCodeImage) return;
    const name = this.savedPlaylistName || 'playlist';
    const songSettings = this.getPlaylistSongSettings();
    const shareLink = this.playlistService.getShareLink(this.localSongs.map(s => s.id), name, songSettings);
    const fileName = `${name.toLowerCase().replace(/\s+/g, '_')}_qr.png`;

    try {
      // Convert base64 to blob/file for sharing
      const res = await fetch(this.qrCodeImage);
      const blob = await res.blob();
      const file = new File([blob], fileName, { type: 'image/png' });
      
      if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
        await navigator.share({
          files: [file],
          title: 'Playlist CantiCristiani',
          text: `Ecco la playlist: ${name}\n\nClicca qui per aprirla subito: ${shareLink}`
        });
      } else {
        // Fallback to simple share text or download
        if (navigator.share) {
          await navigator.share({
            title: 'Playlist CantiCristiani',
            text: `Ecco la playlist: ${name}\n\nClicca qui per aprirla: ${shareLink}`
          });
        } else {
          // Copy to clipboard AND download QR!
          try {
            if (navigator.clipboard) {
              await navigator.clipboard.writeText(shareLink);
              this.showToast('Link copiato negli appunti! QR scaricato.');
            }
          } catch(e) {}
          this.downloadQR();
        }
      }
    } catch (err) {
      console.error('Share failed', err);
      this.downloadQR();
    }
  }

  closeQR() {
    this.qrCodeImage = null;
  }

  async showToast(message: string) {
    const toast = await this.toastCtrl.create({
      message,
      duration: 2000,
      color: 'success'
    });
    await toast.present();
  }

  getCommunitySongNumber(song: any): string | null {
    if (!this.comunitaService.comunitaCode() || !this.comunitaService.isFilterActive()) return null;
    const cantiInfo = this.comunitaService.comunitaCantiInfo();
    const info = cantiInfo.find(x => x.id_canti === song.id_canti || x.id_canti === Number(song.id));
    return info && info.num_canto ? info.num_canto.toString() : null;
  }

  getMySongNumber(song: any): number {
    if (!song || !song.id) return 0;
    const index = this.myCantiService.myCanti().findIndex(c => c.id === song.id);
    return index !== -1 ? index + 1 : 0;
  }
}