import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Filter, RotateCcw, X, Search, ChevronDown, CheckSquare, Send, Clock, Download } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { fetchSuggestions, sendNotifyBatch } from './api';
import type { SchedulingResponse, SchedulingSuggestion, CandidateVehicle } from './types';
import SuggestionList from './SuggestionList';
import SuggestionDetail from './SuggestionDetail';
import NotificationHistory from './NotificationHistory';
import { exportSuggestionsCsv } from './csv-export';
import Blur from '../../components/Blur';
import RotatingFooterHint from '../../components/RotatingFooterHint';

type TypeFilter = 'all' | 'qualified' | 'hopeless';

interface AdvancedFilters {
  plateSearch: string;
  region: string;
  vehicleType: string;
  customer: string;
  department: string;
  manager: string;
}

const EMPTY_FILTERS: AdvancedFilters = { plateSearch: '', region: '', vehicleType: '', customer: '', department: '', manager: '' };

function shortTargetName(name: string): string {
  const match = name.match(/(\d+)[辆台](.+)/);
  if (!match) return name;
  const count = match[1];
  let desc = match[2];
  desc = desc.replace('4.5T普货', '普货');
  desc = desc.replace('4.5T冷链车', '冷藏车');
  desc = desc.replace('4.5T冷链', '冷藏车');
  return `${count}台${desc}`;
}

function hasActiveFilters(f: AdvancedFilters): boolean {
  return f.plateSearch !== '' || f.region !== '' || f.vehicleType !== '' || f.customer !== '';
}

