'use client';

type HedgeAlertProps = {
  isVisible: boolean;
  parlayLabel: string;
  counterSelection: string;
  hedgeStake: number;
  lockedProfit: number;
};

export function HedgeAlert({ isVisible, parlayLabel, counterSelection, hedgeStake, lockedProfit }: HedgeAlertProps) {
  if (!isVisible) {
    return null;
  }

  return (
    <aside className="fixed bottom-28 right-4 z-50 w-[min(340px,calc(100vw-2rem))] rounded-2xl border-2 border-[#fbbf24] bg-[#032f26] p-4 text-white shadow-2xl shadow-[#f59e0b]/35">
      <p className="dot-matrix text-sm animate-pulse text-[#fef3c7]">🔒 鎖利機會出現</p>
      <p className="mt-2 text-xs text-[#f3e6c6]">
        您的 {parlayLabel} 已進入收斂臨界，最後一場可反向鎖利。
      </p>
      <p className="mt-3 text-sm text-[#ffd26d]">
        對手選項：<span className="font-semibold">{counterSelection}</span>
      </p>
      <p className="mt-2 text-sm">
        建議對沖下注：<span className="font-bold text-[#fca5a5]">${hedgeStake.toFixed(2)}</span>
      </p>
      <p className="mt-1 text-sm">
        鎖定利潤：<span className="font-bold text-[#86efac]">${lockedProfit.toFixed(2)}</span>
      </p>
      <button
        type="button"
        className="dot-matrix mt-3 rounded-full bg-[#16a34a] px-3 py-2 text-xs text-black transition hover:bg-[#22c55e]"
        onClick={() => window.alert('請先至下注頁面進行對沖下單。')}
      >
        一鍵對沖
      </button>
    </aside>
  );
}
