/**
 * Statistics Panel Component
 * Displays comprehensive player statistics and analytics
 */

import React, { useMemo } from 'react';
import { useGameStore } from '../../stores/gameStore';
import DraggableModal from '../ui/DraggableModal';
import ProgressBar from '../ui/ProgressBar';
import './StatisticsPanel.css';

export const StatisticsPanel = ({ isOpen, onClose }: any) => {
  const { player } = useGameStore() as any;
  const { statistics } = player;

  // Calculate derived stats
  const derivedStats = useMemo(() => {
    const totalGenreLevels = Object.values(player.genreMastery).reduce((sum: number, m: any) => sum + m.level, 0);
    const avgGenreLevel = (totalGenreLevels as number) / Math.max(1, Object.keys(player.genreMastery).length);
    
    const mostPlayedGenre = Object.entries(statistics.genresExplored || {})
      .sort((a, b) => (b[1] as number) - (a[1] as number))[0];
    
    const favoriteEra = Object.entries(statistics.erasVisited || {})
      .sort((a, b) => (b[1] as number) - (a[1] as number))[0];
    
    const totalMusicianDefeats = Object.values(statistics.musiciansDefeated || {})
      .reduce((sum: number, count: any) => sum + count, 0);

    const playTimeHours = Math.floor(statistics.totalPlayTime / 3600);
    const playTimeMinutes = Math.floor((statistics.totalPlayTime % 3600) / 60);

    return {
      avgGenreLevel: avgGenreLevel.toFixed(1),
      mostPlayedGenre: mostPlayedGenre ? mostPlayedGenre[0] : 'None',
      favoriteEra: favoriteEra ? favoriteEra[0] : 'None',
      totalMusicianDefeats: totalMusicianDefeats as number,
      playTimeFormatted: `${playTimeHours}h ${playTimeMinutes}m`
    };
  }, [player, statistics]);

  // Top musicians defeated
  const topMusicians = useMemo(() => {
    return Object.entries(statistics.musiciansDefeated || {})
      .sort((a, b) => (b[1] as number) - (a[1] as number))
      .slice(0, 5);
  }, [statistics.musiciansDefeated]);

  // Exploration heatmap simplified
  const explorationData = useMemo(() => {
    const heatmap = statistics.heatmap || {};
    const rooms = Object.entries(heatmap);
    const totalVisits = rooms.reduce((sum, [, visits]) => sum + (visits as number), 0);
    const uniqueRooms = rooms.length;
    
    return { uniqueRooms, totalVisits };
  }, [statistics.heatmap]);

  return (
    <DraggableModal
      isOpen={isOpen}
      onClose={onClose}
      title="📊 Statistics"
      width={600}
      height="80vh"
      minimizable={true}
    >
      <div className="statistics-content">
        {/* Overview Section */}
        <section className="stats-section">
          <h3>📈 Overview</h3>
          <div className="stats-grid">
            <div className="stat-card">
              <div className="stat-value">{player.level}</div>
              <div className="stat-label">Level</div>
            </div>
            <div className="stat-card">
              <div className="stat-value">{player.fans}</div>
              <div className="stat-label">Total Fans</div>
            </div>
            <div className="stat-card">
              <div className="stat-value">{player.songsCreated}</div>
              <div className="stat-label">Songs Created</div>
            </div>
            <div className="stat-card">
              <div className="stat-value">{derivedStats.playTimeFormatted}</div>
              <div className="stat-label">Play Time</div>
            </div>
          </div>
        </section>

        {/* Progression Section */}
        <section className="stats-section">
          <h3>🎯 Progression</h3>
          <div className="progress-stats">
            <ProgressBar
              current={statistics.challengesCompleted}
              max={Math.max(100, statistics.challengesCompleted)}
              label="Challenges Completed"
              color="#27ae60"
            />
            <ProgressBar
              current={Object.keys(player.genreMastery).length}
              max={30}
              label="Genres Learned"
              color="#3498db"
            />
            <ProgressBar
              current={player.inventory?.instruments?.length || 0}
              max={20}
              label="Instruments Collected"
              color="#f39c12"
            />
            <ProgressBar
              current={explorationData.uniqueRooms}
              max={Math.max(50, explorationData.uniqueRooms)}
              label="Rooms Explored"
              color="#9b59b6"
            />
          </div>
        </section>

        {/* Genre Mastery Section */}
        <section className="stats-section">
          <h3>🎵 Genre Mastery</h3>
          <div className="genre-stats">
            <div className="stat-row">
              <span>Genres Mastered:</span>
              <strong>{Object.keys(player.genreMastery).length}/30</strong>
            </div>
            <div className="stat-row">
              <span>Average Level:</span>
              <strong>{derivedStats.avgGenreLevel}</strong>
            </div>
            <div className="stat-row">
              <span>Most Played:</span>
              <strong>{derivedStats.mostPlayedGenre}</strong>
            </div>
          </div>
        </section>

        {/* Exploration Section */}
        <section className="stats-section">
          <h3>🗺️ Exploration</h3>
          <div className="exploration-stats">
            <div className="stat-row">
              <span>Unique Rooms:</span>
              <strong>{explorationData.uniqueRooms}</strong>
            </div>
            <div className="stat-row">
              <span>Total Visits:</span>
              <strong>{explorationData.totalVisits}</strong>
            </div>
            <div className="stat-row">
              <span>Favorite Era:</span>
              <strong>{derivedStats.favoriteEra}</strong>
            </div>
            <div className="stat-row">
              <span>Eras Visited:</span>
              <strong>{Object.keys(statistics.erasVisited || {}).length}/16</strong>
            </div>
          </div>
        </section>

        {/* Musicians Section */}
        <section className="stats-section">
          <h3>🎤 Musicians</h3>
          <div className="stat-row">
            <span>Total Defeats:</span>
            <strong>{derivedStats.totalMusicianDefeats}</strong>
          </div>
          {topMusicians.length > 0 && (
            <div className="top-musicians">
              <h4>Most Defeated:</h4>
              <ul>
                {topMusicians.map(([musicianId, count]) => (
                  <li key={musicianId}>
                    {musicianId}: <strong>{count as number}x</strong>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </section>

        {/* Economy Section */}
        <section className="stats-section">
          <h3>💰 Economy</h3>
          <div className="economy-stats">
            <div className="stat-row">
              <span>Total Fans Earned:</span>
              <strong>{statistics.totalFansEarned?.toLocaleString() || 0}</strong>
            </div>
            <div className="stat-row">
              <span>Total Streams:</span>
              <strong>{statistics.totalStreams?.toLocaleString() || 0}</strong>
            </div>
            <div className="stat-row">
              <span>Current Credits:</span>
              <strong>{player.credits}</strong>
            </div>
          </div>
        </section>
      </div>
    </DraggableModal>
  );
};

export default StatisticsPanel;