'use client';

import { SKILLS_DEF } from '@/lib/game/constants';
import { formatStudyTime } from '@/lib/game/formatting';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import type { StudyTarget } from '@/lib/game/types';

export interface StudyProgressProps {
  currentStudyTarget: StudyTarget;
  skills: Record<string, number>;
  studySpeedMult: number;
  cancelStudy: () => void;
}

export function StudyProgress({
  currentStudyTarget,
  skills,
  studySpeedMult,
  cancelStudy
}: StudyProgressProps) {
  const { id, progress, required } = currentStudyTarget;
  
  // Get skill name
  const baseId = id.includes('_t') ? id.split('_t')[0] : id;
  const skillDef = SKILLS_DEF[baseId];
  const skillName = skillDef?.name || id;
  
  // Get current level
  const currentLevel = skills[id] || skills[baseId] || 0;
  
  // Calculate progress percentage
  const progressPercent = Math.min((progress / required) * 100, 100);
  
  // Estimated completion
  const remainingHours = required - progress;
  const effectiveSpeed = studySpeedMult;
  const realTimeRemaining = remainingHours / effectiveSpeed;
  
  return (
    <div className="space-y-2">
      <div className="flex items-center justify-between">
        <div>
          <span className="text-purple-300 font-semibold">{skillName}</span>
          <span className="text-gray-400 ml-2">
            Level {currentLevel} → {currentLevel + 1}
          </span>
        </div>
        <Button
          size="sm"
          variant="destructive"
          onClick={cancelStudy}
          className="text-xs"
        >
          Cancel
        </Button>
      </div>
      
      <div className="space-y-1">
        <div className="flex justify-between text-xs text-gray-400">
          <span>{formatStudyTime(progress)} / {formatStudyTime(required)}</span>
          <span>{progressPercent.toFixed(1)}%</span>
        </div>
        <Progress value={progressPercent} className="h-2" />
        {studySpeedMult > 1 && (
          <div className="text-xs text-green-400">
            Speed: {(studySpeedMult * 100).toFixed(0)}% • ETA: {formatStudyTime(realTimeRemaining)}
          </div>
        )}
      </div>
    </div>
  );
}