import { Component, Inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatIconModule } from '@angular/material/icon';

interface ModificationRequestData {
  projectId: string;
  projectName: string;
  projectStatus?: string;
}

@Component({
  selector: 'app-modification-request-dialog',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatIconModule
  ],
  template: `
    <h2 mat-dialog-title>申请修改</h2>
    <mat-dialog-content>
      <div class="dialog-content">
        <div class="project-info">
          <p><strong>项目名称:</strong> {{ data.projectName }}</p>
        </div>
        
        <div class="form-group">
          <label for="modification-type">修改类型 *</label>
          <mat-form-field appearance="outline" class="form-field">
            <mat-select [(ngModel)]="modificationType" id="modification-type" name="modificationType" required>
              <mat-option value="content">内容修改</mat-option>
              <mat-option value="design">设计修改</mat-option>
              <mat-option value="time">时间调整</mat-option>
              <mat-option value="other">其他</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="description">修改说明 *</label>
          <mat-form-field appearance="outline" class="form-field">
            <textarea 
              matInput 
              [(ngModel)]="description" 
              id="description" 
              name="description" 
              rows="4" 
              placeholder="请详细描述需要修改的内容..."
              required
            ></textarea>
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="expected-time">期望完成时间</label>
          <mat-form-field appearance="outline" class="form-field">
            <input 
              matInput 
              [(ngModel)]="expectedTime" 
              id="expected-time" 
              name="expectedTime" 
              type="text" 
              placeholder="如：3天内"
            >
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="contact-info">联系人信息</label>
          <p>{{ contactInfo }}</p>
        </div>
      </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">取消</button>
      <button mat-button color="primary" (click)="onSubmit()" [disabled]="!isFormValid()">
        提交申请
      </button>
    </mat-dialog-actions>
  `,
  styles: [`
    .dialog-content {
      padding: 10px 0;
    }
    
    .project-info {
      padding: 12px;
      background-color: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    label {
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
    
    p {
      margin: 0;
      color: rgba(0, 0, 0, 0.6);
    }
    
    .form-field {
      width: 100%;
    }
    
    .mat-mdc-dialog-actions {
      padding: 16px 24px;
    }
  `]
}) 
export class ModificationRequestDialog {
  modificationType: string = '';
  description: string = '';
  expectedTime: string = '';
  contactInfo: string = '客服小李 (电话: 138****6789)';

  constructor(
    public dialogRef: MatDialogRef<ModificationRequestDialog>,
    @Inject(MAT_DIALOG_DATA) public data: ModificationRequestData
  ) {}

  onCancel(): void {
    this.dialogRef.close();
  }

  isFormValid(): boolean {
    return !!this.modificationType && !!this.description.trim();
  }

  onSubmit(): void {
    if (!this.isFormValid()) return;
    
    const formData = {
      projectId: this.data.projectId,
      modificationType: this.modificationType,
      description: this.description,
      expectedTime: this.expectedTime,
      contactInfo: this.contactInfo,
      submittedAt: new Date().toISOString()
    };
    
    this.dialogRef.close({ confirmed: true, data: formData });
  }
}