'use client';

import React from 'react';

export interface RlmAlertData {
  matchName: string;
  market: string;
  selection: string;
  ticketPct: number;    // 散戶注單佔比 (例如 82%)
  handlePct: number;    // 大戶資金佔比 (例如 15%)
  openingOdds: number;
  currentOdds: number;
}

interface RlmRadarBoardProps {
  alerts: RlmAlertData[];
}

export default function RlmRadarBoard({ alerts }: RlmRadarBoardProps) {
  if (!alerts || alerts.length === 0) {
    return (
      <div className="w-full bg-stone-900 p-6 rounded-lg border border-stone-700 shadow-xl flex items-center justify-center min-h-[200px]">
        <p className="text-stone-500 font-dotmatrix text-lg tracking-widest uppercase">
          [ 系統監控中：目前無異常反向盤口移動 ]
        </p>
      </div>
    );
  }

  return (
    <div className="w-full bg-stone-900 p-6 rounded-lg border border-quant-red shadow-2xl relative overflow-hidden">
      {/* 背景警示條紋 */}
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-quant-red via-quant-orange to-quant-red animate-pulse-fast"></div>
      
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h2 className="text-2xl text-quant-red font-dotmatrix animate-blink uppercase font-bold tracking-wider">
            🚨 警告：偵測到反向盤口移動 (RLM)
          </h2>
          <p className="text-stone-400 text-sm mt-1">莊家正在轉移風險，聰明錢流向已確認。</p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
        {alerts.map((alert, index) => (
          <div key={index} className="bg-stone-800 p-4 rounded border border-stone-700 hover:border-quant-orange transition-colors">
            <h3 className="text-stone-200 font-bold mb-3">{alert.matchName} | {alert.market}</h3>
            
            <div className="space-y-4">
              {/* 資金流向對比 */}
              <div>
                <div className="flex justify-between text-xs font-dotmatrix uppercase text-stone-400 mb-1">
                  <span>散戶看好度 (Tickets)</span>
                  <span className="text-stone-200">{alert.ticketPct}%</span>
                </div>
                <div className="w-full h-2 bg-stone-700 rounded overflow-hidden">
                  <div className="h-full bg-stone-500" style={{ width: `${alert.ticketPct}%` }}></div>
                </div>
              </div>
              
              <div>
                <div className="flex justify-between text-xs font-dotmatrix uppercase text-quant-orange mb-1">
                  <span>聰明錢流向 (Handle)</span>
                  <span>{alert.handlePct}%</span>
                </div>
                <div className="w-full h-2 bg-stone-700 rounded overflow-hidden">
                  <div className="h-full bg-quant-orange" style={{ width: `${alert.handlePct}%` }}></div>
                </div>
              </div>

              {/* 賠率變動對比 */}
              <div className="mt-4 pt-3 border-t border-stone-700 flex justify-between items-center">
                <span className="text-sm text-stone-400">盤口水位變動 [{alert.selection}]</span>
                <div className="flex items-center space-x-3 font-dotmatrix text-lg">
                  <span className="text-stone-500 line-through">{alert.openingOdds.toFixed(2)}</span>
                  <span className="text-quant-red animate-pulse-fast font-bold">➔ {alert.currentOdds.toFixed(2)}</span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}