<div
    class="chart-component"
    data-live-component="{{componentId}}"
    data-state='{{stateJson}}'
>
    <!-- Header Controls -->
    <div class="chart-header">
        <div class="header-left">
            <h3 class="component-title">{{chartIcon}} Real-Time Analytics Dashboard</h3>
            <div class="chart-stats">
                <span class="stat">
                    <strong>{{data_points_count}}</strong> Datenpunkte
                </span>
                <span class="stat" if="showPerformanceMetric">
                    Letztes Update: <strong>{{execution_time_ms}}ms</strong>
                </span>
                <span class="stat">
                    <span class="status-indicator {{autoRefreshIndicatorClass}}"></span>
                    {{autoRefreshStatusText}}
                </span>
            </div>
        </div>

        <div class="header-right">
            <button
                class="btn {{autoRefreshButtonClass}}"
                data-live-action="toggleAutoRefresh"
            >
                {{autoRefreshButtonText}}
            </button>

            <button
                class="btn btn-primary"
                data-live-action="refreshData"
            >
                🔄 Aktualisieren
            </button>
        </div>
    </div>

    <!-- Chart Type Selector -->
    <div class="chart-controls">
        <div class="control-group">
            <label>Diagrammtyp:</label>
            <div class="button-group">
                <for items="chartTypeOptions" as="option">
                    <button
                        class="btn-type {{option.activeClass}}"
                        data-live-action="changeChartType"
                        data-param-chart-type="{{option.value}}"
                    >
                        {{option.icon}} {{option.label}}
                    </button>
                </for>
            </div>
        </div>

        <div class="control-group">
            <label>Zeitbereich:</label>
            <select
                class="range-select"
                data-live-action="changeDataRange"
            >
                <for items="dataRangeOptions" as="option">
                    <option value="{{option.value}}" {{option.selectedAttribute}}>
                        {{option.label}}
                    </option>
                </for>
            </select>
        </div>
    </div>

    <!-- Chart Display Area -->
    <div class="chart-display">
        <div class="pie-chart-container" if="isPieChart">
            <div class="pie-chart">
                <!-- Simple CSS Pie Chart Representation -->
                <div class="pie-legend">
                    <for items="pieSegments" as="segment">
                        <div class="legend-item">
                            <span class="legend-color" style="background-color: {{segment.color}}"></span>
                            <span class="legend-label">{{segment.label}}</span>
                            <span class="legend-value">{{segment.value}}%</span>
                        </div>
                    </for>
                </div>

                <div class="pie-visual">
                    <for items="pieSegments" as="segment">
                        <div
                            class="pie-segment"
                            style="background-color: {{segment.color}}; width: {{segment.size}}; height: {{segment.size}};"
                        >
                            {{segment.value}}%
                        </div>
                    </for>
                </div>
            </div>
        </div>

        <div class="line-chart-container" if="!isPieChart">
            <!-- Chart Canvas (CSS-based visualization) -->
            <div class="chart-canvas">
                <!-- Y-axis labels -->
                <div class="y-axis">
                    <div class="y-label">100</div>
                    <div class="y-label">75</div>
                    <div class="y-label">50</div>
                    <div class="y-label">25</div>
                    <div class="y-label">0</div>
                </div>

                <!-- Data visualization -->
                <div class="chart-data">
                    <div class="grid-lines">
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                        <div class="grid-line"></div>
                    </div>

                    <div class="data-bars">
                        <for items="barItems" as="bar">
                            <div
                                class="{{bar.barClass}}"
                                style="{{bar.barStyle}}"
                                title="{{bar.title}}"
                                data-label-index="{{bar.labelIndex}}"
                            ></div>
                        </for>
                    </div>
                </div>
            </div>

            <!-- X-axis labels -->
            <div class="x-axis">
                <for items="barLabels" as="label">
                    <div class="x-label">{{label.text}}</div>
                </for>
            </div>

            <!-- Legend -->
            <div class="chart-legend">
                <for items="chartDatasets" as="dataset">
                    <div class="legend-item">
                        <span class="legend-color" style="background-color: {{dataset.legendColor}}"></span>
                        <span class="legend-label">{{dataset.label}}</span>
                    </div>
                </for>
            </div>
        </div>
    </div>

    <!-- Statistics Summary -->
    <div class="chart-summary">
        <div class="summary-card">
            <div class="summary-label">Datenpunkte gesamt</div>
            <div class="summary-value">{{data_points_count}}</div>
        </div>

        <div class="summary-card">
            <div class="summary-label">Letztes Update</div>
            <div class="summary-value">{{lastUpdateFormatted}}</div>
        </div>

        <div class="summary-card">
            <div class="summary-label">Update-Intervall</div>
            <div class="summary-value">{{refreshIntervalFormatted}}</div>
        </div>

        <div class="summary-card">
            <div class="summary-label">Diagrammtyp</div>
            <div class="summary-value">{{chartTypeLabel}}</div>
        </div>
    </div>
