import { Component, inject, signal, OnInit } from '@angular/core';
import { CommonModule, DatePipe } from '@angular/common';
import { ActivatedRoute, Router } from '@angular/router';
import { NzCardModule } from 'ng-zorro-antd/card';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzTagModule } from 'ng-zorro-antd/tag';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
import { ApiService } from '../../../core/services/api.service';
import { AuthService } from '../../../core/services/auth.service';
import { NotificationService } from '../../../core/services/notification.service';
import { SettingsService } from '../../../core/services/settings.service';
import { Client, ClientType, getClientTypeIcon } from '../../../core/models';
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
import { MetadataGridComponent, MetadataValueComponent } from '../../../shared/components/metadata-grid';

@Component({
  selector: 'app-client-detail',
  standalone: true,
  imports: [
    CommonModule,
    DatePipe,
    NzCardModule,
    NzButtonModule,
    NzIconModule,
    NzTagModule,
    NzSpinModule,
    NzPopconfirmModule,
    NzToolTipModule,
    RelativeTimePipe,
    MetadataGridComponent,
    MetadataValueComponent,
  ],
  templateUrl: './client-detail.component.html',
  styleUrl: './client-detail.component.scss'
})
export class ClientDetailComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private apiService = inject(ApiService);
  private authService = inject(AuthService);
  private notification = inject(NotificationService);
  private settingsService = inject(SettingsService);

  client = signal<Client | null>(null);
  loading = signal(true);
  expertMode = this.settingsService.expertMode;

  ngOnInit(): void {
    const clientId = this.route.snapshot.paramMap.get('id');
    if (clientId) {
      this.loadClient(clientId);
    }
  }

  loadClient(clientId: string): void {
    const userId = this.authService.getUserId();
    if (!userId) return;

    this.loading.set(true);
    this.apiService.getClient(userId, clientId).subscribe({
      next: (client) => {
        this.client.set(client);
        this.loading.set(false);
      },
      error: () => {
        this.loading.set(false);
      }
    });
  }

  goBack(): void {
    this.router.navigate(['/clients']);
  }

  getClientIcon(type: ClientType): string {
    return getClientTypeIcon(type);
  }

  getClientTypeLabel(type: ClientType): string {
    switch (type) {
      case 'ANDROID': return 'Android';
      case 'IOS': return 'iOS';
      case 'MACOS': return 'macOS';
      case 'WINDOWS': return 'Windows';
      case 'LINUX': return 'Linux';
      default: return type;
    }
  }

  deleteClient(): void {
    const client = this.client();
    const userId = this.authService.getUserId();
    if (!client || !userId) return;

    this.apiService.deleteClient(userId, client.client_id).subscribe({
      next: () => {
        this.notification.success('Client deleted');
        this.router.navigate(['/clients']);
      }
    });
  }
}