import { useState } from 'react';
import { Badge } from '../ui/Badge';
import { cn } from '@/utils/cn';

export function SymbolTooltip({ row, children }) {
  const [isHovered, setIsHovered] = useState(false);
  
  const signal = row.tradeSignal;
  const score = row.rocketScore || row.rocket_score || 0;
  const netPremium = (row.bull_total || 0) - (row.bear_total || 0);
  const netPremiumPct = row.bull_total + row.bear_total > 0
    ? ((netPremium / (row.bull_total + row.bear_total)) * 100).toFixed(0)
    : 0;
  const flowType = row.cp_norm === 'CALL' ? 'ITM Calls' : 'ITM Puts';
  const session = row.session_bucket || 'RTH';
  const catalyst = row.near_alert_type || 'None';
  const tapeAlign = row.TapeAlign || row.tapeArrow || '—';
  const currentPrice = row.u_close || row.spot_num || row.Price || 0;
  const trend = row.flowTrendRaw || row.flowTrend?.full;
  const lastFlow = trend?.lastFlowMinutesAgo;
  
  // Determine setup type
  const badges = row.badges || [];
  const hasDiamond = Array.isArray(badges) ? badges.includes('💎') : (badges.more?.includes('💎') || false);
  const hasStar = Array.isArray(badges) ? badges.includes('⭐') : (badges.more?.includes('⭐') || false);
  const setupType = hasDiamond && hasStar ? 'BULLISH SETUP' : 'NEUTRAL SETUP';
  
  return (
    <div 
      className="relative inline-block"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      {children}
      
      {isHovered && (
        <div className="absolute left-0 top-full mt-2 z-50 w-96 bg-slate-900 border border-slate-700 rounded-lg shadow-2xl p-4 text-sm">
          <div className="space-y-3">
            {/* Header */}
            <div className="border-b border-slate-700 pb-2">
              <div className="font-bold text-lg text-slate-100">
                {row.Symbol || row.symbolDisplay} - {setupType}
              </div>
            </div>
            
            {/* Score */}
            <div>
              <div className="text-slate-400 text-xs mb-1">🔹 Score: {score.toFixed(1)}/10</div>
              <div className={cn(
                "text-xs",
                score >= 5 ? "text-green-400" : score >= 3.5 ? "text-yellow-400" : "text-slate-400"
              )}>
                {score >= 5 ? "High Conviction" : score >= 3.5 ? "Medium Conviction" : "Low Conviction"}
              </div>
            </div>
            
            {/* Flow Details */}
            <div>
              <div className="text-slate-400 text-xs mb-1">🔹 Net Premium: ${(Math.abs(netPremium) / 1000000).toFixed(2)}M</div>
              <div className="text-xs text-slate-300">
                {netPremium > 0 ? `${netPremiumPct}% Bull` : `${Math.abs(netPremiumPct)}% Bear`}
              </div>
              <div className="text-xs text-slate-400 mt-1">
                Flow Type: {flowType} {hasDiamond ? '(💎 Real Money)' : '(Speculation)'}
              </div>
            </div>
            
            {/* Session */}
            <div>
              <div className="text-slate-400 text-xs mb-1">🔹 Session: {session}</div>
              <div className="text-xs text-slate-300">
                {session === 'RTH' ? 'Institutional Hours' : session === 'PRE' ? 'Early Positioning' : 'After-Hours'}
              </div>
            </div>
            
            {/* Catalyst */}
            {catalyst !== 'None' && (
              <div>
                <div className="text-slate-400 text-xs mb-1">🔹 Catalyst: {catalyst}</div>
                {lastFlow !== null && lastFlow !== undefined && (
                  <div className="text-xs text-slate-300">{lastFlow}min ago</div>
                )}
              </div>
            )}
            
            {/* Tape */}
            <div>
              <div className="text-slate-400 text-xs mb-1">🔹 Tape: {tapeAlign}</div>
              <div className="text-xs text-slate-300">
                {tapeAlign !== '—' ? 'Price Confirming Flow' : 'Price NOT Confirming'}
              </div>
            </div>
            
            {/* Trade Plan */}
            {signal && signal.signal !== 'NEUTRAL' && signal.signal !== 'WAIT' && (
              <div className="border-t border-slate-700 pt-2 mt-2">
                <div className="text-slate-300 font-semibold text-xs mb-2">🎯 TRADE PLAN:</div>
                {signal.entry && (
                  <div className="text-xs text-green-400 mb-1">
                    Entry: {typeof signal.entry === 'object' ? signal.entry.primary : signal.entry}
                  </div>
                )}
                {signal.stop && (
                  <div className="text-xs text-red-400 mb-1">
                    Stop: {typeof signal.stop === 'object' ? signal.stop.wide : signal.stop}
                  </div>
                )}
                {signal.target && (
                  <div className="text-xs text-blue-400 mb-1">
                    Target: {typeof signal.target === 'object' ? signal.target.t1 : signal.target}
                  </div>
                )}
                {signal.confidence && (
                  <div className="text-xs text-slate-400 mt-1">
                    Confidence: {signal.confidence}%
                  </div>
                )}
              </div>
            )}
            
            {/* Risk Factors */}
            {trend && (
              <div className="border-t border-slate-700 pt-2 mt-2">
                <div className="text-slate-300 font-semibold text-xs mb-1">⚠️ RISK FACTORS:</div>
                {lastFlow !== null && lastFlow !== undefined && (
                  <div className="text-xs text-slate-400">
                    • Last flow {lastFlow}min ago {lastFlow >= 30 ? '(monitor for exit)' : '(still active)'}
                  </div>
                )}
                {trend.trend === 'FADING' && (
                  <div className="text-xs text-yellow-400">
                    • Flow fading - institutions may be done
                  </div>
                )}
                {trend.trend === 'DEAD' && (
                  <div className="text-xs text-red-400">
                    • No new flow = exit signal
                  </div>
                )}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

