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

export function DealerRegimeSection({ row }) {
  const hasDealerData = (row.dealer_hedge_pressure_score !== null && row.dealer_hedge_pressure_score !== undefined) ||
                        row.market_regime || row.volatility_intent;

  if (!hasDealerData) return null;

  return (
    <div className="space-y-3">
      <h4 className="text-sm font-semibold text-slate-300 mb-3 border-b border-slate-700 pb-2">🎯 DEALER & REGIME ANALYSIS</h4>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        {/* Dealer Hedge Pressure */}
        {(row.dealer_hedge_pressure_score !== null && row.dealer_hedge_pressure_score !== undefined) && (
        <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
          <div className="text-xs text-slate-500 mb-2">Dealer Hedge Pressure</div>
          <div className="flex items-center gap-3">
            <div className="text-3xl font-bold text-orange-400">
              {Math.round(row.dealer_hedge_pressure_score)}
            </div>
            {row.dealer_hedge_pressure_score !== null && row.dealer_hedge_pressure_score !== undefined && (
              <div className="flex-1">
                <div className="w-full bg-slate-700 rounded-full h-2 mb-1">
                  <div 
                    className={cn(
                      "h-2 rounded-full transition-all",
                      row.dealer_hedge_pressure_score >= 70 ? "bg-red-500" :
                      row.dealer_hedge_pressure_score >= 50 ? "bg-orange-500" :
                      "bg-yellow-500"
                    )}
                    style={{ width: `${Math.min(100, row.dealer_hedge_pressure_score)}%` }}
                  />
                </div>
                <div className="text-xs text-slate-400">
                  {row.dealer_hedge_pressure_score >= 70 ? "High Pressure" :
                   row.dealer_hedge_pressure_score >= 50 ? "Moderate" : "Low"}
                </div>
              </div>
            )}
          </div>
          {row.net_gamma_exposure_per_symbol !== null && row.net_gamma_exposure_per_symbol !== undefined && (
            <div className="mt-2 text-xs text-slate-500">
              Net Gamma: {row.net_gamma_exposure_per_symbol >= 1e9 
                ? `${(row.net_gamma_exposure_per_symbol / 1e9).toFixed(2)}B`
                : row.net_gamma_exposure_per_symbol >= 1e6
                ? `${(row.net_gamma_exposure_per_symbol / 1e6).toFixed(1)}M`
                : `${(row.net_gamma_exposure_per_symbol / 1e3).toFixed(0)}K`}
            </div>
          )}
        </div>
        )}

        {/* Market Regime */}
        {row.market_regime && (
        <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
          <div className="text-xs text-slate-500 mb-2">Market Regime</div>
          <div className="flex flex-col gap-2">
            {row.market_regime === 'TREND' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">📈</span>
                <div>
                  <div className="text-xl font-bold text-green-400">TREND</div>
                  <div className="text-xs text-slate-400">Continuation bias</div>
                </div>
              </div>
            )}
            {row.market_regime === 'RANGE' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">↔️</span>
                <div>
                  <div className="text-xl font-bold text-yellow-400">RANGE</div>
                  <div className="text-xs text-slate-400">Fade or vol-sell bias</div>
                </div>
              </div>
            )}
            {row.market_regime === 'HIGH_VOL_EVENT' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">⚡</span>
                <div>
                  <div className="text-xl font-bold text-red-400">HIGH VOL EVENT</div>
                  <div className="text-xs text-slate-400">Volatility expansion bias</div>
                </div>
              </div>
            )}
          </div>
        </div>
        )}

        {/* Volatility Intent */}
        {row.volatility_intent && (
        <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
          <div className="text-xs text-slate-500 mb-2">Volatility Intent</div>
          <div className="flex flex-col gap-2">
            {row.volatility_intent === 'LONG_VOL' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">📊</span>
                <div>
                  <div className="text-lg font-bold text-green-400">LONG VOL</div>
                  <div className="text-xs text-slate-400">Buying volatility</div>
                </div>
              </div>
            )}
            {row.volatility_intent === 'SHORT_VOL' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">📉</span>
                <div>
                  <div className="text-lg font-bold text-red-400">SHORT VOL</div>
                  <div className="text-xs text-slate-400">Selling volatility</div>
                </div>
              </div>
            )}
            {row.volatility_intent === 'DIRECTIONAL' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">➡️</span>
                <div>
                  <div className="text-lg font-bold text-blue-400">DIRECTIONAL</div>
                  <div className="text-xs text-slate-400">Directional positioning</div>
                </div>
              </div>
            )}
            {row.volatility_intent === 'HEDGE_UNWIND' && (
              <div className="flex items-center gap-2">
                <span className="text-2xl">🔄</span>
                <div>
                  <div className="text-lg font-bold text-orange-400">HEDGE/UNWIND</div>
                  <div className="text-xs text-slate-400">Hedging or unwinding</div>
                </div>
              </div>
            )}
          </div>
          {row.delta_exposure !== null && row.delta_exposure !== undefined && (
            <div className="mt-2 text-xs text-slate-500">
              Delta Exp: {Math.abs(row.delta_exposure) >= 1e6 
                ? `${(row.delta_exposure / 1e6).toFixed(1)}M`
                : `${(row.delta_exposure / 1e3).toFixed(0)}K`}
            </div>
          )}
        </div>
        )}
      </div>

      {/* Additional Dealer Metrics */}
      {(row.gamma_flip_proximity !== null || row.gamma_exposure !== null || 
        row.dealer_pain_level !== null || row.flow_state) && (
      <div className="mt-4 pt-3 border-t border-slate-700 grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
        {row.gamma_flip_proximity !== null && row.gamma_flip_proximity !== undefined && (
          <div>
            <span className="text-slate-500">Gamma Flip Proximity:</span>
            <span className="ml-2 text-slate-300 font-semibold">
              {row.gamma_flip_proximity.toFixed(2)}
            </span>
            <div className="text-xs text-slate-500 mt-0.5">
              {row.gamma_flip_proximity > 0.5 ? "Long gamma zone" :
               row.gamma_flip_proximity < -0.5 ? "Short gamma zone" :
               "Near flip point"}
            </div>
          </div>
        )}
        {row.gamma_exposure !== null && row.gamma_exposure !== undefined && (
          <div>
            <span className="text-slate-500">Gamma Exposure:</span>
            <span className="ml-2 text-slate-300 font-semibold">
              {Math.abs(row.gamma_exposure) >= 1e9
                ? `${(row.gamma_exposure / 1e9).toFixed(2)}B`
                : Math.abs(row.gamma_exposure) >= 1e6
                ? `${(row.gamma_exposure / 1e6).toFixed(1)}M`
                : `${(row.gamma_exposure / 1e3).toFixed(0)}K`}
            </span>
          </div>
        )}
        {row.dealer_pain_level !== null && row.dealer_pain_level !== undefined && (
          <div>
            <span className="text-slate-500">Dealer Pain Level:</span>
            <span className={cn(
              "ml-2 font-semibold",
              row.dealer_pain_level >= 70 ? "text-red-400" :
              row.dealer_pain_level >= 50 ? "text-orange-400" :
              "text-yellow-400"
            )}>
              {Math.round(row.dealer_pain_level)}
            </span>
          </div>
        )}
        {row.flow_state && (
          <div>
            <span className="text-slate-500">Flow State:</span>
            <span className={cn(
              "ml-2 font-semibold",
              row.flow_state === 'ACTIONABLE' ? "text-green-400" : "text-slate-400"
            )}>
              {row.flow_state === 'ACTIONABLE' ? '✅ ACTIONABLE' : '📋 INFORMATIONAL'}
            </span>
          </div>
        )}
      </div>
      )}
    </div>
  );
}

