import { useState, useEffect } from "react";
import { adminFetch } from "./adminApi";

type RedemptionRecord = {
  id: string;
  userId: string;
  stampCount: number;
  redeemedAt: string;
  user: { username: string; phone: string };
  rule: { name: string };
};

type Stats = {
  userCount: number;
  collectionCount: number;
  redemptionCount: number;
};

export default function RedemptionLog() {
  const [records, setRecords] = useState<RedemptionRecord[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([
      adminFetch<RedemptionRecord[]>("/redemptions"),
      adminFetch<Stats>("/stats"),
    ])
      .then(([recs, st]) => {
        setRecords(recs);
        setStats(st);
      })
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p className="text-gray-500">加载中...</p>;

  return (
    <div>
      <h2 className="text-lg font-semibold text-gray-800 mb-4">兑换记录</h2>

      {/* Stats */}
      {stats && (
        <div className="grid grid-cols-3 gap-4 mb-6">
          {[
            { label: "注册用户", value: stats.userCount },
            { label: "当前收集数", value: stats.collectionCount },
            { label: "累计兑换", value: stats.redemptionCount },
          ].map((s) => (
            <div key={s.label} className="bg-white rounded-lg border border-gray-200 p-4 text-center">
              <p className="text-2xl font-semibold text-gray-800">{s.value}</p>
              <p className="text-xs text-gray-500 mt-1">{s.label}</p>
            </div>
          ))}
        </div>
      )}

      {/* Records table */}
      <div className="bg-white rounded-lg border border-gray-200 overflow-hidden">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 border-b border-gray-200">
            <tr>
              <th className="text-left px-4 py-3 font-medium text-gray-600">用户</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">手机号</th>
              <th className="text-left px-4 py-3 font-medium text-gray-600">兑换奖品</th>
              <th className="text-center px-4 py-3 font-medium text-gray-600">图章数</th>
              <th className="text-right px-4 py-3 font-medium text-gray-600">时间</th>
            </tr>
          </thead>
          <tbody>
            {records.map((r) => (
              <tr key={r.id} className="border-b border-gray-100">
                <td className="px-4 py-3 text-gray-800">{r.user.username}</td>
                <td className="px-4 py-3 text-gray-500">{r.user.phone}</td>
                <td className="px-4 py-3 text-gray-700">{r.rule.name}</td>
                <td className="px-4 py-3 text-center text-gray-500">{r.stampCount}</td>
                <td className="px-4 py-3 text-right text-gray-500">
                  {new Date(r.redeemedAt).toLocaleString("zh-CN")}
                </td>
              </tr>
            ))}
            {records.length === 0 && (
              <tr>
                <td colSpan={5} className="px-4 py-8 text-center text-gray-400">
                  暂无兑换记录
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  );
}