function FilterSelect({ label, options, value, onChange, placeholder }: {
  label: string; options: string[]; value: string; onChange: (v: string) => void; placeholder: string;
}) {
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState('');
  const ref = useRef<HTMLDivElement>(null);
  const filtered = options.filter(o => o.toLowerCase().includes(search.toLowerCase()));

  useEffect(() => {
    const handler = (e: MouseEvent) => { if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false); };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  return (
    <div ref={ref} className="space-y-1">
      <label className="text-[10px] text-slate-400 uppercase font-bold">{label}</label>
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between bg-slate-50 rounded-lg px-3 py-2 text-xs text-left cursor-pointer hover:bg-slate-100 transition-colors"
      >
        <span className={value ? 'text-slate-800 font-medium' : 'text-slate-400'}>{value || placeholder}</span>
        <ChevronDown size={14} className={`text-slate-400 transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>
      {open && (
        <div className="bg-white border border-slate-200 rounded-lg shadow-lg max-h-48 overflow-hidden z-10 relative">
          {options.length > 5 && (
            <div className="p-1.5 border-b border-slate-100">
              <div className="relative">
                <Search size={12} className="absolute left-2 top-1/2 -translate-y-1/2 text-slate-400" />
                <input type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="搜索..." autoFocus
                  className="w-full pl-7 pr-2 py-1.5 text-xs bg-slate-50 rounded border-none outline-none" />
              </div>
            </div>
          )}
          <div className="overflow-y-auto max-h-36">
            <button onClick={() => { onChange(''); setOpen(false); setSearch(''); }}
              className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-50 cursor-pointer ${!value ? 'text-blue-600 font-bold' : 'text-slate-400'}`}>全部</button>
            {filtered.map(opt => (
              <button key={opt} onClick={() => { onChange(opt); setOpen(false); setSearch(''); }}
                className={`w-full text-left px-3 py-2 text-xs hover:bg-slate-50 cursor-pointer ${value === opt ? 'text-blue-600 font-bold bg-blue-50' : 'text-slate-700'}`}>{opt}</button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

/** Skeleton pulse block */
function Sk({ className }: { className?: string }) {
  return <div className={`animate-pulse bg-slate-200/70 rounded ${className ?? ''}`} />;
}

function SkeletonPage() {
  return (
    <div className="min-h-screen bg-[#F0F4F8] font-sans p-3 md:p-6">
      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 md:pb-0">
        {/* Cards skeleton */}
        <div className="grid grid-cols-3 gap-2.5">
          {[0, 1, 2].map(i => (
            <div key={i} className="p-4 rounded-2xl bg-white border border-slate-100 space-y-2.5">
              <Sk className="h-3 w-16" />
              <Sk className="h-7 w-12" />
              <Sk className="h-2.5 w-24" />
            </div>
          ))}
        </div>

        {/* List card skeleton */}
        <div className="bg-white rounded-2xl border border-slate-200/60 overflow-hidden">
          {/* Header */}
          <div className="px-4 py-3 border-b border-slate-100 space-y-3">
            <div className="flex items-center justify-between">
              <Sk className="h-4 w-28" />
              <div className="flex gap-2"><Sk className="h-6 w-6 rounded-lg" /><Sk className="h-6 w-6 rounded-lg" /></div>
            </div>
            <div className="flex gap-2">
              {[0, 1, 2, 3].map(i => <Sk key={i} className="h-7 w-20 rounded-full" />)}
            </div>
          </div>

          {/* Rows */}
          <div className="divide-y divide-slate-50">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="px-4 py-3 flex items-center gap-3">
                <Sk className="w-1 h-10 rounded-full" />
                <div className="flex-1 space-y-2">
                  <div className="flex items-center gap-2">
                    <Sk className="h-3.5 w-20" />
                    <Sk className="h-3 w-10 rounded-full" />
                    <Sk className="h-3 w-14" />
                  </div>
                  <div className="flex items-center gap-3">
                    <Sk className="h-2.5 w-28" />
                    <Sk className="h-2.5 w-16" />
                    <Sk className="h-2.5 w-14" />
                  </div>
                </div>
                <Sk className="h-4 w-8" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function pickBestCandidate(s: SchedulingSuggestion): CandidateVehicle | null {
  // Business rule: at most one active intervention per suggestion. If ANY
  // candidate is already intervened, skip the whole suggestion in batch flow.
  const hasActive = s.candidates.some(
    c => c.notificationStatus === 'sent' || c.notificationStatus === 'executed',
  );
  if (hasActive) return null;
  return s.candidates.find(c => c.canQualifyAfterSwap) ?? s.candidates[0] ?? null;
}

export default function SchedulingModule() {
  const [data, setData] = useState<SchedulingResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [selectedTargetId, setSelectedTargetId] = useState<number | undefined>(undefined);
  const [selectedSuggestion, setSelectedSuggestion] = useState<SchedulingSuggestion | null>(null);
  const [typeFilter, setTypeFilter] = useState<TypeFilter>('all');
  const [showFilter, setShowFilter] = useState(false);
  const [filters, setFilters] = useState<AdvancedFilters>(EMPTY_FILTERS);
  const [tempFilters, setTempFilters] = useState<AdvancedFilters>(EMPTY_FILTERS);
  const [selectMode, setSelectMode] = useState(false);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [showBatchConfirm, setShowBatchConfirm] = useState(false);
  const [batchInFlight, setBatchInFlight] = useState(false);
  const [batchResultMsg, setBatchResultMsg] = useState<string | null>(null);
  const [showHistory, setShowHistory] = useState(false);
  const [historyRecentOnly, setHistoryRecentOnly] = useState(false);

  const loadData = useCallback(async () => {
    setLoading(true);
    try { setData(await fetchSuggestions(selectedTargetId)); } finally { setLoading(false); }
  }, [selectedTargetId]);

  useEffect(() => { loadData(); }, [loadData]);
  const handleNotifySuccess = useCallback(() => { loadData(); }, [loadData]);

  // Keep selectedSuggestion synced with latest data so candidate notification
  // status changes (登记 / 取消干预) propagate into the open detail modal.
  useEffect(() => {
    if (!selectedSuggestion || !data) return;
    const fresh = data.suggestions.find(s => s.id === selectedSuggestion.id);
    if (!fresh) setSelectedSuggestion(null);
    else if (fresh !== selectedSuggestion) setSelectedSuggestion(fresh);
  }, [data, selectedSuggestion]);

  const toggleSelect = useCallback((id: string) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }, []);

  const exitSelectMode = useCallback(() => {
    setSelectMode(false);
    setSelectedIds(new Set());
    setShowBatchConfirm(false);
  }, []);

  const batchItems = useMemo(() => {
    if (!data) return [];
    return [...selectedIds]
      .map(id => data.suggestions.find(s => s.id === id))
      .filter((s): s is SchedulingSuggestion => !!s)
      .map(s => {
        const candidate = pickBestCandidate(s);
        if (!candidate) return null;
        return { suggestion: s, candidate };
      })
      .filter((x): x is { suggestion: SchedulingSuggestion; candidate: CandidateVehicle } => !!x);
  }, [data, selectedIds]);

  const handleBatchSubmit = useCallback(async () => {
    if (batchItems.length === 0) return;
    setBatchInFlight(true);
    try {
      const resp = await sendNotifyBatch({
        items: batchItems.map(i => ({
          suggestionId: i.suggestion.id,
          currentPlate: i.suggestion.currentVehicle.plateNumber,
          candidatePlate: i.candidate.plateNumber,
        })),
      });
      setBatchResultMsg(resp.message);
      await loadData();
      exitSelectMode();
    } catch (e) {
      console.error('batch notify failed:', e);
      setBatchResultMsg('批量干预失败，请重试');
    } finally {
      setBatchInFlight(false);
    }
  }, [batchItems, loadData, exitSelectMode]);

  const filterOptions = useMemo(() => {
    if (!data) return { regions: [], vehicleTypes: [], customers: [], departments: [], managers: [] };
    const r = new Set<string>(), t = new Set<string>(), c = new Set<string>(), d = new Set<string>(), m = new Set<string>();
    for (const s of data.suggestions) {
      const v = s.currentVehicle;
      if (v.region) r.add(v.region);
      if (v.vehicleType) t.add(v.vehicleType);
      if (v.customer) c.add(v.customer);
      if (v.department) d.add(v.department);
      if (v.manager) m.add(v.manager);
    }
    return { regions: [...r].sort(), vehicleTypes: [...t].sort(), customers: [...c].sort(), departments: [...d].sort(), managers: [...m].sort() };
  }, [data]);

  const filteredSuggestions = useMemo(() => {
    if (!data) return [];
    let list = data.suggestions;
    if (typeFilter === 'qualified') list = list.filter(s => s.type === 'replace_qualified');
    if (typeFilter === 'hopeless') list = list.filter(s => s.type === 'rescue_hopeless');
    if (filters.plateSearch) { const q = filters.plateSearch.toLowerCase(); list = list.filter(s => s.currentVehicle.plateNumber.toLowerCase().includes(q)); }
    if (filters.region) list = list.filter(s => s.currentVehicle.region === filters.region);
    if (filters.vehicleType) list = list.filter(s => s.currentVehicle.vehicleType === filters.vehicleType);
    if (filters.customer) list = list.filter(s => s.currentVehicle.customer === filters.customer);
    if (filters.department) list = list.filter(s => s.currentVehicle.department === filters.department);
    if (filters.manager) list = list.filter(s => s.currentVehicle.manager === filters.manager);
    return list;
  }, [data, typeFilter, filters]);

  const summary = data?.summary;
  const activeFilterCount = [filters.plateSearch, filters.region, filters.vehicleType, filters.customer, filters.department, filters.manager].filter(Boolean).length;

  // Initial load — full page skeleton
  if (loading && !data) return <SkeletonPage />;

  return (
    <div className="min-h-screen bg-[#F0F4F8] text-slate-800 font-sans p-3 md:p-6" style={{ overflowX: 'clip' }}>
      <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 md:pb-0">

        {/* ===== Summary Cards ===== */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2.5">
          {/* 里程高·换下 — warm orange */}
          <button
            onClick={() => setTypeFilter(typeFilter === 'qualified' ? 'all' : 'qualified')}
            className={`p-3.5 rounded-2xl text-left transition-all cursor-pointer ${
              typeFilter === 'qualified'
                ? 'bg-orange-500 text-white shadow-lg shadow-orange-500/25'
                : 'bg-gradient-to-br from-orange-50 to-amber-50 border border-orange-200/60'
            }`}
          >
            <div className={`text-[10px] font-bold mb-1 ${typeFilter === 'qualified' ? 'text-orange-100' : 'text-orange-600'}`}>
              已完成考核目标
            </div>
            <div className={`text-2xl font-black ${typeFilter === 'qualified' ? 'text-white' : 'text-orange-700'}`}>
              {loading && !data ? '-' : summary?.qualifiedCount ?? 0}
              <span className={`text-[10px] font-normal ml-1 ${typeFilter === 'qualified' ? 'text-orange-200' : 'text-orange-400'}`}>台</span>
            </div>
            <div className={`text-[9px] mt-0.5 ${typeFilter === 'qualified' ? 'text-orange-200' : 'text-orange-400'}`}>
              换下，腾位给待达标车
            </div>
          </button>

          {/* 里程低·换走 — cool blue */}
          <button
            onClick={() => setTypeFilter(typeFilter === 'hopeless' ? 'all' : 'hopeless')}
            className={`p-3.5 rounded-2xl text-left transition-all cursor-pointer ${
              typeFilter === 'hopeless'
                ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/25'
                : 'bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200/60'
            }`}
          >
            <div className={`text-[10px] font-bold mb-1 ${typeFilter === 'hopeless' ? 'text-blue-100' : 'text-blue-600'}`}>
              预估无法达标
            </div>
            <div className={`text-2xl font-black ${typeFilter === 'hopeless' ? 'text-white' : 'text-blue-700'}`}>
              {loading && !data ? '-' : summary?.hopelessCount ?? 0}
              <span className={`text-[10px] font-normal ml-1 ${typeFilter === 'hopeless' ? 'text-blue-200' : 'text-blue-400'}`}>台</span>
            </div>
            <div className={`text-[9px] mt-0.5 ${typeFilter === 'hopeless' ? 'text-blue-200' : 'text-blue-400'}`}>
              换走，换上快达标的车
            </div>
          </button>

          {/* 替换建议 — neutral dark */}
          <button
            onClick={() => setTypeFilter('all')}
            className={`p-3.5 rounded-2xl text-left transition-all cursor-pointer ${
              typeFilter === 'all'
                ? 'bg-slate-800 text-white shadow-lg shadow-slate-800/25'
                : 'bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200/60'
            }`}
          >
            <div className={`text-[10px] font-bold mb-1 ${typeFilter === 'all' ? 'text-slate-300' : 'text-slate-500'}`}>
              替换建议
            </div>
            <div className={`text-2xl font-black ${typeFilter === 'all' ? 'text-white' : 'text-slate-800'}`}>
              {loading && !data ? '-' : summary?.suggestionCount ?? 0}
              <span className={`text-[10px] font-normal ml-1 ${typeFilter === 'all' ? 'text-slate-400' : 'text-slate-400'}`}>条</span>
            </div>
            <div className={`text-[9px] mt-0.5 ${typeFilter === 'all' ? 'text-slate-400' : 'text-slate-400'}`}>
              执行后预计 +{summary?.estimatedGain ?? 0} 台达标
            </div>
          </button>

          {/* 近期已干预 — emerald */}
          <button
            onClick={() => { setShowHistory(true); setHistoryRecentOnly(true); }}
            className="p-3.5 rounded-2xl text-left transition-all cursor-pointer bg-gradient-to-br from-emerald-50 to-teal-50 border border-emerald-200/60"
          >
            <div className="text-[10px] font-bold mb-1 text-emerald-600">
              近期已干预
            </div>
            <div className="text-2xl font-black text-emerald-700">
              {loading && !data ? '-' : summary?.recentInterventionCount ?? 0}
              <span className="text-[10px] font-normal ml-1 text-emerald-400">条</span>
            </div>
            <div className="text-[9px] mt-0.5 text-emerald-400">
              最近 7 天 · 点击查看
            </div>
          </button>
        </div>

        {/* ===== List Card ===== */}
        <div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">

          {/* Header */}
          <div className="px-4 py-3 border-b border-slate-100">
            <div className="flex items-center justify-between mb-3">
              <h3 className="text-sm font-bold text-slate-900">智能调度干预清单</h3>
              <div className="flex items-center gap-1">
                <button onClick={loadData} disabled={loading}
                  className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer">
                  <RotateCcw size={15} className={loading ? 'animate-spin' : ''} />
                </button>
                <button
                  onClick={() => exportSuggestionsCsv(filteredSuggestions)}
                  disabled={filteredSuggestions.length === 0}
                  className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
                  title="导出 CSV"
                >
                  <Download size={15} />
                </button>
                <button
                  onClick={() => { setShowHistory(true); setHistoryRecentOnly(false); }}
                  className="p-1.5 text-slate-400 hover:text-slate-600 transition-colors rounded-lg hover:bg-slate-50 cursor-pointer"
                  title="调度记录"
                >
                  <Clock size={15} />
                </button>
                <button
                  onClick={() => {
                    if (selectMode) exitSelectMode();
                    else { setSelectMode(true); setSelectedSuggestion(null); }
                  }}
                  className={`relative p-1.5 transition-colors rounded-lg cursor-pointer ${
                    selectMode ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'
                  }`}
                  title={selectMode ? '退出多选' : '多选模式'}
                >
                  <CheckSquare size={15} />
                </button>
                <button
                  onClick={() => { setShowFilter(!showFilter); setTempFilters(filters); }}
                  className={`relative p-1.5 transition-colors rounded-lg cursor-pointer ${
                    showFilter || activeFilterCount > 0 ? 'text-blue-600 bg-blue-50' : 'text-slate-400 hover:text-slate-600 hover:bg-slate-50'
                  }`}
                >
                  <Filter size={15} />
                  {activeFilterCount > 0 && (
                    <span className="absolute -top-1 -right-1 w-4 h-4 bg-blue-600 text-white text-[8px] font-bold rounded-full flex items-center justify-center">{activeFilterCount}</span>
                  )}
                </button>
              </div>
            </div>

            <div className="flex gap-2 overflow-x-auto no-scrollbar">
              <button
                onClick={() => { setSelectedTargetId(undefined); setTypeFilter('all'); }}
                className={`px-4 py-1.5 rounded-full text-[11px] font-bold whitespace-nowrap transition-all cursor-pointer ${
                  selectedTargetId === undefined ? 'bg-slate-800 text-white shadow-sm' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
                }`}
              >
                全部批次
              </button>
              {data?.targets.map(t => (
                <button key={t.id}
                  onClick={() => { setSelectedTargetId(t.id); setTypeFilter('all'); }}
                  className={`px-4 py-1.5 rounded-full text-[11px] font-bold whitespace-nowrap transition-all cursor-pointer ${
                    selectedTargetId === t.id ? 'bg-slate-800 text-white shadow-sm' : 'bg-slate-100 text-slate-500 hover:bg-slate-200'
                  }`}
                >
                  {shortTargetName(t.name)}
                </button>
              ))}
            </div>
          </div>

          {/* Filter Panel */}
          <AnimatePresence>
            {showFilter && (
              <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden border-b border-slate-100">
                <div className="px-4 py-4 bg-slate-50/60 space-y-3">
                  <div className="flex items-center justify-between">
                    <span className="text-xs font-bold text-slate-700">高级筛选</span>
                    {hasActiveFilters(tempFilters) && (
                      <button onClick={() => setTempFilters(EMPTY_FILTERS)} className="text-[10px] text-slate-400 hover:text-slate-600 cursor-pointer">重置</button>
                    )}
                  </div>
                  <div className="space-y-1">
                    <label className="text-[10px] text-slate-400 uppercase font-bold">车牌号</label>
                    <div className="relative">
                      <Search size={12} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                      <input type="text" value={tempFilters.plateSearch} onChange={e => setTempFilters(prev => ({ ...prev, plateSearch: e.target.value }))}
                        placeholder="搜索车牌号..." className="w-full pl-8 pr-3 py-2 bg-white rounded-lg text-xs border border-slate-200 outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition-all" />
                    </div>
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <FilterSelect label="运营区域" options={filterOptions.regions} value={tempFilters.region} onChange={v => setTempFilters(prev => ({ ...prev, region: v }))} placeholder="全部区域" />
                    <FilterSelect label="车辆类型" options={filterOptions.vehicleTypes} value={tempFilters.vehicleType} onChange={v => setTempFilters(prev => ({ ...prev, vehicleType: v }))} placeholder="全部类型" />
                  </div>
                  <div className="grid grid-cols-2 gap-3">
                    <FilterSelect label="业务部门" options={filterOptions.departments} value={tempFilters.department} onChange={v => setTempFilters(prev => ({ ...prev, department: v }))} placeholder="全部部门" />
                    <FilterSelect label="业务负责人" options={filterOptions.managers} value={tempFilters.manager} onChange={v => setTempFilters(prev => ({ ...prev, manager: v }))} placeholder="全部负责人" />
                  </div>
                  <FilterSelect label="客户" options={filterOptions.customers} value={tempFilters.customer} onChange={v => setTempFilters(prev => ({ ...prev, customer: v }))} placeholder="全部客户" />
                  <div className="flex gap-2 pt-1">
                    <button onClick={() => setShowFilter(false)} className="flex-1 py-2 text-xs font-bold text-slate-500 bg-white border border-slate-200 rounded-lg cursor-pointer hover:bg-slate-50 transition-colors">取消</button>
                    <button onClick={() => { setFilters(tempFilters); setShowFilter(false); }} className="flex-1 py-2 text-xs font-bold text-white bg-slate-800 rounded-lg cursor-pointer hover:bg-slate-900 transition-colors shadow-sm">确认筛选</button>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>

          {/* Active filter tags */}
          {activeFilterCount > 0 && !showFilter && (
            <div className="px-4 py-2 border-b border-slate-100 flex items-center gap-2 flex-wrap">
              <span className="text-[10px] text-slate-400">筛选:</span>
              {filters.plateSearch && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">车牌 "{filters.plateSearch}" <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, plateSearch: '' }))} /></span>}
              {filters.region && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.region} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, region: '' }))} /></span>}
              {filters.vehicleType && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.vehicleType} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, vehicleType: '' }))} /></span>}
              {filters.department && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.department} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, department: '' }))} /></span>}
              {filters.manager && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.manager} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, manager: '' }))} /></span>}
              {filters.customer && <span className="text-[10px] bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full flex items-center gap-1">{filters.customer} <X size={10} className="cursor-pointer" onClick={() => setFilters(prev => ({ ...prev, customer: '' }))} /></span>}
              <button onClick={() => setFilters(EMPTY_FILTERS)} className="text-[10px] text-slate-400 hover:text-slate-600 cursor-pointer">清除</button>
            </div>
          )}

          {(activeFilterCount > 0 || typeFilter !== 'all') && (
            <div className="px-4 py-1.5 border-b border-slate-50 text-[10px] text-slate-400">共 {filteredSuggestions.length} 条结果</div>
          )}

          {loading ? (
            /* List skeleton while refreshing */
            <div className="divide-y divide-slate-50">
              {Array.from({ length: 6 }).map((_, i) => (
                <div key={i} className="px-4 py-3 flex items-center gap-3">
                  <Sk className="w-1 h-10 rounded-full" />
                  <div className="flex-1 space-y-2">
                    <div className="flex items-center gap-2">
                      <Sk className="h-3.5 w-20" />
                      <Sk className="h-3 w-10 rounded-full" />
                      <Sk className="h-3 w-14" />
                    </div>
                    <div className="flex items-center gap-3">
                      <Sk className="h-2.5 w-28" />
                      <Sk className="h-2.5 w-16" />
                      <Sk className="h-2.5 w-14" />
                    </div>
                  </div>
                  <Sk className="h-4 w-8" />
                </div>
              ))}
            </div>
          ) : (
            <SuggestionList
              suggestions={filteredSuggestions}
              onSelect={setSelectedSuggestion}
              selectMode={selectMode}
              selectedIds={selectedIds}
              onToggleSelect={toggleSelect}
            />
          )}
        </div>

        {selectedSuggestion && (
          <SuggestionDetail suggestion={selectedSuggestion} onClose={() => setSelectedSuggestion(null)} onNotifySuccess={handleNotifySuccess} />
        )}

        {showHistory && (
          <NotificationHistory
            onClose={() => setShowHistory(false)}
            onChange={loadData}
            recentOnly={historyRecentOnly}
            suggestions={data?.suggestions}
          />
        )}

        {/* Batch action bar */}
        <AnimatePresence>
          {selectMode && (
            <motion.div
              initial={{ y: 80, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              exit={{ y: 80, opacity: 0 }}
              className="fixed bottom-4 left-3 right-3 md:left-auto md:right-6 md:bottom-6 md:w-[360px] z-40 bg-slate-900 text-white rounded-2xl shadow-2xl px-4 py-3 flex items-center justify-between gap-3"
            >
              <div className="flex items-center gap-2">
                <span className="text-xs font-medium">已选</span>
                <span className="text-lg font-black">{selectedIds.size}</span>
                <span className="text-xs text-slate-400">条</span>
              </div>
              <div className="flex items-center gap-2">
                <button
                  onClick={exitSelectMode}
                  className="text-xs font-medium text-slate-300 hover:text-white px-2 py-1.5 cursor-pointer transition-colors"
                >
                  取消
                </button>
                <button
                  onClick={() => setShowBatchConfirm(true)}
                  disabled={selectedIds.size === 0}
                  className="flex items-center gap-1.5 text-xs font-bold bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-400 text-white px-3 py-1.5 rounded-lg cursor-pointer disabled:cursor-not-allowed transition-colors"
                >
                  <Send size={12} /> 批量干预
                </button>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Batch confirmation modal */}
        {showBatchConfirm && (
          <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[70] flex items-end sm:items-center justify-center" onClick={() => !batchInFlight && setShowBatchConfirm(false)}>
            <motion.div
              initial={{ y: 40, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              onClick={e => e.stopPropagation()}
              className="bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl w-full sm:max-w-md overflow-hidden flex flex-col max-h-[80vh] sm:mx-4"
            >
              <div className="bg-slate-800 px-4 py-3 flex items-center justify-between flex-shrink-0">
                <span className="text-white font-bold text-sm">确认批量干预</span>
                <button
                  onClick={() => !batchInFlight && setShowBatchConfirm(false)}
                  disabled={batchInFlight}
                  className="text-slate-400 hover:text-white transition-colors p-1 cursor-pointer disabled:opacity-50"
                >
                  <X size={18} />
                </button>
              </div>
              <div className="px-4 py-3 overflow-y-auto flex-1">
                <p className="text-xs text-slate-500 mb-3">
                  将登记 <span className="font-bold text-slate-800">{batchItems.length}</span> 条干预，已排除无可用候选车的建议。
                </p>
                <div className="space-y-2">
                  {batchItems.map(({ suggestion, candidate }) => (
                    <div key={suggestion.id} className="text-[11px] bg-slate-50 rounded-lg px-3 py-2 flex items-center justify-between gap-2">
                      <div className="flex items-center gap-1.5 min-w-0">
                        <span className="font-mono font-bold text-slate-900"><Blur>{suggestion.currentVehicle.plateNumber}</Blur></span>
                        <span className="text-slate-400">→</span>
                        <span className="font-mono font-bold text-blue-700"><Blur>{candidate.plateNumber}</Blur></span>
                      </div>
                      {candidate.canQualifyAfterSwap ? (
                        <span className="text-emerald-600 text-[9px] font-bold flex-shrink-0">可达标</span>
                      ) : (
                        <span className="text-amber-500 text-[9px] font-bold flex-shrink-0">需关注</span>
                      )}
                    </div>
                  ))}
                </div>
                {batchResultMsg && (
                  <p className="mt-3 text-[11px] text-slate-500">{batchResultMsg}</p>
                )}
              </div>
              <div className="border-t border-slate-100 px-4 py-3 flex-shrink-0 flex gap-2">
                <button
                  onClick={() => setShowBatchConfirm(false)}
                  disabled={batchInFlight}
                  className="flex-1 py-2 text-xs font-bold text-slate-500 bg-slate-50 hover:bg-slate-100 rounded-lg cursor-pointer disabled:opacity-50 transition-colors"
                >
                  取消
                </button>
                <button
                  onClick={handleBatchSubmit}
                  disabled={batchInFlight || batchItems.length === 0}
                  className="flex-1 py-2 text-xs font-bold text-white bg-blue-600 hover:bg-blue-500 rounded-lg cursor-pointer disabled:opacity-50 transition-colors"
                >
                  {batchInFlight ? '登记中...' : `确认登记 ${batchItems.length} 条`}
                </button>
              </div>
            </motion.div>
          </div>
        )}
      </div>
      <RotatingFooterHint className="pb-4" />
    </div>
  );
}
