import { useCallback, useDeferredValue, useEffect, useMemo, useState } from 'react';
import { AlertTriangle, ChevronLeft, Clock3, MapPinned, Maximize2, Minimize2, SlidersHorizontal } from 'lucide-react';
import AmapHeatmapCanvas from './AmapHeatmapCanvas';
import HeatmapDetailPanel from './HeatmapDetailPanel';
import HeatmapFilters from './HeatmapFilters';
import { fetchAmapConfig, fetchHeatmapMeta, fetchHeatmapPoints, fetchNearbyVehicles } from './api';
import type { AmapConfig, HeatmapMeta, HeatmapMetric, HeatmapResponse, NearbyResponse } from './types';

const DEFAULT_START = '2026-01-01';
const DEFAULT_END = '2026-07-13';
const numberFormat = new Intl.NumberFormat('zh-CN');

function Metric({ value, label }: { value: number; label: string }) {
  return (
    <div className="min-w-[82px] text-center max-md:min-w-[64px]">
      <p className="text-[22px] font-semibold leading-none tracking-tight text-blue-600 tabular-nums max-md:text-[16px]">{numberFormat.format(value)}</p>
      <p className="mt-1.5 text-[11px] text-slate-500 max-md:mt-1 max-md:text-[9px]">{label}</p>
    </div>
  );
}

