"use client";

import { RateData } from "@/lib/api";

interface Props {
  asset: "BTC" | "ETH";
  data: RateData | null;
}

const ASSET_EMOJI: Record<string, string> = { BTC: "₿", ETH: "Ξ" };

export default function RateCard({ asset, data }: Props) {
  const rate = data?.lastFundingRate ?? null;
  const positive = rate !== null && rate >= 0;
  const rateColor = rate === null ? "text-slate-400" : positive ? "text-emerald-600" : "text-red-500";
  const badgeColor = rate === null
    ? "bg-slate-100 text-slate-500"
    : positive
    ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
    : "bg-red-50 text-red-600 border border-red-200";

  const nextTime = data?.nextFundingTime
    ? new Date(data.nextFundingTime).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" })
    : "--";

  return (
    <div className="rounded-xl border border-slate-200 bg-white shadow-sm p-6 space-y-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span className="text-2xl font-bold text-slate-700">{ASSET_EMOJI[asset]}</span>
          <span className="text-lg font-semibold text-slate-800">{asset}/USDT</span>
        </div>
        <span className={`text-xs px-2 py-1 rounded-full font-medium ${badgeColor}`}>
          {rate === null ? "加载中" : positive ? "正费率 收款" : "负费率 付款"}
        </span>
      </div>

      <div>
        <p className="text-slate-400 text-xs mb-1">当前资金费率</p>
        <p className={`text-3xl font-mono font-bold ${rateColor}`}>
          {rate === null ? "--" : `${(rate * 100).toFixed(4)}%`}
        </p>
      </div>

      <div className="grid grid-cols-2 gap-3 pt-2 border-t border-slate-100">
        <div>
          <p className="text-slate-400 text-xs">标记价格</p>
          <p className="text-slate-700 font-mono text-sm mt-0.5">
            ${data ? Number(data.markPrice).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "--"}
          </p>
        </div>
        <div>
          <p className="text-slate-400 text-xs">下次结算</p>
          <p className="text-blue-600 font-mono text-sm mt-0.5">{nextTime}</p>
        </div>
      </div>
    </div>
  );
}
