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 ComplaintWarningData {
  projectId: string;
  projectName: string;
}

@Component({
  selector: 'app-complaint-warning-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="complaint-level">预警等级 *</label>
          <mat-form-field appearance="outline" class="form-field">
            <mat-select [(ngModel)]="complaintLevel" id="complaint-level" name="complaintLevel" required>
              <mat-option value="low">低级别</mat-option>
              <mat-option value="medium">中级别</mat-option>
              <mat-option value="high">高级别</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="complaint-content">投诉内容 *</label>
          <mat-form-field appearance="outline" class="form-field">
            <textarea 
              matInput 
              [(ngModel)]="complaintContent" 
              id="complaint-content" 
              name="complaintContent" 
              rows="4" 
              placeholder="请详细描述客户投诉的内容..."
              required
            ></textarea>
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="potential-risk">潜在风险</label>
          <mat-form-field appearance="outline" class="form-field">
            <textarea 
              matInput 
              [(ngModel)]="potentialRisk" 
              id="potential-risk" 
              name="potential-risk" 
              rows="2" 
              placeholder="分析可能带来的影响和风险..."
            ></textarea>
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="suggested-action">建议措施</label>
          <mat-form-field appearance="outline" class="form-field">
            <textarea 
              matInput 
              [(ngModel)]="suggestedAction" 
              id="suggested-action" 
              name="suggested-action" 
              rows="2" 
              placeholder="建议采取的解决措施..."
            ></textarea>
          </mat-form-field>
        </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: #fff3e0;
      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 ComplaintWarningDialog {
  complaintLevel: string = '';
  complaintContent: string = '';
  potentialRisk: string = '';
  suggestedAction: string = '';

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

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

  isFormValid(): boolean {
    return !!this.complaintLevel && !!this.complaintContent.trim();
  }

  onSubmit(): void {
    if (!this.isFormValid()) return;
    
    const formData = {
      projectId: this.data.projectId,
      projectName: this.data.projectName,
      complaintLevel: this.complaintLevel,
      complaintContent: this.complaintContent,
      potentialRisk: this.potentialRisk,
      suggestedAction: this.suggestedAction,
      reportedAt: new Date().toISOString()
    };
    
    this.dialogRef.close({ confirmed: true, data: formData });
  }
}