import React from 'react'

interface TimelineRulerProps {
  duration: number // Total duration in seconds
  currentTime: number // Current playhead position in seconds
  scale: number // Pixels per second
  onTimeClick?: (time: number) => void
}

export const TimelineRuler: React.FC<TimelineRulerProps> = ({
  duration,
  currentTime,
  scale,
  onTimeClick
}) => {
  const formatTime = (seconds: number): string => {
    const minutes = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    const ms = Math.floor((seconds % 1) * 100)
    return `${minutes}:${secs.toString().padStart(2, '0')}.${ms.toString().padStart(2, '0')}`
  }

  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    if (!onTimeClick) return
    
    const rect = event.currentTarget.getBoundingClientRect()
    const clickX = event.clientX - rect.left
    const timelineWidth = rect.width
    const clickTime = (clickX / timelineWidth) * duration
    
    onTimeClick(Math.max(0, Math.min(duration, clickTime)))
  }

  // Generate time markers
  const markers = []
  const interval = duration > 60 ? 10 : duration > 30 ? 5 : 1 // Adaptive interval
  
  for (let i = 0; i <= Math.ceil(duration / interval) * interval; i += interval) {
    if (i <= duration) {
      markers.push(i)
    }
  }

  return (
    <div 
      className="relative h-12 bg-gray-100 rounded border cursor-pointer select-none"
      onClick={handleClick}
    >
      {/* Time markers */}
      <div className="absolute inset-0 flex items-end">
        {markers.map((time) => (
          <div
            key={time}
            className="absolute flex flex-col items-center"
            style={{ left: `${(time / duration) * 100}%` }}
          >
            <div className="w-px h-6 bg-gray-400"></div>
            <span className="text-xs text-gray-600 mt-1 whitespace-nowrap">
              {formatTime(time)}
            </span>
          </div>
        ))}
      </div>

      {/* Minor tick marks */}
      <div className="absolute inset-0 flex items-end">
        {Array.from({ length: Math.floor(duration) + 1 }, (_, i) => (
          <div
            key={`minor-${i}`}
            className="absolute w-px h-3 bg-gray-300"
            style={{ left: `${(i / duration) * 100}%` }}
          />
        ))}
      </div>

      {/* Current time indicator (playhead) */}
      <div
        className="absolute top-0 w-0.5 h-full bg-red-500 z-20 pointer-events-none"
        style={{ left: `${(currentTime / duration) * 100}%` }}
      >
        <div className="absolute -top-2 -left-2 w-4 h-4 bg-red-500 rounded-full shadow-lg"></div>
        <div className="absolute -top-8 -left-8 px-2 py-1 bg-red-500 text-white text-xs rounded whitespace-nowrap">
          {formatTime(currentTime)}
        </div>
      </div>

      {/* Hover indicator */}
      <div className="absolute inset-0 opacity-0 hover:opacity-100 transition-opacity">
        <div className="w-full h-full bg-blue-500 bg-opacity-5"></div>
      </div>
    </div>
  )
}
