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

export function TimeSequencedSection({ row }) {
  const hasTimeSequencedData = (row.flow_acceleration !== null && row.flow_acceleration !== undefined) ||
                                (row.time_between_hits !== null && row.time_between_hits !== undefined) ||
                                (row.follow_on_ratio !== null && row.follow_on_ratio !== undefined) ||
                                row.strike_laddering_detected;

  if (!hasTimeSequencedData) return null;

  return (
    <div className="space-y-3 lg:col-span-2">
      <h4 className="text-sm font-semibold text-slate-300 mb-3 border-b border-slate-700 pb-2">⏱️ TIME-SEQUENCED METRICS</h4>
      <div className="bg-slate-800/30 rounded-lg p-4 border border-slate-700">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-xs">
          {row.flow_acceleration !== null && row.flow_acceleration !== undefined && (
            <div>
              <span className="text-slate-500">Flow Acceleration:</span>
              <span className={cn(
                "ml-2 font-semibold",
                row.flow_acceleration > 0 ? "text-green-400" : "text-red-400"
              )}>
                {row.flow_acceleration >= 1e6 
                  ? `${(row.flow_acceleration / 1e6).toFixed(2)}M/min`
                  : `${(row.flow_acceleration / 1e3).toFixed(0)}K/min`}
              </span>
              <div className="text-xs text-slate-500 mt-0.5">
                {row.flow_acceleration > 0 ? "Escalating" : "Decelerating"}
              </div>
            </div>
          )}
          {row.time_between_hits !== null && row.time_between_hits !== undefined && (
            <div>
              <span className="text-slate-500">Time Between Hits:</span>
              <span className="ml-2 text-slate-300 font-semibold">
                {row.time_between_hits.toFixed(1)} min
              </span>
            </div>
          )}
          {row.follow_on_ratio !== null && row.follow_on_ratio !== undefined && (
            <div>
              <span className="text-slate-500">Follow-On Ratio:</span>
              <span className={cn(
                "ml-2 font-semibold",
                row.follow_on_ratio >= 0.7 ? "text-green-400" :
                row.follow_on_ratio >= 0.4 ? "text-yellow-400" :
                "text-red-400"
              )}>
                {(row.follow_on_ratio * 100).toFixed(0)}%
              </span>
              <div className="text-xs text-slate-500 mt-0.5">
                {row.follow_on_ratio >= 0.7 ? "Continuation" :
                 row.follow_on_ratio >= 0.4 ? "Mixed" : "Reversal"}
              </div>
            </div>
          )}
          {row.strike_laddering_detected !== null && row.strike_laddering_detected !== undefined && (
            <div>
              <span className="text-slate-500">Strike Laddering:</span>
              <span className={cn(
                "ml-2 font-semibold",
                row.strike_laddering_detected ? "text-green-400" : "text-slate-500"
              )}>
                {row.strike_laddering_detected ? '✅ Detected' : '❌ None'}
              </span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

