import { CommonModule } from '@angular/common';
import { Component, inject, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../../core/services/auth.service';

@Component({
  selector: 'app-login-page',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <section class="login">
      <div class="overlay"></div>

      <article class="card">
        <div class="logo">
          <img src="/assets/logo-learning.png" alt="Logo centro" />
        </div>

        <p class="eyebrow">INNOVATECH SEMILLERO</p>
        <h1>Ingreso del sistema</h1>
        <p class="subtitle">Accede al modulo de consulta INVIMA.</p>

        <form (ngSubmit)="submit()">
          <label>
            Usuario
            <input type="text" name="identifier" [(ngModel)]="identifier" required />
          </label>

          <label>
            Contrasena
            <input type="password" name="password" [(ngModel)]="password" required minlength="6" />
          </label>

          <button type="submit" [disabled]="loading()">
            {{ loading() ? 'Ingresando...' : 'Iniciar sesion' }}
          </button>
        </form>

        <p class="error" *ngIf="error()">{{ error() }}</p>
      </article>
    </section>
  `,
  styles: `
    .login {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 20px;
      position: relative;
      background:
        linear-gradient(0deg, rgba(206, 210, 218, 0.72), rgba(206, 210, 218, 0.72)),
        url('/assets/fondo-learning.jpg') center/cover no-repeat;
      overflow: hidden;
    }

    .overlay {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 18% 24%, rgba(32, 178, 170, 0.23), transparent 40%),
        radial-gradient(circle at 78% 72%, rgba(32, 46, 66, 0.24), transparent 42%);
      pointer-events: none;
    }

    .card {
      width: min(470px, 100%);
      padding: 30px;
      border-radius: 26px;
      border: 1px solid rgba(255, 255, 255, 0.62);
      background: rgba(255, 255, 255, 0.84);
      box-shadow: 0 20px 50px rgba(29, 34, 46, 0.22);
      position: relative;
      z-index: 1;
      display: grid;
      gap: 12px;
    }

    .logo {
      width: 64px;
      height: 64px;
      border-radius: 16px;
      overflow: hidden;
      border: 2px solid #fff;
      box-shadow: 0 10px 24px rgba(30, 38, 52, 0.2);
      background: #fff;
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .eyebrow {
      margin: 0;
      color: var(--color-primary);
      font-family: var(--font-display);
      font-weight: 700;
      letter-spacing: 0.04em;
      font-size: 0.9rem;
    }

    h1 {
      margin: 0;
      color: #1d2535;
      font-family: var(--font-display);
      font-size: 2rem;
      line-height: 1.08;
    }

    .subtitle {
      margin: 0;
      color: #54667f;
      font-size: 0.95rem;
    }

    form {
      margin-top: 4px;
      display: grid;
      gap: 11px;
    }

    label {
      display: grid;
      gap: 6px;
      color: #2b435a;
      font-size: 0.88rem;
      font-weight: 700;
    }

    input {
      border-radius: 12px;
      border: 1px solid rgba(147, 155, 170, 0.55);
      background: rgba(255, 255, 255, 0.92);
      padding: 11px 12px;
      font-size: 0.92rem;
      outline: none;
    }

    input:focus-visible {
      border-color: rgba(32, 178, 170, 0.5);
      box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.12);
    }

    button {
      margin-top: 4px;
      border: 0;
      border-radius: 12px;
      padding: 12px;
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong));
      color: #fff;
      font-size: 0.95rem;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 12px 24px rgba(32, 178, 170, 0.3);
    }

    button:disabled {
      opacity: 0.72;
      cursor: not-allowed;
    }

    .error {
      margin: 0;
      color: #b71717;
      font-size: 0.9rem;
      font-weight: 600;
    }
  `
})
export class LoginPageComponent {
  private readonly auth = inject(AuthService);
  private readonly router = inject(Router);
  private readonly route = inject(ActivatedRoute);

  readonly loading = signal(false);
  readonly error = signal('');

  identifier = '';
  password = '';

  submit() {
    this.loading.set(true);
    this.error.set('');

    this.auth.login(this.identifier, this.password).subscribe({
      next: () => {
        const redirect = this.route.snapshot.queryParamMap.get('redirect');
        this.router.navigateByUrl(redirect || '/dashboard');
      },
      error: (error) => {
        if (error?.status === 0) {
          this.error.set('No hay conexion con backend (puerto 3000). Inicia el servidor API.');
        } else {
          this.error.set(error?.error?.error || 'No fue posible iniciar sesion.');
        }
        this.loading.set(false);
      },
      complete: () => this.loading.set(false)
    });
  }
}

