import { useEffect, useMemo, useRef, useState } from 'react';
import type { HistoryLocationRow, TrackStop } from '../../api/types';
import { getAMapConfig, isAMapConfigured } from '../../config/appConfig';
import { isValidAMapCoordinate, loadAMap, wgs84ToGcj02, type AMapLike, type AMapMap, type AMapOverlay } from '../../integrations/amap';
import { Button } from '@douyinfe/semi-ui';
import { IconList } from '@douyinfe/semi-icons';
import { MapRetryAction } from '../shared/RecoveryActions';

function markerContent(kind: 'start' | 'end' | 'stop' | 'current', label?: string) {
  if (kind === 'current') return '<div class="v2-track-current-marker" aria-hidden="true"><i></i><span></span></div>';
  return `<div class="v2-track-marker is-${kind}"><span>${label ?? ''}</span></div>`;
}

export function TrackMap({ points, stops, activeIndex, showStops, follow, followDurationMs = 180, onSelectIndex, onFollowChange, onOpenEvidence }: {
  points: HistoryLocationRow[];
  stops: TrackStop[];
  activeIndex: number;
  showStops: boolean;
  follow: boolean;
  followDurationMs?: number;
  onSelectIndex: (index: number) => void;
  onFollowChange: (follow: boolean) => void;
  onOpenEvidence?: () => void;
}) {
  const containerRef = useRef<HTMLDivElement>(null);
  const mapRef = useRef<AMapMap | null>(null);
  const amapRef = useRef<AMapLike | null>(null);
  const overlaysRef = useRef<AMapOverlay[]>([]);
  const overlayListenersRef = useRef<Array<{ overlay: AMapOverlay; handler: () => void }>>([]);
  const currentMarkerRef = useRef<AMapOverlay | null>(null);
  const passedPathRef = useRef<AMapOverlay | null>(null);
  const pathRef = useRef<[number, number][]>([]);
  const selectRef = useRef(onSelectIndex);
  const followChangeRef = useRef(onFollowChange);
  const valid = useMemo(() => points.map((point, index) => ({ point, index })).filter(({ point }) => isValidAMapCoordinate(point.longitude, point.latitude)), [points]);
  const hasValidPoints = valid.length > 0;
  const [state, setState] = useState<'idle' | 'loading' | 'ready' | 'fallback' | 'error'>(() => hasValidPoints ? 'loading' : 'idle');
  const [loadAttempt, setLoadAttempt] = useState(0);
  const passedCountByPoint = useMemo(() => {
    const counts = new Uint16Array(points.length);
    let validIndex = 0;
    for (let pointIndex = 0; pointIndex < points.length; pointIndex += 1) {
      while (validIndex < valid.length && valid[validIndex].index <= pointIndex) validIndex += 1;
      counts[pointIndex] = validIndex;
    }
    return counts;
  }, [points.length, valid]);

  useEffect(() => { selectRef.current = onSelectIndex; }, [onSelectIndex]);
  useEffect(() => { followChangeRef.current = onFollowChange; }, [onFollowChange]);

  useEffect(() => {
    if (!hasValidPoints) { setState('idle'); return; }
    setState('loading');
    if (!containerRef.current || !isAMapConfigured(getAMapConfig())) { setState('fallback'); return; }
    let cancelled = false;
    let mapInstance: AMapMap | undefined;
    let stopFollowing: (() => void) | undefined;
    loadAMap(['AMap.Scale', 'AMap.ToolBar']).then((AMap) => {
      if (cancelled || !containerRef.current) return;
      const first = valid[0]?.point;
      const map = new AMap.Map(containerRef.current, {
        zoom: first ? 13 : 5,
        center: first ? wgs84ToGcj02(first.longitude, first.latitude) : wgs84ToGcj02(105.4, 35.9),
        viewMode: '2D', mapStyle: 'amap://styles/whitesmoke', showLabel: true, resizeEnable: true,
        zooms: [3, 20]
      });
      mapInstance = map;
      map.addControl(new AMap.Scale());
      if (AMap.ToolBar) map.addControl(new AMap.ToolBar({ position: { right: '18px', bottom: '148px' } }));
      stopFollowing = () => followChangeRef.current(false);
      map.on?.('dragstart', stopFollowing);
      mapRef.current = map;
      amapRef.current = AMap;
      setState('ready');
    }).catch(() => { if (!cancelled) setState('error'); });
    return () => {
      cancelled = true;
      if (stopFollowing) mapInstance?.off?.('dragstart', stopFollowing);
      overlayListenersRef.current.forEach(({ overlay, handler }) => overlay.off?.('click', handler));
      overlaysRef.current.forEach((overlay) => overlay.setMap?.(null));
      currentMarkerRef.current?.setMap?.(null);
      mapRef.current?.destroy();
      overlaysRef.current = [];
      overlayListenersRef.current = [];
      currentMarkerRef.current = null;
      passedPathRef.current = null;
      pathRef.current = [];
      mapRef.current = null;
      amapRef.current = null;
    };
  }, [hasValidPoints, loadAttempt]);

  useEffect(() => {
    const AMap = amapRef.current;
    const map = mapRef.current;
    if (state !== 'ready' || !map || !valid.length || !AMap) return;
    overlayListenersRef.current.forEach(({ overlay, handler }) => overlay.off?.('click', handler));
    overlaysRef.current.forEach((overlay) => overlay.setMap?.(null));
    currentMarkerRef.current?.setMap?.(null);
    overlayListenersRef.current = [];

    const path = valid.map(({ point }) => wgs84ToGcj02(point.longitude, point.latitude));
    pathRef.current = path;
    const nextValidIndex = valid.findIndex(({ index }) => index >= activeIndex);
    const activeValidIndex = nextValidIndex >= 0 ? nextValidIndex : valid.length - 1;
    const fullPath = new AMap.Polyline({ path, strokeColor: '#2563eb', strokeWeight: 6, strokeOpacity: 0.82, lineJoin: 'round', lineCap: 'round', showDir: true, zIndex: 70 });
    const passedPath = new AMap.Polyline({ path: path.slice(0, activeValidIndex + 1), strokeColor: '#18a86b', strokeWeight: 7, strokeOpacity: 0.96, lineJoin: 'round', lineCap: 'round', zIndex: 80 });
    passedPathRef.current = passedPath;

    const first = valid[0];
    const last = valid[valid.length - 1];
    const start = new AMap.Marker({ position: path[0], anchor: 'center', content: markerContent('start', '始'), zIndex: 115 });
    const end = new AMap.Marker({ position: path[path.length - 1], anchor: 'center', content: markerContent('end', '终'), zIndex: 115 });
    const startHandler = () => selectRef.current(first.index);
    const endHandler = () => selectRef.current(last.index);
    start.on?.('click', startHandler);
    end.on?.('click', endHandler);
    const overlays: AMapOverlay[] = [fullPath, passedPath, start, end];
    const overlayListeners = [{ overlay: start, handler: startHandler }, { overlay: end, handler: endHandler }];

    if (showStops) stops.slice(0, 80).forEach((stop, index) => {
      if (!isValidAMapCoordinate(stop.longitude, stop.latitude)) return;
      const marker = new AMap.Marker({
        position: wgs84ToGcj02(stop.longitude, stop.latitude), anchor: 'center',
        content: markerContent('stop', String(index + 1)), zIndex: 105
      });
      const stopHandler = () => selectRef.current(Math.min(points.length - 1, Math.max(0, stop.sampledIndex)));
      marker.on?.('click', stopHandler);
      overlays.push(marker);
      overlayListeners.push({ overlay: marker, handler: stopHandler });
    });

    const active = valid.find(({ index }) => index === activeIndex) ?? first;
    const current = new AMap.Marker({ position: wgs84ToGcj02(active.point.longitude, active.point.latitude), anchor: 'center', content: markerContent('current'), zIndex: 130 });
    currentMarkerRef.current = current;
    overlaysRef.current = overlays;
    overlayListenersRef.current = overlayListeners;
    map.add([...overlays, current]);
    map.setFitView([fullPath], false, [72, 72, 168, 72]);
  }, [points, showStops, state, stops, valid]);

  useEffect(() => {
    const point = points[activeIndex];
    if (!point || !isValidAMapCoordinate(point.longitude, point.latitude)) return;
    const position = wgs84ToGcj02(point.longitude, point.latitude);
    currentMarkerRef.current?.setPosition?.(position);
    const passedCount = passedCountByPoint[activeIndex] ?? 0;
    passedPathRef.current?.setPath?.(pathRef.current.slice(0, Math.max(1, passedCount)));
    if (follow) mapRef.current?.panTo?.(position, followDurationMs);
  }, [activeIndex, follow, followDurationMs, passedCountByPoint, points]);

  return <div className="v2-track-map">
    <div ref={containerRef} className="v2-track-map-canvas" aria-label="历史轨迹地图" />
    {state !== 'ready' && (state !== 'idle' || points.length > 0) ? <div className={`v2-map-state is-${state}`}>
      {state === 'loading' ? <><span className="v2-spinner" />轨迹地图加载中</> : null}
      {state === 'idle' ? '当前轨迹没有可展示的有效坐标' : null}
      {state === 'fallback' ? <><strong>地图暂不可用</strong><span>已保留 {valid.length} 个有效轨迹点，可继续查看时间、来源与事件证据。</span>{onOpenEvidence ? <Button className="v2-map-evidence-action" theme="light" type="primary" icon={<IconList />} aria-label="查看轨迹证据" onClick={onOpenEvidence}>查看轨迹证据</Button> : null}</> : null}
      {state === 'error' ? <><strong>地图加载失败</strong><span>轨迹证据仍可使用；可重试地图或直接查看来源与事件。</span><div className="v2-map-state-actions"><MapRetryAction onRetry={() => setLoadAttempt((value) => value + 1)} />{onOpenEvidence ? <Button className="v2-map-evidence-action" theme="light" type="primary" icon={<IconList />} aria-label="查看轨迹证据" onClick={onOpenEvidence}>查看轨迹证据</Button> : null}</div></> : null}
    </div> : null}
  </div>;
}