import { RefreshCw } from 'lucide-react';
import { motion } from 'motion/react';
import { fmtDate } from './utils';

export default function DailyReportLoadingOverlay({ reportDate }: { reportDate: string }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.16, ease: 'easeOut' }}
      role="status"
      aria-live="polite"
      className="fixed inset-0 z-[100] flex items-center justify-center bg-slate-950/20 p-5 backdrop-blur-[2px]"
    >
      <motion.div
        initial={{ opacity: 0, y: 12, scale: 0.96 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, y: 8, scale: 0.98 }}
        transition={{ duration: 0.22, ease: 'easeOut' }}
        className="w-full max-w-[260px] overflow-hidden rounded-xl border border-slate-100 bg-white p-5 text-center shadow-2xl"
      >
        <div className="relative mx-auto flex h-12 w-12 items-center justify-center">
          <motion.span
            className="absolute inset-0 rounded-full border-2 border-blue-100"
            animate={{ scale: [0.86, 1.15], opacity: [0.9, 0] }}
            transition={{ duration: 1.2, repeat: Infinity, ease: 'easeOut' }}
          />
          <span className="relative flex h-10 w-10 items-center justify-center rounded-full bg-blue-50 text-blue-600">
            <RefreshCw size={19} className="animate-spin" />
          </span>
        </div>
        <div className="mt-3 text-sm font-black text-slate-900">正在加载日报</div>
        <div className="mt-1 text-[11px] font-bold text-slate-400">正在汇总 {fmtDate(reportDate)} 的里程数据</div>
        <div className="mt-4 h-1 overflow-hidden rounded-full bg-slate-100">
          <motion.div
            className="h-full w-1/2 rounded-full bg-blue-500"
            animate={{ x: ['-100%', '220%'] }}
            transition={{ duration: 1.15, repeat: Infinity, ease: 'easeInOut' }}
          />
        </div>
      </motion.div>
    </motion.div>
  );
}