import { CommonModule, NgIf } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { Component, signal, ElementRef, ViewChild, OnInit, AfterViewInit, effect } from '@angular/core';
import { AuthService } from '../../../services/auth.service';
import * as echarts from 'echarts';

// 报表类型定义
export type ReportType = 
  | 'financial_summary'  // 财务汇总
  | 'project_profitability' // 项目盈利能力
  | 'cash_flow'         // 现金流
  | 'expense_analysis'; // 支出分析

// 时间周期类型
export type TimePeriod = 
  | 'daily'    // 日
  | 'weekly'   // 周
  | 'monthly'  // 月
  | 'quarterly' // 季度
  | 'yearly';  // 年

// 图表类型
export type ChartType = 
  | 'bar'      // 柱状图
  | 'line'     // 折线图
  | 'pie'      // 饼图
  | 'table';   // 表格

// 图表数据点类型
export interface ChartDataPoint {
  label: string;
  value: number;
  color?: string;
}

// 报表数据类型
export interface ReportData {
  id: string;
  title: string;
  type: ReportType;
  period: TimePeriod;
  dateRange: { start: Date; end: Date };
  generatedAt: Date;
  chartType: ChartType;
  chartData: ChartDataPoint[];
  summary?: { [key: string]: number };
  details?: { [key: string]: any }[];
}

@Component({
  selector: 'app-reports',
  imports: [CommonModule, NgIf, FormsModule, RouterModule],
  templateUrl: './reports.html',
  styleUrl: './reports.scss',
  standalone: true
})
export class Reports implements OnInit, AfterViewInit {
  @ViewChild('chartContainer') chartContainer!: ElementRef;
  private chartInstance: any | null = null;
  private chartInitialized = false;
  
  // 报表类型选项
  reportTypes: { value: ReportType; label: string }[] = [
    { value: 'financial_summary', label: '财务汇总报表' },
    { value: 'project_profitability', label: '项目盈利能力报表' },
    { value: 'cash_flow', label: '现金流报表' },
    { value: 'expense_analysis', label: '支出分析报表' }
  ];
  
  // 用户角色
  userRole = signal<string>('teamLead');

  // 时间周期选项
  timePeriods: { value: TimePeriod; label: string }[] = [
    { value: 'daily', label: '按日' },
    { value: 'weekly', label: '按周' },
    { value: 'monthly', label: '按月' },
    { value: 'quarterly', label: '按季度' },
    { value: 'yearly', label: '按年' }
  ];

  // 图表类型选项
  chartTypes: { value: ChartType; label: string }[] = [
    { value: 'bar', label: '柱状图' },
    { value: 'line', label: '折线图' },
    { value: 'pie', label: '饼图' },
    { value: 'table', label: '表格' }
  ];

  // 当前选择的报表类型
  selectedReportType = signal<ReportType>('financial_summary');
  
  // 当前选择的时间周期
  selectedTimePeriod = signal<TimePeriod>('monthly');
  
  // 日期范围
  dateRange = signal<{ start: Date; end: Date }>({
    start: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
    end: new Date()
  });

  // 当前选择的图表类型
  selectedChartType = signal<ChartType>('bar');
  
  // 报表数据
  reportData = signal<ReportData | null>(null);
  
  // 生成报表时的加载状态
  isLoading = signal(false);

  // 安全更新日期范围的开始日期
  updateDateRangeStart(date: string) {
    this.dateRange.set({
      ...this.dateRange(),
      start: new Date(date)
    });
  }

  // 安全更新日期范围的结束日期
  updateDateRangeEnd(date: string) {
    this.dateRange.set({
      ...this.dateRange(),
      end: new Date(date)
    });
  }
  
  // 历史报表记录
  historicalReports = signal<ReportData[]>([]);

