"""
Nachrichten Widget fuer das Lehrer-Dashboard.

Zeigt die letzten E-Mails aus dem Mail-Inbox Modul.
"""


class NachrichtenWidget:
    widget_id = 'nachrichten'
    widget_name = 'E-Mails'
    widget_icon = '📧'  # Email
    widget_color = '#06b6d4'  # Cyan
    default_width = 'half'
    has_settings = True

    @staticmethod
    def get_css() -> str:
        return """
/* ===== Nachrichten Widget Styles ===== */
.widget-nachrichten {
    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-nachrichten .widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.1));
}

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

.widget-nachrichten .widget-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border-radius: 8px;
    font-size: 14px;
}

.widget-nachrichten .nachrichten-unread {
    background: #ef4444;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.widget-nachrichten .nachrichten-list {
    flex: 1;
    overflow-y: auto;
}

.widget-nachrichten .nachricht-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.05));
    cursor: pointer;
    transition: background 0.2s;
}

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

.widget-nachrichten .nachricht-item:hover {
    background: var(--bp-surface-elevated, #334155);
    margin: 0 -12px;
    padding: 12px;
    border-radius: 8px;
}

.widget-nachrichten .nachricht-item.unread .nachricht-sender {
    font-weight: 600;
}

.widget-nachrichten .nachricht-avatar {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
}

.widget-nachrichten .nachricht-content {
    flex: 1;
    min-width: 0;
}

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

.widget-nachrichten .nachricht-sender {
    font-size: 13px;
    color: var(--bp-text, #e5e7eb);
}

.widget-nachrichten .nachricht-time {
    font-size: 11px;
    color: var(--bp-text-muted, #9ca3af);
}

.widget-nachrichten .nachricht-preview {
    font-size: 12px;
    color: var(--bp-text-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-nachrichten .nachrichten-empty {
    text-align: center;
    padding: 24px;
    color: var(--bp-text-muted, #9ca3af);
    font-size: 13px;
}

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

.widget-nachrichten .nachrichten-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bp-border-subtle, rgba(255,255,255,0.1));
}

.widget-nachrichten .nachrichten-all-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px dashed var(--bp-border, #475569);
    border-radius: 8px;
    color: var(--bp-text-muted, #9ca3af);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.widget-nachrichten .nachrichten-all-btn:hover {
    border-color: #06b6d4;
    color: #06b6d4;
}
"""

    @staticmethod
    def get_html() -> str:
        return """
<div class="widget-nachrichten" data-widget-id="nachrichten">
    <div class="widget-header">
        <div class="widget-title">
            <span class="widget-icon">&#128231;</span>
            <span>Letzte Nachrichten</span>
        </div>
        <span class="nachrichten-unread" id="nachrichten-unread" style="display: none;">0</span>
    </div>
    <div class="nachrichten-list" id="nachrichten-list">
        <!-- Wird dynamisch gefuellt -->
    </div>
    <div class="nachrichten-footer">
        <button class="nachrichten-all-btn" onclick="openAllNachrichten()">+ Alle Nachrichten anzeigen</button>
    </div>
</div>
"""

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

function getDefaultNachrichten() {
    const now = Date.now();
    return [
        {
            id: 1,
            sender: 'Fr. Mueller (Eltern)',
            email: 'mueller@example.com',
            preview: 'Frage zu den Hausaufgaben von gestern...',
            time: new Date(now - 2 * 60 * 60 * 1000).toISOString(),
            unread: true,
            type: 'eltern'
        },
        {
            id: 2,
            sender: 'Hr. Weber (Schulleitung)',
            email: 'weber@schule.de',
            preview: 'Terminabsprache fuer naechste Woche...',
            time: new Date(now - 24 * 60 * 60 * 1000).toISOString(),
            unread: false,
            type: 'kollegium'
        },
        {
            id: 3,
            sender: 'Lisa Schmidt (11b)',
            email: 'schmidt@schueler.de',
            preview: 'Krankmeldung fuer morgen...',
            time: new Date(now - 48 * 60 * 60 * 1000).toISOString(),
            unread: false,
            type: 'schueler'
        }
    ];
}

function formatNachrichtenTime(timeStr) {
    const time = new Date(timeStr);
    const now = new Date();
    const diffMs = now - time;
    const diffMins = Math.floor(diffMs / (60 * 1000));
    const diffHours = Math.floor(diffMs / (60 * 60 * 1000));
    const diffDays = Math.floor(diffMs / (24 * 60 * 60 * 1000));

    if (diffMins < 1) return 'gerade eben';
    if (diffMins < 60) return `vor ${diffMins} Min.`;
    if (diffHours < 24) return `vor ${diffHours} Std.`;
    if (diffDays === 1) return 'gestern';
    return `vor ${diffDays} Tagen`;
}

function getTypeIcon(type) {
    const icons = {
        eltern: '&#128106;',
        schueler: '&#129489;',
        kollegium: '&#128188;'
    };
    return icons[type] || '&#128231;';
}

function renderNachrichten() {
    const list = document.getElementById('nachrichten-list');
    const unreadBadge = document.getElementById('nachrichten-unread');
    if (!list) return;

    const nachrichten = getDefaultNachrichten();
    const unreadCount = nachrichten.filter(n => n.unread).length;

    if (unreadBadge) {
        if (unreadCount > 0) {
            unreadBadge.textContent = unreadCount;
            unreadBadge.style.display = 'inline';
        } else {
            unreadBadge.style.display = 'none';
        }
    }

    if (nachrichten.length === 0) {
        list.innerHTML = `
            <div class="nachrichten-empty">
                <div class="nachrichten-empty-icon">&#128231;</div>
                <div>Keine Nachrichten</div>
            </div>
        `;
        return;
    }

    list.innerHTML = nachrichten.map(n => `
        <div class="nachricht-item ${n.unread ? 'unread' : ''}" onclick="openNachricht(${n.id})">
            <div class="nachricht-avatar">${getTypeIcon(n.type)}</div>
            <div class="nachricht-content">
                <div class="nachricht-header">
                    <span class="nachricht-sender">${n.sender}</span>
                    <span class="nachricht-time">${formatNachrichtenTime(n.time)}</span>
                </div>
                <div class="nachricht-preview">${n.preview}</div>
            </div>
        </div>
    `).join('');
}

function openNachricht(nachrichtId) {
    if (typeof loadModule === 'function') {
        loadModule('mail-inbox');
        console.log('Opening message:', nachrichtId);
    }
}

function openAllNachrichten() {
    if (typeof loadModule === 'function') {
        loadModule('mail-inbox');
    }
}

function initNachrichtenWidget() {
    renderNachrichten();
}
"""