import { motion } from 'motion/react';
import { Construction, Hammer } from 'lucide-react';
import RotatingFooterHint from '../../components/RotatingFooterHint';

const ETC_HINTS = [
  'ETC 通行费数据正在与发卡方系统打通…',
  '工人 GG 正在搭脚手架，敬请期待 ~',
  '马上能看到每月通行费明细啦',
  '想看哪个维度的 ETC？反馈一下嘛',
  '上线时机：等数据接通的那一天',
];

export default function ETCView() {
  return (
    <div className="flex flex-col gap-4">
      <motion.div
        initial={{ opacity: 0, y: 12 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.3 }}
        className="bg-white rounded-2xl border border-slate-100 shadow-sm px-6 py-14 flex flex-col items-center text-center"
      >
        <div className="relative w-20 h-20 mb-4">
          <motion.div
            animate={{ rotate: [0, -8, 8, -4, 4, 0] }}
            transition={{ duration: 2.4, repeat: Infinity, ease: 'easeInOut' }}
            className="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"
          >
            <Construction size={36} className="text-amber-500" strokeWidth={2.2} />
          </motion.div>
          <motion.div
            animate={{ rotate: [0, 18, -10, 0], y: [0, -2, 1, 0] }}
            transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
            className="absolute -top-1 -right-1 w-9 h-9 rounded-2xl bg-white border border-amber-100 shadow-sm flex items-center justify-center"
          >
            <Hammer size={16} className="text-amber-500" strokeWidth={2.2} />
          </motion.div>
        </div>

        <div className="text-base font-black text-slate-800 mb-1.5">ETC 模块建设中</div>
        <div className="text-[12px] text-slate-500 font-bold leading-relaxed max-w-[280px]">
          通行费明细、按车按月统计、运营成本拆分
          <br />
          这些数据都在路上啦
        </div>

        {/* 简单的里程碑进度感 */}
        <div className="mt-6 w-full max-w-xs space-y-2">
          {[
            { label: '需求评审', done: true },
            { label: '数据对接', done: true },
            { label: '页面开发', done: false, current: true },
            { label: '正式上线', done: false },
          ].map((m, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, x: -8 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: 0.1 + i * 0.08, duration: 0.3 }}
              className="flex items-center gap-2.5 text-[11px]"
            >
              <span className={`w-3 h-3 rounded-full flex-shrink-0 ${
                m.done ? 'bg-emerald-400'
                : m.current ? 'bg-amber-400 ring-4 ring-amber-100 animate-pulse'
                : 'bg-slate-200'
              }`} />
              <span className={`font-bold ${m.done ? 'text-slate-500' : m.current ? 'text-amber-600' : 'text-slate-300'}`}>
                {m.label}
              </span>
              {m.done && <span className="text-[10px] text-emerald-500 font-bold ml-auto">已完成</span>}
              {m.current && <span className="text-[10px] text-amber-500 font-bold ml-auto">进行中</span>}
            </motion.div>
          ))}
        </div>
      </motion.div>

      <RotatingFooterHint hints={ETC_HINTS} />
    </div>
  );
}