import { Component, OnInit, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AuditLogService } from '../../services/audit.service';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import type { AuditLog, AuditAction, AuditCategory } from '@library/shared-types';

@Component({
  selector: 'app-admin-audit',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="audit-container">
      <h1>Audit Logs</h1>

      @if (!authService.isAuthenticated() || !authService.user()?.isAdmin) {
        <div class="unauthorized">
          <p>You must be an admin to view this page.</p>
        </div>
      } @else {
        <div class="filters">
          <div class="filter-group">
            <label for="category-filter">Category:</label>
            <select
              id="category-filter"
              [(ngModel)]="selectedCategory"
              (change)="loadLogs()"
            >
              <option value="">All Categories</option>
              <option value="AUTH">Authentication</option>
              <option value="CONTENT">Content</option>
              <option value="ADMIN">Administration</option>
              <option value="SECURITY">Security</option>
            </select>
          </div>

          <div class="filter-group">
            <label for="action-filter">Action:</label>
            <select
              id="action-filter"
              [(ngModel)]="selectedAction"
              (change)="loadLogs()"
            >
              <option value="">All Actions</option>
              <option value="LOGIN">Login</option>
              <option value="LOGOUT">Logout</option>
              <option value="LOGIN_FAILED">Login Failed</option>
              <option value="COMMENT_CREATE">Comment Created</option>
              <option value="COMMENT_DELETE">Comment Deleted</option>
              <option value="ENTRY_CREATE">Entry Created</option>
              <option value="ENTRY_UPDATE">Entry Updated</option>
              <option value="ENTRY_DELETE">Entry Deleted</option>
              <option value="USER_BAN">User Banned</option>
              <option value="USER_UNBAN">User Unbanned</option>
              <option value="RATE_LIMIT_EXCEEDED">Rate Limit Exceeded</option>
              <option value="CSRF_VALIDATION_FAILED">CSRF Failed</option>
              <option value="UNAUTHORIZED_ACCESS">Unauthorized Access</option>
            </select>
          </div>

          <div class="filter-group">
            <label for="success-filter">Status:</label>
            <select
              id="success-filter"
              [(ngModel)]="selectedSuccess"
              (change)="loadLogs()"
            >
              <option value="">All</option>
              <option value="true">Success</option>
              <option value="false">Failed</option>
            </select>
          </div>

          <button class="refresh-btn" (click)="loadLogs()">Refresh</button>
        </div>

        @if (loading()) {
          <div class="loading">Loading audit logs...</div>
        } @else if (logs().length === 0) {
          <div class="no-logs">No audit logs found.</div>
        } @else {
          <div class="logs-table-container">
            <table class="logs-table">
              <thead>
                <tr>
                  <th>Time</th>
                  <th>User</th>
                  <th>Category</th>
                  <th>Action</th>
                  <th>Target User</th>
                  <th>Details</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                @for (log of logs(); track log.id) {
                  <tr [class.failed]="!log.success">
                    <td class="time">{{ formatDate(log.createdAt) }}</td>
                    <td class="user-cell">
                      @if (log.user) {
                        <div class="user-info">
                          @if (log.user.avatar) {
                            <img [src]="log.user.avatar" [alt]="log.user.username" class="user-avatar" />
                          }
                          <div class="user-details">
                            <span class="username">{{ log.user.username }}</span>
                            <span class="user-id">{{ log.userId }}</span>
                          </div>
                        </div>
                      } @else if (log.userId) {
                        <span class="user-id-only">{{ log.userId }}</span>
                      } @else {
                        <span class="no-user">-</span>
                      }
                    </td>
                    <td>
                      <span
                        class="category-badge"
                        [style.background-color]="auditService.getCategoryColor(log.category)"
                      >
                        {{ auditService.getCategoryLabel(log.category) }}
                      </span>
                    </td>
                    <td>{{ auditService.getActionLabel(log.action) }}</td>
                    <td class="user-cell">
                      @if (log.targetUser) {
                        <div class="user-info">
                          @if (log.targetUser.avatar) {
                            <img [src]="log.targetUser.avatar" [alt]="log.targetUser.username" class="user-avatar" />
                          }
                          <div class="user-details">
                            <span class="username">{{ log.targetUser.username }}</span>
                            <span class="user-id">{{ log.targetUserId }}</span>
                          </div>
                        </div>
                      } @else if (log.targetUserId) {
                        <span class="user-id-only">{{ log.targetUserId }}</span>
                      } @else {
                        <span class="no-user">-</span>
                      }
                    </td>
                    <td class="details" [class.expanded]="expandedRows()[log.id]" (click)="toggleRowExpand(log.id)">
                      <span class="details-content">{{ log.details ?? '-' }}</span>
                      @if (log.details && log.details.length > 50) {
                        <span class="expand-hint">{{ expandedRows()[log.id] ? '(click to collapse)' : '(click to expand)' }}</span>
                      }
                    </td>
                    <td>
                      <span class="status-badge" [class.success]="log.success" [class.failed]="!log.success">
                        {{ log.success ? '✓' : '✗' }}
                      </span>
                    </td>
                  </tr>
                }
              </tbody>
            </table>
          </div>

          <div class="pagination">
            <button
              [disabled]="currentPage() <= 1"
              (click)="goToPage(currentPage() - 1)"
            >
              Previous
            </button>
            <span>Page {{ currentPage() }} of {{ totalPages() }}</span>
            <button
              [disabled]="currentPage() >= totalPages()"
              (click)="goToPage(currentPage() + 1)"
            >
              Next
            </button>
          </div>
        }
      }
    </div>
  `,
  styles: [`
    .audit-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem;
    }

    h1 {
      color: #2d1b4e;
      margin-bottom: 1.5rem;
    }

    .unauthorized {
      text-align: center;
      padding: 2rem;
      background: #fef2f2;
      border-radius: 8px;
      color: #991b1b;
    }

    .filters {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
      flex-wrap: wrap;
      align-items: flex-end;
      background: rgba(255, 255, 255, 0.8);
      padding: 1rem;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .filter-group label {
      font-size: 0.85rem;
      color: #6b7280;
    }

    .filter-group select {
      padding: 0.5rem;
      border: 1px solid #d1d5db;
      border-radius: 4px;
      min-width: 150px;
    }

    .refresh-btn {
      padding: 0.5rem 1rem;
      background: #8b5cf6;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .refresh-btn:hover {
      background: #7c3aed;
    }

    .loading, .no-logs {
      text-align: center;
      padding: 2rem;
      color: #6b7280;
    }

    .logs-table-container {
      overflow-x: auto;
      background: white;
      border-radius: 8px;
      border: 1px solid #e5e7eb;
    }

    .logs-table {
      width: 100%;
      border-collapse: collapse;
    }

    .logs-table th,
    .logs-table td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid #e5e7eb;
    }

    .logs-table th {
      background: #f9fafb;
      font-weight: 600;
      color: #374151;
    }

    .logs-table tr:hover {
      background: #f9fafb;
    }

    .logs-table tr.failed {
      background: #fef2f2;
    }

    .logs-table tr.failed:hover {
      background: #fee2e2;
    }

    .time {
      white-space: nowrap;
      font-size: 0.85rem;
      color: #6b7280;
    }

    .user-cell {
      min-width: 150px;
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .user-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
    }

    .user-details {
      display: flex;
      flex-direction: column;
    }

    .username {
      font-weight: 500;
      font-size: 0.9rem;
      color: #374151;
    }

    .user-id {
      font-size: 0.7rem;
      color: #9ca3af;
      font-family: monospace;
    }

    .user-id-only {
      font-size: 0.75rem;
      color: #6b7280;
      font-family: monospace;
    }

    .no-user {
      color: #9ca3af;
    }

    .category-badge {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      color: white;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .details {
      max-width: 400px;
      cursor: pointer;
      position: relative;
    }

    .details .details-content {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .details.expanded .details-content {
      white-space: normal;
      word-break: break-word;
    }

    .details .expand-hint {
      display: block;
      font-size: 0.7rem;
      color: #9ca3af;
      margin-top: 0.25rem;
    }

    .details:hover {
      background: #f3f4f6;
    }

    .status-badge {
      display: inline-block;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      text-align: center;
      line-height: 24px;
      font-weight: bold;
    }

    .status-badge.success {
      background: #dcfce7;
      color: #16a34a;
    }

    .status-badge.failed {
      background: #fee2e2;
      color: #dc2626;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
      padding: 1rem;
    }

    .pagination button {
      padding: 0.5rem 1rem;
      background: #8b5cf6;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .pagination button:disabled {
      background: #d1d5db;
      cursor: not-allowed;
    }

    .pagination button:not(:disabled):hover {
      background: #7c3aed;
    }
  `],
})
export class AdminAuditComponent implements OnInit {
  authService = inject(AuthService);
  auditService = inject(AuditLogService);
  private router = inject(Router);

  logs = signal<AuditLog[]>([]);
  loading = signal(true);
  currentPage = signal(1);
  totalPages = signal(1);
  expandedRows = signal<Record<string, boolean>>({});

  selectedCategory = '';
  selectedAction = '';
  selectedSuccess = '';

  ngOnInit() {
    if (!this.authService.isAuthenticated() || !this.authService.user()?.isAdmin) {
      this.router.navigate(['/']);
      return;
    }
    this.loadLogs();
  }

  async loadLogs() {
    this.loading.set(true);
    try {
      const filters: Record<string, unknown> = {
        page: this.currentPage(),
        limit: 50,
      };

      if (this.selectedCategory) {
        filters['category'] = this.selectedCategory as AuditCategory;
      }
      if (this.selectedAction) {
        filters['action'] = this.selectedAction as AuditAction;
      }
      if (this.selectedSuccess !== '') {
        filters['success'] = this.selectedSuccess === 'true';
      }

      const response = await this.auditService.getLogs(filters);
      this.logs.set(response.logs);
      this.totalPages.set(response.totalPages);
    } catch (error) {
      console.error('Failed to load audit logs:', error);
    } finally {
      this.loading.set(false);
    }
  }

  goToPage(page: number) {
    this.currentPage.set(page);
    this.loadLogs();
  }

  formatDate(date: Date | string): string {
    const d = new Date(date);
    return d.toLocaleString();
  }

  toggleRowExpand(logId: string) {
    this.expandedRows.set({
      ...this.expandedRows(),
      [logId]: !this.expandedRows()[logId]
    });
  }
}