"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-400" : "text-red-400";
  const badgeColor = rate === null
    ? "bg-slate-700 text-slate-300"
    : positive
    ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/30"
    : "bg-red-500/20 text-red-300 border border-red-500/30";

  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-700 bg-slate-800/60 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-200">{ASSET_EMOJI[asset]}</span>
          <span className="text-lg font-semibold text-slate-200">{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-700">
        <div>
          <p className="text-slate-500 text-xs">标记价格</p>
          <p className="text-slate-200 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-500 text-xs">下次结算</p>
          <p className="text-cyan-400 font-mono text-sm mt-0.5">{nextTime}</p>
        </div>
      </div>
    </div>
  );
}