import { ArrowRightLeft, ChevronRight } from 'lucide-react';
import { motion } from 'motion/react';
import type { SchedulingSuggestion } from './types';
import Blur from '../../components/Blur';

interface Props {
  suggestions: SchedulingSuggestion[];
  onSelect: (s: SchedulingSuggestion) => void;
}

function fmtKm(value: number): string {
  if (value >= 10000) return (value / 10000).toFixed(1) + '万';
  return value.toLocaleString();
}

function fmtRate(rate: number): string {
  return (rate * 100).toFixed(1) + '%';
}

export default function SuggestionList({ suggestions, onSelect }: Props) {
  if (suggestions.length === 0) {
    return (
      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-12 text-center">
        <ArrowRightLeft className="w-8 h-8 text-slate-200 mx-auto mb-2" />
        <p className="text-sm text-slate-400">暂无调度建议</p>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-slate-100">
        <div className="w-1 h-4 rounded-full bg-blue-500" />
        <span className="text-sm font-bold text-slate-700 flex-1">调度干预清单</span>
        <span className="text-[10px] font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
          {suggestions.length}
        </span>
      </div>

      <div className="divide-y divide-slate-50">
        {suggestions.map((s, idx) => {
          const isRescue = s.type === 'rescue_hopeless';
          const v = s.currentVehicle;

          return (
            <motion.div
              key={s.id}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: Math.min(idx * 0.02, 0.3) }}
              className="px-4 py-3 hover:bg-slate-50/60 cursor-pointer transition-colors active:bg-slate-100 flex items-center gap-3"
              onClick={() => onSelect(s)}
            >
              {/* Left: color bar */}
              <div className={`w-1 h-10 rounded-full flex-shrink-0 ${isRescue ? 'bg-rose-400' : 'bg-emerald-400'}`} />

              {/* Center: info */}
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2">
                  <span className="text-xs font-black text-slate-900 font-mono">
                    <Blur>{v.plateNumber}</Blur>
                  </span>
                  <span className={`text-[9px] px-1.5 py-px rounded font-bold ${
                    isRescue ? 'bg-rose-50 text-rose-500' : 'bg-emerald-50 text-emerald-500'
                  }`}>
                    {isRescue ? '无望' : '达标'}
                  </span>
                  <span className="text-[9px] text-slate-400">{v.vehicleType}</span>
                  <span className="text-[9px] text-slate-300">·</span>
                  <span className="text-[9px] text-slate-400">{v.region}</span>
                </div>
                <div className="flex items-center gap-3 mt-0.5 text-[10px] text-slate-400">
                  <span><Blur>{v.customer || '-'}</Blur></span>
                  <span>日均 <span className="text-slate-600 font-medium">{Math.round(v.customerAvgDaily)}</span> km</span>
                  <span>完成 <span className={`font-medium ${v.completionRate >= 1 ? 'text-emerald-600' : v.completionRate >= 0.5 ? 'text-amber-600' : 'text-rose-500'}`}>{fmtRate(v.completionRate)}</span></span>
                </div>
              </div>

              {/* Right: candidate count + arrow */}
              <div className="flex items-center gap-1 flex-shrink-0">
                <span className="text-xs font-bold text-blue-600">{s.candidates.length}</span>
                <span className="text-[9px] text-slate-400">辆</span>
                <ChevronRight size={14} className="text-slate-300" />
              </div>
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}