{{template "base" .}}

{{define "head"}}
<style>
    @keyframes pulse-bg {

        0%,
        100% {
            background-color: #fff3cd;
        }

        50% {
            background-color: #ffe69c;
        }
    }

    @keyframes pulse-bg-danger {

        0%,
        100% {
            background-color: #f8d7da;
        }

        50% {
            background-color: #f5c2c7;
        }
    }

    @keyframes blink-banner {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.7;
        }
    }

    .anxiety-warning {
        animation: pulse-bg 2s infinite;
    }

    .anxiety-danger {
        animation: pulse-bg-danger 1s infinite;
    }

    .urgent-banner {
        z-index: 1030;
        animation: blink-banner 1s infinite;
    }

    .urgent-banner-danger {
        background: linear-gradient(90deg, #dc3545, #c82333);
        color: white;
    }

    .urgent-banner-warning {
        background: linear-gradient(90deg, #fd7e14, #e06c00);
        color: white;
    }

    .urgent-countdown {
        font-size: 1.5rem;
        font-weight: bold;
    }
</style>
{{end}}

{{define "content"}}
<div id="urgentBanner" class="urgent-banner py-3 text-center d-none">
    <div class="container">
        <i class="bi bi-exclamation-octagon-fill me-2"></i>
        <span id="urgentMessage"></span>
        <div class="urgent-countdown mt-1">
            <i class="bi bi-stopwatch"></i> あと <span id="urgentCountdown"></span>
        </div>
    </div>
</div>

<h1 class="mb-4"><i class="bi bi-house-door me-2"></i>ダッシュボード</h1>

<div class="row g-4 mb-4">
    <div class="col-6 col-md-3">
        <div class="card bg-primary text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-white-50">未完了の課題</h6>
                        <h2 class="mb-0">{{.stats.TotalPending}}</h2>
                    </div>
                    <i class="bi bi-list-task display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card bg-warning text-dark h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-dark-50">今日が期限</h6>
                        <h2 class="mb-0">{{.stats.DueToday}}</h2>
                    </div>
                    <i class="bi bi-calendar-event display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card bg-info text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-white-50">今週が期限</h6>
                        <h2 class="mb-0">{{.stats.DueThisWeek}}</h2>
                    </div>
                    <i class="bi bi-calendar-week display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card bg-danger text-white h-100">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="text-white-50">期限切れ</h6>
                        <h2 class="mb-0">{{.stats.Overdue}}</h2>
                    </div>
                    <i class="bi bi-exclamation-triangle display-4 opacity-50"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    {{if .overdue}}
    <div class="col-lg-6">
        <div class="card border-danger">
            <div class="card-header bg-danger text-white"><i class="bi bi-exclamation-triangle me-2"></i>期限切れの課題</div>
            <ul class="list-group list-group-flush">
                {{range .overdue}}
                <li class="list-group-item d-flex justify-content-between align-items-center"
                    data-priority="{{.Priority}}" data-due="{{.DueDate.UnixMilli}}">
                    <div>
                        <strong>{{.Title}}</strong>
                        {{if eq .Priority "high"}}<span class="badge bg-danger ms-1">重要</span>{{end}}
                        {{if .Subject}}<span class="badge bg-secondary ms-2">{{.Subject}}</span>{{end}}
                        <br><small class="text-danger">{{formatDateTime .DueDate}}</small>
                    </div>
                    <form action="/assignments/{{.ID}}/toggle" method="POST"><input type="hidden" name="_csrf"
                            value="{{$.csrfToken}}"><button type="submit" class="btn btn-sm btn-success"
                            title="完了にする"><i class="bi bi-check-lg"></i></button></form>
                </li>
                {{end}}
            </ul>
        </div>
    </div>
    {{end}}
    {{if .dueToday}}
    <div class="col-lg-6">
        <div class="card border-warning">
            <div class="card-header bg-warning text-dark"><i class="bi bi-calendar-event me-2"></i>今日が期限</div>
            <ul class="list-group list-group-flush">
                {{range .dueToday}}
                <li class="list-group-item d-flex justify-content-between align-items-center"
                    data-priority="{{.Priority}}" data-due="{{.DueDate.UnixMilli}}">
                    <div>
                        <strong>{{.Title}}</strong>
                        {{if eq .Priority "high"}}<span class="badge bg-danger ms-1">重要</span>{{end}}
                        {{if .Subject}}<span class="badge bg-secondary ms-2">{{.Subject}}</span>{{end}}
                        <br><small class="text-muted">{{formatDateTime .DueDate}}</small>
                    </div>
                    <form action="/assignments/{{.ID}}/toggle" method="POST"><input type="hidden" name="_csrf"
                            value="{{$.csrfToken}}"><button type="submit" class="btn btn-sm btn-success"
                            title="完了にする"><i class="bi bi-check-lg"></i></button></form>
                </li>
                {{end}}
            </ul>
        </div>
    </div>
    {{end}}
    {{if .upcoming}}
    <div class="col-lg-6">
        <div class="card border-info">
            <div class="card-header bg-info text-white"><i class="bi bi-calendar-week me-2"></i>今週の課題</div>
            <ul class="list-group list-group-flush">
                {{range .upcoming}}
                <li class="list-group-item d-flex justify-content-between align-items-center"
                    data-priority="{{.Priority}}" data-due="{{.DueDate.UnixMilli}}">
                    <div>
                        <strong>{{.Title}}</strong>
                        {{if eq .Priority "high"}}<span class="badge bg-danger ms-1">重要</span>{{end}}
                        {{if .Subject}}<span class="badge bg-secondary ms-2">{{.Subject}}</span>{{end}}
                        <br><small class="text-muted">{{formatDateTime .DueDate}}</small>
                    </div>
                    <form action="/assignments/{{.ID}}/toggle" method="POST"><input type="hidden" name="_csrf"
                            value="{{$.csrfToken}}"><button type="submit" class="btn btn-sm btn-success"
                            title="完了にする"><i class="bi bi-check-lg"></i></button></form>
                </li>
                {{end}}
            </ul>
        </div>
    </div>
    {{end}}
</div>

{{if and (not .overdue) (not .dueToday) (not .upcoming)}}
<div class="text-center py-5">
    <i class="bi bi-emoji-smile display-1 text-success"></i>
    <h3 class="mt-3">今週の課題はありません！</h3>
    <p class="text-muted">新しい課題を登録しましょう</p>
    <a href="/assignments/new" class="btn btn-primary"><i class="bi bi-plus-circle me-1"></i>課題を登録</a>
</div>
{{end}}
{{end}}

{{define "scripts"}}
<script>
    (function () {
        var banner = document.getElementById('urgentBanner');
        var message = document.getElementById('urgentMessage');
        var countdown = document.getElementById('urgentCountdown');
        var body = document.body;

        var items = document.querySelectorAll('[data-priority="high"][data-due]');
        var mostUrgent = null;
        var mostUrgentDue = Infinity;

        items.forEach(function (item) {
            var due = parseInt(item.dataset.due);
            var now = Date.now();
            var diff = due - now;

            if (diff > 0 && diff < mostUrgentDue) {
                mostUrgentDue = diff;
                var titleEl = item.querySelector('strong');
                mostUrgent = { due: due, title: titleEl ? titleEl.textContent : '課題' };
            }
        });

        var hasOverdueHigh = false;
        var overdueItems = document.querySelectorAll('[data-priority="high"]');
        overdueItems.forEach(function (item) {
            var due = parseInt(item.dataset.due);
            if (due && due < Date.now()) {
                hasOverdueHigh = true;
            }
        });

        if (hasOverdueHigh) {
            banner.classList.remove('d-none');
            banner.classList.add('urgent-banner-danger');
            message.innerHTML = '🚨 <strong>期限切れの重要課題があります！</strong>';
            countdown.textContent = '今すぐ対応してください！';
            body.classList.add('anxiety-danger');
        } else if (mostUrgent && mostUrgentDue < 24 * 60 * 60 * 1000) {
            banner.classList.remove('d-none');
            banner.classList.add('urgent-banner-danger');
            message.innerHTML = '🚨 <strong>「' + mostUrgent.title + '」の期限が迫っています！</strong>';
            body.classList.add('anxiety-danger');
            updateCountdown();
            setInterval(updateCountdown, 1000);
        } else if (mostUrgent && mostUrgentDue < 3 * 24 * 60 * 60 * 1000) {
            banner.classList.remove('d-none');
            banner.classList.add('urgent-banner-warning');
            message.innerHTML = '⚠️ <strong>「' + mostUrgent.title + '」の期限が近づいています</strong>';
            body.classList.add('anxiety-warning');
            updateCountdown();
            setInterval(updateCountdown, 1000);
        }

        function updateCountdown() {
            if (!mostUrgent) return;
            var now = Date.now();
            var diff = mostUrgent.due - now;

            if (diff <= 0) {
                countdown.textContent = '期限切れ！';
                return;
            }

            var days = Math.floor(diff / 86400000);
            var hours = Math.floor((diff % 86400000) / 3600000);
            var mins = Math.floor((diff % 3600000) / 60000);
            var secs = Math.floor((diff % 60000) / 1000);

            var text = '';
            if (days > 0) text = days + '日 ' + hours + '時間 ' + mins + '分 ' + secs + '秒';
            else if (hours > 0) text = hours + '時間 ' + mins + '分 ' + secs + '秒';
            else text = mins + '分 ' + secs + '秒';

            countdown.textContent = text;
        }
    })();
</script>
{{end}}