import { Activity } from 'lucide-react';
import { PageFrame, SkeletonBlock, SurfaceCard } from '../../../components/ui/surface';

export default function SchedulingSkeleton() {
  return (
    <PageFrame
      title="智能调度工作台"
      subtitle="自动识别高里程可释放车辆与低里程待救援车辆，形成可登记、可追踪的运营干预建议。"
      icon={Activity}
      eyebrow="SCHEDULING OPS"
      meta="建议生成中 · 正在计算候选车辆"
    >
      <div className="grid grid-cols-2 gap-3 md:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => <SkeletonBlock key={i} className="h-28" />)}
      </div>
      <SurfaceCard>
        <div className="space-y-3 p-4">
          <SkeletonBlock className="h-5 w-40" />
          <div className="flex gap-2">
            {[0, 1, 2, 3].map(i => <SkeletonBlock key={i} className="h-8 w-24 rounded-full" />)}
          </div>
          <div className="divide-y divide-slate-50">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="flex items-center gap-3 py-3">
                <SkeletonBlock className="h-10 w-1 rounded-full" />
                <div className="flex-1 space-y-2">
                  <SkeletonBlock className="h-3.5 w-48" />
                  <SkeletonBlock className="h-2.5 w-72 max-w-full" />
                </div>
                <SkeletonBlock className="h-6 w-16" />
              </div>
            ))}
          </div>
        </div>
      </SurfaceCard>
    </PageFrame>
  );
}