export default function VehicleHeatmapModule() {
  const [meta, setMeta] = useState<HeatmapMeta | null>(null);
  const [config, setConfig] = useState<AmapConfig | null>(null);
  const [data, setData] = useState<HeatmapResponse | null>(null);
  const [nearby, setNearby] = useState<NearbyResponse | null>(null);
  const [startDate, setStartDate] = useState(DEFAULT_START);
  const [endDate, setEndDate] = useState(DEFAULT_END);
  const [query, setQuery] = useState('');
  const [batchModel, setBatchModel] = useState('');
  const [metric, setMetric] = useState<HeatmapMetric>('locations');
  const [isFullscreen, setIsFullscreen] = useState(false);
  const [showFilters, setShowFilters] = useState(() => typeof window === 'undefined' || !window.matchMedia('(max-width: 767px)').matches);
  const [showDetails, setShowDetails] = useState(() => typeof window === 'undefined' || !window.matchMedia('(max-width: 767px)').matches);
  const [loading, setLoading] = useState(true);
  const [nearbyLoading, setNearbyLoading] = useState(false);
  const [error, setError] = useState('');
  const deferredQuery = useDeferredValue(query.trim());

  useEffect(() => {
    if (!isFullscreen) return undefined;
    const previousOverflow = document.body.style.overflow;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setIsFullscreen(false);
    };
    document.body.style.overflow = 'hidden';
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.body.style.overflow = previousOverflow;
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [isFullscreen]);

  const toggleFullscreen = useCallback(() => {
    setIsFullscreen((current) => !current);
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    Promise.all([fetchHeatmapMeta(controller.signal), fetchAmapConfig(controller.signal)])
      .then(([nextMeta, nextConfig]) => {
        setMeta(nextMeta);
        setConfig(nextConfig);
        setStartDate(nextMeta.startDate);
        setEndDate(nextMeta.endDate);
      })
      .catch((requestError) => {
        if (requestError?.name !== 'AbortError') setError('热力图基础配置加载失败');
      });
    return () => controller.abort();
  }, []);

  useEffect(() => {
    const controller = new AbortController();
    const timer = window.setTimeout(() => {
      setLoading(true);
      setError('');
      fetchHeatmapPoints({ startDate, endDate, query: deferredQuery, batchModel, metric }, controller.signal)
        .then((response) => {
          setData(response);
          setNearby(null);
        })
        .catch((requestError) => {
          if (requestError?.name !== 'AbortError') setError('热力图数据加载失败，请稍后重试');
        })
        .finally(() => setLoading(false));
    }, 220);
    return () => {
      window.clearTimeout(timer);
      controller.abort();
    };
  }, [batchModel, deferredQuery, endDate, metric, startDate]);

  const handleMapClick = useCallback((longitude: number, latitude: number) => {
    const controller = new AbortController();
    setNearbyLoading(true);
    fetchNearbyVehicles({ lng: longitude, lat: latitude, startDate, endDate, query: deferredQuery, batchModel }, controller.signal)
      .then(setNearby)
      .catch((requestError) => {
        if (requestError?.name !== 'AbortError') setError('区域车辆明细加载失败');
      })
      .finally(() => setNearbyLoading(false));
  }, [batchModel, deferredQuery, endDate, startDate]);

  const reset = () => {
    setStartDate(meta?.startDate || DEFAULT_START);
    setEndDate(meta?.endDate || DEFAULT_END);
    setQuery('');
    setBatchModel('');
    setMetric('locations');
    setNearby(null);
  };

  const detail = useMemo(() => {
    if (nearby) {
      return {
        title: '选中区域',
        subtitle: `${nearby.center.lng.toFixed(3)}, ${nearby.center.lat.toFixed(3)} · 半径 ${nearby.radiusKm} 公里`,
        locationCount: nearby.locationCount,
        vehicleCount: nearby.vehicleCount,
        vehicles: nearby.topVehicles,
        selected: true,
      };
    }
    return {
      title: deferredQuery ? '车辆定位概览' : '全国 · 当前范围',
      subtitle: `${batchModel ? `${batchModel} · ` : ''}${startDate} ～ ${endDate}`,
      locationCount: data?.locationCount || 0,
      vehicleCount: data?.vehicleCount || 0,
      vehicles: data?.topVehicles || [],
      selected: false,
    };
  }, [batchModel, data, deferredQuery, endDate, nearby, startDate]);

  return (
    <section className={`flex flex-col overflow-hidden bg-white ${isFullscreen ? 'fixed inset-0 z-[100] h-screen w-screen min-h-0' : 'h-[100dvh] min-h-[620px] max-md:h-[calc(100dvh-4rem)] max-md:min-h-[520px]'}`}>
      <header className="relative z-30 flex min-h-[98px] shrink-0 items-center justify-between border-b border-slate-200 bg-white px-8 max-md:min-h-[104px] max-md:flex-wrap max-md:gap-y-2 max-md:px-3 max-md:py-3">
        <div className="min-w-0">
          <h1 className="truncate text-[25px] font-semibold tracking-[-0.025em] text-slate-950 max-md:text-[18px]">车辆运营热力图</h1>
          <p className="mt-1.5 flex items-center gap-1.5 text-[11px] text-slate-400 max-md:mt-1 max-md:text-[9px]"><MapPinned size={13} />每日每车首个有效定位 · 上海时区</p>
        </div>
        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-7 max-md:order-3 max-md:static max-md:w-full max-md:translate-x-0 max-md:translate-y-0 max-md:justify-center max-md:gap-2">
          <Metric value={data?.locationCount ?? meta?.locationCount ?? 0} label="定位点" />
          <span className="h-8 w-px bg-slate-200" />
          <Metric value={data?.vehicleCount ?? meta?.vehicleCount ?? 0} label="辆车" />
          <span className="h-8 w-px bg-slate-200" />
          <Metric value={data?.dayCount ?? meta?.dayCount ?? 0} label="天" />
        </div>
        <div className="flex items-center gap-3">
          <p className="flex items-center gap-2 text-[12px] text-slate-500 max-xl:hidden"><Clock3 size={15} strokeWidth={1.7} />数据更新至 {meta?.endDate || DEFAULT_END}</p>
          <button
            type="button"
            onClick={toggleFullscreen}
            className="grid h-9 w-9 place-items-center rounded-lg border border-slate-200 text-slate-500 transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600"
            title={isFullscreen ? '退出全屏' : '地图全屏'}
            aria-label={isFullscreen ? '退出地图全屏' : '地图全屏'}
            aria-pressed={isFullscreen}
          >
            {isFullscreen ? <Minimize2 size={17} /> : <Maximize2 size={17} />}
          </button>
        </div>
      </header>

      <div className="relative flex min-h-0 flex-1">
        <div className="relative z-0 min-w-0 flex-1 overflow-hidden">
          {config ? (
            <AmapHeatmapCanvas
              config={config}
              points={data?.points || []}
              max={data?.max || 1}
              metric={metric}
              focusQuery={deferredQuery}
              onMapClick={handleMapClick}
            />
          ) : <div className="absolute inset-0 bg-slate-100" />}

          {showFilters ? (
            <div className="pointer-events-none absolute left-3 right-3 top-3 z-10 md:left-5 md:right-auto md:top-5">
              <HeatmapFilters
                startDate={startDate}
                endDate={endDate}
                minDate={meta?.startDate || DEFAULT_START}
                maxDate={meta?.endDate || DEFAULT_END}
                query={query}
                batchModel={batchModel}
                batchModels={meta?.batchModels || []}
                metric={metric}
                vehicles={meta?.vehicles || []}
                onStartDateChange={setStartDate}
                onEndDateChange={setEndDate}
                onQueryChange={setQuery}
                onBatchModelChange={setBatchModel}
                onMetricChange={setMetric}
                onReset={reset}
                onHide={() => setShowFilters(false)}
              />
            </div>
          ) : (
            <button
              type="button"
              onClick={() => setShowFilters(true)}
              aria-label="显示筛选"
              className="absolute left-3 top-3 z-20 flex h-11 items-center gap-2 rounded-lg border border-slate-200 bg-white/95 px-3 text-xs font-medium text-slate-600 shadow-lg backdrop-blur-sm transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 md:left-5 md:top-5 md:h-10"
            >
              <SlidersHorizontal size={15} strokeWidth={1.8} />显示筛选
            </button>
          )}

          {!showDetails ? (
            <button
              type="button"
              onClick={() => setShowDetails(true)}
              aria-label="显示详情"
              className={`absolute right-3 top-3 z-20 flex h-11 items-center gap-2 rounded-lg border border-slate-200 bg-white/95 px-3 text-xs font-medium text-slate-600 shadow-lg backdrop-blur-sm transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600 md:right-5 md:top-5 md:h-10 ${showFilters ? 'max-md:hidden' : ''}`}
            >
              <ChevronLeft size={16} strokeWidth={1.8} />显示详情
            </button>
          ) : null}

          <div className="pointer-events-none absolute bottom-5 left-5 z-10 w-[286px] rounded-xl border border-slate-200/80 bg-white/95 p-3.5 shadow-[0_8px_30px_rgba(15,23,42,0.11)] backdrop-blur-sm max-lg:bottom-[calc(43vh+16px)] max-md:hidden">
            <div className="flex items-center justify-between text-[11px] font-medium text-slate-700"><span>{metric === 'locations' ? '定位活跃度' : '车辆覆盖度'}</span>{loading ? <i className="h-3 w-3 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" /> : null}</div>
            <p className="mt-1 text-[10px] leading-4 text-slate-500">
              {metric === 'locations'
                ? '同一网格累计每日首个定位，同车跨天重复计数；对数平滑强度。'
                : '同一网格按 VIN 去重，同车仅计 1 辆；平方根平滑强度。'}
            </p>
            <div className="mt-2.5 h-2.5 rounded-full bg-[linear-gradient(90deg,#2563eb_0%,#0891b2_25%,#16a34a_45%,#eab308_65%,#f97316_82%,#dc2626_100%)]" />
            <div className="mt-1.5 flex justify-between text-[10px] text-slate-400"><span>相对较低</span><span>相对较高</span></div>
          </div>

          {error ? (
            <div className="absolute bottom-5 left-1/2 z-30 flex -translate-x-1/2 items-center gap-2 rounded-lg bg-slate-900 px-4 py-2.5 text-xs text-white shadow-xl">
              <AlertTriangle size={15} className="text-amber-300" />{error}
            </div>
          ) : null}
        </div>

        {showDetails ? (
          <HeatmapDetailPanel
            {...detail}
            loading={nearbyLoading}
            onClose={() => setNearby(null)}
            onHide={() => setShowDetails(false)}
          />
        ) : null}
      </div>
    </section>
  );
}