@code {
    private P11ChartConfig? _config;
    private P11ChartConfig? _config2;
    private P11ChartConfig? _config2_1;
    private P11ChartConfig? _config2_2;
    private P11ChartConfig? _config2_3;
    private P11ChartConfig? _config2_4;
    private P11ChartConfig? _config3;
    private P11ChartConfig? _config4;
    private P11ChartConfig? _config5;
    private P11ChartConfig? _config6;
    private P11ChartConfig? _config7;
    private string _lastClickedInfo = "";

    protected override void OnInitialized()
    {
        // 1. Event abonnieren (p11 Messaging System)
        EventState.OnChartClicked += HandleChartClick;

        // 2. Chart 1: Manuelle Initialisierung (Typsicher via Enum & Props)
        _config = new P11ChartConfig(P11ChartType.Bar);
        _config.Data.Labels = new List<string> { "Q1", "Q2", "Q3", "Q4" };

        var dataset = new P11Dataset
        {
            Label = "Annual Revenue 2026",
            Data = new List<double?> { 4500.50, 8200.00, 6100.25, 9500.80 }
        };

        // Styling ohne magische Strings
        dataset.SetStyle(P11ChartProps.Dataset.BackgroundColor, "rgba(52, 152, 219, 0.6)");
        dataset.SetStyle(P11ChartProps.Dataset.BorderColor, "#2980b9");
        dataset.SetStyle(P11ChartProps.Dataset.BorderWidth, 2);

        _config.Data.Datasets.Add(dataset);

        // Globale Optionen via Enums und Props
        _config.SetOption(P11ChartProps.General.Responsive, true);
        _config.SetOption(P11ChartProps.General.MaintainAspectRatio, false);
        _config.SetOption(P11ChartProps.Scales.Y.BeginAtZero, true);

        // --- 3. Quick Service Beispiele (Konfigurationen 2 bis 6) ---
        _config2 = P11ChartService.CreateQuickBar("Umsatz", new() { "Mo", "Di" }, new() { 10, 20 });

        // --- 3. Quick Service Beispiele (Konfigurationen 2 bis 6) ---
        // In deiner Razor-Page:
        _config2_1 = P11ChartService.CreateQuickHorizontalBar("Umsatz", new() { "Mo", "Di" }, new() { 10, 20 });

        _config2_2 = P11ChartService.CreateQuickStackedBar(
            "Gesamtumsatz",
            new() { "Jan", "Feb", "März" },
            "Software", new() { 5000, 7500, 6000 }, "#3498db", // Blau
            "Hardware", new() { 2000, 1500, 3000 }, "#e67e22"  // Orange
        );

        // Beispiel: Temperaturverlauf oder Aktienkurs
        _config2_3 = P11ChartService.CreateQuickLine(
            "Server Last (%)",
            new() { "10:00", "11:00", "12:00", "13:00" },
            new() { 15.5, 42.0, 38.5, 95.0 },
            "#e74c3c" // Ein warnendes Rot
        );

        _config2_4 = P11ChartService.CreateQuickArea(
            "Netzwerk-Traffic",
            new() { "Miete", "Lebensmittel", "Freizeit", "Sparen" },
            new() { 1200, 500, 300, 400 },
            "rgba(52, 152, 219, 0.3)" // 30% Deckkraft für die Fläche
        );

        _config3 = P11ChartService.CreateQuickDoughnut("Ausgaben 2026",
            new() { "Miete", "Lebensmittel", "Freizeit", "Sparen" },
            new() { 1200, 500, 300, 400 });

        _config4 = P11ChartService.CreateQuickRadar("Spieler Profil",
            new() { "Stärke", "Ausdauer", "Geschwindigkeit", "Intelligenz", "Glück" },
            new() { 80, 70, 90, 60, 50 },
            "rgba(155, 89, 182, 0.4)");

        _config5 = P11ChartService.CreateQuickPolarArea("Windrichtung Häufigkeit",
            new() { "Nord", "Ost", "Süd", "West" },
            new() { 10, 25, 15, 30 });

        _config6 = P11ChartService.CreateQuickScatter("Messpunkte Sensor A",
            new() { 10, 22, 15, 35, 28, 45 },
            "#e67e22");

        // --- 4. Mixed Chart Beispiel (Config 7) ---
        _config7 = P11ChartService.CreateQuickBar("Ist-Wert",
            new() { "Jan", "Feb", "März" },
            new() { 100, 120, 90 },
            "#3498db");

        var lineDataset = new P11Dataset
        {
            Label = "Ziel-Linie",
            Data = new List<double?> { 110, 110, 110 }
        };

        // Vollständige Typsicherheit für das zweite Dataset
        lineDataset.SetStyle(P11ChartProps.Dataset.Type, P11ChartType.Line);
        lineDataset.SetStyle(P11ChartProps.Dataset.BorderColor, "#e74c3c");
        lineDataset.SetStyle(P11ChartProps.Dataset.BorderWidth, 6);
        lineDataset.SetStyle(P11ChartProps.Dataset.Fill, false);

        _config7.Data.Datasets.Add(lineDataset);
    }

    private async Task HandleChartClick(P11ChartClickMessage msg)
    {
        try
        {
            // Wir prüfen gegen alle IDs oder spezifisch gegen _config
            var newInfo = $"Clicked on {msg.Label}: {msg.Value} ({msg.DatasetLabel})";

            await InvokeAsync(() =>
            {
                _lastClickedInfo = newInfo;
                StateHasChanged();
            });
        }
        catch (Exception ex)
        {
            await EventState.LogDebugAsync("TestPage", "Error in Click-Handler: {0}", ex.Message);
        }
    }

    private void LoadLineChart()
    {
        if (_config == null) return;
        // Typsicherer Wechsel des Chart-Typs
        _config.Type = P11ChartType.Line.ToChartJs();
        _config.SetOption(P11ChartProps.Elements.Line.Tension, 0.4);
        StateHasChanged();
    }

    private void RandomizeData()
    {
        if (_config == null || _config.Data.Datasets.Count == 0) return;
        var random = new Random();
        _config.Data.Datasets[0].Data = new List<double?> {
            random.Next(1000, 10000), random.Next(1000, 10000),
            random.Next(1000, 10000), random.Next(1000, 10000)
        };
        StateHasChanged();
    }

    private void LoadRadarChart()
    {
        if (_config == null) return;

        // 1. Typ ändern via Enum
        _config.Type = P11ChartType.Radar.ToChartJs();

        // 2. Daten für eine Skill-Analyse
        _config.Data.Labels = new List<string> { "Coding", "Design", "A11y", "Testing", "DevOps", "Documentation" };
        _config.Data.Datasets.Clear();

        // Dataset 1: Senior Developer
        var ds1 = new P11Dataset
        {
            Label = "Senior Developer",
            Data = new() { 95, 70, 90, 85, 80, 75 }
        };
        ds1.SetStyle(P11ChartProps.Dataset.BackgroundColor, "rgba(52, 152, 219, 0.2)");
        ds1.SetStyle(P11ChartProps.Dataset.BorderColor, "#3498db");
        ds1.SetStyle(P11ChartProps.Dataset.BorderWidth, 3);

        // Dataset 2: Junior Developer
        var ds2 = new P11Dataset
        {
            Label = "Junior Developer",
            Data = new() { 60, 85, 40, 55, 30, 90 }
        };
        ds2.SetStyle(P11ChartProps.Dataset.BackgroundColor, "rgba(231, 76, 60, 0.2)");
        ds2.SetStyle(P11ChartProps.Dataset.BorderColor, "#e74c3c");
        ds2.SetStyle(P11ChartProps.Dataset.BorderWidth, 3);

        _config.Data.Datasets.Add(ds1);
        _config.Data.Datasets.Add(ds2);

        // 3. Radar-Optionen und Animationen via Enums & Props
        // (Hinweis: Für spezialisierte Pfade wie 'scales.r' nutzen wir weiterhin Strings,
        // bis wir diese ggf. auch in P11ChartProps.Scales aufnehmen)
        _config.SetOption("scales.r.suggestedMin", 0);
        _config.SetOption("scales.r.suggestedMax", 100);

        // Easing via Enum
        _config.SetOption(P11ChartProps.Animation.Easing, P11ChartAnimationEasing.Linear);

        StateHasChanged();
    }

    public void Dispose()
    {
        EventState.OnChartClicked -= HandleChartClick;
    }
}