import { Component, ElementRef, Input, OnChanges, SimpleChanges, ViewChild } from '@angular/core';
import type { ForecastPoint, WeatherPoint } from './api.service';

@Component({
  selector: 'chart-panel',
  standalone: true,
  templateUrl: './chart-panel.component.html'
})
export class ChartPanelComponent implements OnChanges {
  @Input() history: WeatherPoint[] = [];
  @Input() forecast: ForecastPoint[] = [];
  @Input() legendMode: string = 'combo_standard';
  @Input() showAccuracy: boolean = true;

  @ViewChild('canvas', { static: true }) canvas!: ElementRef<HTMLCanvasElement>;
  @ViewChild('accPanel', { static: true }) accPanel!: ElementRef<HTMLDivElement>;
  @ViewChild('accH1', { static: true }) accH1!: ElementRef<HTMLSpanElement>;
  @ViewChild('accH2', { static: true }) accH2!: ElementRef<HTMLSpanElement>;
  @ViewChild('accH3', { static: true }) accH3!: ElementRef<HTMLSpanElement>;

  private chart: any;

  ngOnChanges(changes: SimpleChanges): void {
    this.render();
  }

  private render() {
    const historyData = Array.isArray(this.history) ? this.history : [];
    const forecastData = Array.isArray(this.forecast) ? this.forecast : [];
    if (historyData.length === 0 && forecastData.length === 0) { this.destroy(); return; }

    const labels = [...new Set([
      ...historyData.map(x => x.date_time),
      ...forecastData.map(x => x.date_time)
    ])].sort();

    const pickSeries = (arr: any[], key: string) => labels.map(l => {
      const it = arr.find(d => d.date_time === l); return it ? (it as any)[key] ?? null : null;
    });

    const hTemp = pickSeries(historyData, 'temperature');
    const hHum = pickSeries(historyData, 'humidity');
    const hPres = pickSeries(historyData, 'pressure');
    const hWind = pickSeries(historyData, 'wind_speed');
    const hRain = pickSeries(historyData, 'rainfall');
    const hRainTotal = pickSeries(historyData, 'rain_total');

    const byTime = new Map<string, any>();
    forecastData.forEach(fp => {
      const t = fp.date_time; if (!byTime.has(t)) byTime.set(t, {});
      const lead = typeof fp.lead_hours === 'number' ? fp.lead_hours : null;
      if (lead !== null && lead >= 0 && lead <= 3) {
        const bucket = byTime.get(t);
        if (bucket[lead] == null) bucket[lead] = fp; // assume DESC issued_at
      }
    });

    const getAtLead = (l: string, field: string, lead: number) => {
      const b = byTime.get(l); if (!b || !b[lead]) return null; const v = b[lead][field as keyof ForecastPoint];
      return v == null ? null : (v as number);
    };

    const rainH1 = labels.map(l => getAtLead(l, 'rainfall', 1));
    const rainH2 = labels.map(l => getAtLead(l, 'rainfall', 2));
    const rainH3 = labels.map(l => getAtLead(l, 'rainfall', 3));

    const pickNearest = (l: string, field: keyof ForecastPoint) => {
      const b = byTime.get(l); if (!b) return null;
      for (const k of [0,1,2,3]) { if (b[k] && b[k][field] != null) return b[k][field] as number; }
      return null;
    };
    const fTempN = labels.map(l => pickNearest(l, 'temperature'));
    const fHumN = labels.map(l => pickNearest(l, 'humidity'));
    const fPresN = labels.map(l => pickNearest(l, 'pressure'));
    const fWindN = labels.map(l => pickNearest(l, 'wind_speed'));

    this.destroy();
    // @ts-ignore
    const Chart = (window as any).Chart;
    if (!Chart || !this.canvas?.nativeElement) return;

    const datasets: any[] = [
      { label: '温度 (°C) - 实测', seriesKey: 'temp_actual', data: hTemp, borderColor: 'rgb(255,99,132)', backgroundColor: 'rgba(255,99,132,0.1)', yAxisID: 'y-temperature', tension: 0.4, spanGaps: false },
      { label: '湿度 (%) - 实测', seriesKey: 'hum_actual', data: hHum, borderColor: 'rgb(54,162,235)', backgroundColor: 'rgba(54,162,235,0.1)', yAxisID: 'y-humidity', tension: 0.4, hidden: true, spanGaps: false },
      { label: '大气压 (hPa) - 实测', seriesKey: 'pressure_actual', data: hPres, borderColor: 'rgb(153,102,255)', backgroundColor: 'rgba(153,102,255,0.1)', yAxisID: 'y-pressure', tension: 0.4, hidden: true, spanGaps: false },
      { label: '风速 (m/s) - 实测', seriesKey: 'wind_actual', data: hWind, borderColor: 'rgb(75,192,192)', backgroundColor: 'rgba(75,192,192,0.1)', yAxisID: 'y-wind', tension: 0.4, hidden: true, spanGaps: false },
      { label: '雨量 (mm) - 实测', seriesKey: 'rain_actual', data: hRain, type: 'bar', backgroundColor: 'rgba(54,162,235,0.6)', borderColor: 'rgb(54,162,235)', yAxisID: 'y-rainfall' },
      { label: '累计雨量 (mm) - 实测', seriesKey: 'rain_total', data: hRainTotal, borderColor: 'rgb(75,192,192)', backgroundColor: 'rgba(75,192,192,0.1)', yAxisID: 'y-rainfall', tension: 0.2, spanGaps: false, pointRadius: 0, hidden: true }
    ];
    if (forecastData.length > 0) {
      datasets.push(
        { label: '雨量 (mm) - 预报 (+1h)', seriesKey: 'rain_fcst_h1', data: rainH1, type: 'bar', backgroundColor: 'rgba(255,99,71,0.55)', borderColor: 'rgb(255,99,71)', yAxisID: 'y-rainfall' },
        { label: '雨量 (mm) - 预报 (+2h)', seriesKey: 'rain_fcst_h2', data: rainH2, type: 'bar', backgroundColor: 'rgba(255,205,86,0.55)', borderColor: 'rgb(255,205,86)', yAxisID: 'y-rainfall' },
        { label: '雨量 (mm) - 预报 (+3h)', seriesKey: 'rain_fcst_h3', data: rainH3, type: 'bar', backgroundColor: 'rgba(76,175,80,0.55)', borderColor: 'rgb(76,175,80)', yAxisID: 'y-rainfall' },
        { label: '温度 (°C) - 预报', seriesKey: 'temp_fcst', data: fTempN, borderColor: 'rgb(255,159,64)', backgroundColor: 'rgba(255,159,64,0.1)', borderDash: [5,5], yAxisID: 'y-temperature', tension: 0.4, spanGaps: false, hidden: true },
        { label: '湿度 (%) - 预报', seriesKey: 'hum_fcst', data: fHumN, borderColor: 'rgb(54,162,235)', backgroundColor: 'rgba(54,162,235,0.1)', borderDash: [5,5], yAxisID: 'y-humidity', tension: 0.4, hidden: true, spanGaps: false },
        { label: '大气压 (hPa) - 预报', seriesKey: 'pressure_fcst', data: fPresN, borderColor: 'rgb(153,102,255)', backgroundColor: 'rgba(153,102,255,0.1)', borderDash: [5,5], yAxisID: 'y-pressure', tension: 0.4, hidden: true, spanGaps: false },
        { label: '风速 (m/s) - 预报', seriesKey: 'wind_fcst', data: fWindN, borderColor: 'rgb(75,192,192)', backgroundColor: 'rgba(75,192,192,0.1)', borderDash: [5,5], yAxisID: 'y-wind', tension: 0.4, hidden: true, spanGaps: false }
      );
    }

    const totalLabels = labels.length;
    const tickStep = Math.max(1, Math.ceil(totalLabels / 10));
    this.chart = new Chart(this.canvas.nativeElement.getContext('2d'), {
      type: 'line',
      data: { labels, datasets },
      options: {
        responsive: true, maintainAspectRatio: false,
        interaction: { mode: 'index', intersect: false },
        layout: { padding: { top: 12, right: 16, bottom: 12, left: 16 } },
        plugins: { legend: { display: true, position: 'top', align: 'center', labels: { padding: 16 } } },
        scales: {
          x: { type: 'category', ticks: {
            autoSkip: false, maxRotation: 0, minRotation: 0,
            callback: function(value: any, index: number) {
              if (index % tickStep !== 0) return '';
              const labels = (this as any).chart?.data?.labels || [];
              const raw = labels[index] || '';
              return (typeof raw === 'string' && raw.length >= 13) ? raw.substring(5, 13) : raw;
            }
          }, grid: { display: true, drawOnChartArea: true } },
          'y-temperature': { type: 'linear', display: true, position: 'right', title: { display: true, text: '温度 (°C)' } },
          'y-humidity': { type: 'linear', display: true, position: 'right', title: { display: true, text: '湿度 (%)' }, grid: { drawOnChartArea: false }, min: 0, max: 100 },
          'y-pressure': { type: 'linear', display: true, position: 'left', title: { display: true, text: '大气压 (hPa)' }, grid: { drawOnChartArea: false } },
          'y-wind': { type: 'linear', display: true, position: 'left', title: { display: true, text: '风速 (m/s)' }, grid: { drawOnChartArea: false }, beginAtZero: true },
          'y-rainfall': { type: 'linear', display: true, position: 'right', title: { display: true, text: '雨量 (mm)' }, grid: { drawOnChartArea: false }, beginAtZero: true }
        }
      }
    });

    this.applyLegendMode(this.legendMode);
    this.updateAccuracyPanel(labels, hRain, rainH1, rainH2, rainH3);
  }

