import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { MatChipsModule } from '@angular/material/chips';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatCardModule } from '@angular/material/card';

export interface ResignationReason {
  id: string;
  name: string;
  category: string;
  categoryName: string;
  icon: string;
  percentage: number;
  count: number;
  description: string;
  trend: {
    direction: 'up' | 'down' | 'stable';
    value: number;
  };
}

export interface DetailAnalysis {
  overview: string;
  keyFactors: string[];
  impactAnalysis: {
    shortTerm: string[];
    longTerm: string[];
  };
  relatedDepartments: string[];
  timeDistribution: {
    period: string;
    count: number;
    percentage: number;
  }[];
}

export interface ImprovementPlan {
  priority: 'high' | 'medium' | 'low';
  timeline: string;
  actions: {
    title: string;
    description: string;
    responsible: string;
    deadline: string;
    status: 'pending' | 'in_progress' | 'completed';
  }[];
  expectedOutcome: string;
  successMetrics: string[];
  resources: {
    budget: string;
    personnel: string[];
    tools: string[];
  };
}

@Component({
  selector: 'app-resignation-detail-panel',
  standalone: true,
  imports: [
    CommonModule,
    MatDialogModule,
    MatButtonModule,
    MatIconModule,
    MatTabsModule,
    MatChipsModule,
    MatProgressBarModule,
    MatCardModule,
   // 添加 NgFor 到 imports 数组
  ],
  template: `
    <div class="resignation-detail-panel">
      <div class="panel-header">
        <div class="header-content">
          <mat-icon class="reason-icon">{{ reason.icon }}</mat-icon>
          <div class="header-text">
            <h2>{{ reason.name }}</h2>
            <span class="category-chip">{{ reason.categoryName }}</span>
          </div>
        </div>
        <button mat-icon-button (click)="onClose()">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <div class="panel-content">
        <mat-tab-group>
          <mat-tab label="详细分析">
            <div class="tab-content">
              <!-- 基础统计 -->
              <div class="stats-section">
                <div class="stat-card">
                  <div class="stat-value">{{ reason.percentage }}%</div>
                  <div class="stat-label">占比</div>
                </div>
                <div class="stat-card">
                  <div class="stat-value">{{ reason.count }}</div>
                  <div class="stat-label">人数</div>
                </div>
                <div class="stat-card">
                  <div class="stat-value trend" [class]="getTrendClass()">
                    <mat-icon>{{ getTrendIcon() }}</mat-icon>
                    {{ reason.trend.value }}%
                  </div>
                  <div class="stat-label">趋势</div>
                </div>
              </div>

              <!-- 详细分析 -->
              <div class="analysis-section">
                <h3>分析概述</h3>
                <p class="overview-text">{{ detailAnalysis.overview }}</p>

                <h3>关键因素</h3>
                <div class="factors-list">
                  <mat-chip-set>
                    @for (factor of detailAnalysis.keyFactors; track factor) {
                      <mat-chip>{{ factor }}</mat-chip>
                    }
                  </mat-chip-set>
                </div>

                <h3>影响分析</h3>
                <div class="impact-analysis">
                  <div class="impact-section">
                    <h4>短期影响</h4>
                    <ul>
                      @for (impact of detailAnalysis.impactAnalysis.shortTerm; track impact) {
                        <li>{{ impact }}</li>
                      }
                    </ul>
                  </div>
                  <div class="impact-section">
                    <h4>长期影响</h4>
                    <ul>
                      @for (impact of detailAnalysis.impactAnalysis.longTerm; track impact) {
                        <li>{{ impact }}</li>
                      }
                    </ul>
                  </div>
                </div>

                <h3>时间分布</h3>
                <div class="time-distribution">
                  @for (period of detailAnalysis.timeDistribution; track period.period) {
                    <div class="period-item">
                      <div class="period-label">{{ period.period }}</div>
                      <div class="period-bar">
                        <div class="bar-fill" [style.width.%]="period.percentage"></div>
                      </div>
                      <div class="period-count">{{ period.count }}人</div>
                    </div>
                  }
                </div>
              </div>
            </div>
          </mat-tab>

          <mat-tab label="改进建议">
            <div class="tab-content">
              <div class="improvement-header">
                <div class="priority-badge" [class]="'priority-' + improvementPlan.priority">
                  {{ getPriorityText() }}
                </div>
                <div class="timeline">预计时间：{{ improvementPlan.timeline }}</div>
              </div>

              <div class="expected-outcome">
                <h3>预期成果</h3>
                <p>{{ improvementPlan.expectedOutcome }}</p>
              </div>

              <div class="action-plan">
                <h3>行动计划</h3>
                <div class="actions-list">
                  @for (action of improvementPlan.actions; track action.title) {
                    <div class="action-item">
                      <div class="action-header">
                        <h4>{{ action.title }}</h4>
                        <div class="action-status" [class]="'status-' + action.status">
                          {{ getStatusText(action.status) }}
                        </div>
                      </div>
                      <p class="action-description">{{ action.description }}</p>
                      <div class="action-meta">
                        <span class="responsible">负责人：{{ action.responsible }}</span>
                        <span class="deadline">截止时间：{{ action.deadline }}</span>
                      </div>
                    </div>
                  }
                </div>
              </div>

              <div class="success-metrics">
                  <h3>成功指标</h3>
                  <ul>
                    @for (metric of improvementPlan.successMetrics; track metric) {
                      <li>{{ metric }}</li>
                    }
                  </ul>
                </div>

              <div class="resources">
                <h3>所需资源</h3>
                <div class="resource-grid">
                  <div class="resource-item">
                    <h4>预算</h4>
                    <p>{{ improvementPlan.resources.budget }}</p>
                  </div>
                  <div class="resource-item">
                      <h4>人员</h4>
                      <div class="personnel-list">
                        @for (person of improvementPlan.resources.personnel; track person) {
                          <mat-chip>{{ person }}</mat-chip>
                        }
                      </div>
                    </div>
                  <div class="resource-item">
                      <h4>工具</h4>
                      <div class="tools-list">
                        @for (tool of improvementPlan.resources.tools; track tool) {
                          <mat-chip>{{ tool }}</mat-chip>
                        }
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </mat-tab>
        </mat-tab-group>
      </div>

      <div class="panel-footer">
        <button mat-button (click)="onClose()">关闭</button>
        <button mat-raised-button color="primary" (click)="onExport()">
          <mat-icon>download</mat-icon>
          导出报告
        </button>
      </div>
    </div>
  `,
  styleUrls: ['./resignation-detail-panel.component.scss']
})
export class ResignationDetailPanelComponent {
  @Input() reason!: ResignationReason;
  @Input() detailAnalysis!: DetailAnalysis;
  @Input() improvementPlan!: ImprovementPlan;
  @Output() close = new EventEmitter<void>();
  @Output() export = new EventEmitter<void>();

  onClose(): void {
    this.close.emit();
  }

  onExport(): void {
    this.export.emit();
  }

  getTrendClass(): string {
    return `trend-${this.reason.trend.direction}`;
  }

  getTrendIcon(): string {
    switch (this.reason.trend.direction) {
      case 'up': return 'trending_up';
      case 'down': return 'trending_down';
      default: return 'trending_flat';
    }
  }

  getPriorityText(): string {
    switch (this.improvementPlan.priority) {
      case 'high': return '高优先级';
      case 'medium': return '中优先级';
      case 'low': return '低优先级';
      default: return '未知';
    }
  }

  getStatusText(status: string): string {
    switch (status) {
      case 'pending': return '待开始';
      case 'in_progress': return '进行中';
      case 'completed': return '已完成';
      default: return '未知';
    }
  }
}