/**
 * Genre Mastery Panel Component
 * Displays genre proficiency, skill trees, and level progress
 */

import React, { useMemo } from 'react';
import { useGameStore } from '../../stores/gameStore';
import { GenreManager } from '../../systems/GenreManager';
import { genres } from '../../data/genres';
import DraggableModal from '../ui/DraggableModal';
import ProgressBar from '../ui/ProgressBar';
import './GenreMasteryPanel.css';

export const GenreMasteryPanel = ({ isOpen, onClose }: any) => {
  const { player, gainGenreXP, unlockGenreSkill } = useGameStore() as any;
  const genreManager = useMemo(() => new GenreManager(useGameStore), []);

  // Get all mastered genres sorted by level
  const masteredGenres = useMemo(() => {
    return Object.entries(player.genreMastery)
      .map(([genreId, data]) => ({
        ...genres.find(g => g.id === genreId),
        ...(data as any),
        genreId
      }))
      .sort((a, b) => b.level - a.level || b.xp - a.xp);
  }, [player.genreMastery]);

  // Get available genres to learn
  const availableGenres = useMemo(() => {
    return genres.filter(g => !player.genreMastery[g.id]);
  }, [player.genreMastery]);

  const renderGenreCard = (genre, masteryData = null) => {
    const mastery = masteryData || player.genreMastery[genre.id] || { level: 0, xp: 0, skills: [] };
    const progress = genreManager.getLevelProgress(genre.id);
    const multiplier = genreManager.getGenreMultiplier(genre.id);

    return (
      <div key={genre.id} className="genre-card">
        <div className="genre-header">
          <span className="genre-icon">{genre.icon}</span>
          <div className="genre-info">
            <h4>{genre.name}</h4>
            <p className="genre-category">{genre.category}</p>
          </div>
          <div className="genre-level">
            Lvl {mastery.level}
          </div>
        </div>

        <p className="genre-description">{genre.description}</p>

        {mastery.level > 0 && (
          <>
            <ProgressBar
              current={progress.currentXP}
              max={progress.requiredXP}
              label="XP Progress"
              color="#3498db"
              height={15}
              animated
            />

            <div className="genre-stats">
              <div className="stat-item">
                <span>Bonus: </span>
                <strong>+{Math.round((multiplier - 1) * 100)}%</strong>
              </div>
              <div className="stat-item">
                <span>Skills: </span>
                <strong>{mastery.skills.length}/{genre.skillTree.length}</strong>
              </div>
            </div>

            {/* Skill Tree */}
            <div className="skill-tree">
              <h5>Skills</h5>
              <div className="skills-list">
                {genre.skillTree.map(skill => {
                  const unlocked = mastery.skills.includes(skill.id);
                  const canUnlock = genreManager.canUnlockSkill(genre.id, skill);

                  return (
                    <div
                      key={skill.id}
                      className={`skill-item ${unlocked ? 'unlocked' : ''} ${canUnlock ? 'available' : 'locked'}`}
                    >
                      <div className="skill-name">
                        {unlocked && '✓ '}
                        {skill.name}
                      </div>
                      <div className="skill-level">Lvl {skill.level}</div>
                      {canUnlock && !unlocked && (
                        <button
                          className="unlock-btn"
                          onClick={() => unlockGenreSkill(genre.id, skill.id)}
                        >
                          Unlock
                        </button>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>
          </>
        )}

        {mastery.level === 0 && (
          <button
            className="start-learning-btn"
            onClick={() => gainGenreXP(genre.id, 10)}
          >
            Start Learning
          </button>
        )}
      </div>
    );
  };

  return (
    <DraggableModal
      isOpen={isOpen}
      onClose={onClose}
      title="🎵 Genre Mastery"
      width={600}
      height="80vh"
    >
      <div className="genre-mastery-content">
        {masteredGenres.length > 0 && (
          <section className="mastered-section">
            <h3>Your Genres ({masteredGenres.length})</h3>
            <div className="genres-grid">
              {masteredGenres.map(genre => renderGenreCard(genre, genre))}
            </div>
          </section>
        )}

        {availableGenres.length > 0 && (
          <section className="available-section">
            <h3>Available to Learn ({availableGenres.length})</h3>
            <div className="genres-grid">
              {availableGenres.slice(0, 6).map(genre => renderGenreCard(genre))}
            </div>
          </section>
        )}

        {masteredGenres.length === 0 && (
          <div className="empty-state">
            <p>🎼 You haven't mastered any genres yet!</p>
            <p>Complete challenges to gain genre XP and unlock skills.</p>
          </div>
        )}
      </div>
    </DraggableModal>
  );
};

export default GenreMasteryPanel;