'use client'

import { Check } from 'lucide-react'
import { formatMinutes } from '@/lib/companion/constants'

interface PhaseTimelinePhase {
  id: string
  shortName: string
  displayName: string
  duration: number
  status: string
  actualTime?: number
  color: string
}

interface PhaseTimelineDetailedProps {
  phases: PhaseTimelinePhase[]
  currentPhaseIndex: number
  onPhaseClick?: (index: number) => void
}

export function PhaseTimelineDetailed({
  phases,
  currentPhaseIndex,
  onPhaseClick,
}: PhaseTimelineDetailedProps) {
  return (
    <div className="bg-white border border-slate-200 rounded-xl p-6">
      <h3 className="text-sm font-medium text-slate-500 mb-4">Unterrichtsphasen</h3>

      <div className="flex items-start justify-between">
        {phases.map((phase, index) => {
          const isActive = index === currentPhaseIndex
          const isCompleted = phase.status === 'completed'
          const isPast = index < currentPhaseIndex

          return (
            <div key={phase.id} className="flex flex-col items-center flex-1">
              {/* Top connector line */}
              <div className="w-full flex items-center mb-2">
                {index > 0 && (
                  <div
                    className="flex-1 h-1"
                    style={{
                      background: isPast || isCompleted
                        ? phases[index - 1].color
                        : '#e2e8f0',
                    }}
                  />
                )}
                {index === 0 && <div className="flex-1" />}

                {/* Phase Circle */}
                <button
                  onClick={() => onPhaseClick?.(index)}
                  disabled={!onPhaseClick}
                  className={`
                    relative w-12 h-12 rounded-full
                    flex items-center justify-center
                    font-bold text-lg
                    transition-all duration-300
                    ${onPhaseClick ? 'cursor-pointer hover:scale-110' : 'cursor-default'}
                    ${isActive ? 'ring-4 ring-offset-2 shadow-lg' : ''}
                  `}
                  style={{
                    backgroundColor: isActive || isCompleted || isPast ? phase.color : '#e2e8f0',
                    color: isActive || isCompleted || isPast ? 'white' : '#64748b',
                    '--tw-ring-color': isActive ? `${phase.color}40` : undefined,
                  } as React.CSSProperties}
                >
                  {isCompleted ? (
                    <Check className="w-6 h-6" />
                  ) : (
                    phase.shortName
                  )}

                  {isActive && (
                    <span
                      className="absolute inset-0 rounded-full animate-ping opacity-20"
                      style={{ backgroundColor: phase.color }}
                    />
                  )}
                </button>

                {index < phases.length - 1 && (
                  <div
                    className="flex-1 h-1"
                    style={{
                      background: isCompleted ? phase.color : '#e2e8f0',
                    }}
                  />
                )}
                {index === phases.length - 1 && <div className="flex-1" />}
              </div>

              {/* Phase Label */}
              <span
                className={`
                  text-sm font-medium mt-2
                  ${isActive ? 'text-slate-900' : 'text-slate-500'}
                `}
              >
                {phase.displayName}
              </span>

              {/* Duration */}
              <span
                className={`
                  text-xs mt-1
                  ${isActive ? 'text-slate-700' : 'text-slate-400'}
                `}
              >
                {formatMinutes(phase.duration)}
              </span>

              {/* Actual time if completed */}
              {phase.actualTime !== undefined && phase.actualTime > 0 && (
                <span className="text-xs text-slate-400 mt-0.5">
                  (tatsaechlich: {Math.round(phase.actualTime / 60)} Min)
                </span>
              )}
            </div>
          )
        })}
      </div>
    </div>
  )
}