  private applyLegendMode(mode: string) {
    if (!this.chart) return;
    const map = new Map<string, any>();
    this.chart.data.datasets.forEach((ds: any) => { if (ds.seriesKey) map.set(ds.seriesKey, ds); });
    const setVisible = (keys: string[]) => {
      const all = ['temp_actual','hum_actual','rain_actual','rain_total','temp_fcst','hum_fcst','pressure_actual','pressure_fcst','wind_actual','wind_fcst','rain_fcst_h1','rain_fcst_h2','rain_fcst_h3'];
      all.forEach(k => { const ds = map.get(k); if (ds) ds.hidden = true; });
      keys.forEach(k => { const ds = map.get(k); if (ds) ds.hidden = false; });
    };
    switch (mode) {
      case 'verify_all': setVisible(['temp_actual','temp_fcst','hum_actual','hum_fcst','pressure_actual','pressure_fcst','wind_actual','wind_fcst','rain_actual','rain_fcst_h1','rain_fcst_h2','rain_fcst_h3']); break;
      case 'temp_compare': setVisible(['temp_actual','temp_fcst']); break;
      case 'hum_compare': setVisible(['hum_actual','hum_fcst']); break;
      case 'rain_all': setVisible(['rain_actual','rain_fcst_h1','rain_fcst_h2','rain_fcst_h3']); break;
      case 'pressure_compare': setVisible(['pressure_actual','pressure_fcst']); break;
      case 'wind_compare': setVisible(['wind_actual','wind_fcst']); break;
      case 'combo_standard':
      default: setVisible(['temp_actual','temp_fcst','rain_actual','rain_fcst_h1','rain_fcst_h2','rain_fcst_h3']);
    }
    this.chart.update();
  }

