import React, { useEffect, useState } from 'react';
import "./styles/SkillsTab.css";

const SkillsTab = () => {
  const [category, setCategory] = useState('combat');
  const categories = [
    { id: 'combat', label: 'Combat' },
    { id: 'science', label: 'Science' },
    { id: 'crafting', label: 'Crafting' }
  ];

  const [skillsData] = useState(() => {
    const catIds = categories.map(c => c.id);
    return Array.from({ length: 5 }, (_, i) => ({
      id: `skill-${i}`,
      category: catIds[i % catIds.length],
      name: `Tech ${i + 1}`,
      currentLevel: i < 3 ? 1 : 0,
      maxLevel: 10,
      experience: 20,
      experienceToNext: 100,
      description: "Specialized module for advanced space operations.",
      iconClass: i % 3 === 0 ? "fa-shield-alt" : i % 3 === 1 ? "fa-flask" : "fa-tools",
      unlocked: i < 3,
      requiredLevel: 1
    }));
  });
  const handleUnlock = (category, id) => {
    console.log(`Unlocking ${id} in ${category}`);
  };

  const handleUpgrade = (category, id) => {
    console.log(`Upgrading ${id} in ${category}`);
  };
  const filteredSkills = skillsData.filter(skill => skill.category === category);

  return (
    <div className="tab-content active">
      <div className="skills-container">
        <div className="skills-header">
          <h2><i className="fas fa-graduation-cap"></i> Skills</h2>
          <div className="skill-points-display">
            <span className="skill-points">Skill Points: 0</span>
          </div>
        </div>
        <div className="skill-categories">
          {categories.map(cat => (
            <button
              key={cat.id}
              className={`skill-cat-btn ${category === cat.id ? 'active' : ''}`}
              onClick={() => setCategory(cat.id)}
            >
              {cat.label}
            </button>
          ))}
        </div>
        <div className="skills-grid">
          {filteredSkills.length > 0 ? (
            filteredSkills.map(skill => (
              <SkillComponent
                key={skill.id}
                skill={skill}
                activeCategory={category}
                skillId={skill.id}
                onUnlock={(cat, id) => console.log('Unlock', cat, id)}
                onUpgrade={(cat, id) => console.log('Upgrade', cat, id)}
              />
            ))
          ) : (
            <p className="empty-msg">No skills discovered in this category yet.</p>
          )}
        </div>
      </div>
    </div>
  );
};

const SkillComponent = ({
  skill,
  activeCategory,
  skillId,
  onUnlock,
  onUpgrade,
}) => {
  const {
    name,
    currentLevel,
    maxLevel,
    description,
    iconClass,
    experience,
    experienceToNext,
    unlocked,
    requiredLevel
  } = skill;

  const progressPercent = (experience / experienceToNext) * 100;

  return (
    <div className={`skill-item ${!unlocked ? 'locked' : ''}`}>
      <div className="skill-header">
        <div className="skill-icon">
          <i className={`fas ${iconClass}`}></i>
        </div>
        <div className="skill-info">
          <div className="skill-name">{name}</div>
          <div className="skill-level">Lv. {currentLevel}/{maxLevel}</div>
        </div>
      </div>

      <div className="skill-description">{description}</div>

      {unlocked && currentLevel < maxLevel && (
        <div className="skill-progress">
          <div className="progress-bar">
            <div
              className="progress-fill"
              style={{ width: `${progressPercent}%` }}
            ></div>
          </div>
          <span>{experience}/{experienceToNext} XP</span>
        </div>
      )}

      {currentLevel >= maxLevel && (
        <div className="skill-max-level">
          <span>MAX LEVEL REACHED</span>
        </div>
      )}

      <div className="skill-actions">
        {!unlocked ? (
          <button
            className="btn btn-warning"
            onClick={() => onUnlock(activeCategory, skillId)}
          >
            Unlock (2 Points)
          </button>
        ) : currentLevel < maxLevel ? (
          <button
            className="btn btn-primary"
            onClick={() => onUpgrade(activeCategory, skillId)}
          >
            Upgrade (1 Point)
          </button>
        ) : (
          <span className="max-level-text">Mastered</span>
        )}
      </div>

      {!skill.unlocked ?
        <div class="skill-requirement">Requires Level {skill.requiredLevel}</div>
        : ''}

    </div>
  );
};

export default SkillsTab;