import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatTableModule } from '@angular/material/table';
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

interface DocumentVersion {
  id: string;
  version: number;
  fileHash: string;
  uploadedAt: string;
  uploadedBy: string;
  changes?: string;
}

interface DepartmentReview {
  departmentCode: string;
  departmentName: string;
  reviewedAt: string;
  reviewedBy: string;
  status: 'APPROVED' | 'REJECTED' | 'PENDING';
  comments?: string;
}

interface Document {
  id: string;
  name: string;
  type: string;
  size: number;
  fileHash: string;
  ipfsHash?: string;
  url: string;
  thumbnailUrl?: string;
  uploadedAt: string;
  uploadedBy: string;
  currentVersion: number;
  versions?: DocumentVersion[];
  departmentReviews?: DepartmentReview[];
  metadata?: {
    mimeType: string;
    width?: number;
    height?: number;
    pages?: number;
  };
}

@Component({
  selector: 'app-document-viewer',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    MatButtonModule,
    MatIconModule,
    MatChipsModule,
    MatTooltipModule,
    MatExpansionModule,
    MatTableModule,
    MatDialogModule,
    MatProgressSpinnerModule,
  ],
  template: `
    <div class="document-viewer">
      <div class="documents-grid" *ngIf="documents && documents.length > 0">
        <mat-card *ngFor="let doc of documents" class="document-card">
          <!-- Document Thumbnail/Icon -->
          <div class="document-thumbnail" [class.has-thumbnail]="doc.thumbnailUrl" (click)="previewDocument(doc)">
            <img *ngIf="doc.thumbnailUrl" [src]="doc.thumbnailUrl" [alt]="doc.name" />
            <div *ngIf="!doc.thumbnailUrl" class="document-icon">
              <mat-icon>{{ getFileIcon(doc.type) }}</mat-icon>
              <span class="file-extension">{{ getFileExtension(doc.name) }}</span>
            </div>
            <div class="preview-overlay">
              <mat-icon>visibility</mat-icon>
              <span>Preview</span>
            </div>
          </div>

          <!-- Document Info -->
          <mat-card-content>
            <div class="document-header">
              <h3 class="document-name" [matTooltip]="doc.name">{{ doc.name }}</h3>
              <mat-chip class="version-chip">v{{ doc.currentVersion }}</mat-chip>
            </div>

            <div class="document-meta">
              <div class="meta-item">
                <mat-icon>storage</mat-icon>
                <span>{{ formatFileSize(doc.size) }}</span>
              </div>
              <div class="meta-item">
                <mat-icon>schedule</mat-icon>
                <span>{{ doc.uploadedAt | date:'short' }}</span>
              </div>
            </div>

            <!-- Document Hash -->
            <div class="document-hash" *ngIf="doc.fileHash">
              <div class="hash-label">
                <mat-icon>fingerprint</mat-icon>
                <span>File Hash:</span>
              </div>
              <code class="hash-value" [matTooltip]="doc.fileHash">
                {{ doc.fileHash | slice:0:16 }}...{{ doc.fileHash | slice:-12 }}
              </code>
              <button mat-icon-button (click)="copyToClipboard(doc.fileHash)" matTooltip="Copy hash">
                <mat-icon>content_copy</mat-icon>
              </button>
            </div>

            <!-- IPFS Hash -->
            <div class="document-hash" *ngIf="doc.ipfsHash">
              <div class="hash-label">
                <mat-icon>cloud</mat-icon>
                <span>IPFS:</span>
              </div>
              <code class="hash-value" [matTooltip]="doc.ipfsHash">
                {{ doc.ipfsHash | slice:0:16 }}...{{ doc.ipfsHash | slice:-12 }}
              </code>
            </div>

            <!-- Department Reviews -->
            <div class="department-reviews" *ngIf="doc.departmentReviews && doc.departmentReviews.length > 0">
              <div class="reviews-header">
                <mat-icon>fact_check</mat-icon>
                <span>Department Reviews</span>
              </div>
              <div class="reviews-list">
                <div *ngFor="let review of doc.departmentReviews" class="review-item">
                  <div class="review-dept">{{ review.departmentName }}</div>
                  <mat-chip
                    [style.background-color]="getReviewStatusColor(review.status)"
                    [style.color]="'white'"
                  >
                    {{ review.status }}
                  </mat-chip>
                </div>
              </div>
            </div>

            <!-- Action Buttons -->
            <div class="document-actions">
              <button mat-button color="primary" (click)="downloadDocument(doc)">
                <mat-icon>download</mat-icon>
                Download
              </button>
              <button mat-button (click)="previewDocument(doc)">
                <mat-icon>visibility</mat-icon>
                Preview
              </button>
              <button
                mat-button
                *ngIf="doc.versions && doc.versions.length > 1"
                (click)="viewVersionHistory(doc)"
              >
                <mat-icon>history</mat-icon>
                History ({{ doc.versions.length }})
              </button>
            </div>

            <!-- Version History (Expandable) -->
            <mat-expansion-panel *ngIf="doc.versions && doc.versions.length > 1" class="version-history">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <mat-icon>history</mat-icon>
                  Version History ({{ doc.versions.length }} versions)
                </mat-panel-title>
              </mat-expansion-panel-header>

              <table mat-table [dataSource]="doc.versions" class="version-table">
                <ng-container matColumnDef="version">
                  <th mat-header-cell *matHeaderCellDef>Version</th>
                  <td mat-cell *matCellDef="let version">
                    <strong>v{{ version.version }}</strong>
                  </td>
                </ng-container>

                <ng-container matColumnDef="uploadedAt">
                  <th mat-header-cell *matHeaderCellDef>Date</th>
                  <td mat-cell *matCellDef="let version">
                    {{ version.uploadedAt | date:'short' }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="uploadedBy">
                  <th mat-header-cell *matHeaderCellDef>Uploaded By</th>
                  <td mat-cell *matCellDef="let version">
                    {{ version.uploadedBy }}
                  </td>
                </ng-container>

                <ng-container matColumnDef="fileHash">
                  <th mat-header-cell *matHeaderCellDef>Hash</th>
                  <td mat-cell *matCellDef="let version">
                    <code class="small-hash">{{ version.fileHash | slice:0:8 }}...</code>
                  </td>
                </ng-container>

                <ng-container matColumnDef="actions">
                  <th mat-header-cell *matHeaderCellDef>Actions</th>
                  <td mat-cell *matCellDef="let version">
                    <button mat-icon-button (click)="downloadVersion(doc, version)" matTooltip="Download this version">
                      <mat-icon>download</mat-icon>
                    </button>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="versionColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: versionColumns"></tr>
              </table>
            </mat-expansion-panel>
          </mat-card-content>
        </mat-card>
      </div>

      <!-- No Documents Message -->
      <div *ngIf="!documents || documents.length === 0" class="no-documents">
        <mat-icon>folder_open</mat-icon>
        <p>No documents uploaded</p>
      </div>
    </div>
  `,
  styles: [
    `
      .document-viewer {
        padding: 16px 0;
      }

      .documents-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
      }

      .document-card {
        display: flex;
        flex-direction: column;
        transition: transform 0.2s, box-shadow 0.2s;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }
      }

      .document-thumbnail {
        position: relative;
        width: 100%;
        height: 180px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;

        &.has-thumbnail {
          background: #f5f5f5;
        }

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

        .document-icon {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 8px;
          color: white;

          mat-icon {
            font-size: 64px;
            width: 64px;
            height: 64px;
          }

          .file-extension {
            font-size: 1.25rem;
            font-weight: 600;
            text-transform: uppercase;
          }
        }

        .preview-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.7);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 8px;
          opacity: 0;
          transition: opacity 0.2s;
          color: white;

          mat-icon {
            font-size: 48px;
            width: 48px;
            height: 48px;
          }
        }

        &:hover .preview-overlay {
          opacity: 1;
        }
      }

      mat-card-content {
        padding: 16px !important;
      }

      .document-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

      .document-name {
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
      }

      .version-chip {
        flex-shrink: 0;
        background-color: #e3f2fd !important;
        color: #1565c0 !important;
        font-weight: 600;
      }

      .document-meta {
        display: flex;
        gap: 16px;
        margin-bottom: 12px;
      }

      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.875rem;
        color: #666;

        mat-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;
        }
      }

      .document-hash {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px;
        background-color: #f5f5f5;
        border-radius: 4px;
        margin-bottom: 8px;

        .hash-label {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 0.75rem;
          font-weight: 500;
          color: #666;

          mat-icon {
            font-size: 16px;
            width: 16px;
            height: 16px;
          }
        }

        .hash-value {
          flex: 1;
          font-family: monospace;
          font-size: 0.75rem;
          background-color: white;
          padding: 4px 8px;
          border-radius: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        button {
          flex-shrink: 0;
        }
      }

      .department-reviews {
        margin: 16px 0;
        padding: 12px;
        background-color: #f5f5f5;
        border-radius: 4px;
      }

      .reviews-header {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 12px;
        color: #666;

        mat-icon {
          font-size: 18px;
          width: 18px;
          height: 18px;
        }
      }

      .reviews-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .review-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px;
        background-color: white;
        border-radius: 4px;
      }

      .review-dept {
        font-size: 0.875rem;
        font-weight: 500;
        flex: 1;
      }

      .document-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
        flex-wrap: wrap;

        button {
          display: flex;
          align-items: center;
          gap: 6px;
        }
      }

      .version-history {
        margin-top: 16px;
      }

      .version-table {
        width: 100%;
        margin-top: 8px;

        .small-hash {
          font-size: 0.75rem;
        }
      }

      .no-documents {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: #999;

        mat-icon {
          font-size: 64px;
          width: 64px;
          height: 64px;
          margin-bottom: 16px;
        }

        p {
          margin: 0;
          font-size: 1.125rem;
        }
      }
    `,
  ],
})
export class DocumentViewerComponent implements OnInit {
  @Input() documents: Document[] = [];
  @Input() showVersionHistory = true;
  @Input() showDepartmentReviews = true;

