'use client';

import React, { useState, useMemo } from 'react';

interface KellyBetSizingProps {
  trueProb: number;     // 系統計算的真實勝率 (0.0 - 1.0)
  decimalOdds: number;  // 莊家賠率
}

export default function KellyBetSizing({ trueProb, decimalOdds }: KellyBetSizingProps) {
  const [bankroll, setBankroll] = useState<number>(10000);
  const [kellyFraction, setKellyFraction] = useState<number>(0.25); // 預設 1/4 凱利

  // 核心計算邏輯 (套用凱利公式)
  const suggestedStake = useMemo(() => {
    const b = decimalOdds - 1.0;
    const p = trueProb;
    const q = 1.0 - p;
    
    if (b <= 0) return 0;
    
    const fullKellyPct = ((b * p) - q) / b;
    if (fullKellyPct <= 0) return 0;

    return Math.round(bankroll * fullKellyPct * kellyFraction);
  }, [bankroll, kellyFraction, decimalOdds, trueProb]);

  // 動態樣式判斷
  const isHighRisk = kellyFraction > 0.5;
  const highlightColor = isHighRisk ? 'text-quant-red' : 'text-quant-orange';

  return (
    <div className="w-full bg-stone-50 p-6 rounded-lg border border-stone-200 shadow-sm">
      <div className="flex justify-between items-center border-b border-stone-200 pb-4 mb-6">
        <div>
          <h3 className="text-sm text-stone-500 uppercase tracking-wider font-semibold">
            注碼風險控管
          </h3>
          <h2 className="text-xl text-stone-900 font-bold">量化注碼建議</h2>
        </div>
        <div className="text-right">
          <p className="text-sm text-stone-500 mb-1">建議絕對金額</p>
          <p className={`text-4xl font-dotmatrix transition-colors duration-300 ${highlightColor}`}>
            $ {suggestedStake.toLocaleString()}
          </p>
        </div>
      </div>

      {/* 控制區：總資金 */}
      <div className="mb-6">
        <label className="block text-sm text-stone-600 font-medium mb-2">
          當前可用資金：<span className="font-dotmatrix ml-2 text-lg">${bankroll.toLocaleString()}</span>
        </label>
        <input 
          type="range" 
          min="1000" 
          max="100000" 
          step="1000" 
          value={bankroll}
          onChange={(e) => setBankroll(Number(e.target.value))}
          className="w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-quant-orange"
        />
      </div>

      {/* 控制區：風險偏好 (分數凱利) */}
      <div className="mb-2">
        <label className="block text-sm text-stone-600 font-medium mb-2">
          風險偏好：
          <span className={`font-dotmatrix ml-2 text-lg ${isHighRisk ? 'text-quant-red' : 'text-stone-900'}`}>
            {kellyFraction}x
          </span>
        </label>
        <input 
          type="range" 
          min="0.1" 
          max="1.0" 
          step="0.05" 
          value={kellyFraction}
          onChange={(e) => setKellyFraction(Number(e.target.value))}
          className="w-full h-2 bg-stone-200 rounded-lg appearance-none cursor-pointer accent-stone-700"
        />
        <div className="flex justify-between text-xs text-stone-400 mt-2 font-dotmatrix uppercase">
          <span>保守 0.1x</span>
          <span>一般 0.25x</span>
          <span className="text-quant-red">高風險 1.0x</span>
        </div>
      </div>
    </div>
  );
}