// src/components/CharacterSheet.tsx
import React, { useState } from 'react';
import type { DSACharacter } from '../types/character';
import BasicInfo from './BasicInfo';
import Attributes from './Attributes';
import Skills from './Skills';
import Spells from './Spells';
import CombatValues from './CombatValues';
import ThemeToggle from './ThemeToggle';
import iconUrl from '/icon.png';
import './CharacterSheet.css';

// Erweiterte Initial-Daten mit Astralenergie und Zaubern
const initialCharacter: DSACharacter = {
    id: crypto.randomUUID(),
    name: '',
    species: '',
    culture: '',
    profession: '',
    experienceLevel: 'Experienced',
    attributes: {
        courage: 8,
        cleverness: 8,
        intuition: 8,
        charisma: 8,
        dexterity: 8,
        agility: 8,
        constitution: 8,
        strength: 8
    },
    skills: {},
    spells: {}, // ← Neu hinzugefügt
    combat: {
        lifePoints: { max: 30, current: 30 },
        stamina: { max: 30, current: 30 },
        initiative: 10,
        speed: 8
    },
    astralEnergy: { // ← Neu hinzugefügt für Zauberer
        max: 0,
        current: 0
    },
    magicalTraditions: [], // ← Neu hinzugefügt
    advantages: [],
    disadvantages: [],
    equipment: []
};

const CharacterSheet: React.FC = () => {
    const [character, setCharacter] = useState<DSACharacter>(initialCharacter);

    // Hilfsfunktion um zu prüfen ob Charakter Zauberer ist
    const isSpellcaster = character.astralEnergy && character.astralEnergy.max > 0;

    return (
        <div className="character-sheet">
            <ThemeToggle />

            <header className="character-sheet-header">
                <img
                    src={iconUrl}
                    alt="DSA 5e Character Sheet"
                    className="character-sheet-icon"
                />
                <h1>DSA 5 Character Sheet</h1>
            </header>

            {/* Grundinformationen */}
            <BasicInfo character={character} setCharacter={setCharacter} />

            {/* Eigenschaften */}
            <Attributes character={character} setCharacter={setCharacter} />

            {/* Kampfwerte */}
            <CombatValues character={character} setCharacter={setCharacter} />

            {/* Fertigkeiten */}
            <Skills character={character} setCharacter={setCharacter} />

            {/* Zauber - nur anzeigen wenn Astralenergie > 0 oder explizit gewünscht */}
            {(isSpellcaster || Object.keys(character.spells).length > 0) && (
                <Spells character={character} setCharacter={setCharacter} />
            )}

            {/* Button zum Hinzufügen von Zaubern falls noch kein Zauberer */}
            {!isSpellcaster && Object.keys(character.spells).length === 0 && (
                <div className="add-magic-section">
                    <button
                        className="add-magic-button"
                        onClick={() => setCharacter(prev => ({
                            ...prev,
                            astralEnergy: { max: 20, current: 20 }
                        }))}
                    >
                        🪄 Zauberfähigkeiten hinzufügen
                    </button>
                </div>
            )}
        </div>
    );
};

export default CharacterSheet;