  constructor(private authService: AuthService) {
    // 创建effect监听报表数据变化
    effect(() => {
      // 访问并保存 filteredReportData，触发依赖跟踪
      const data = this.filteredReportData;

      // 当报表数据生成后，模板中的 *ngIf 渲染出图表容器，此时再初始化图表
      if (!this.chartInitialized && data && this.chartContainer?.nativeElement) {
        // 使用微任务/宏任务确保DOM已完成渲染
        setTimeout(() => this.initChart());
      }
      
      // 数据变化且图表已初始化时，更新图表
      if (data && this.chartInitialized) {
        this.updateChart();
      }
    });
  }

  ngOnInit(): void {
    // 初始化用户角色
    this.initializeUserRole();
    // 加载历史报表记录
    this.loadHistoricalReports();
  }

  // 视图初始化后创建图表
  ngAfterViewInit(): void {
    this.initChart();
  }

  // 初始化echarts图表
  private initChart(): void {
    if (this.chartContainer && this.chartContainer.nativeElement && !this.chartInitialized) {
      this.chartInstance = echarts.init(this.chartContainer.nativeElement);
      this.chartInitialized = true;
      
      // 设置响应式
      window.addEventListener('resize', () => {
        this.chartInstance?.resize();
      });

      // 初始化完成后，如已有数据则立即渲染一次
      if (this.filteredReportData) {
        this.updateChart();
      }
    }
  }

  // 更新图表数据和配置
  private updateChart(): void {
    if (!this.chartInitialized || !this.chartInstance || !this.filteredReportData) {
      return;
    }

    const report = this.filteredReportData;
    const option = this.generateChartOption(report);
    
    this.chartInstance.setOption(option);
  }

  // 生成图表配置
  private generateChartOption(report: ReportData): any {
    const isTeamLead = this.userRole() === 'teamLead';
    const chartData = isTeamLead ? report.chartData : report.chartData.map(item => ({...item, value: 0}));
    
    // 根据图表类型生成不同的配置
    switch (report.chartType) {
      case 'bar':
        return this.generateBarChartOption(chartData, isTeamLead);
      case 'line':
        return this.generateLineChartOption(chartData, isTeamLead);
      case 'pie':
        return this.generatePieChartOption(chartData, isTeamLead);
      default:
        return {};
    }
  }

