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

@Component({
  selector: 'app-project-group-dialog',
  standalone: true,
  imports: [
    CommonModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    FormsModule,
    MatChipsModule,
    MatIconModule
  ],
  template: `
    <h2 mat-dialog-title>创建项目群</h2>
    <mat-dialog-content>
      <div class="dialog-content">
        <div class="customer-info" *ngIf="data.selectedCustomer">
          <h3>客户信息</h3>
          <p><strong>姓名:</strong> {{ data.selectedCustomer.name }}</p>
          <p><strong>电话:</strong> {{ data.selectedCustomer.phone }}</p>
          <p><strong>地址:</strong> {{ data.selectedCustomer.address }}</p>
        </div>
        <div class="no-customer" *ngIf="!data.selectedCustomer">
          <p class="warning-message">请先选择客户</p>
        </div>
        
        <div class="group-details" *ngIf="data.selectedCustomer">
          <h3>项目群信息</h3>
          <div class="form-group">
            <label>需求类型</label>
            <p>{{ data.demandType || '未设置' }}</p>
          </div>
          
          <div class="form-group" *ngIf="data.preferenceTags && data.preferenceTags.length > 0">
            <label>偏好标签</label>
            <mat-chip-grid>
              <mat-chip *ngFor="let tag of data.preferenceTags">{{ tag }}</mat-chip>
            </mat-chip-grid>
          </div>
          
          <div class="form-group">
            <label>跟进状态</label>
            <p>{{ data.followUpStatus || '未设置' }}</p>
          </div>
          
          <div class="form-group">
            <label>备注</label>
            <textarea [(ngModel)]="remarks" rows="3" placeholder="输入群聊备注..."></textarea>
          </div>
        </div>
      </div>
    </mat-dialog-content>
    <mat-dialog-actions align="end">
      <button mat-button (click)="onCancel()">取消</button>
      <button mat-button color="primary" (click)="onConfirm()" [disabled]="!data.selectedCustomer">
        确认创建
      </button>
    </mat-dialog-actions>
  `,
  styles: [`
    .dialog-content {
      padding: 10px 0;
    }
    
    h3 {
      margin: 16px 0 12px;
      font-size: 16px;
      font-weight: 600;
    }
    
    .customer-info {
      padding: 12px;
      background-color: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 16px;
    }
    
    .no-customer {
      padding: 20px;
      text-align: center;
    }
    
    .warning-message {
      color: #f44336;
      font-size: 16px;
      margin: 0;
    }
    
    .form-group {
      margin-bottom: 16px;
    }
    
    label {
      display: block;
      margin-bottom: 4px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
    
    p {
      margin: 0;
      color: rgba(0, 0, 0, 0.6);
    }
    
    textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      resize: vertical;
      font-family: inherit;
      font-size: 14px;
    }
    
    mat-chip {
      margin: 4px;
    }
  `]
})
export class ProjectGroupDialog {
  remarks: string = '';

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

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

  onConfirm(): void {
    this.dialogRef.close({
      confirm: true,
      customerId: this.data.selectedCustomer?.id,
      customerName: this.data.selectedCustomer?.name,
      demandType: this.data.demandType,
      preferenceTags: this.data.preferenceTags,
      followUpStatus: this.data.followUpStatus,
      remarks: this.remarks
    });
  }
}