import { useEffect, useState } from "react";
import { Package, ClipboardList, Loader2, AlertCircle } from "lucide-react";
import { fetchDashboardStats, type DashboardStats } from "../../services/dashboardApi";

function StatCard({
  label,
  total,
  pending,
  progress,
  done,
  icon: Icon,
}: {
  label: string;
  total: number;
  pending: number;
  progress: number;
  done: number;
  icon: React.ComponentType<{ className?: string }>;
}) {
  return (
    <div className="rounded-xl bg-white p-5 shadow-sm">
      <div className="mb-4 flex items-center gap-2">
        <Icon className="h-5 w-5 text-blue-600" />
        <h3 className="font-semibold text-gray-800">{label}</h3>
        <span className="ml-auto text-2xl font-bold text-gray-800">{total}</span>
      </div>
      <div className="flex h-2 overflow-hidden rounded-full bg-gray-100">
        {pending > 0 && (
          <div className="bg-yellow-400" style={{ width: `${(pending / Math.max(total, 1)) * 100}%` }} />
        )}
        {progress > 0 && (
          <div className="bg-blue-500" style={{ width: `${(progress / Math.max(total, 1)) * 100}%` }} />
        )}
        {done > 0 && (
          <div className="bg-green-500" style={{ width: `${(done / Math.max(total, 1)) * 100}%` }} />
        )}
      </div>
      <div className="mt-3 flex gap-4 text-xs text-gray-500">
        <span className="flex items-center gap-1"><span className="inline-block h-2 w-2 rounded-full bg-yellow-400" />待处理 {pending}</span>
        <span className="flex items-center gap-1"><span className="inline-block h-2 w-2 rounded-full bg-blue-500" />进行中 {progress}</span>
        <span className="flex items-center gap-1"><span className="inline-block h-2 w-2 rounded-full bg-green-500" />已完成 {done}</span>
      </div>
    </div>
  );
}

export default function AdminDashboard() {
  const [stats, setStats] = useState<DashboardStats | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchDashboardStats()
      .then(setStats)
      .catch(() => setError("加载统计数据失败，请确认后端已启动"))
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return <div className="flex items-center justify-center py-20"><Loader2 className="h-8 w-8 animate-spin text-blue-500" /></div>;
  }

  if (error) {
    return <div className="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700"><AlertCircle className="h-4 w-4" />{error}</div>;
  }

  if (!stats) return null;

  return (
    <div>
      <div className="mb-6">
        <h2 className="text-xl font-bold text-gray-800">全局生产概览</h2>
        <p className="mt-1 text-sm text-gray-500">PC端与移动端共享同一后台数据</p>
      </div>
      <div className="grid gap-5 md:grid-cols-2">
        <StatCard label="产品统计" total={stats.products_total} pending={stats.products_pending} progress={stats.products_in_progress} done={stats.products_completed} icon={Package} />
        <StatCard label="任务统计" total={stats.tasks_total} pending={stats.tasks_pending} progress={stats.tasks_in_progress} done={stats.tasks_completed} icon={ClipboardList} />
      </div>
    </div>
  );
}