import { cn } from '@/utils/cn';

export function FlowDetailsSection({ 
  row, 
  flowTrend, 
  lastFlowMinutesAgo, 
  hoursAgo,
  netPremium,
  bullTotal,
  bearTotal,
  volume,
  oi 
}) {
  return (
    <div className="space-y-3">
      <h4 className="text-sm font-semibold text-slate-300 mb-3 border-b border-slate-700 pb-2">🔹 FLOW DETAILS</h4>
      
      {/* Flow Trend Visual */}
      {flowTrend && (
        <div className={cn(
          "mb-4 p-4 border-2 rounded-lg",
          flowTrend.color === 'red' && flowTrend.label === 'DEAD' 
            ? "bg-red-900/30 border-red-500" 
            : flowTrend.color === 'red' && flowTrend.label === 'SURGING'
            ? "bg-red-900/30 border-red-500"
            : flowTrend.color === 'yellow'
            ? "bg-yellow-900/30 border-yellow-500"
            : "bg-orange-900/30 border-orange-500"
        )}>
          <div className="flex items-center gap-3">
            <span className="text-5xl">{flowTrend.icon}</span>
            <div>
              <div className={cn(
                "text-2xl font-bold",
                flowTrend.color === 'red' ? "text-red-400" :
                flowTrend.color === 'yellow' ? "text-yellow-400" :
                "text-orange-400"
              )}>
                {flowTrend.label} FLOW
              </div>
              <div className="text-sm text-gray-300">
                Last activity: <span className={cn(
                  "font-bold",
                  flowTrend.color === 'red' ? "text-red-300" :
                  flowTrend.color === 'yellow' ? "text-yellow-300" :
                  "text-orange-300"
                )}>
                  {lastFlowMinutesAgo} minutes ago {hoursAgo > 0 && `(${hoursAgo} ${hoursAgo === 1 ? 'hour' : 'hours'})`}
                </span>
              </div>
              <div className={cn(
                "text-sm mt-1",
                flowTrend.color === 'red' ? "text-yellow-300" :
                flowTrend.color === 'yellow' ? "text-yellow-200" :
                "text-orange-200"
              )}>
                ⚠️ {flowTrend.message}
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="space-y-2 text-xs">
        <div>
          <span className="text-slate-500">Net Premium:</span>
          <span className={cn(
            "ml-2 font-semibold",
            netPremium > 0 ? "text-green-400" : "text-red-400"
          )}>
            ${(Math.abs(netPremium) / 1000000).toFixed(2)}M
            {netPremium > 0 ? ` (${((netPremium / (bullTotal + bearTotal)) * 100).toFixed(0)}% Bullish)` : ` (${((Math.abs(netPremium) / (bullTotal + bearTotal)) * 100).toFixed(0)}% Bearish)`}
          </span>
        </div>
        <div>
          <span className="text-slate-500">Premium Breakdown:</span>
          <div className="ml-2 mt-1">
            <div className="text-green-400">${(bullTotal / 1000000).toFixed(2)}M Calls</div>
            <div className="text-red-400">${(bearTotal / 1000000).toFixed(2)}M Puts</div>
          </div>
        </div>
        <div>
          <span className="text-slate-500">Flow Type:</span>
          <span className="ml-2 text-slate-300">
            {row.cp_norm === 'CALL' ? 'ITM Calls' : 'ITM Puts'} 
            {row.badgesRaw?.more?.includes('💎') ? ' (💎 Real Money)' : ' (Speculation)'}
          </span>
        </div>
        <div>
          <span className="text-slate-500">Volume:</span>
          <span className="ml-2 text-slate-300">{volume.toLocaleString()} contracts</span>
        </div>
        {oi > 0 ? (
          <div>
            <span className="text-slate-500">Open Interest:</span>
            <span className="ml-2 text-slate-300">
              {oi.toLocaleString()} OI {oi >= 12500 ? '(High)' : oi >= 5000 ? '(Medium)' : '(Low)'}
            </span>
          </div>
        ) : (
          <div>
            <span className="text-slate-500">Open Interest:</span>
            <span className="ml-2 text-slate-300 text-slate-400 italic">New flow (no OI yet)</span>
          </div>
        )}
      </div>
    </div>
  );
}

