import { CommonModule } from '@angular/common';
import { Component, computed, inject } from '@angular/core';
import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { AuthService } from '../../core/services/auth.service';

type MenuItem = {
  label: string;
  path: string;
  hint: string;
};

@Component({
  selector: 'app-main-layout',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <div class="layout">
      <div class="backdrop"></div>

      <aside class="sidebar shell">
        <div class="brand-card">
          <div class="logo-circle">
            <img src="/assets/logo-learning.png" alt="Logo sistema" />
          </div>
          <div>
            <strong>INNOVATECH SEMILLERO</strong>
            <small>Plataforma INVIMA</small>
          </div>
        </div>

        <div class="user-card">
          <span class="avatar">{{ initials() }}</span>
          <div>
            <strong>{{ auth.user()?.fullName }}</strong>
            <small>{{ auth.user()?.role }}</small>
          </div>
        </div>

        <nav>
          <a *ngFor="let item of menu" [routerLink]="item.path" routerLinkActive="active" class="nav-item">
            <span>{{ item.label }}</span>
            <small>{{ item.hint }}</small>
          </a>
        </nav>

        <button type="button" (click)="logout()">Cerrar sesion</button>
      </aside>

      <main class="content shell">
        <router-outlet />
      </main>
    </div>
  `,
  styles: `
    .layout {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 320px minmax(0, 1fr);
      gap: 18px;
      padding: 20px;
      position: relative;
    }

    .backdrop {
      position: fixed;
      inset: 0;
      background:
        linear-gradient(0deg, rgba(217, 217, 222, 0.82), rgba(217, 217, 222, 0.82)),
        url('/assets/fondo-learning.jpg') center/cover no-repeat;
      z-index: -1;
    }

    .shell {
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      background: var(--color-shell);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(4px);
    }

    .sidebar {
      padding: 18px;
      display: grid;
      gap: 16px;
      align-content: start;
      min-height: calc(100vh - 40px);
    }

    .brand-card {
      border-radius: 18px;
      background: var(--color-card);
      border: 1px solid var(--color-border);
      padding: 14px;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
    }

    .logo-circle {
      width: 72px;
      height: 72px;
      border-radius: 20px;
      border: 2px solid #fff;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(30, 38, 52, 0.18);
    }

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

    .brand-card strong {
      color: var(--color-primary);
      font-family: var(--font-display);
      font-size: 1.05rem;
      line-height: 1.25;
      display: block;
    }

    .brand-card small {
      color: var(--color-muted);
      margin-top: 6px;
      display: block;
      font-size: 0.9rem;
    }

    .user-card {
      border-radius: 16px;
      background: var(--color-card);
      border: 1px solid var(--color-border);
      padding: 12px;
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
    }

    .avatar {
      width: 56px;
      height: 56px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: var(--color-primary);
      color: #fff;
      font-weight: 800;
      font-size: 1.5rem;
      box-shadow: 0 8px 20px rgba(32, 178, 170, 0.35);
    }

    .user-card strong {
      display: block;
      font-size: 1rem;
      color: var(--color-ink);
    }

    .user-card small {
      display: block;
      margin-top: 3px;
      color: #61758f;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

    nav {
      display: grid;
      gap: 7px;
    }

    .nav-item {
      text-decoration: none;
      border-radius: 14px;
      border: 1px solid transparent;
      padding: 10px 12px;
      display: grid;
      gap: 2px;
      color: var(--color-ink);
      transition: 0.18s ease;
    }

    .nav-item span {
      font-size: 1.04rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .nav-item small {
      font-size: 0.78rem;
      color: #61758f;
    }

    .nav-item:hover {
      background: rgba(255, 255, 255, 0.65);
      border-color: rgba(255, 255, 255, 0.65);
    }

    .nav-item.active {
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary-strong));
      color: #fff;
      box-shadow: 0 10px 24px rgba(32, 178, 170, 0.26);
    }

    .nav-item.active small {
      color: rgba(255, 255, 255, 0.85);
    }

    button {
      margin-top: auto;
      border: 1px solid rgba(32, 178, 170, 0.28);
      border-radius: 14px;
      background: #fff;
      color: var(--color-primary-strong);
      font-weight: 700;
      padding: 11px 13px;
      cursor: pointer;
      transition: 0.16s ease;
    }

    button:hover {
      background: var(--color-primary-soft);
      border-color: rgba(32, 178, 170, 0.5);
    }

    .content {
      min-height: calc(100vh - 40px);
      padding: 22px;
      display: grid;
      align-content: start;
    }

    @media (max-width: 1100px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .sidebar,
      .content {
        min-height: auto;
      }
    }
  `
})
export class MainLayoutComponent {
  readonly auth = inject(AuthService);
  private readonly router = inject(Router);

  readonly menu: MenuItem[] = [
    { label: 'Dashboard', path: '/dashboard', hint: 'Resumen general' },
    { label: 'Catalogo INVIMA', path: '/catalogo', hint: 'Consulta avanzada' },
    { label: 'Sincronizacion', path: '/sincronizacion', hint: 'Actualizar datasets' }
  ];

  readonly initials = computed(() => {
    const name = this.auth.user()?.fullName || this.auth.user()?.username || 'U';
    return name.charAt(0).toUpperCase();
  });

  logout() {
    this.auth.logout().subscribe({
      next: () => this.router.navigate(['/login']),
      error: () => {
        this.auth.clearSession();
        this.router.navigate(['/login']);
      }
    });
  }
}

