import { AnimatePresence, motion } from 'motion/react';
import { AlertCircle, CheckCircle2 } from 'lucide-react';
import type { UploadResult } from './types';

interface UploadFeedbackProps {
  result: UploadResult | null;
  error: string | null;
  onCloseResult: () => void;
  onCloseError: () => void;
}

export function UploadFeedback({ result, error, onCloseResult, onCloseError }: UploadFeedbackProps) {
  return (
    <>
      <AnimatePresence>
        {result && (
          <motion.div
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            className="bg-white rounded-2xl border border-emerald-100 shadow-sm p-4 flex items-start gap-3"
          >
            <CheckCircle2 size={18} className="text-emerald-500 flex-shrink-0 mt-0.5" />
            <div className="flex-1 min-w-0">
              <div className="text-[12px] font-bold text-slate-700 mb-1">
                上传成功：<span className="text-slate-500 font-mono">{result.filename}</span>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-2 text-[11px]">
                <Stat label="解析" value={result.parsed} color="text-slate-700" />
                <Stat label="新增" value={result.inserted} color="text-blue-600" />
                <Stat label="重复跳过" value={result.fileDuplicates + result.dbDuplicates} color="text-slate-500" />
                <Stat label="内部" value={result.breakdown.internal} color="text-blue-600" />
                <Stat label="外部（含无车牌）" value={result.breakdown.external} color="text-amber-600" />
              </div>
            </div>
            <button onClick={onCloseResult} className="text-slate-300 hover:text-slate-600 text-[10px] font-bold">关闭</button>
          </motion.div>
        )}
      </AnimatePresence>
      <AnimatePresence>
        {error && (
          <motion.div
            initial={{ opacity: 0, y: 8 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -8 }}
            className="bg-red-50 rounded-2xl border border-red-200 shadow-sm p-4 flex items-start gap-3"
          >
            <AlertCircle size={18} className="text-red-500 flex-shrink-0 mt-0.5" />
            <div className="flex-1 text-[12px] font-bold text-red-700">{error}</div>
            <button onClick={onCloseError} className="text-red-300 hover:text-red-600 text-[10px] font-bold">关闭</button>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

function Stat({ label, value, color }: { label: string; value: number; color: string }) {
  return (
    <div className="bg-slate-50 rounded-lg px-2 py-1.5">
      <div className="text-[9px] text-slate-400 uppercase font-bold">{label}</div>
      <div className={`text-sm font-black tabular-nums ${color}`}>{value}</div>
    </div>
  );
}