import React from 'react'

function formatTime(seconds) {
  const m = Math.floor(seconds / 60)
  const s = (seconds % 60).toFixed(1)
  return `${m}:${s.padStart(4, '0')}`
}

export default function SeedRegionInfo({ seedData, regionStart, regionEnd, hasRegion, onPreviewRegion, isExtracting }) {
  if (!hasRegion) {
    return (
      <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-amber-500/5 border border-amber-500/20">
        <span className="text-amber-400 text-xs">
          Select a region in the transport bar to use as seed audio
        </span>
      </div>
    )
  }

  const duration = (regionEnd - regionStart).toFixed(1)

  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2 text-xs text-gray-400">
          <span className="font-mono text-accent-400">
            {formatTime(regionStart)} &rarr; {formatTime(regionEnd)}
          </span>
          <span className="text-gray-600">({duration}s)</span>
        </div>
        <button
          onClick={onPreviewRegion}
          className="text-[10px] px-2 py-1 rounded bg-white/[0.06] hover:bg-white/[0.1] text-gray-400 hover:text-white transition-colors"
        >
          Preview
        </button>
      </div>

      {seedData?.analysis && (
        <div className="flex flex-wrap gap-2">
          <Badge label="BPM" value={seedData.analysis.bpm} />
          <Badge label="Key" value={`${seedData.analysis.key} ${seedData.analysis.mode}`} />
          <Badge label="Brightness" value={seedData.analysis.brightness.toFixed(2)} />
          <Badge label="Density" value={seedData.analysis.density.toFixed(2)} />
        </div>
      )}

      {isExtracting && (
        <div className="text-[10px] text-gray-500 animate-pulse">Analyzing seed...</div>
      )}
    </div>
  )
}

function Badge({ label, value }) {
  const isUnknown = value === '?' || value === '0' || value === 0 || value === '? ?'
  return (
    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-white/[0.04] border border-white/[0.06]">
      <span className="text-[9px] uppercase tracking-wider text-gray-500">{label}</span>
      <span className={`text-xs font-mono ${isUnknown ? 'text-amber-400' : 'text-accent-400'}`}>
        {isUnknown ? '?' : value}
      </span>
    </span>
  )
}