  versionColumns = ['version', 'uploadedAt', 'uploadedBy', 'fileHash', 'actions'];

  constructor(private dialog: MatDialog) {}

  ngOnInit(): void {
    // Initialize component
  }

  getFileIcon(type: string): string {
    const iconMap: { [key: string]: string } = {
      pdf: 'picture_as_pdf',
      image: 'image',
      video: 'videocam',
      audio: 'audiotrack',
      document: 'description',
      spreadsheet: 'table_chart',
      presentation: 'slideshow',
      archive: 'archive',
    };
    return iconMap[type] || 'insert_drive_file';
  }

  getFileExtension(filename: string): string {
    const parts = filename.split('.');
    return parts.length > 1 ? parts[parts.length - 1].toUpperCase() : 'FILE';
  }

  formatFileSize(bytes: number): string {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
  }

  getReviewStatusColor(status: string): string {
    const colors: { [key: string]: string } = {
      APPROVED: '#4caf50',
      REJECTED: '#f44336',
      PENDING: '#ff9800',
    };
    return colors[status] || '#757575';
  }

  copyToClipboard(text: string): void {
    navigator.clipboard.writeText(text).then(() => {
      alert('Hash copied to clipboard!');
    });
  }

  downloadDocument(doc: Document): void {
    // Create a temporary link and trigger download
    const link = document.createElement('a');
    link.href = doc.url;
    link.download = doc.name;
    link.click();
  }

  downloadVersion(doc: Document, version: DocumentVersion): void {
    alert(`Downloading version ${version.version} of ${doc.name}`);
    // In real implementation, fetch version-specific URL and download
  }

  previewDocument(doc: Document): void {
    // Open preview dialog or new window
    window.open(doc.url, '_blank');
  }

  viewVersionHistory(doc: Document): void {
    alert(`Version History for ${doc.name}\n\nTotal versions: ${doc.versions?.length}`);
  }
}