  private updateAccuracyPanel(labels: string[], historyRain: (number|null)[], h1: (number|null)[], h2: (number|null)[], h3: (number|null)[]) {
    const panel = this.accPanel?.nativeElement; if (!panel) return;
    if (!this.showAccuracy) { panel.style.display = 'none'; return; }
    const isNum = (v:any)=> v!=null && !isNaN(Number(v));
    const usedIdx = historyRain.map((v, idx) => ({v, idx})).filter(x => isNum(x.v)).map(x => x.idx);
    const total = usedIdx.length;
    if (total === 0 || labels.length === 0) { panel.style.display = 'none'; return; }

    // Buckets: 0mm, (0,4), [4,8), [8, +∞)
    const bucketOf = (mm: any): number|null => {
      if (!isNum(mm)) return null;
      const v = Math.max(0, Number(mm));
      if (v === 0) return 0;           // 0
      if (v > 0 && v < 4) return 1;    // (0,4)
      if (v >= 4 && v < 8) return 2;   // [4,8)
      return 3;                        // [8, +∞)
    };
    const nameOf = (b:number|null) => b===0 ? '0' : b===1 ? '(0,4)' : b===2 ? '[4,8)' : b===3 ? '≥8' : '--';

    const calcFor = (arr: (number|null)[]) => {
      let correct=0;
      usedIdx.forEach(i=>{ const ba=bucketOf(historyRain[i]); const bf=bucketOf(arr[i]); if(ba!==null && bf!==null && ba===bf) correct++; });
      return {correct,total};
    };
    const fmtPct = (n: number) => `${n.toFixed(1)}%`;

    // Detailed console logs for validation
    try {
      console.groupCollapsed('[准确率] (+1h/+2h/+3h)');
      console.log('总小时(实测):', total);
      usedIdx.forEach(i => {
        const label = labels[i];
        const a = historyRain[i];
        const bA = bucketOf(a);
        const f1 = h1[i]; const b1 = bucketOf(f1);
        const f2 = h2[i]; const b2 = bucketOf(f2);
        const f3 = h3[i]; const b3 = bucketOf(f3);
        const m1 = (bA!==null && b1!==null && bA===b1) ? 'true' : 'false';
        const m2 = (bA!==null && b2!==null && bA===b2) ? 'true' : 'false';
        const m3 = (bA!==null && b3!==null && bA===b3) ? 'true' : 'false';
        const fv = (v:any)=> (v==null||isNaN(Number(v)))? 'NULL' : Number(v).toFixed(2);
        console.log(`${label} | 实测 ${fv(a)} (${nameOf(bA)}) | +1h ${fv(f1)} (${nameOf(b1)}) ${m1} | +2h ${fv(f2)} (${nameOf(b2)}) ${m2} | +3h ${fv(f3)} (${nameOf(b3)}) ${m3}`);
      });
    } catch {}

    const r1 = calcFor(h1), r2 = calcFor(h2), r3 = calcFor(h3);
    try {
      console.log(`命中/总 (+1h): ${r1.correct}/${r1.total} => ${fmtPct((r1.correct/total)*100)}`);
      console.log(`命中/总 (+2h): ${r2.correct}/${r2.total} => ${fmtPct((r2.correct/total)*100)}`);
      console.log(`命中/总 (+3h): ${r3.correct}/${r3.total} => ${fmtPct((r3.correct/total)*100)}`);
      console.groupEnd?.();
    } catch {}

    this.accH1.nativeElement.textContent = total>0 ? fmtPct((r1.correct/total)*100) : '--';
    this.accH2.nativeElement.textContent = total>0 ? fmtPct((r2.correct/total)*100) : '--';
    this.accH3.nativeElement.textContent = total>0 ? fmtPct((r3.correct/total)*100) : '--';
    panel.style.display = 'block';
  }

  destroy() { if (this.chart) { this.chart.destroy(); this.chart = null; } }
}