'use client';

import { useState } from 'react';
import { useGameStore } from '@/lib/game/store';
import { SKILL_CATEGORIES } from '@/lib/game/constants';
import { Card, CardContent } from '@/components/ui/card';
import { SkillUpgradeDialog } from './SkillsTab/SkillUpgradeDialog';
import { SkillStudyProgress } from './SkillsTab/SkillStudyProgress';
import { SkillCategory } from './SkillsTab/SkillCategory';

export function SkillsTab() {
  const store = useGameStore();
  const [upgradeDialogSkill, setUpgradeDialogSkill] = useState<string | null>(null);
  const [upgradeDialogMilestone, setUpgradeDialogMilestone] = useState<5 | 10>(5);
  
  const handleUpgradeClick = (skillId: string, milestone: 5 | 10) => {
    setUpgradeDialogSkill(skillId);
    setUpgradeDialogMilestone(milestone);
  };
  
  const handleUpgradeClose = () => {
    setUpgradeDialogSkill(null);
  };
  
  return (
    <div className="space-y-4">
      {/* Upgrade Selection Dialog */}
      <SkillUpgradeDialog 
        skillId={upgradeDialogSkill}
        milestone={upgradeDialogMilestone}
        onClose={handleUpgradeClose}
      />
      
      {/* Current Study Progress */}
      {store.currentStudyTarget && store.currentStudyTarget.type === 'skill' && (
        <Card className="bg-gray-900/80 border-purple-600/50">
          <CardContent className="pt-4">
            <SkillStudyProgress />
          </CardContent>
        </Card>
      )}
      
      {SKILL_CATEGORIES.map((cat) => (
        <SkillCategory
          key={cat.id}
          categoryId={cat.id}
          onUpgradeClick={handleUpgradeClick}
        />
      ))}
    </div>
  );
}

SkillsTab.displayName = "SkillsTab";