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

export function InstitutionalAnalyticsSection({ row }) {
  const hasInstitutionalData = (row.confidence_score !== null && row.confidence_score !== undefined) ||
                                (row.signal_strength !== null && row.signal_strength !== undefined) ||
                                (row.relative_premium_score !== null && row.relative_premium_score !== undefined);

  if (!hasInstitutionalData) 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">🏛️ INSTITUTIONAL ANALYTICS</h4>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
        {/* Confidence Score */}
        {(row.confidence_score !== null && row.confidence_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">Confidence Score</div>
          <div className="flex items-center gap-3">
            <div className="text-3xl font-bold text-blue-400">
              {Math.round(row.confidence_score)}%
            </div>
            {row.confidence_score !== null && row.confidence_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.confidence_score >= 70 ? "bg-green-500" :
                      row.confidence_score >= 50 ? "bg-yellow-500" :
                      "bg-orange-500"
                    )}
                    style={{ width: `${Math.min(100, row.confidence_score)}%` }}
                  />
                </div>
                <div className="text-xs text-slate-400">
                  {row.confidence_score >= 70 ? "High Confidence" :
                   row.confidence_score >= 50 ? "Moderate" : "Low"}
                </div>
              </div>
            )}
          </div>
        </div>
        )}

        {/* Signal Strength */}
        {(row.signal_strength !== null && row.signal_strength !== undefined) && (
        <div className="bg-slate-800/50 rounded-lg p-4 border border-slate-700">
          <div className="text-xs text-slate-500 mb-2">Signal Strength</div>
          <div className="flex items-center gap-3">
            <div className="text-3xl font-bold text-purple-400">
              {Math.round(row.signal_strength)}
            </div>
            {row.signal_strength !== null && row.signal_strength !== 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.signal_strength >= 70 ? "bg-purple-500" :
                      row.signal_strength >= 50 ? "bg-blue-500" :
                      "bg-slate-500"
                    )}
                    style={{ width: `${Math.min(100, row.signal_strength)}%` }}
                  />
                </div>
                <div className="text-xs text-slate-400">
                  {row.signal_strength >= 70 ? "Strong" :
                   row.signal_strength >= 50 ? "Moderate" : "Weak"}
                </div>
              </div>
            )}
          </div>
        </div>
        )}

        {/* Relative Premium Score */}
        {(row.relative_premium_score !== null && row.relative_premium_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">Relative Premium</div>
          <div className="flex items-center gap-3">
            <div className="text-3xl font-bold text-green-400">
              {Math.round(row.relative_premium_score)}
            </div>
            {row.relative_premium_score !== null && row.relative_premium_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.relative_premium_score >= 70 ? "bg-green-500" :
                      row.relative_premium_score >= 50 ? "bg-yellow-500" :
                      "bg-orange-500"
                    )}
                    style={{ width: `${Math.min(100, row.relative_premium_score)}%` }}
                  />
                </div>
                <div className="text-xs text-slate-400">
                  {row.relative_premium_score >= 70 ? "Significant" :
                   row.relative_premium_score >= 50 ? "Moderate" : "Low"}
                </div>
              </div>
            )}
          </div>
          {row.premium_zscore !== null && row.premium_zscore !== undefined && (
            <div className="mt-2 text-xs text-slate-500">
              Z-Score: {row.premium_zscore.toFixed(2)}
            </div>
          )}
        </div>
        )}
      </div>
      
      {/* Additional context metrics */}
      {(row.premium_percentile_intraday !== null || row.aggression_score !== null || 
        row.size_concentration_score !== null || row.institutional_likelihood !== null) && (
      <div className="mt-4 pt-3 border-t border-slate-700 grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
        {row.premium_percentile_intraday !== null && row.premium_percentile_intraday !== undefined && (
          <div>
            <span className="text-slate-500">Intraday Percentile:</span>
            <span className="ml-2 text-slate-300 font-semibold">
              {row.premium_percentile_intraday.toFixed(1)}%
            </span>
          </div>
        )}
        {row.aggression_score !== null && row.aggression_score !== undefined && (
          <div>
            <span className="text-slate-500">Aggression:</span>
            <span className="ml-2 text-slate-300 font-semibold">
              {row.aggression_score.toFixed(0)}
            </span>
          </div>
        )}
        {row.size_concentration_score !== null && row.size_concentration_score !== undefined && (
          <div>
            <span className="text-slate-500">Size Concentration:</span>
            <span className="ml-2 text-slate-300 font-semibold">
              {row.size_concentration_score.toFixed(0)}
            </span>
          </div>
        )}
        {row.institutional_likelihood !== null && row.institutional_likelihood !== undefined && (
          <div>
            <span className="text-slate-500">Institutional Likelihood:</span>
            <span className="ml-2 text-slate-300 font-semibold text-blue-400">
              {(row.institutional_likelihood * 100).toFixed(0)}%
            </span>
          </div>
        )}
      </div>
      )}
    </div>
  );
}

