import { Component, OnInit, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApiService } from '../../core/services/api.service';

@Component({
  selector: 'app-ssl',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="px-4 sm:px-0">
      <h1 class="text-3xl font-bold text-gray-900 mb-8">SSL Certificates</h1>

      @if (certificates().length > 0) {
        <div class="card overflow-hidden p-0">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Domain</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Issuer</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Expiry</th>
                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase">Actions</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              @for (cert of certificates(); track cert.domain) {
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ cert.domain }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ cert.issuer }}</td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm">
                    <span [ngClass]="isExpiringSoon(cert.expiryDate) ? 'text-red-600' : 'text-gray-500'">
                      {{ formatDate(cert.expiryDate) }}
                    </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm">
                    <button (click)="renewCertificate(cert)" class="text-primary-600 hover:text-primary-900">Renew</button>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      } @else {
        <div class="card text-center py-12">
          <p class="text-gray-500">No SSL certificates</p>
          <p class="text-sm text-gray-400 mt-2">Certificates are obtained automatically when deploying services with domains</p>
        </div>
      }
    </div>
  `,
})
export class SslComponent implements OnInit {
  private apiService = inject(ApiService);
  certificates = signal<any[]>([]);

  ngOnInit(): void {
    this.loadCertificates();
  }

  loadCertificates(): void {
    this.apiService.getSslCertificates().subscribe({
      next: (response) => {
        if (response.success && response.data) {
          this.certificates.set(response.data);
        }
      },
    });
  }

  renewCertificate(cert: any): void {
    this.apiService.renewSslCertificate(cert.domain).subscribe({
      next: () => {
        alert('Certificate renewal initiated');
        this.loadCertificates();
      },
    });
  }

  formatDate(timestamp: number): string {
    return new Date(timestamp).toLocaleDateString();
  }

  isExpiringSoon(timestamp: number): boolean {
    const thirtyDays = 30 * 24 * 60 * 60 * 1000;
    return timestamp - Date.now() < thirtyDays;
  }
}