  // 生成柱状图配置
  private generateBarChartOption(data: ChartDataPoint[], isTeamLead: boolean): any {
    const labels = data.map(item => item.label);
    const values = isTeamLead ? data.map(item => item.value) : data.map(() => 0);
    const colors = data.map(item => item.color || '#3498db');
    
    return {
      title: {
        text: '柱状图数据',
        left: 'center',
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params: any) => {
          const data = params[0];
          const label = data.name;
          const value = isTeamLead ? this.formatAmount(data.value) : '--';
          return `${label}: ${value}`;
        }
      },
      xAxis: {
        type: 'category',
        data: labels,
        axisLabel: {
          interval: 0,
          rotate: 30
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (value: number) => {
            return isTeamLead ? this.formatAmount(value) : '--';
          }
        }
      },
      series: [{
        data: values,
        type: 'bar',
        itemStyle: {
          color: (params: any) => colors[params.dataIndex]
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params: any) => {
            return isTeamLead && params.value > 0 ? this.formatAmount(params.value) : '';
          }
        }
      }]
    };
  }

  // 生成折线图配置
  private generateLineChartOption(data: ChartDataPoint[], isTeamLead: boolean): any {
    const labels = data.map(item => item.label);
    const values = isTeamLead ? data.map(item => item.value) : data.map(() => 0);
    const colors = data.map(item => item.color || '#3498db');
    
    return {
      title: {
        text: '折线图数据',
        left: 'center',
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params: any) => {
          const data = params[0];
          const label = data.name;
          const value = isTeamLead ? this.formatAmount(data.value) : '--';
          return `${label}: ${value}`;
        }
      },
      xAxis: {
        type: 'category',
        data: labels
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (value: number) => {
            return isTeamLead ? this.formatAmount(value) : '--';
          }
        }
      },
      series: [{
        data: values,
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        itemStyle: {
          color: colors[0]
        },
        lineStyle: {
          width: 3
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: colors[0] + '80'
            }, {
              offset: 1,
              color: colors[0] + '10'
            }]
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params: any) => {
            return isTeamLead && params.value > 0 ? this.formatAmount(params.value) : '';
          }
        }
      }]
    };
  }

  // 生成饼图配置
  private generatePieChartOption(data: ChartDataPoint[], isTeamLead: boolean): any {
    const pieData = isTeamLead ? 
      data.map(item => ({ name: item.label, value: item.value })) : 
      data.map(item => ({ name: item.label, value: 1 }));
    
    const colors = data.map(item => item.color || '#3498db');
    
    return {
      title: {
        text: '饼图数据',
        left: 'center',
        textStyle: {
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: (params: any) => {
          const value = isTeamLead ? this.formatAmount(params.value) : '--';
          const percent = isTeamLead ? `${params.percent}%` : '--';
          return `${params.name}: ${value} (${percent})`;
        }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        formatter: (name: string) => {
          const item = data.find(d => d.label === name);
          if (!item) return name;
          const value = isTeamLead && item.value > 0 ? this.formatAmount(item.value) : '--';
          return `${name}: ${value}`;
        }
      },
      series: [{
        name: '数据',
        type: 'pie',
        radius: '60%',
        center: ['60%', '50%'],
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          color: (params: any) => colors[params.dataIndex]
        },
        label: {
          formatter: (params: any) => {
            return isTeamLead ? `${params.name}\n${this.formatAmount(params.value)}\n${params.percent}%` : params.name;
          }
        }
      }]
    };
  }
  
  // 初始化用户角色
  initializeUserRole(): void {
    // 从AuthService获取用户角色
    const roles = this.authService.getUserRoles();
    // 默认使用teamLead角色
    let userRole = 'teamLead';
    
    // 如果用户有admin角色，也视为teamLead
    if (roles.includes('admin')) {
      userRole = 'teamLead';
    } else if (roles.length > 0) {
      // 否则使用第一个角色
      userRole = roles[0];
    }
    
    this.userRole.set(userRole);
  }

  // 加载历史报表记录
  loadHistoricalReports(): void {
    // 模拟加载历史报表数据
    const mockHistory: ReportData[] = [
      {
        id: 'REP-2023-09-001',
        title: '2023年9月财务汇总报表',
        type: 'financial_summary',
        period: 'monthly',
        dateRange: {
          start: new Date(2023, 8, 1),
          end: new Date(2023, 8, 30)
        },
        generatedAt: new Date(2023, 8, 30, 15, 30),
        chartType: 'bar',
        chartData: [],
        summary: {
          totalRevenue: 120000,
          totalExpense: 85000,
          netProfit: 35000
        }
      },
      {
        id: 'REP-2023-08-002',
        title: '2023年第三季度项目盈利能力报表',
        type: 'project_profitability',
        period: 'quarterly',
        dateRange: {
          start: new Date(2023, 6, 1),
          end: new Date(2023, 8, 30)
        },
        generatedAt: new Date(2023, 8, 30, 16, 45),
        chartType: 'pie',
        chartData: [],
        summary: {
          averageProfitMargin: 32.5
        }
      }
    ];

    this.historicalReports.set(mockHistory);
  }

  // 生成报表
  generateReport(): void {
    this.isLoading.set(true);

    // 模拟API调用延迟
    setTimeout(() => {
      const reportId = `REP-${new Date().getFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}-${Date.now().toString().slice(-4)}`;
      const reportTitle = this.getReportTitle();
      const chartData = this.generateMockChartData();
      const summaryData = this.generateMockSummary();

      const newReport: ReportData = {
        id: reportId,
        title: reportTitle,
        type: this.selectedReportType(),
        period: this.selectedTimePeriod(),
        dateRange: { ...this.dateRange() },
        generatedAt: new Date(),
        chartType: this.selectedChartType(),
        chartData: chartData,
        summary: summaryData
      };

      this.reportData.set(newReport);
      
      // 添加到历史记录
      const updatedHistory = [newReport, ...this.historicalReports()];
      this.historicalReports.set(updatedHistory);
      
      this.isLoading.set(false);
    }, 1500);
  }

  // 获取报表标题
  getReportTitle(): string {
    const reportTypeLabel = this.reportTypes.find(type => type.value === this.selectedReportType())?.label || '';
    const periodLabel = this.timePeriods.find(period => period.value === this.selectedTimePeriod())?.label || '';
    
    const startDateStr = this.formatDate(this.dateRange().start);
    const endDateStr = this.formatDate(this.dateRange().end);
    
    return `${startDateStr}至${endDateStr}${periodLabel}${reportTypeLabel}`;
  }

  // 生成模拟图表数据
  generateMockChartData(): ChartDataPoint[] {
    switch (this.selectedReportType()) {
      case 'financial_summary':
        return [
          { label: '设计费用', value: 45000, color: '#3498db' },
          { label: '项目管理', value: 30000, color: '#2ecc71' },
          { label: '材料费用', value: 25000, color: '#f39c12' },
          { label: '设备租赁', value: 15000, color: '#e74c3c' },
          { label: '其他收入', value: 10000, color: '#9b59b6' }
        ];
      case 'project_profitability':
        return [
          { label: '现代住宅设计', value: 15000, color: '#3498db' },
          { label: '商业办公空间', value: 12000, color: '#2ecc71' },
          { label: '品牌展厅设计', value: 8000, color: '#f39c12' },
          { label: '餐饮空间改造', value: 7500, color: '#e74c3c' },
          { label: '酒店大堂设计', value: 6000, color: '#9b59b6' }
        ];
      case 'cash_flow':
        return [
          { label: '1月', value: 25000, color: '#3498db' },
          { label: '2月', value: 28000, color: '#2ecc71' },
          { label: '3月', value: 32000, color: '#f39c12' },
          { label: '4月', value: 29000, color: '#e74c3c' },
          { label: '5月', value: 35000, color: '#9b59b6' },
          { label: '6月', value: 38000, color: '#1abc9c' }
        ];
      case 'expense_analysis':
        return [
          { label: '人力成本', value: 40000, color: '#3498db' },
          { label: '软件工具', value: 15000, color: '#2ecc71' },
          { label: '办公费用', value: 10000, color: '#f39c12' },
          { label: '差旅费用', value: 8000, color: '#e74c3c' },
          { label: '营销费用', value: 12000, color: '#9b59b6' }
        ];
      default:
        return [];
    }
  }

  // 生成模拟摘要数据
  generateMockSummary(): { [key: string]: number } {
    switch (this.selectedReportType()) {
      case 'financial_summary':
        return {
          totalRevenue: Math.floor(Math.random() * 50000) + 80000,
          totalExpense: Math.floor(Math.random() * 30000) + 50000,
          netProfit: Math.floor(Math.random() * 20000) + 30000,
          profitMargin: Math.random() * 20 + 25,
          totalProjects: Math.floor(Math.random() * 10) + 15
        };
      case 'project_profitability':
        return {
          averageProfitMargin: Math.random() * 15 + 25,
          totalProjects: Math.floor(Math.random() * 10) + 15,
          profitableProjects: Math.floor(Math.random() * 8) + 12,
          lossProjects: Math.floor(Math.random() * 3)
        };
      case 'cash_flow':
        return {
          inflow: Math.floor(Math.random() * 60000) + 90000,
          outflow: Math.floor(Math.random() * 40000) + 60000,
          netFlow: Math.floor(Math.random() * 20000) + 30000
        };
      case 'expense_analysis':
        return {
          totalExpense: Math.floor(Math.random() * 30000) + 50000,
          materialCost: Math.floor(Math.random() * 10000) + 15000,
          laborCost: Math.floor(Math.random() * 15000) + 25000,
          otherCost: Math.floor(Math.random() * 5000) + 5000
        };
      default:
        return {};
    }
  }
  
  // 根据用户角色过滤报表数据
  get filteredReportData(): ReportData | null {
    const originalReport = this.reportData();
    
    if (!originalReport) return null;
    
    // 如果是组长角色，返回完整数据
    if (this.userRole() === 'teamLead') {
      return originalReport;
    }
    
    const filteredData: ReportData = {
      // 保留所有必需属性
      id: originalReport.id,
      title: originalReport.title,
      type: originalReport.type,
      period: originalReport.period,
      dateRange: originalReport.dateRange,
      generatedAt: originalReport.generatedAt,
      chartType: originalReport.chartType,
      chartData: originalReport.chartData.map(item => ({
        ...item,
        value: 0 // 隐藏具体数值
      })),
      // 处理可选属性
      ...(originalReport.summary && {
        summary: Object.fromEntries(
          Object.entries(originalReport.summary)
            .filter(([key]) => !key.includes('Revenue') && !key.includes('Expense') && 
                              !key.includes('Profit') && !key.includes('Margin') && 
                              !key.includes('Flow') && !key.includes('Cost'))
        )
      }),
      ...(originalReport.details && { details: originalReport.details })
    };
    
    return filteredData;
  }

  // 导出报表
  exportReport(): void {
    if (!this.reportData()) {
      // 显示提示信息
      console.log('请先生成报表再导出');
      return;
    }

    // 模拟导出功能
    const report = this.reportData();
    if (report) {
      console.log('导出报表:', report.title);
      alert(`报表"${report.title}"已导出`);
    }
  }

  // 查看历史报表
  viewHistoricalReport(report: ReportData): void {
    this.reportData.set(report);
    this.selectedReportType.set(report.type);
    this.selectedTimePeriod.set(report.period);
    this.dateRange.set(report.dateRange);
    this.selectedChartType.set(report.chartType);
  }

  // 格式化日期
  formatDate(date: Date | undefined | null): string {
    if (!date) {
      return new Date().toLocaleDateString('zh-CN');
    }
    return new Date(date).toLocaleDateString('zh-CN');
  }

  // 格式化金额
  formatAmount(amount: number): string {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY',
      minimumFractionDigits: 0,
      maximumFractionDigits: 0
    }).format(amount);
  }

  // 格式化百分比
  formatPercentage(value: number): string {
    return `${value.toFixed(1)}%`;
  }

  // 获取报表类型图标
  getReportTypeIcon(type: ReportType): string {
    const iconMap: Record<ReportType, string> = {
      'financial_summary': '📊',
      'project_profitability': '💰',
      'cash_flow': '💹',
      'expense_analysis': '📉'
    };
    return iconMap[type] || '📋';
  }

  // 重置报表参数
  resetParameters(): void {
    this.selectedReportType.set('financial_summary');
    this.selectedTimePeriod.set('monthly');
    this.dateRange.set({
      start: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
      end: new Date()
    });
    this.selectedChartType.set('bar');
    this.reportData.set(null);
  }

  // 获取图表数据中的最大值（用于柱状图比例计算）
  maxValue(data: ChartDataPoint[]): number {
    if (!data || data.length === 0) return 1;
    return Math.max(...data.map(item => item.value));
  }

  // 计算图表数据的总和（用于饼图和占比计算）
  totalValue(data: ChartDataPoint[]): number {
    if (!data || data.length === 0) return 0;
    return data.reduce((sum, item) => sum + item.value, 0);
  }

  // 获取饼图切片的变换样式
  getPieTransform(index: number, data: ChartDataPoint[]): string {
    const total = this.totalValue(data);
    if (total === 0 || data.length === 0) return '';

    // 计算当前切片和之前所有切片的总和
    let cumulativeValue = 0;
    for (let i = 0; i < index; i++) {
      cumulativeValue += data[i].value;
    }

    // 计算当前切片的起始角度和结束角度
    const startAngle = (cumulativeValue / total) * 360;
    const endAngle = ((cumulativeValue + data[index].value) / total) * 360;

    // 计算中间角度用于定位
    const midAngle = (startAngle + endAngle) / 2;
    
    // 生成变换样式
    // 注意：这里使用简化的实现，实际项目中可能需要更复杂的计算来生成真实的饼图
    if (index === 0) {
      return `rotate(${startAngle}deg)`;
    } else {
      return `rotate(${startAngle}deg)`;
    }
  }
}
