import { bootstrapApplication } from '@angular/platform-browser';
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ApiService, ForecastPoint, WeatherPoint } from './app/api.service';
import { ChartPanelComponent } from './app/chart-panel.component';
import { TablePanelComponent } from './app/table-panel.component';
import { HeaderComponent } from './app/header.component';

type Station = {
  station_id: string;
  decimal_id?: string;
  latitude?: number;
  longitude?: number;
  location?: string;
  device_type?: string;
  last_update?: string;
  name?: string;
  station_alias?: string;
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule, ChartPanelComponent, TablePanelComponent, HeaderComponent],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit, AfterViewInit {
  constructor(private api: ApiService) {}

  onlineDevices = 0;
  serverTime = '';
  stations: Station[] = [];
  mapType = 'satellite';

  decimalId = '';
  interval = '1hour';
  start = '';
  end = '';
  // 默认英卓 V4
  provider = 'imdroid_mix';
  legendMode = 'combo_standard';
  showPastForecast = false;
  showPanels = false;
  selectedLocation = '';
  selectedTitle = '';
  isLoading = false;

  history: WeatherPoint[] = [];
  forecast: ForecastPoint[] = [];

  private map: any;
  private layers: any = {};
  private stationSource: any;
  private clusterSource: any;
  private stationLayer: any;
  private clusterLayer: any;
  private kmlLayer: any;
  private kmlOverlay: any;
  private CLUSTER_THRESHOLD = 10;
  private tileOverlayGroup: any;
  private windOverlayLayer: any;
  private tileLastList: any[] = [];
  private refreshTimer: any;
  private mapEventsBound = false;
  tileTimes: string[] = [];
  tileIndex = -1;
  tileZ = 7; tileY = 40; tileX = 102;
  tileDt = '';
  tileProduct: 'none'|'radar'|'radar_detail'|'rain' = 'radar';
  isMapCollapsed = false;
  kmlInfoTitle = '';
  kmlInfoHtml = '';
  isKmlDialogOpen = false;

  async ngOnInit() {
    await Promise.all([this.loadStatus(), this.loadStations()]);
    const now = new Date();
    const pad = (n:number)=> String(n).padStart(2,'0');
    const toLocal = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
    const end = new Date(now.getTime() + 4*3600*1000);      // 当前时间后4小时
    const start = new Date(now.getTime() - 24*3600*1000);   // 当前时间前24小时
    this.end = toLocal(end);
    this.start = toLocal(start);

    // 每10分钟检查并刷新数据（状态与站点），无刷新页面
    this.refreshTimer = setInterval(() => { this.refreshDataTick(); }, 10 * 60 * 1000);
  }

  ngAfterViewInit() { this.initMap(); this.reloadTileTimesAndShow(); }

  private async loadStatus() {
    const s = await this.api.getStatus();
    if (s) { this.onlineDevices = s.online_devices || 0; this.serverTime = s.server_time || ''; }
  }

  private async loadStations() { this.stations = await this.api.getStations(); this.updateStationsOnMap(); }

  private async refreshDataTick() {
    try {
      await Promise.all([this.loadStatus(), this.loadStations()]);
      // 若已选择设备并显示图表，则同时刷新历史与预报数据（不触发滚动/动画）
      if (this.showPanels && this.decimalId) {
        await this.query(true);
      }
    } catch {}
  }

  private getTiandituKey(): string {
    const anyWin = (window as any);
    return anyWin.TIANDITU_KEY || '0c260b8a094a4e0bc507808812cefdac';
  }

  get wh65lpCount(): number {
    return (this.stations || []).filter(s => s.device_type === 'WH65LP').length;
  }

  private initMap() {
    const ol: any = (window as any).ol; if (!ol) return;
    const tk = this.getTiandituKey();
    const mkLayer = (url: string) => new ol.layer.Tile({ source: new ol.source.XYZ({ url }) });
    this.layers = {
      satellite: new ol.layer.Group({ layers: [
        mkLayer(`https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`),
        mkLayer(`https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`)
      ]}),
      vector: new ol.layer.Group({ layers: [
        mkLayer(`https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`),
        mkLayer(`https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`)
      ], visible: false}),
      terrain: new ol.layer.Group({ layers: [
        mkLayer(`https://t{0-7}.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`),
        mkLayer(`https://t{0-7}.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`)
      ], visible: false}),
      hybrid: new ol.layer.Group({ layers: [
        mkLayer(`https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`),
        mkLayer(`https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`)
      ], visible: false})
    };

    this.stationSource = new ol.source.Vector();
    this.clusterSource = new ol.source.Cluster({ distance: 60, minDistance: 20, source: this.stationSource });
    this.clusterLayer = new ol.layer.Vector({ source: this.clusterSource, style: (f:any)=> this.createClusterStyle(f) });
    this.stationLayer = new ol.layer.Vector({ source: this.stationSource, visible: false, style: (f:any)=> this.createStationStyle(f) });
    this.tileOverlayGroup = new ol.layer.Group({ layers: [], zIndex: 999, visible: true });
    this.windOverlayLayer = new ol.layer.Vector({ source: new ol.source.Vector(), zIndex: 1000, visible: true });

    // Load KML overlay from /static/kml/selected_polygons.kml
    try {
      const kmlSource = new ol.source.Vector({
        url: '/static/kml/selected_polygons.kml',
        format: new ol.format.KML({ extractStyles: true })
      });
      this.kmlLayer = new ol.layer.Vector({ source: kmlSource, zIndex: 800, visible: true });
    } catch {}

    this.map = new ol.Map({ target: 'map', layers: [
      this.layers.satellite,
      this.layers.vector,
      this.layers.terrain,
      this.layers.hybrid,
      this.kmlLayer,
      this.tileOverlayGroup,
      this.windOverlayLayer,
      this.clusterLayer,
      this.stationLayer
    ], view: new ol.View({ center: ol.proj.fromLonLat([108, 35]), zoom: 5, minZoom: 3, maxZoom: 18 }) });

    // 使用全屏遮罩的页面级弹窗显示 KML 详情

    this.map.getView().on('change:resolution', () => {
      const z = this.map.getView().getZoom();
      this.updateClusterDistance(z);
      this.updateLayerVisibility(z);
    });

    if (this.stations?.length) this.updateStationsOnMap();
  }

  openKmlPopup(feature: any, coordinate: any) {
    try {
      const name = feature?.get ? (feature.get('name') || '') : '';
      let desc = feature?.get ? (feature.get('description') || '') : '';
      // Cleanup KML-wrapped CDATA and decode HTML entities
      try {
        desc = String(desc);
        desc = desc.replace(/^<!\[CDATA\[/, '').replace(/\]\]>$/, '');
        const ta = document.createElement('textarea'); ta.innerHTML = desc; desc = ta.value;
      } catch {}
      this.kmlInfoTitle = String(name || '详情');
      this.kmlInfoHtml = String(desc || '');
      // 使用页面级模态对话框显示
      this.isKmlDialogOpen = true;
    } catch {}
  }

  closeKmlPopup() {
    try {
      this.isKmlDialogOpen = false;
    } catch {}
  }

  switchLayer(layerType: string) {
    const layers = this.layers; if (!layers) return;
    Object.keys(layers).forEach(key => { if (layers[key].setVisible) layers[key].setVisible(key === layerType); });
  }

  private updateClusterDistance(zoom: number) {
    if (!this.clusterSource) return;
    const distance = zoom < this.CLUSTER_THRESHOLD ? 60 : 20;
    this.clusterSource.setDistance(distance);
  }

  private updateLayerVisibility(zoom: number) {
    if (!this.clusterLayer || !this.stationLayer) return;
    const showCluster = zoom < this.CLUSTER_THRESHOLD;
    this.clusterLayer.setVisible(showCluster);
    this.stationLayer.setVisible(!showCluster);
  }

  private markerIcon(isOnline: boolean) {
    const ol: any = (window as any).ol;
    const src = isOnline ? '/static/images/marker-online.svg' : '/static/images/marker-offline.svg';
    return new ol.style.Icon({ src, anchor: [0.5,1], anchorXUnits: 'fraction', anchorYUnits: 'fraction', scale: 0.9 });
  }

  private createStationStyle(feature: any) {
    const ol: any = (window as any).ol;
    const last = feature.get('lastUpdate');
    const online = last ? (new Date(last).getTime() > Date.now() - 5*60*1000) : false;
    const location = feature.get('location') || '';
    return new ol.style.Style({
      image: this.markerIcon(online),
      text: location ? new ol.style.Text({ text: location, offsetY: -28, fill: new ol.style.Fill({ color: '#111' }), stroke: new ol.style.Stroke({ color: '#fff', width: 3 }), font: '12px sans-serif' }) : undefined
    });
  }

  private createClusterStyle(feature: any) {
    const ol: any = (window as any).ol;
    const features = feature.get('features') || [];
    const size = features.length;
    const zoom = this.map.getView().getZoom();
    if (zoom < this.CLUSTER_THRESHOLD) {
      if (size > 1) {
        const radius = Math.min(16 + size * 0.8, 32);
        const fontSize = Math.min(11 + size/12, 16);
        return new ol.style.Style({
          image: new ol.style.Circle({ radius, fill: new ol.style.Fill({ color: 'rgba(0,123,255,0.8)' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }),
          text: new ol.style.Text({ text: String(size), fill: new ol.style.Fill({ color: '#fff' }), font: `bold ${fontSize}px Arial`, offsetY: 1 })
        });
      } else {
        const f0 = features[0];
        const last = f0?.get('lastUpdate');
        const online = last ? (new Date(last).getTime() > Date.now() - 5*60*1000) : false;
        const color = online ? 'rgba(0,123,255,0.8)' : 'rgba(108,117,125,0.8)';
        return new ol.style.Style({
          image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) })
        });
      }
    }
    return this.createStationStyle(features[0]);
  }

  private updateStationsOnMap() {
    const ol: any = (window as any).ol; if (!ol || !this.stationSource) return;
    this.stationSource.clear();
    (this.stations||[]).forEach(s => {
      if (typeof s.longitude !== 'number' || typeof s.latitude !== 'number') return;
      const f = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([s.longitude, s.latitude])), lastUpdate: (s as any).last_update || '', stationId: s.station_id, location: s.location || '' });
      this.stationSource.addFeature(f);
    });
    // click to select
    if (this.map && !this.mapEventsBound) {
      this.map.on('singleclick', async (evt:any) => {
        // 先尝试命中 KML 要素
        try {
          let handledKml = false;
          this.map.forEachFeatureAtPixel(evt.pixel, (f:any, layer:any) => {
            if (this.kmlLayer && layer === this.kmlLayer) {
              this.openKmlPopup(f, evt.coordinate);
              handledKml = true;
              return true;
            }
            return false;
          }, { layerFilter: (l:any)=> l===this.kmlLayer, hitTolerance: 6 });
          if (handledKml) return;
        } catch {}
        // 再处理站点/聚合点击
        const olAny: any = (window as any).ol;
        const features = this.map.getFeaturesAtPixel(evt.pixel, { layerFilter: (l:any)=> l===this.stationLayer || l===this.clusterLayer });
        if (!features || features.length===0) return;
        let f = features[0];
        const subs = f.get('features');
        if (subs && subs.length>0) {
          const view = this.map.getView();
          const ex = olAny.extent.createEmpty();
          for (const sf of subs) {
            olAny.extent.extend(ex, sf.getGeometry().getExtent());
          }
          view.fit(ex, { duration: 300, maxZoom: 14, padding: [40,40,40,40] });
          return;
        }
        const sid = f.get('stationId');
        if (!sid) return;
        const hex = String(sid).slice(-6).toUpperCase();
        this.decimalId = hex;
        await this.query();
        this.scrollToChart();
      });
      this.map.on('pointermove', (evt:any) => {
        const features = this.map.getFeaturesAtPixel(evt.pixel, { layerFilter: (l:any)=> l===this.stationLayer || l===this.clusterLayer || l===this.kmlLayer });
        const el = this.map.getTargetElement();
        if (el) el.style.cursor = (features && features.length>0) ? 'pointer' : '';
        this.showTileTooltip(evt);
      });
      this.mapEventsBound = true;
    }
  }

  async loadTileTimes(product: 'radar'|'rain'|'radar_detail') {
    try {
      const params = new URLSearchParams({ z: String(this.tileZ), y: String(this.tileY), x: String(this.tileX) });
      // 若指定了开始/结束时间，则按时间范围查询；否则按最近limit条
      const toFmt = (s: string) => s.replace('T',' ') + ':00';
      if (this.start && this.end) {
        params.set('from', toFmt(this.start));
        params.set('to', toFmt(this.end));
      } else {
        params.set('limit', '60');
      }
      const path = product==='rain' ? '/api/rain/times' : '/api/radar/times';
      const r = await fetch(`${path}?${params.toString()}`);
      if (!r.ok) return;
      const j = await r.json();
      this.tileTimes = j.times || [];
      this.tileIndex = 0;
      this.tileDt = this.tileTimes[0] || '';
      if (this.tileDt) await this.renderTilesAt(this.tileDt);
    } catch {}
  }

  async renderTilesAt(dt: string) {
    try {
      const params = new URLSearchParams({ z: String(this.tileZ), dt: dt });
      const isRain = this.tileProduct === 'rain';
      const path = isRain ? '/api/rain/tiles_at' : '/api/radar/tiles_at';
      const r = await fetch(`${path}?${params.toString()}`);
      if (!r.ok) { this.clearTileOverlays(); return; }
      const j = await r.json();
      const tiles = Array.isArray(j.tiles) ? j.tiles : [];
      if (tiles.length === 0) { this.clearTileOverlays(); this.clearWindOverlays(); return; }
      await this.renderTilesOnMap(isRain ? 'rain' : 'radar', tiles);
      // 同步 tileIndex 以匹配选择的时次
      const idx = this.tileTimes.findIndex(t => t === dt);
      if (idx >= 0) { this.tileIndex = idx; this.tileDt = dt; }
      if (!isRain && this.tileProduct === 'radar_detail') {
        this.drawWindOverlays(dt);
      } else {
        this.clearWindOverlays();
      }
    } catch { this.clearTileOverlays(); }
  }

  clearTileOverlays() {
    if (!this.tileOverlayGroup) return;
    const coll = this.tileOverlayGroup.getLayers();
    if (coll) coll.clear();
  }

  clearWindOverlays() {
    const ol: any = (window as any).ol; if (!ol || !this.windOverlayLayer) return;
    const src = this.windOverlayLayer.getSource();
    if (src) src.clear();
    try { const box = document.getElementById('regionStats'); if (box) box.style.display='none'; } catch {}
  }

  private getSelectedStation(): Station | undefined {
    try {
      const sid = this.makeStationIdFromHex(this.decimalId || '');
      if (!sid) return undefined;
      return this.stations.find(s => s.station_id === sid);
    } catch { return undefined; }
  }

  private async drawWindOverlays(dtStr: string) {
    const ol: any = (window as any).ol; if (!ol || !this.map || !this.windOverlayLayer) return;
    const src = this.windOverlayLayer.getSource(); if (!src) return;
    src.clear();
    // 选择中心：优先当前选中站点，否则地图中心
    let centerLon = 108, centerLat = 35;
    const st = this.getSelectedStation();
    if (st && typeof st.longitude==='number' && typeof st.latitude==='number') { centerLon = st.longitude!; centerLat = st.latitude!; }
    else {
      try {
        const c = this.map.getView().getCenter();
        const lonlat = ol.proj.toLonLat(c, this.map.getView().getProjection());
        centerLon = lonlat[0]; centerLat = lonlat[1];
      } catch {}
    }
    // 调用后端根据经纬度与时间查询最近的 radar_weather 风数据
    let windDir: number|null = null, windSpd: number|null = null;
    try {
      const params = new URLSearchParams({ lat: String(centerLat), lon: String(centerLon), dt: dtStr });
      const r = await fetch(`/api/radar/weather_nearest?${params.toString()}`);
      if (r.ok) {
        const j = await r.json();
        if (j && j.wind_direction != null) windDir = Number(j.wind_direction);
        if (j && j.wind_speed != null) windSpd = Number(j.wind_speed);
        if (isFinite(windDir as any)) windDir = ((windDir as number) % 360 + 360) % 360;
        if (!isFinite(windSpd as any)) windSpd = null;
      }
    } catch {}
    const proj = this.map.getView().getProjection();
    const center = ol.proj.fromLonLat([centerLon, centerLat], proj);

    // 8km 圆（红色虚线边框）
    try {
      const circle = new ol.geom.Circle(center, 8000);
      const cf = new ol.Feature({ geometry: circle });
      cf.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255,0,0,0.95)', width: 2, lineDash: [6,4] }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.03)' }) }));
      src.addFeature(cf);
    } catch {}

    if (windDir != null && windSpd != null && windSpd > 0.01) {
      const bearingTo = windDir;
      const hours = 3;
      const radius = windSpd * 3600 * hours; // m
      const half = 25; // 半角
      const pts: number[][] = [];
      pts.push(center);
      for (let a = -half; a <= half; a += 2.5) {
        const ang = (bearingTo + a) * Math.PI / 180;
        const dx = radius * Math.sin(ang);
        const dy = radius * Math.cos(ang);
        pts.push([center[0] + dx, center[1] + dy]);
      }
      pts.push(center);
      const poly = new ol.geom.Polygon([pts]);
      const pf = new ol.Feature({ geometry: poly });
      pf.setStyle(new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255,0,0,0.95)', width: 2, lineDash: [6,4] }), fill: new ol.style.Fill({ color: 'rgba(255,0,0,0.05)' }) }));
      src.addFeature(pf);

      // 统计扇形区域内的强回波像元数量（基于当前已加载的雷达瓦片）
      try {
        const polyLonLat: [number,number][] = pts.map(p => {
          const lonlat = ol.proj.toLonLat(p, this.map.getView().getProjection());
          return [lonlat[0], lonlat[1]];
        });
        const counts = this.countDbzInPolygon(polyLonLat);
        this.updateRegionStats(counts, windDir, windSpd);
      } catch {}
    }
  }

  private updateRegionStats(counts?: { ge30:number; ge35:number; ge40:number } | null, windDir?: number|null, windSpd?: number|null) {
    try {
      const box = document.getElementById('regionStats');
      const s30 = document.getElementById('statDbz30');
      const s35 = document.getElementById('statDbz35');
      const s40 = document.getElementById('statDbz40');
      const sDir = document.getElementById('statWindDir');
      const sSpd = document.getElementById('statWindSpd');
      if (!box || !s30 || !s35 || !s40 || !sDir || !sSpd) return;
      if (!counts) { box.style.display='none'; return; }
      s30.textContent = String(counts.ge30);
      s35.textContent = String(counts.ge35);
      s40.textContent = String(counts.ge40);
      if (windDir != null && isFinite(windDir)) { sDir.textContent = String(Math.round(windDir)); } else { sDir.textContent = '--'; }
      if (windSpd != null && isFinite(windSpd)) { sSpd.textContent = String(Math.round((windSpd as number)*10)/10); } else { sSpd.textContent = '--'; }
      box.style.display = 'block';
    } catch {}
  }

  private countDbzInPolygon(poly: [number,number][]): { ge30:number; ge35:number; ge40:number } | null {
    // 需要已有雷达瓦片数据
    const tiles = (this.tileLastList || []).filter(it => it && it.product==='radar');
    if (!tiles.length) return null;
    const ptInPoly = (x:number,y:number, polygon:[number,number][]) => {
      // ray casting
      let inside = false;
      for (let i=0, j=polygon.length-1; i<polygon.length; j=i++) {
        const xi = polygon[i][0], yi = polygon[i][1];
        const xj = polygon[j][0], yj = polygon[j][1];
        const intersect = ((yi>y) !== (yj>y)) && (x < (xj - xi) * (y - yi) / ((yj - yi) || 1e-9) + xi);
        if (intersect) inside = !inside;
      }
      return inside;
    };
    let c30=0, c35=0, c40=0;
    for (const t of tiles) {
      const { west, south, east, north, width, height } = t.meta;
      const dlon = (east - west) / width;
      const dlat = (north - south) / height;
      const vals: (number|null)[][] = t.values || [];
      for (let row=0; row<height; row++) {
        const lat = south + (row + 0.5) * dlat;
        const srcRow = vals[row] as (number|null)[];
        if (!srcRow) continue;
        for (let col=0; col<width; col++) {
          const v = srcRow[col];
          if (v == null || v < 30) continue; // 低于30无需落点判断
          const lon = west + (col + 0.5) * dlon;
          if (!ptInPoly(lon, lat, poly)) continue;
          if (v >= 30) c30++;
          if (v >= 35) c35++;
          if (v >= 40) c40++;
        }
      }
    }
    return { ge30: c30, ge35: c35, ge40: c40 };
  }

  addImageOverlayFromCanvas(canvas: HTMLCanvasElement, extent4326: [number,number,number,number]) {
    const ol: any = (window as any).ol; if (!ol || !this.map) return;
    const proj = this.map.getView().getProjection();
    const extentProj = ol.proj.transformExtent(extent4326, 'EPSG:4326', proj);
    const src = new ol.source.ImageStatic({ url: canvas.toDataURL('image/png'), imageExtent: extentProj, projection: proj });
    const layer = new ol.layer.Image({ source: src, opacity: 0.8, visible: true });
    this.tileOverlayGroup.getLayers().push(layer);
  }

  async renderTilesOnMap(product: 'none'|'radar'|'rain', tiles: any[]) {
    this.clearTileOverlays();
    const lastList: any[] = [];
    for (const t of tiles) {
      const w = t.width, h = t.height; if (!w||!h||!t.values) continue;
      const canvas = document.createElement('canvas'); canvas.width=w; canvas.height=h;
      const ctx = canvas.getContext('2d')!; const img = ctx.createImageData(w,h);
      const radarColors = [[0,0,255],[0,191,255],[0,255,255],[127,255,212],[124,252,0],[173,255,47],[255,255,0],[255,215,0],[255,165,0],[255,140,0],[255,69,0],[255,0,0],[220,20,60],[199,21,133],[139,0,139]];
      const rainEdges = [0,5,7.5,10,12.5,15,17.5,20,25,30,40,50,75,100, Infinity];
      const rainColors = [
        [126,212,121], [126,212,121], [110,200,109], [97,169,97], [81,148,76], [90,158,112],
        [143,194,254], [92,134,245], [66,87,240], [45,48,214], [26,15,166], [63,22,145], [191,70,148], [213,1,146], [213,1,146]
      ];
      for (let row=0; row<h; row++) {
        const srcRow = t.values[row] as (number|null)[];
        const dstRow = (h - 1 - row);
        for (let col=0; col<w; col++) {
          const v = srcRow[col];
          const off = (dstRow*w + col)*4;
          if (v==null || v===0) { img.data[off+3]=0; continue; }
          if (product==='rain') {
            let idx=0; while(idx<rainEdges.length-1 && !(v>=rainEdges[idx] && v<rainEdges[idx+1])) idx++;
            const c = rainColors[Math.min(idx, rainColors.length-1)]; img.data[off]=c[0]; img.data[off+1]=c[1]; img.data[off+2]=c[2]; img.data[off+3]=220;
          } else {
            let bin = Math.floor(Math.max(0, Math.min(75, v))/5); if (bin>=radarColors.length) bin=radarColors.length-1;
            const c = radarColors[bin]; img.data[off]=c[0]; img.data[off+1]=c[1]; img.data[off+2]=c[2]; img.data[off+3]=220;
          }
        }
      }
      ctx.putImageData(img,0,0);
      this.addImageOverlayFromCanvas(canvas, [t.west, t.south, t.east, t.north]);
      lastList.push({ product, meta: { west: t.west, south: t.south, east: t.east, north: t.north, width: w, height: h }, values: t.values });
    }
    this.tileLastList = lastList;
  }

  onProductChange() { this.reloadTileTimesAndShow(); }
  async reloadTileTimesAndShow() {
    if (this.tileProduct==='none') { this.clearTileOverlays(); this.tileTimes=[]; this.tileDt=''; return; }
    await this.loadTileTimes(this.tileProduct);
  }

  private makeStationIdFromHex(hexRaw: string): string | null {
    if (!hexRaw) return null;
    const hex = String(hexRaw).toUpperCase().replace(/[^0-9A-F]/g, '').padStart(6, '0').slice(-6);
    if (!hex) return null;
    return `RS485-${hex}`;
  }

  async query(suppressUX: boolean = false) {
    const dec = this.decimalId.trim();
    if (!dec) return;
    const sid = this.makeStationIdFromHex(dec);
    if (!sid) return;
    const toFmt = (s: string) => s.replace('T',' ') + ':00';
    const from = toFmt(this.start);
    const to = toFmt(this.end);
    this.isLoading = true;
    try {
      [this.history, this.forecast] = await Promise.all([
        this.api.getHistory(dec, from, to, this.interval),
        this.provider ? this.api.getForecast(sid, from, to, this.provider, 3) : Promise.resolve([])
      ]);
    } finally {
      this.isLoading = false;
    }
    this.showPanels = true;
    if (!suppressUX) this.isMapCollapsed = true;
    const st = this.stations.find(s => s.station_id === sid);
    const ol: any = (window as any).ol;
    if (!suppressUX) {
      if (st && ol && typeof st.longitude === 'number' && typeof st.latitude === 'number' && this.map) {
        this.map.getView().animate({ center: ol.proj.fromLonLat([st.longitude, st.latitude]), zoom: 11, duration: 400 });
      }
    }
    this.selectedLocation = (st && st.location) ? st.location : '';
    const titleName = st?.name || st?.station_alias || st?.station_id || '';
    this.selectedTitle = titleName ? `${titleName}${this.selectedLocation ? ` | ${this.selectedLocation}` : ''}` : (this.selectedLocation || '');
    this.reloadTileTimesAndShow();
    if (!suppressUX) {
      setTimeout(()=>{ try{ this.map.updateSize(); }catch{} }, 300);
      this.scrollToChart();
    }
  }

  onSelectStation(ev: { stationId: string, hex: string }) {
    this.decimalId = ev.hex;
    this.query();
  }

  prevTile() {
    if (!this.tileTimes || this.tileTimes.length===0) return;
    if (this.tileIndex < this.tileTimes.length-1) {
      this.tileIndex += 1;
      this.tileDt = this.tileTimes[this.tileIndex];
      this.renderTilesAt(this.tileDt);
    }
  }

  nextTile() {
    if (!this.tileTimes || this.tileTimes.length===0) return;
    if (this.tileIndex > 0) {
      this.tileIndex -= 1;
      this.tileDt = this.tileTimes[this.tileIndex];
      this.renderTilesAt(this.tileDt);
    }
  }

  toggleMap() {
    this.isMapCollapsed = !this.isMapCollapsed;
    setTimeout(()=>{ try{ this.map.updateSize(); }catch{} }, 300);
  }

  private scrollToChart() {
    const el = document.getElementById('chartSection');
    if (el) { try { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch {} }
  }

  private showTileTooltip(evt:any) {
    const tip = document.getElementById('tileValueTooltip');
    if (!tip || !this.map || !this.tileLastList || this.tileLastList.length===0) { if (tip) tip.style.display='none'; return; }
    try {
      const coord = this.map.getEventCoordinate(evt.originalEvent);
      const lonlat = (window as any).ol.proj.transform(coord, this.map.getView().getProjection(), 'EPSG:4326');
      const lon = lonlat[0], lat = lonlat[1];
      let value: number|null = null; let unit = '';
      for (const it of this.tileLastList) {
        const { west,south,east,north,width,height } = it.meta;
        if (lon < west || lon > east || lat < south || lat > north) continue;
        const px = Math.floor((lon - west) / ((east - west) / width));
        const py = Math.floor((lat - south) / ((north - south) / height));
        if (px < 0 || px >= width || py < 0 || py >= height) continue;
        const v = it.values?.[py]?.[px];
        if (v != null) { value = Number(v); unit = it.product==='rain' ? 'mm' : 'dBZ'; break; }
      }
      if (value == null) { tip.style.display='none'; return; }
      tip.textContent = `${value.toFixed(1)} ${unit}`;
      const px = evt.pixel[0] + 12; const py = evt.pixel[1] + 12;
      tip.style.left = `${px}px`; tip.style.top = `${py}px`; tip.style.display='block';
    } catch { if (tip) tip.style.display='none'; }
  }
}

bootstrapApplication(AppComponent).catch(err => console.error(err));