import React, { useEffect } from 'react'

function AnalysisDisplay({ detection, loading, onReady }) {
  useEffect(() => {
    if (detection && onReady) {
      console.log('=== AnalysisDisplay: detection ready, calling onReady ===')
      console.log('Detection data:', detection)
      onReady()
    }
  }, [detection, onReady])

  if (loading) {
    return (
      <div className="glass rounded-xl p-6 animate-pulse">
        <div className="flex items-center gap-4">
          <div className="w-24 h-24 bg-gray-700/50 rounded-lg"></div>
          <div className="flex-1 space-y-3">
            <div className="h-6 bg-gray-700/50 rounded w-1/2"></div>
            <div className="h-4 bg-gray-700/50 rounded w-1/3"></div>
          </div>
        </div>
      </div>
    )
  }

  if (!detection) {
    return null
  }

  const getConfidenceColor = (confidence) => {
    if (confidence >= 0.8) return 'bg-green-500'
    if (confidence >= 0.6) return 'bg-yellow-500'
    return 'bg-red-500'
  }

  const getConfidenceLabel = (confidence) => {
    if (confidence >= 0.8) return 'High'
    if (confidence >= 0.6) return 'Medium'
    return 'Low'
  }

  return (
    <div className="glass rounded-xl p-6 animate-fade-in">
      <h2 className="text-lg font-semibold mb-4 text-gray-300">Analysis Results</h2>

      <div className="grid grid-cols-2 gap-6">
        {/* BPM Display */}
        <div className="bg-gray-800/60 border border-purple-500/30 rounded-xl p-4 flex flex-col items-center gap-1">
          <span className="text-xs text-gray-500 uppercase tracking-widest">BPM</span>
          <div className="flex items-baseline gap-2">
            <span className="text-4xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent">
              {detection.bpm.toFixed(1)}
            </span>
          </div>
        </div>

        {/* Key Display */}
        <div className="bg-gray-800/60 border border-cyan-500/30 rounded-xl p-4 flex flex-col items-center gap-1">
          <span className="text-xs text-gray-500 uppercase tracking-widest">Key</span>
          <div className="flex items-baseline gap-2">
            <span className="text-4xl font-bold bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
              {detection.key}
            </span>
            <span className="text-gray-400 text-lg capitalize">
              {detection.mode}
            </span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default AnalysisDisplay