'use client'

import { BookOpen, Clock, Users } from 'lucide-react'
import { LessonSession } from '@/lib/companion/types'
import { VisualPieTimer } from './VisualPieTimer'
import { QuickActionsBar } from './QuickActionsBar'
import { PhaseTimelineDetailed } from '../companion-mode/PhaseTimeline'
import {
  PHASE_COLORS,
  PHASE_DISPLAY_NAMES,
  formatTime,
  getTimerColorStatus,
} from '@/lib/companion/constants'

interface LessonActiveViewProps {
  session: LessonSession
  onPauseToggle: () => void
  onExtendTime: (minutes: number) => void
  onSkipPhase: () => void
  onEndLesson: () => void
}

export function LessonActiveView({
  session,
  onPauseToggle,
  onExtendTime,
  onSkipPhase,
  onEndLesson,
}: LessonActiveViewProps) {
  const currentPhase = session.phases[session.currentPhaseIndex]
  const phaseId = currentPhase?.phase || 'einstieg'
  const phaseColor = PHASE_COLORS[phaseId].hex
  const phaseName = PHASE_DISPLAY_NAMES[phaseId]

  // Calculate timer values
  const phaseDurationSeconds = (currentPhase?.duration || 0) * 60
  const elapsedInPhase = currentPhase?.actualTime || 0
  const remainingSeconds = phaseDurationSeconds - elapsedInPhase
  const progress = Math.min(elapsedInPhase / phaseDurationSeconds, 1)
  const isOvertime = remainingSeconds < 0
  const colorStatus = getTimerColorStatus(remainingSeconds, isOvertime)

  const isLastPhase = session.currentPhaseIndex === session.phases.length - 1

  // Calculate total elapsed
  const totalElapsedMinutes = Math.floor(session.elapsedTime / 60)

  return (
    <div className="space-y-6">
      {/* Header with Session Info */}
      <div
        className="bg-gradient-to-r rounded-xl p-6 text-white"
        style={{
          background: `linear-gradient(135deg, ${phaseColor}, ${phaseColor}dd)`,
        }}
      >
        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-2 text-white/80 text-sm mb-1">
              <Users className="w-4 h-4" />
              <span>{session.className}</span>
              <span className="mx-2">|</span>
              <BookOpen className="w-4 h-4" />
              <span>{session.subject}</span>
            </div>
            <h2 className="text-2xl font-bold">
              {session.topic || phaseName}
            </h2>
          </div>

          <div className="text-right">
            <div className="text-white/80 text-sm">Gesamtzeit</div>
            <div className="text-xl font-mono font-bold">
              {formatTime(session.elapsedTime)}
            </div>
          </div>
        </div>
      </div>

      {/* Main Timer Section */}
      <div className="bg-white border border-slate-200 rounded-xl p-8">
        <div className="flex flex-col items-center">
          {/* Visual Pie Timer */}
          <VisualPieTimer
            progress={progress}
            remainingSeconds={remainingSeconds}
            totalSeconds={phaseDurationSeconds}
            colorStatus={colorStatus}
            isPaused={session.isPaused}
            currentPhaseName={phaseName}
            phaseColor={phaseColor}
            onTogglePause={onPauseToggle}
            size="lg"
          />

          {/* Quick Actions */}
          <div className="mt-8 w-full max-w-md">
            <QuickActionsBar
              onExtend={onExtendTime}
              onPause={onPauseToggle}
              onResume={onPauseToggle}
              onSkip={onSkipPhase}
              onEnd={onEndLesson}
              isPaused={session.isPaused}
              isLastPhase={isLastPhase}
            />
          </div>
        </div>
      </div>

      {/* Phase Timeline */}
      <PhaseTimelineDetailed
        phases={session.phases.map((p, i) => ({
          id: p.phase,
          shortName: p.phase[0].toUpperCase(),
          displayName: PHASE_DISPLAY_NAMES[p.phase],
          duration: p.duration,
          status: p.status === 'active' ? 'active' : p.status === 'completed' ? 'completed' : 'planned',
          actualTime: p.actualTime,
          color: PHASE_COLORS[p.phase].hex,
        }))}
        currentPhaseIndex={session.currentPhaseIndex}
        onPhaseClick={(index) => {
          // Optional: Allow clicking to navigate to a phase
        }}
      />

      {/* Lesson Stats */}
      <div className="grid grid-cols-3 gap-4">
        <div className="bg-white border border-slate-200 rounded-xl p-4 text-center">
          <Clock className="w-5 h-5 text-slate-400 mx-auto mb-2" />
          <div className="text-2xl font-bold text-slate-900">{totalElapsedMinutes}</div>
          <div className="text-sm text-slate-500">Minuten vergangen</div>
        </div>

        <div className="bg-white border border-slate-200 rounded-xl p-4 text-center">
          <div
            className="w-5 h-5 rounded-full mx-auto mb-2"
            style={{ backgroundColor: phaseColor }}
          />
          <div className="text-2xl font-bold text-slate-900">
            {session.currentPhaseIndex + 1}/{session.phases.length}
          </div>
          <div className="text-sm text-slate-500">Phase</div>
        </div>

        <div className="bg-white border border-slate-200 rounded-xl p-4 text-center">
          <Clock className="w-5 h-5 text-slate-400 mx-auto mb-2" />
          <div className="text-2xl font-bold text-slate-900">
            {session.totalPlannedDuration - totalElapsedMinutes}
          </div>
          <div className="text-sm text-slate-500">Minuten verbleibend</div>
        </div>
      </div>

      {/* Keyboard Shortcuts Hint */}
      <div className="text-center text-sm text-slate-400">
        <span className="inline-flex items-center gap-4">
          <span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs">Leertaste</kbd> Pause
          </span>
          <span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs">E</kbd> +5 Min
          </span>
          <span>
            <kbd className="px-2 py-1 bg-slate-100 rounded text-xs">N</kbd> Weiter
          </span>
        </span>
      </div>
    </div>
  )
}