library/apps/frontend/src/app/components/activity/activity-feed.component.ts

/**
 * @copyright 2026 NHCarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

import { Component, OnInit, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import type { Activity } from '@library/shared-types';
import { ActivityType } from '@library/shared-types';
import { ActivityService } from '../../services/activity.service';
import { SanitizeService } from '../../services/sanitize.service';

@Component({
  selector: 'app-activity-feed',
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `
    <div class="activity-container">
      <h1>Recent Activity</h1>
      <p class="subtitle">See what's happening in the library community</p>

      @if (loading()) {
        <p class="loading">Loading activities...</p>
      } @else if (activities().length === 0) {
        <p class="no-activities">No recent activity to display.</p>
      } @else {
        <div class="activity-feed">
          @for (activity of activities(); track activity.id) {
            <div class="activity-card">
              <div class="activity-header">
                <div class="user-info">
                  @if (activity.user.avatar) {
                    <img [src]="activity.user.avatar" [alt]="activity.user.username" class="user-avatar">
                  } @else {
                    <div class="user-avatar-placeholder">
                      {{ activity.user.username.charAt(0).toUpperCase() }}
                    </div>
                  }
                  <div class="user-details">
                    <a
                      [routerLink]="['/profile', activity.user.slug || activity.user.id]"
                      class="username"
                    >
                      {{ activity.user.username }}
                    </a>
                    @if (activity.user.primaryBadge) {
                      <span class="badge badge-{{ activity.user.primaryBadge.toLowerCase() }}">
                        {{ activity.user.primaryBadge }}
                      </span>
                    }
                    @if (activity.user.isStaff && !activity.user.primaryBadge) {
                      <span class="badge badge-staff">STAFF</span>
                    }
                    @if (activity.user.isMod && !activity.user.primaryBadge) {
                      <span class="badge badge-mod">MOD</span>
                    }
                    @if (activity.user.isVip && !activity.user.primaryBadge) {
                      <span class="badge badge-vip">VIP</span>
                    }
                  </div>
                </div>
                <span class="timestamp">{{ formatTime(activity.createdAt) }}</span>
              </div>

              <div class="activity-content">
                @switch (activity.type) {
                  @case (ActivityType.suggestion) {
                    <div class="activity-suggestion">
                      <span class="activity-icon">💡</span>
                      <span class="activity-text">
                        suggested
                        <strong>{{ activity.suggestionTitle }}</strong>
                        <span class="status-badge status-{{ activity.status.toLowerCase() }}">
                          {{ formatStatus(activity.status) }}
                        </span>
                      </span>
                    </div>
                  }
                  @case (ActivityType.like) {
                    <div class="activity-like">
                      <span class="activity-icon">❤️</span>
                      <span class="activity-text">
                        liked
                        <a [routerLink]="['/' + activity.entityType + 's', activity.entityId]" class="entity-link">
                          {{ activity.entityTitle }}
                        </a>
                      </span>
                    </div>
                  }
                  @case (ActivityType.comment) {
                    <div class="activity-comment">
                      <div class="activity-comment-header">
                        <span class="activity-icon">💬</span>
                        <span class="activity-text">
                          commented on
                          <a [routerLink]="['/' + activity.entityType + 's', activity.entityId]" class="entity-link">
                            {{ activity.entityTitle }}
                          </a>
                        </span>
                      </div>
                      <div class="comment-preview" [innerHTML]="sanitizeService.sanitizeHtml(activity.commentPreview)"></div>
                    </div>
                  }
                  @case (ActivityType.achievement) {
                    <div class="activity-achievement">
                      <span class="activity-icon">{{ activity.achievementIcon }}</span>
                      <span class="activity-text">
                        earned the
                        <strong>{{ activity.achievementName }}</strong>
                        achievement
                        <span class="points">({{ activity.achievementPoints }} pts)</span>
                      </span>
                    </div>
                  }
                }
              </div>
            </div>
          }
        </div>

        @if (hasMore()) {
          <div class="load-more-container">
            <button (click)="loadMore()" class="btn btn-primary" [disabled]="loadingMore()">
              {{ loadingMore() ? 'Loading...' : 'Load More' }}
            </button>
          </div>
        }
      }
    </div>
  `,
  styles: [`
    .activity-container {
      max-width: 800px;
      margin: 2rem auto;
      padding: 0 1rem;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 0.5rem;
      color: #1f2937;
    }

    .subtitle {
      color: #6b7280;
      margin-bottom: 2rem;
    }

    .loading, .no-activities {
      text-align: center;
      padding: 3rem;
      color: #6b7280;
      font-size: 1.1rem;
    }

    .activity-feed {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .activity-card {
      background: white;
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      border: 1px solid #e5e7eb;
    }

    .activity-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: 1rem;
    }

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

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

    .user-avatar-placeholder {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 1.2rem;
    }

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

    .username {
      font-weight: 600;
      color: #1f2937;
      text-decoration: none;
    }

    .username:hover {
      color: #10b981;
    }

    .badge {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .badge-staff {
      background: #ef4444;
      color: white;
    }

    .badge-mod {
      background: #3b82f6;
      color: white;
    }

    .badge-vip {
      background: #f59e0b;
      color: white;
    }

    .badge-discord {
      background: #5865f2;
      color: white;
    }

    .timestamp {
      font-size: 0.875rem;
      color: #9ca3af;
    }

    .activity-content {
      padding-left: 55px;
    }

    .activity-suggestion,
    .activity-like,
    .activity-comment-header,
    .activity-achievement {
      display: flex;
      align-items: start;
      gap: 0.75rem;
    }

    .activity-comment {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .activity-icon {
      font-size: 1.5rem;
      line-height: 1;
    }

    .activity-text {
      color: #4b5563;
      line-height: 1.6;
    }

    .activity-text strong {
      color: #1f2937;
      font-weight: 600;
    }

    .entity-link {
      color: #10b981;
      text-decoration: none;
      font-weight: 500;
    }

    .entity-link:hover {
      text-decoration: underline;
    }

    .comment-preview {
      margin-top: 0.5rem;
      margin-left: 55px;
      padding: 0.75rem;
      background: #f9fafb;
      border-left: 3px solid #10b981;
      border-radius: 4px;
      color: #4b5563;
    }

    .status-badge {
      display: inline-block;
      padding: 0.125rem 0.5rem;
      border-radius: 4px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-left: 0.5rem;
    }

    .status-unreviewed {
      background: #fef3c7;
      color: #92400e;
    }

    .status-accepted {
      background: #d1fae5;
      color: #065f46;
    }

    .status-declined {
      background: #fee2e2;
      color: #991b1b;
    }

    .points {
      color: #10b981;
      font-weight: 600;
      margin-left: 0.25rem;
    }

    .load-more-container {
      display: flex;
      justify-content: center;
      margin-top: 2rem;
    }

    .btn {
      padding: 0.75rem 1.5rem;
      border: none;
      border-radius: 6px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-primary {
      background: #10b981;
      color: white;
    }

    .btn-primary:hover:not(:disabled) {
      background: #059669;
    }

    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  `]
})
export class ActivityFeedComponent implements OnInit {
  private activityService = inject(ActivityService);
  public sanitizeService = inject(SanitizeService);

  // Make ActivityType accessible in template
  ActivityType = ActivityType;

  activities = signal<Activity[]>([]);
  loading = signal(true);
  loadingMore = signal(false);
  hasMore = signal(false);
  offset = 0;
  limit = 50;

  ngOnInit() {
    this.loadActivities();
  }

  loadActivities() {
    this.activityService.getActivityFeed(this.limit, this.offset).subscribe({
      next: (response) => {
        this.activities.set(response.activities);
        this.hasMore.set(response.hasMore);
        this.loading.set(false);
      },
      error: () => {
        this.loading.set(false);
      }
    });
  }

  loadMore() {
    this.loadingMore.set(true);
    this.offset += this.limit;

    this.activityService.getActivityFeed(this.limit, this.offset).subscribe({
      next: (response) => {
        this.activities.update(current => [...current, ...response.activities]);
        this.hasMore.set(response.hasMore);
        this.loadingMore.set(false);
      },
      error: () => {
        this.loadingMore.set(false);
      }
    });
  }

  formatTime(date: Date): string {
    const now = new Date();
    const activityDate = new Date(date);
    const diffMs = now.getTime() - activityDate.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);

    if (diffMins < 1) return 'just now';
    if (diffMins < 60) return `${diffMins}m ago`;
    if (diffHours < 24) return `${diffHours}h ago`;
    if (diffDays < 7) return `${diffDays}d ago`;
    return activityDate.toLocaleDateString();
  }

  formatStatus(status: string): string {
    switch (status) {
      case 'UNREVIEWED': return 'Pending';
      case 'ACCEPTED': return 'Accepted';
      case 'DECLINED': return 'Declined';
      default: return status;
    }
  }
}