import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-version-edit-dialog',
  standalone: true,
  imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule],
  template: `
    <h2 mat-dialog-title>Manage Versions - {{ data.project.name }}</h2>
    
    <mat-dialog-content>
      <div class="version-management-placeholder">
        <mat-icon>construction</mat-icon>
        <h3>Version Management Coming Soon</h3>
        <p>This feature will allow you to:</p>
        <ul>
          <li>Create new versions from existing ones</li>
          <li>Edit unpublished versions</li>
          <li>Publish versions to production</li>
          <li>Compare versions side by side</li>
          <li>Manage intents and parameters</li>
        </ul>
      </div>
    </mat-dialog-content>
    
    <mat-dialog-actions align="end">
      <button mat-button (click)="close()">Close</button>
    </mat-dialog-actions>
  `,
  styles: [`
    mat-dialog-content {
      min-width: 600px;
      min-height: 400px;
    }

    .version-management-placeholder {
      text-align: center;
      padding: 60px 20px;

      mat-icon {
        font-size: 64px;
        width: 64px;
        height: 64px;
        color: #666;
        margin-bottom: 20px;
      }

      h3 {
        color: #333;
        margin-bottom: 16px;
      }

      p {
        color: #666;
        margin-bottom: 20px;
      }

      ul {
        text-align: left;
        max-width: 400px;
        margin: 0 auto;
        color: #666;

        li {
          margin-bottom: 8px;
        }
      }
    }
  `]
})
export default class VersionEditDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<VersionEditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  close() {
    this.dialogRef.close(false);
  }
}