"""
Notizen Widget fuer das Lehrer-Dashboard.

Zeigt ein einfaches Notizfeld mit localStorage-Persistierung.
"""


class NotizenWidget:
    widget_id = 'notizen'
    widget_name = 'Notizen'
    widget_icon = '📋'  # Clipboard
    widget_color = '#fbbf24'  # Yellow
    default_width = 'half'
    has_settings = False

    @staticmethod
    def get_css() -> str:
        return """
/* ===== Notizen Widget Styles ===== */
.widget-notizen {
    background: var(--bp-surface, #1e293b);
    border: 1px solid var(--bp-border, #475569);
    border-radius: 12px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

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

.widget-notizen .widget-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border-radius: 8px;
    font-size: 14px;
}

.widget-notizen .notizen-save-indicator {
    font-size: 11px;
    color: var(--bp-text-muted, #9ca3af);
    opacity: 0;
    transition: opacity 0.3s;
}

.widget-notizen .notizen-save-indicator.visible {
    opacity: 1;
}

.widget-notizen .notizen-textarea {
    flex: 1;
    width: 100%;
    min-height: 120px;
    background: var(--bp-bg, #0f172a);
    border: 1px solid var(--bp-border, #475569);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--bp-text, #e5e7eb);
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    line-height: 1.5;
}

.widget-notizen .notizen-textarea:focus {
    border-color: #fbbf24;
}

.widget-notizen .notizen-textarea::placeholder {
    color: var(--bp-text-muted, #9ca3af);
}

.widget-notizen .notizen-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 11px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-notizen .notizen-char-count {
    opacity: 0.7;
}
"""

    @staticmethod
    def get_html() -> str:
        return """
<div class="widget-notizen" data-widget-id="notizen">
    <div class="widget-header">
        <div class="widget-title">
            <span class="widget-icon">&#128203;</span>
            <span>Schnelle Notizen</span>
        </div>
        <span class="notizen-save-indicator" id="notizen-save-indicator">Gespeichert</span>
    </div>
    <textarea class="notizen-textarea" id="notizen-textarea" placeholder="Schreiben Sie hier Ihre Notizen..."></textarea>
    <div class="notizen-footer">
        <span class="notizen-char-count" id="notizen-char-count">0 Zeichen</span>
    </div>
</div>
"""

    @staticmethod
    def get_js() -> str:
        return """
// ===== Notizen Widget JavaScript =====
const NOTIZEN_STORAGE_KEY = 'bp-lehrer-notizen';
let notizenSaveTimeout = null;

function loadNotizen() {
    const stored = localStorage.getItem(NOTIZEN_STORAGE_KEY);
    return stored || '';
}

function saveNotizen(text) {
    localStorage.setItem(NOTIZEN_STORAGE_KEY, text);
    showNotizenSaved();
}

function showNotizenSaved() {
    const indicator = document.getElementById('notizen-save-indicator');
    if (indicator) {
        indicator.classList.add('visible');
        setTimeout(() => {
            indicator.classList.remove('visible');
        }, 2000);
    }
}

function updateNotizenCharCount() {
    const textarea = document.getElementById('notizen-textarea');
    const counter = document.getElementById('notizen-char-count');
    if (textarea && counter) {
        counter.textContent = textarea.value.length + ' Zeichen';
    }
}

function initNotizenWidget() {
    const textarea = document.getElementById('notizen-textarea');
    if (!textarea) return;

    // Load saved notes
    textarea.value = loadNotizen();
    updateNotizenCharCount();

    // Auto-save on input with debounce
    textarea.addEventListener('input', function() {
        updateNotizenCharCount();

        if (notizenSaveTimeout) {
            clearTimeout(notizenSaveTimeout);
        }

        notizenSaveTimeout = setTimeout(() => {
            saveNotizen(textarea.value);
        }, 500);
    });
}
"""