import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Component, Inject } from '@angular/core';
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 RefundRequestData {
  projectId: string;
  projectName: string;
  projectAmount: number;
}

@Component({
  selector: 'app-refund-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>
          <p><strong>总金额:</strong> ¥{{ data.projectAmount.toLocaleString() }}</p>
        </div>
        
        <div class="form-group">
          <label for="refund-type">退款类型 *</label>
          <mat-form-field appearance="outline" class="form-field">
            <mat-select [(ngModel)]="refundType" id="refund-type" name="refundType" required>
              <mat-option value="full">全额退款</mat-option>
              <mat-option value="partial">部分退款</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        
        @if (refundType === 'partial') {
          <div class="form-group">
            <label for="refund-amount">退款金额 *</label>
            <mat-form-field appearance="outline" class="form-field">
              <input 
                matInput 
                [(ngModel)]="refundAmount" 
                id="refund-amount" 
                name="refundAmount" 
                type="number" 
                min="0" 
                [max]="data.projectAmount"
                step="0.01" 
                placeholder="请输入退款金额"
                required
              >
              <span matTextSuffix>¥</span>
            </mat-form-field>
          </div>
        }
        
        <div class="form-group">
          <label for="refund-reason">退款原因 *</label>
          <mat-form-field appearance="outline" class="form-field">
            <textarea 
              matInput 
              [(ngModel)]="refundReason" 
              id="refund-reason" 
              name="refundReason" 
              rows="4" 
              placeholder="请详细描述退款原因..."
              required
            ></textarea>
          </mat-form-field>
        </div>
        
        <div class="form-group">
          <label for="refund-account">退款账户信息</label>
          <mat-form-field appearance="outline" class="form-field">
            <input 
              matInput 
              [(ngModel)]="refundAccount" 
              id="refund-account" 
              name="refundAccount" 
              type="text" 
              placeholder="请提供退款账户信息（如银行卡号/支付宝等）"
            >
          </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: #ffebee;
      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 RefundRequestDialog {
  refundType: string = 'full';
  refundAmount: number = 0;
  refundReason: string = '';
  refundAccount: string = '';

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

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

  isFormValid(): boolean {
    if (!this.refundType || !this.refundReason.trim()) {
      return false;
    }
    
    if (this.refundType === 'partial' && (this.refundAmount <= 0 || this.refundAmount > this.data.projectAmount)) {
      return false;
    }
    
    return true;
  }

  onSubmit(): void {
    if (!this.isFormValid()) return;
    
    const formData = {
      projectId: this.data.projectId,
      projectName: this.data.projectName,
      refundType: this.refundType,
      totalAmount: this.data.projectAmount,
      refundAmount: this.refundType === 'full' ? this.data.projectAmount : this.refundAmount,
      refundReason: this.refundReason,
      refundAccount: this.refundAccount,
      requestedAt: new Date().toISOString()
    };
    
    this.dialogRef.close({ confirmed: true, data: formData });
  }
}