"""
Statistik Widget fuer das Lehrer-Dashboard.

Zeigt Noten-Statistiken und Klassenauswertungen.
"""


class StatistikWidget:
    widget_id = 'statistik'
    widget_name = 'Klassenstatistik'
    widget_icon = '📈'  # Chart
    widget_color = '#3b82f6'  # Blue
    default_width = 'full'
    has_settings = True

    @staticmethod
    def get_css() -> str:
        return """
/* ===== Statistik Widget Styles ===== */
.widget-statistik {
    background: var(--bp-surface, #1e293b);
    border: 1px solid var(--bp-border, #475569);
    border-radius: 12px;
    padding: 16px;
}

.widget-statistik .widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.widget-statistik .widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text, #e5e7eb);
}

.widget-statistik .widget-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 8px;
    font-size: 14px;
}

.widget-statistik .statistik-select {
    background: var(--bp-bg, #0f172a);
    border: 1px solid var(--bp-border, #475569);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--bp-text, #e5e7eb);
    cursor: pointer;
}

.widget-statistik .statistik-content {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
}

.widget-statistik .statistik-chart {
    min-height: 120px;
}

.widget-statistik .statistik-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100px;
    padding: 0 8px;
}

.widget-statistik .statistik-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.widget-statistik .statistik-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.5s ease;
}

.widget-statistik .statistik-bar-label {
    font-size: 11px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-statistik .statistik-bar-value {
    font-size: 10px;
    color: var(--bp-text, #e5e7eb);
    font-weight: 600;
}

.widget-statistik .statistik-summary {
    min-width: 160px;
    padding: 12px;
    background: var(--bp-bg, #0f172a);
    border-radius: 8px;
}

.widget-statistik .statistik-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.05));
}

.widget-statistik .statistik-item:last-child {
    border-bottom: none;
}

.widget-statistik .statistik-label {
    font-size: 12px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-statistik .statistik-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text, #e5e7eb);
}

.widget-statistik .statistik-value.good {
    color: #10b981;
}

.widget-statistik .statistik-value.warning {
    color: #f59e0b;
}

.widget-statistik .statistik-value.bad {
    color: #ef4444;
}

.widget-statistik .statistik-test-info {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.1));
    font-size: 11px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-statistik .statistik-empty {
    text-align: center;
    padding: 32px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-statistik .statistik-empty-icon {
    font-size: 40px;
    margin-bottom: 8px;
    opacity: 0.5;
}

@media (max-width: 600px) {
    .widget-statistik .statistik-content {
        grid-template-columns: 1fr;
    }
}
"""

    @staticmethod
    def get_html() -> str:
        return """
<div class="widget-statistik" data-widget-id="statistik">
    <div class="widget-header">
        <div class="widget-title">
            <span class="widget-icon">&#128200;</span>
            <span>Klassenstatistik</span>
        </div>
        <div style="display: flex; gap: 8px; align-items: center;">
            <select class="statistik-select" id="statistik-klasse" onchange="renderStatistik()">
                <option value="10a">Klasse 10a</option>
                <option value="11b">Klasse 11b</option>
                <option value="12c">Klasse 12c</option>
            </select>
            <button class="widget-settings-btn" onclick="openWidgetSettings('statistik')" title="Einstellungen">&#9881;</button>
        </div>
    </div>
    <div id="statistik-content">
        <!-- Wird dynamisch gefuellt -->
    </div>
</div>
"""

    @staticmethod
    def get_js() -> str:
        return """
// ===== Statistik Widget JavaScript =====

function getDefaultStatistik() {
    return {
        '10a': {
            testName: 'Klassenarbeit: Gedichtanalyse',
            testDate: '12.01.2026',
            noten: { 1: 3, 2: 5, 3: 8, 4: 7, 5: 4, 6: 1 },
            durchschnitt: 3.2,
            median: 3,
            bestNote: 1,
            schlechteste: 6,
            schuelerAnzahl: 28
        },
        '11b': {
            testName: 'Vokabeltest',
            testDate: '18.01.2026',
            noten: { 1: 6, 2: 8, 3: 7, 4: 4, 5: 1, 6: 0 },
            durchschnitt: 2.3,
            median: 2,
            bestNote: 1,
            schlechteste: 5,
            schuelerAnzahl: 26
        },
        '12c': {
            testName: 'Probeabitur',
            testDate: '05.01.2026',
            noten: { 1: 2, 2: 4, 3: 9, 4: 6, 5: 2, 6: 1 },
            durchschnitt: 3.1,
            median: 3,
            bestNote: 1,
            schlechteste: 6,
            schuelerAnzahl: 24
        }
    };
}

function getDurchschnittClass(durchschnitt) {
    if (durchschnitt <= 2.5) return 'good';
    if (durchschnitt <= 3.5) return 'warning';
    return 'bad';
}

function renderStatistik() {
    const content = document.getElementById('statistik-content');
    const klasseSelect = document.getElementById('statistik-klasse');
    if (!content) return;

    const selectedKlasse = klasseSelect ? klasseSelect.value : '10a';
    const allStats = getDefaultStatistik();
    const stats = allStats[selectedKlasse];

    if (!stats) {
        content.innerHTML = `
            <div class="statistik-empty">
                <div class="statistik-empty-icon">&#128200;</div>
                <div>Keine Statistik verfuegbar</div>
            </div>
        `;
        return;
    }

    const maxCount = Math.max(...Object.values(stats.noten));

    content.innerHTML = `
        <div class="statistik-content">
            <div class="statistik-chart">
                <div class="statistik-bars">
                    ${Object.entries(stats.noten).map(([note, count]) => `
                        <div class="statistik-bar">
                            <div class="statistik-bar-value">${count}</div>
                            <div class="statistik-bar-fill" style="height: ${(count / maxCount) * 80}px;"></div>
                            <div class="statistik-bar-label">${note}</div>
                        </div>
                    `).join('')}
                </div>
            </div>
            <div class="statistik-summary">
                <div class="statistik-item">
                    <span class="statistik-label">Durchschnitt</span>
                    <span class="statistik-value ${getDurchschnittClass(stats.durchschnitt)}">${stats.durchschnitt.toFixed(1)}</span>
                </div>
                <div class="statistik-item">
                    <span class="statistik-label">Median</span>
                    <span class="statistik-value">${stats.median}</span>
                </div>
                <div class="statistik-item">
                    <span class="statistik-label">Beste Note</span>
                    <span class="statistik-value good">${stats.bestNote} (${stats.noten[stats.bestNote]}x)</span>
                </div>
                <div class="statistik-item">
                    <span class="statistik-label">Schueler</span>
                    <span class="statistik-value">${stats.schuelerAnzahl}</span>
                </div>
                <div class="statistik-test-info">
                    ${stats.testName}<br>
                    ${stats.testDate}
                </div>
            </div>
        </div>
    `;
}

function initStatistikWidget() {
    renderStatistik();
}
"""