</div>

<style>
.chart-component {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
    gap: 1rem;
}

.header-left {
    flex: 1;
}

.component-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.chart-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.stat {
    font-size: 0.875rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat strong {
    color: #2196F3;
    font-weight: 600;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.active {
    background: #4CAF50;
    animation: pulse 2s infinite;
}

.status-indicator.paused {
    background: #f44336;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.header-right {
    display: flex;
    gap: 0.75rem;
}

.btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
    font-size: 0.875rem;
}

.btn:hover {
    background: #f5f5f5;
}

.btn-primary {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.btn-primary:hover {
    background: #1976D2;
}

.btn-success {
    background: #4CAF50;
    color: white;
    border-color: #4CAF50;
}

.btn-success:hover {
    background: #388E3C;
}

.btn-warning {
    background: #FFC107;
    color: #333;
    border-color: #FFC107;
}

.btn-warning:hover {
    background: #FFA000;
}

/* Chart Controls */
.chart-controls {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 6px;
    flex-wrap: wrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-group label {
    font-weight: 600;
    color: #555;
    font-size: 0.875rem;
}

.button-group {
    display: flex;
    gap: 0.5rem;
}

.btn-type {
    padding: 0.5rem 1rem;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.875rem;
}

.btn-type:hover {
    background: #f5f5f5;
}

.btn-type.active {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.range-select {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

/* Chart Display */
.chart-display {
    margin-bottom: 1.5rem;
    min-height: 400px;
}

/* Line/Bar/Area Chart */
.line-chart-container {
    position: relative;
}

.chart-canvas {
    display: flex;
    height: 300px;
    margin-bottom: 1rem;
}

.y-axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.5rem;
    width: 40px;
}

.y-label {
    font-size: 0.75rem;
    color: #999;
    text-align: right;
}

.chart-data {
    flex: 1;
    position: relative;
    border-left: 2px solid #ddd;
    border-bottom: 2px solid #ddd;
}

.grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grid-line {
    height: 1px;
    background: #f0f0f0;
}

.data-bars {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 0 0.25rem;
}

.bar-group {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 1px;
}

.bar {
    flex: 1;
    min-width: 8px;
    transition: all 0.3s;
    border-radius: 2px 2px 0 0;
}

.bar:hover {
    opacity: 0.8;
}

.area-bar {
    opacity: 0.7;
}

.x-axis {
    display: flex;
    justify-content: space-between;
    margin-left: 40px;
    padding: 0 0.25rem;
}

.x-label {
    font-size: 0.75rem;
    color: #999;
    text-align: center;
    flex: 1;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
}

.legend-label {
    font-size: 0.875rem;
    color: #666;
    font-weight: 500;
}

.legend-value {
    font-weight: 600;
    color: #333;
}

/* Pie Chart */
.pie-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.pie-chart {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.pie-visual {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 2rem;
}

.pie-segment {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: white;
    min-width: 80px;
    min-height: 80px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.pie-legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Summary Cards */
.chart-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.summary-card {
    padding: 1rem;
    background: #f9f9f9;
    border-radius: 6px;
    text-align: center;
}

.summary-label {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .button-group {
        flex-wrap: wrap;
    }

    .chart-canvas {
        height: 200px;
    }

    .pie-chart {
        flex-direction: column;
    }
}
</style>

<script if="auto_refresh">
    // Auto-refresh functionality (JavaScript will handle this)
    setTimeout(() => {
        const refreshButton = document.querySelector('[data-live-action="refreshData"]');
        if (refreshButton) {
            refreshButton.click();
        }
    }, {{refresh_interval}});
</script>
