import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Filter, RotateCcw, X, Search, ChevronDown } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { fetchSuggestions } from './api';
import type { SchedulingResponse, SchedulingSuggestion } from './types';
import SuggestionList from './SuggestionList';
import SuggestionDetail from './SuggestionDetail';

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>
  );
}

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 loadData = useCallback(async () => {
    setLoading(true);
    try { setData(await fetchSuggestions(selectedTargetId)); } finally { setLoading(false); }
  }, [selectedTargetId]);

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

  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-3 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>
        </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={() => { 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} />
          )}
        </div>

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