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

export function PriceContextSection({ 
  row,
  currentPrice,
  vwap,
  rthOpen,
  pctVsRthOpen,
  pctVsPriorClose,
  spot,
  moneynessPct,
  session,
  tapeAlign 
}) {
  return (
    <div className="space-y-3">
      <h4 className="text-sm font-semibold text-slate-300 mb-3 border-b border-slate-700 pb-2">📊 PRICE CONTEXT</h4>
      <div className="space-y-2 text-xs">
        <div>
          <span className="text-slate-500">Current:</span>
          <span className="ml-2 text-slate-200 font-semibold">
            ${typeof currentPrice === 'number' ? currentPrice.toFixed(2) : 'N/A'}
          </span>
        </div>
        <div>
          <span className="text-slate-500">VWAP:</span>
          <span className="ml-2 text-slate-200">
            ${typeof vwap === 'number' ? vwap.toFixed(2) : 'N/A'}
          </span>
        </div>
        <div>
          <span className="text-slate-500">RTH Open:</span>
          <span className="ml-2 text-slate-200">
            ${typeof rthOpen === 'number' ? rthOpen.toFixed(2) : 'N/A'}
          </span>
        </div>
        {Math.abs(pctVsRthOpen) < 0.01 && Math.abs(pctVsPriorClose) < 0.01 ? (
          <div>
            <span className="text-slate-500">Price Change:</span>
            <span className="ml-2 text-slate-300 font-semibold">0.00% (flat since open)</span>
          </div>
        ) : (
          <>
            <div>
              <span className="text-slate-500">vs RTH Open:</span>
              <span className={cn(
                "ml-2 font-semibold",
                pctVsRthOpen > 0 ? "text-green-400" : "text-red-400"
              )}>
                {pctVsRthOpen > 0 ? '+' : ''}{typeof pctVsRthOpen === 'number' ? pctVsRthOpen.toFixed(2) : '0.00'}%
              </span>
            </div>
            <div>
              <span className="text-slate-500">vs Prior Close:</span>
              <span className={cn(
                "ml-2 font-semibold",
                pctVsPriorClose > 0 ? "text-green-400" : "text-red-400"
              )}>
                {pctVsPriorClose > 0 ? '+' : ''}{typeof pctVsPriorClose === 'number' ? pctVsPriorClose.toFixed(2) : '0.00'}%
              </span>
            </div>
          </>
        )}
        <div>
          <span className="text-slate-500">Spot Price:</span>
          <span className="ml-2 text-slate-200 font-semibold">
            ${typeof spot === 'number' ? spot.toFixed(2) : spot || 'N/A'}
          </span>
        </div>
        <div>
          <span className="text-slate-500">Moneyness:</span>
          <span className={cn(
            "ml-2 font-semibold",
            moneynessPct > 0 ? "text-green-400" : moneynessPct < 0 ? "text-red-400" : "text-slate-300"
          )}>
            {typeof moneynessPct === 'number' ? moneynessPct.toFixed(2) : moneynessPct || '0.00'}%
          </span>
        </div>
        <div>
          <span className="text-slate-500">Session:</span>
          <span className="ml-2 text-slate-300">
            <Badge variant="outline" className="text-xs">
              {session}
            </Badge>
          </span>
        </div>
      </div>
      
      {/* Tape Alignment Visual */}
      {tapeAlign !== '—' ? (
        <div className="mt-4 p-4 bg-green-900/30 border-2 border-green-500 rounded-lg">
          <div className="flex items-center gap-3">
            <span className="text-4xl">✅</span>
            <div>
              <div className="text-xl font-bold text-green-400">TAPE ALIGNED</div>
              <div className="text-sm text-gray-300">Price confirming flow direction ↑</div>
            </div>
          </div>
        </div>
      ) : (
        <div className="mt-4 p-4 bg-orange-900/30 border-2 border-orange-500 rounded-lg">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <span className="text-4xl">⚠️</span>
              <div>
                <div className="text-xl font-bold text-orange-400">NO TAPE ALIGNMENT</div>
                <div className="text-sm text-gray-300">Price not confirming flow direction</div>
              </div>
            </div>
            <div className="text-right">
              <div className="text-xs text-gray-400">Current Price</div>
              <div className="text-2xl font-bold text-orange-300">${typeof currentPrice === 'number' ? currentPrice.toFixed(2) : 'N/A'}</div>
              <div className="text-xs text-gray-400">Expected: Upward momentum</div>
              <div className="text-xs text-red-300">Reality: Flat/down</div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}