/**
 * Systems Demo Component
 * Demonstrates all new systems working together
 * Can be imported into App.js for testing
 */

import React, { useState } from 'react';
import { useGameStore } from '../stores/gameStore';
import { useUIStore } from '../stores/uiStore';
import { useSettingsStore } from '../stores/settingsStore';
import { GenreManager } from '../systems/GenreManager';
import { InventoryManager } from '../systems/InventoryManager';
import { ReputationManager } from '../systems/ReputationManager';
import GenreMasteryPanel from './panels/GenreMasteryPanel';
import DraggableModal from './ui/DraggableModal';
import ProgressBar from './ui/ProgressBar';
import { genres } from '../data/genres';
import { instruments } from '../data/instruments';

const SystemsDemo = () => {
  const gameStore = useGameStore() as any;
  const { modals, openModal, closeModal } = useUIStore() as any;
  const { fontSize } = useSettingsStore() as any;
  
  const [genreManager] = useState(() => new GenreManager(useGameStore));
  const [inventoryManager] = useState(() => new InventoryManager(useGameStore));
  const [reputationManager] = useState(() => new ReputationManager(useGameStore));

  const handleTestGenreXP = () => {
    const result = genreManager.awardXP('blues', 150);
    alert(`Awarded 150 XP to Blues!\nLeveled up: ${result.leveledUp}\nNew Level: ${result.newLevel}`);
  };

  const handleAddInstrument = () => {
    const guitar = instruments.find(i => i.id === 'strat_guitar');
    inventoryManager.addInstrument(guitar);
    alert('Added Fender Stratocaster to inventory!');
  };

  const handleChangeReputation = () => {
    reputationManager.changeReputation('genres', 'jazz', 75);
    const tier = reputationManager.getTier(75);
    alert(`Jazz reputation increased to 75 (${tier})!`);
  };

  const handleResetGame = () => {
    if (window.confirm('Reset all game data?')) {
      gameStore.resetGame();
      alert('Game reset!');
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif', fontSize: `${fontSize}px` }}>
      <h1>🎵 Suno RPG Systems Demo</h1>
      
      <div style={{ marginBottom: '30px' }}>
        <h2>Player Stats</h2>
        <div style={{ background: '#f0f0f0', padding: '15px', borderRadius: '8px' }}>
          <p><strong>Level:</strong> {gameStore.player.level}</p>
          <p><strong>Fans:</strong> {gameStore.player.fans}</p>
          <p><strong>Credits:</strong> {gameStore.player.credits}</p>
          <p><strong>Instruments:</strong> {gameStore.player.inventory.instruments.length}</p>
          <p><strong>Mastered Genres:</strong> {Object.keys(gameStore.player.genreMastery).length}</p>
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Test Actions</h2>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <button onClick={handleTestGenreXP} style={buttonStyle}>
            Award 150 XP to Blues
          </button>
          <button onClick={handleAddInstrument} style={buttonStyle}>
            Add Stratocaster
          </button>
          <button onClick={handleChangeReputation} style={buttonStyle}>
            Increase Jazz Rep
          </button>
          <button onClick={() => openModal('genreMastery')} style={buttonStyle}>
            Open Genre Mastery Panel
          </button>
          <button onClick={handleResetGame} style={{...buttonStyle, background: '#e74c3c'}}>
            Reset Game
          </button>
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Progress Bar Demo</h2>
        <ProgressBar
          current={gameStore.player.fans}
          max={1000}
          label="Fans to Next Level"
          color="#3498db"
          animated
        />
        <ProgressBar
          current={gameStore.player.credits}
          max={5000}
          label="Credits"
          color="#f39c12"
        />
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Available Genres ({genres.length})</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: '10px' }}>
          {genres.slice(0, 12).map(genre => (
            <div key={genre.id} style={genreCardStyle}>
              <div style={{ fontSize: '2em' }}>{genre.icon}</div>
              <strong>{genre.name}</strong>
              <div style={{ fontSize: '0.8em', color: '#666' }}>{genre.category}</div>
            </div>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: '30px' }}>
        <h2>Available Instruments ({instruments.length})</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '10px' }}>
          {instruments.slice(0, 6).map(instrument => (
            <div key={instrument.id} style={instrumentCardStyle}>
              <strong>{instrument.name}</strong>
              <div style={{ fontSize: '0.85em', color: '#666' }}>
                {instrument.type} • {instrument.rarity}
              </div>
              <div style={{ fontSize: '0.85em', marginTop: '5px' }}>
                Level {instrument.requiredLevel} • ${instrument.value}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Genre Mastery Panel */}
      <GenreMasteryPanel
        isOpen={modals.genreMastery}
        onClose={() => closeModal('genreMastery')}
      />

      {/* Demo Modal */}
      <DraggableModal
        isOpen={modals.help}
        onClose={() => closeModal('help')}
        title="📖 Systems Demo Help"
        width={500}
      >
        <div style={{ lineHeight: '1.6' }}>
          <h3>What's Implemented:</h3>
          <ul>
            <li>✅ Zustand State Management (3 stores)</li>
            <li>✅ Genre Mastery System (30 genres)</li>
            <li>✅ Inventory & Crafting (20+ instruments)</li>
            <li>✅ Reputation System</li>
            <li>✅ Event System</li>
            <li>✅ Quest Engine</li>
            <li>✅ Save Manager</li>
            <li>✅ Draggable UI Components</li>
          </ul>

          <h3>How to Test:</h3>
          <ol>
            <li>Click "Award 150 XP to Blues" to test genre leveling</li>
            <li>Click "Add Stratocaster" to test inventory</li>
            <li>Click "Open Genre Mastery Panel" to see the UI</li>
            <li>Check localStorage to see persisted state</li>
          </ol>

          <h3>Data Available:</h3>
          <ul>
            <li>30 Genres with 10-level progression</li>
            <li>100+ Genre skills across all genres</li>
            <li>20+ Craftable instruments</li>
            <li>40+ Crafting materials</li>
          </ul>
        </div>
      </DraggableModal>

      <button 
        onClick={() => openModal('help')} 
        style={{...buttonStyle, position: 'fixed', bottom: '20px', right: '20px', fontSize: '1.2em'}}
      >
        📖 Help
      </button>
    </div>
  );
};

const buttonStyle = {
  background: '#3498db',
  color: 'white',
  border: 'none',
  padding: '10px 20px',
  borderRadius: '5px',
  cursor: 'pointer',
  fontSize: '1em',
  transition: 'all 0.2s'
};

  const genreCardStyle: React.CSSProperties = {
  background: 'white',
  border: '2px solid #ddd',
  borderRadius: '8px',
  padding: '15px',
  textAlign: 'center',
  transition: 'all 0.2s',
  cursor: 'pointer'
};

const instrumentCardStyle = {
  background: 'white',
  border: '2px solid #ddd',
  borderRadius: '8px',
  padding: '12px',
  transition: 'all 0.2s'
};

export default SystemsDemo;