'use client';

import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { BookOpen, X } from 'lucide-react';
import { SKILLS_DEF, SPELLS_DEF } from '@/lib/game/constants';
import { formatStudyTime } from '@/lib/game/formatting';
import type { StudyTarget } from '@/lib/game/types';

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

export function StudyProgress({
  currentStudyTarget,
  skills,
  studySpeedMult,
  cancelStudy,
}: StudyProgressProps) {
  if (!currentStudyTarget) return null;
  
  const target = currentStudyTarget;
  const progressPct = Math.min(100, (target.progress / target.required) * 100);
  const isSkill = target.type === 'skill';
  const def = isSkill ? SKILLS_DEF[target.id] : SPELLS_DEF[target.id];
  const currentLevel = isSkill ? (skills[target.id] || 0) : 0;
  
  return (
    <div className="p-3 rounded border border-purple-600/50 bg-purple-900/20">
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <BookOpen className="w-4 h-4 text-purple-400" />
          <span className="text-sm font-semibold text-purple-300">
            {def?.name}
            {isSkill && ` Lv.${currentLevel + 1}`}
          </span>
        </div>
        <Button
          variant="ghost"
          size="sm"
          className="h-6 w-6 p-0 text-gray-400 hover:text-white"
          onClick={cancelStudy}
        >
          <X className="w-4 h-4" />
        </Button>
      </div>
      <Progress value={progressPct} className="h-2 bg-gray-800" />
      <div className="flex justify-between text-xs text-gray-400 mt-1">
        <span>{formatStudyTime(target.progress)} / {formatStudyTime(target.required)}</span>
        <span>{studySpeedMult.toFixed(1)}x speed</span>
      </div>
    </div>
  );
}