import { Component, ChangeDetectionStrategy, inject, computed } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { ConnectivityService } from '@core/services';

@Component({
  selector: 'app-connectivity-overlay',
  standalone: true,
  imports: [MatIconModule, MatButtonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (showOverlay()) {
      <div class="overlay" role="alertdialog" aria-modal="true" aria-labelledby="connectivity-title">
        <div class="overlay-content">
          <div class="icon-container">
            <mat-icon class="error-icon">cloud_off</mat-icon>
            <div class="pulse-ring"></div>
          </div>

          <h2 id="connectivity-title">Sin conexión al servidor</h2>

          <p class="error-message">{{ errorMessage() }}</p>

          <div class="details">
            <div class="detail-item">
              <mat-icon>info</mat-icon>
              <span>Verifica que el servidor backend esté en ejecución</span>
            </div>
            <div class="detail-item">
              <mat-icon>terminal</mat-icon>
              <code>cd src/backend && dotnet run --project Host</code>
            </div>
            <div class="detail-item">
              <mat-icon>storage</mat-icon>
              <span>Verifica que SQL Server esté activo</span>
            </div>
          </div>

          <div class="actions">
            <button
              class="btn btn-primary"
              (click)="retry()"
              [disabled]="isChecking()"
            >
              @if (isChecking()) {
                <span class="btn-loading"></span>
                Verificando...
              } @else {
                <mat-icon>refresh</mat-icon>
                Reintentar conexión
              }
            </button>
          </div>

          <p class="auto-retry">
            <mat-icon>schedule</mat-icon>
            Reintentando automáticamente cada 5 segundos...
          </p>
        </div>
      </div>
    }
  `,
  styles: [`
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .overlay-content {
      background: var(--bg-primary, #1c1c1e);
      border: 1px solid var(--border-light, #38383a);
      border-radius: 16px;
      padding: 2.5rem;
      max-width: 480px;
      width: 90%;
      text-align: center;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    }

    .icon-container {
      position: relative;
      display: inline-flex;
      margin-bottom: 1.5rem;
    }

    .error-icon {
      font-size: 64px;
      width: 64px;
      height: 64px;
      color: #ff453a;
    }

    .pulse-ring {
      position: absolute;
      inset: -8px;
      border: 2px solid #ff453a;
      border-radius: 50%;
      animation: pulse 2s ease-out infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }
      100% {
        transform: scale(1.4);
        opacity: 0;
      }
    }

    h2 {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text-primary, #fff);
      margin: 0 0 0.75rem;
    }

    .error-message {
      color: var(--text-secondary, #98989d);
      margin-bottom: 1.5rem;
      font-size: 0.9375rem;
      line-height: 1.5;
    }

    .details {
      background: var(--bg-secondary, #2c2c2e);
      border-radius: 12px;
      padding: 1rem;
      margin-bottom: 1.5rem;
      text-align: left;
    }

    .detail-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.625rem 0;
      color: var(--text-secondary, #98989d);
      font-size: 0.875rem;

      &:not(:last-child) {
        border-bottom: 1px solid var(--border-light, #38383a);
      }

      mat-icon {
        font-size: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
        color: var(--text-tertiary, #636366);
        flex-shrink: 0;
      }

      code {
        background: var(--bg-tertiary, #3a3a3c);
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.8125rem;
        color: #ff9f0a;
        word-break: break-all;
      }
    }

    .actions {
      margin-bottom: 1rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 8px;
      font-size: 0.9375rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-primary {
      background: #007aff;
      color: white;

      &:hover:not(:disabled) {
        background: #0056b3;
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }

    .btn-loading {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .auto-retry {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      color: var(--text-tertiary, #636366);
      font-size: 0.8125rem;
      margin: 0;

      mat-icon {
        font-size: 1rem;
        width: 1rem;
        height: 1rem;
      }
    }
  `],
})
export class ConnectivityOverlayComponent {
  private connectivity = inject(ConnectivityService);

  showOverlay = computed(() => !this.connectivity.state().isConnected);
  isChecking = computed(() => this.connectivity.state().checking);
  errorMessage = computed(() =>
    this.connectivity.state().error || 'No se pudo establecer conexión con el servidor'
  );

  retry(): void {
    this.connectivity.checkHealth();
  }
}
