library/apps/frontend/src/app/components/report-modal/report-modal.component.ts

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

import { Component, inject, signal, input, output, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ReportService } from '../../services/report.service';
import { CommentReportService } from '../../services/comment-report.service';
import { ToastService } from '../../services/toast.service';
import { ReportReason } from '@library/shared-types';

@Component({
  selector: 'app-report-modal',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <div class="modal-overlay" (click)="onOverlayClick($event)" (keydown.escape)="onClose()" tabindex="-1" role="presentation">
      <div class="modal-card" role="dialog" aria-labelledby="modal-title" aria-modal="true" tabindex="-1">
        <div class="modal-header">
          <h2 id="modal-title">{{ modalTitle() }}</h2>
          <button
            class="close-button"
            (click)="onClose()"
            aria-label="Close modal"
            type="button"
          >
            ×
          </button>
        </div>

        <div class="modal-body">
          <p class="report-info">
            {{ reportInfo() }}
          </p>

          <form (ngSubmit)="onSubmit()" #reportForm="ngForm">
            <div class="form-group">
              <label for="reason">Reason *</label>
              <select
                id="reason"
                name="reason"
                [(ngModel)]="selectedReason"
                required
                class="form-control"
                aria-required="true"
              >
                <option value="" disabled>Select a reason</option>
                <option [value]="ReportReason.INAPPROPRIATE_CONTENT">Inappropriate Content</option>
                <option [value]="ReportReason.HARASSMENT">Harassment</option>
                <option [value]="ReportReason.SPAM">Spam</option>
                <option [value]="ReportReason.IMPERSONATION">Impersonation</option>
                <option [value]="ReportReason.OFFENSIVE_NAME">Offensive Name</option>
                <option [value]="ReportReason.MALICIOUS_LINKS">Malicious Links</option>
                <option [value]="ReportReason.OTHER">Other</option>
              </select>
            </div>

            <div class="form-group">
              <label for="details">Details *</label>
              <textarea
                id="details"
                name="details"
                [(ngModel)]="details"
                required
                minlength="10"
                maxlength="1000"
                rows="5"
                class="form-control"
                placeholder="Please provide specific details about why you are reporting this profile (10-1000 characters)"
                aria-required="true"
                [attr.aria-invalid]="detailsInvalid()"
              ></textarea>
              <div class="character-count" [class.invalid]="detailsInvalid()">
                {{ details().length }} / 1000 characters
                @if (details().length < 10 && details().length > 0) {
                  <span class="error-text">(minimum 10 characters)</span>
                }
              </div>
            </div>

            <div class="modal-footer">
              <button
                type="button"
                class="button button-secondary"
                (click)="onClose()"
                [disabled]="submitting()"
              >
                Cancel
              </button>
              <button
                type="submit"
                class="button button-danger"
                [disabled]="!reportForm.valid || submitting()"
              >
                @if (submitting()) {
                  <span>Submitting...</span>
                } @else {
                  <span>Submit Report</span>
                }
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 1rem;
    }

    .modal-card {
      background: var(--card-background, #1a1a2e);
      border-radius: 12px;
      width: 100%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      border-bottom: 2px solid rgba(155, 89, 182, 0.3);
    }

    .modal-header h2 {
      margin: 0;
      color: var(--accent-colour, #9b59b6);
      font-size: 1.5rem;
    }

    .close-button {
      background: none;
      border: none;
      font-size: 2rem;
      color: var(--text-colour, #e0e0e0);
      cursor: pointer;
      padding: 0;
      width: 2rem;
      height: 2rem;
      line-height: 1;
      transition: color 0.2s ease;
    }

    .close-button:hover {
      color: var(--accent-colour, #9b59b6);
    }

    .modal-body {
      padding: 1.5rem;
    }

    .report-info {
      margin: 0 0 1.5rem 0;
      color: var(--text-colour, #e0e0e0);
      line-height: 1.6;
    }

    .report-info strong {
      color: var(--accent-colour, #9b59b6);
    }

    .form-group {
      margin-bottom: 1.5rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--text-colour, #e0e0e0);
      font-weight: 500;
    }

    .form-control {
      width: 100%;
      padding: 0.75rem;
      background: rgba(155, 89, 182, 0.1);
      border: 2px solid rgba(155, 89, 182, 0.3);
      border-radius: 8px;
      color: var(--text-colour, #e0e0e0);
      font-size: 1rem;
      font-family: inherit;
      transition: border-color 0.2s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: var(--accent-colour, #9b59b6);
    }

    .form-control:invalid:not(:focus):not(:placeholder-shown) {
      border-color: var(--error-colour, #c41e3a);
    }

    textarea.form-control {
      resize: vertical;
      min-height: 120px;
    }

    select.form-control {
      cursor: pointer;
      appearance: none;
      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 10l5 5 5-5z"/></svg>');
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 1.5rem;
      padding-right: 2.5rem;
    }

    select.form-control option {
      background: #2d2d2d;
      color: #e0e0e0;
      padding: 0.5rem;
    }

    .character-count {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      color: var(--text-muted, #a0a0a0);
      text-align: right;
    }

    .character-count.invalid {
      color: var(--error-colour, #c41e3a);
    }

    .error-text {
      color: var(--error-colour, #c41e3a);
      margin-left: 0.5rem;
    }

    .modal-footer {
      display: flex;
      justify-content: flex-end;
      gap: 1rem;
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 2px solid rgba(155, 89, 182, 0.3);
    }

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

    .button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .button-secondary {
      background: rgba(155, 89, 182, 0.2);
      color: var(--text-colour, #e0e0e0);
      border: 2px solid rgba(155, 89, 182, 0.3);
    }

    .button-secondary:hover:not(:disabled) {
      background: rgba(155, 89, 182, 0.3);
      border-color: var(--accent-colour, #9b59b6);
    }

    .button-danger {
      background: linear-gradient(135deg, #c41e3a 0%, #e74c3c 100%);
      color: white;
    }

    .button-danger:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(196, 30, 58, 0.4);
    }
  `]
})
export class ReportModalComponent {
  private reportService = inject(ReportService);
  private commentReportService = inject(CommentReportService);
  private toastService = inject(ToastService);

  // Inputs
  reportType = input.required<'profile' | 'comment'>();
  targetId = input.required<string>(); // userId for profile, commentId for comment
  reportedUsername = input<string>(''); // Only used for profile reports

  // Outputs
  closeModal = output<void>();

  // State
  selectedReason = signal<string>('');
  details = signal<string>('');
  submitting = signal<boolean>(false);

  // Computed values
  modalTitle = computed(() => {
    return this.reportType() === 'profile' ? 'Report Profile' : 'Report Comment';
  });

  reportInfo = computed(() => {
    if (this.reportType() === 'profile') {
      return `You are reporting ${this.reportedUsername()}. Please provide a reason and details for this report.`;
    } else {
      return 'You are reporting this comment. Please provide a reason and details for this report.';
    }
  });

  // Expose enum for template
  ReportReason = ReportReason;

  /**
   * Check if details are invalid (less than 10 characters or more than 1000).
   */
  detailsInvalid(): boolean {
    const length = this.details().length;
    return (length > 0 && length < 10) || length > 1000;
  }

  /**
   * Handle overlay click to close modal.
   */
  onOverlayClick(event: MouseEvent): void {
    if ((event.target as HTMLElement).classList.contains('modal-overlay')) {
      this.onClose();
    }
  }

  /**
   * Close the modal.
   */
  onClose(): void {
    this.closeModal.emit();
  }

  /**
   * Submit the report.
   */
  onSubmit(): void {
    // Validate form
    if (!this.selectedReason() || this.detailsInvalid()) {
      this.toastService.error('Please fill in all required fields correctly');
      return;
    }

    this.submitting.set(true);

    if (this.reportType() === 'profile') {
      this.reportService.createReport(
        this.targetId(),
        this.selectedReason(),
        this.details()
      ).subscribe(this.getSubscribeHandlers());
    } else {
      this.commentReportService.createReport({
        reportedCommentId: this.targetId(),
        reason: this.selectedReason() as ReportReason,
        details: this.details(),
      }).subscribe(this.getSubscribeHandlers());
    }
  }

  private getSubscribeHandlers() {
    return {
      next: () => {
        this.toastService.success('Report submitted successfully');
        this.onClose();
      },
      error: (err: { status?: number; error?: { error?: string } }) => {
        console.error('Error submitting report:', err);
        // Check if it's a conflict error (duplicate pending report or rate limit)
        if (err.status === 409 && err.error?.error) {
          this.toastService.error(err.error.error);
        } else {
          this.toastService.error('Failed to submit report. Please try again.');
        }
        this.submitting.set(false);
      }
    };
  }
}