{{template "base" .}}

{{define "content"}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div class="d-flex align-items-center">
        <h4 class="mb-0 fw-bold"><i class="bi bi-list-task me-2"></i>課題一覧</h4>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-sm btn-secondary text-white" onclick="toggleCountdown()" id="toggleCountdownBtn">
            <i class="bi bi-clock me-1"></i><span id="countdownBtnText">カウントダウン表示中</span>
        </button>
        <a href="/assignments/new" class="btn btn-sm btn-primary">
            <i class="bi bi-plus-lg me-1"></i>新規登録
        </a>
    </div>
</div>

<!-- Tabs -->
<ul class="nav nav-tabs border-0 mb-2" id="assignmentTabs">
    <li class="nav-item">
        <a class="nav-link py-2 rounded-0 {{if eq .filter "pending"}}fw-bold border-bottom border-dark border-3
            text-dark{{else}}border-0 text-muted{{end}}"
            href="/assignments?filter=pending&q={{.query}}&priority={{.priority}}">
            未完了
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link py-2 rounded-0 {{if eq .filter "due_today"}}fw-bold border-bottom border-dark border-3
            text-dark{{else}}border-0 text-muted{{end}}"
            href="/assignments?filter=due_today&q={{.query}}&priority={{.priority}}">
            今日が期限
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link py-2 rounded-0 {{if eq .filter "due_this_week"}}fw-bold border-bottom border-dark border-3
            text-dark{{else}}border-0 text-muted{{end}}"
            href="/assignments?filter=due_this_week&q={{.query}}&priority={{.priority}}">
            今週が期限
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link py-2 rounded-0 {{if eq .filter "completed"}}fw-bold border-bottom border-dark border-3
            text-dark{{else}}border-0 text-muted{{end}}"
            href="/assignments?filter=completed&q={{.query}}&priority={{.priority}}">
            完了済み
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link py-2 rounded-0 {{if eq .filter "overdue"}}fw-bold border-bottom border-dark border-3
            text-dark{{else}}border-0 text-muted{{end}}"
            href="/assignments?filter=overdue&q={{.query}}&priority={{.priority}}">
            期限切れ
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link py-2 rounded-0 border-0 text-muted"
            href="/recurring">
            繰り返し
        </a>
    </li>
</ul>
<hr class="mt-0 mb-3 text-muted" style="opacity: 0.1;">

<!-- Filter Section -->
<form action="/assignments" method="GET" class="row g-2 mb-3 align-items-center">
    <input type="hidden" name="filter" value="{{.filter}}">
    <div class="col-md-5">
        <div class="input-group input-group-sm">
            <span class="input-group-text bg-white border-end-0 text-muted"><i class="bi bi-search"></i></span>
            <input type="text" class="form-control border-start-0 ps-0 bg-white" name="q" placeholder="検索..."
                value="{{.query}}">
        </div>
    </div>
    <div class="col-md-4">
        <select class="form-select form-select-sm bg-white" name="priority" onchange="this.form.submit()">
            <option value="">全ての重要度</option>
            <option value="high" {{if eq .priority "high" }}selected{{end}}>高</option>
            <option value="medium" {{if eq .priority "medium" }}selected{{end}}>中</option>
            <option value="low" {{if eq .priority "low" }}selected{{end}}>低</option>
        </select>
    </div>
    <div class="col-md-3">
        <a href="/assignments?filter={{.filter}}" class="btn btn-sm btn-outline-secondary w-100 bg-white">
            クリア
        </a>
    </div>
</form>

<!-- Table -->
<div class="card shadow-sm border-0 rounded-0">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 custom-table">
                <thead class="bg-secondary-subtle">
                    <tr>
                        <th style="width: 50px;" class="ps-3 text-center text-dark fw-bold">状態</th>
                        <th style="width: 120px;" class="text-dark fw-bold">科目</th>
                        <th style="width: 80px;" class="text-dark fw-bold">重要度</th>
                        <th class="text-dark fw-bold">タイトル</th>
                        <th style="width: 140px;" class="text-dark fw-bold">期限</th>
                        <th style="width: 120px;" class="countdown-col text-dark fw-bold">残り</th>
                        <th style="width: 80px;" class="text-end pe-3 text-dark fw-bold">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {{range .assignments}}
                    <tr class="assignment-row border-bottom" data-due-ts="{{.DueDate.Unix}}"
                        data-completed="{{.IsCompleted}}">
                        <td class="ps-3 text-center">
                            {{if .IsCompleted}}
                            <form action="/assignments/{{.ID}}/toggle" method="POST" class="d-inline">
                                <input type="hidden" name="_csrf" value="{{$.csrfToken}}">
                                <button type="submit"
                                    class="btn btn-link p-0 text-success text-decoration-none hover-dark"
                                    title="未完了に戻す">
                                    <i class="bi bi-check-circle-fill"></i>
                                </button>
                            </form>
                            {{else}}
                            <form action="/assignments/{{.ID}}/toggle" method="POST" class="d-inline">
                                <input type="hidden" name="_csrf" value="{{$.csrfToken}}">
                                <button type="submit"
                                    class="btn btn-link p-0 text-secondary text-decoration-none hover-dark"
                                    title="完了にする">
                                    <i class="bi bi-circle"></i>
                                </button>
                            </form>
                            {{end}}
                        </td>
                        <td><span class="badge bg-secondary text-white border-0 fw-bold">{{.Subject}}</span></td>
                        <td>
                            {{if eq .Priority "high"}}
                            <span class="badge bg-danger text-white border-0 fw-bold small">高</span>
                            {{else if eq .Priority "medium"}}
                            <span class="badge bg-warning text-dark border-0 fw-bold small">中</span>
                            {{else}}
                            <span class="badge bg-dark text-white border-0 fw-bold small">低</span>
                            {{end}}
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="fw-bold text-dark text-truncate" style="max-width: 280px;">{{.Title}}</div>
                                {{if .RecurringAssignmentID}}
                                <button type="button" class="btn btn-link p-0 ms-2 text-info" data-bs-toggle="modal"
                                    data-bs-target="#recurringModal" data-recurring-id="{{.RecurringAssignmentID}}"
                                    data-assignment-id="{{.ID}}"
                                    data-recurring-title="{{.Title}}"
                                    data-recurring-type="{{if .RecurringAssignment}}{{.RecurringAssignment.RecurrenceType}}{{else}}unknown{{end}}"
                                    data-recurring-active="{{if .RecurringAssignment}}{{.RecurringAssignment.IsActive}}{{else}}true{{end}}"
                                    title="繰り返し課題">
                                    <i class="fa-solid fa-repeat"></i>
                                </button>
                                {{end}}
                            </div>
                        </td>
                        <td>
                            <div class="small fw-bold text-dark user-select-all">{{.DueDate.Format "2006/01/02 15:04"}}
                            </div>
                        </td>
                        <td class="countdown-col">
                            {{if not .IsCompleted}}
                            <span class="countdown small fw-bold font-monospace text-dark">...</span>
                            {{else}}
                            <span class="text-secondary small fw-bold">-</span>
                            {{end}}
                        </td>
                        <td class="text-end pe-3">
                            <div class="btn-group">
                                <a href="/assignments/{{.ID}}/edit" class="text-primary me-3 text-decoration-none">
                                    <i class="bi bi-pencil-fill"></i>
                                </a>
                                {{if .RecurringAssignmentID}}
                                <button type="button" class="btn btn-link p-0 text-danger text-decoration-none border-0 bg-transparent"
                                    onclick="showDeleteRecurringModal({{.ID}}, {{.RecurringAssignmentID}})">
                                    <i class="bi bi-trash-fill"></i>
                                </button>
                                {{else}}
                                <form action="/assignments/{{.ID}}/delete" method="POST" class="d-inline"
                                    onsubmit="return confirm('削除しますか？');">
                                    <input type="hidden" name="_csrf" value="{{$.csrfToken}}">
                                    <button type="submit"
                                        class="btn btn-link p-0 text-danger text-decoration-none border-0 bg-transparent">
                                        <i class="bi bi-trash-fill"></i>
                                    </button>
                                </form>
                                {{end}}
                            </div>
                        </td>
                    </tr>
                    {{else}}
                    <tr>
                        <td colspan="7" class="text-center py-4 text-secondary fw-bold small">
                            課題なし
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>
    {{if gt .totalPages 1}}
    <div class="card-footer bg-white border-top-0 py-2">
        <nav>
            <ul class="pagination pagination-sm justify-content-center mb-0">
                <li class="page-item {{if not .hasPrev}}disabled{{end}}">
                    <a class="page-link border-0 text-secondary"
                        href="/assignments?page={{.prevPage}}&filter={{.filter}}&q={{.query}}&priority={{.priority}}">
                        <i class="bi bi-chevron-left"></i>
                    </a>
                </li>
                <li class="page-item disabled">
                    <span class="page-link border-0 text-dark fw-bold">{{.currentPage}} / {{.totalPages}}</span>
                </li>
                <li class="page-item {{if not .hasNext}}disabled{{end}}">
                    <a class="page-link border-0 text-secondary"
                        href="/assignments?page={{.nextPage}}&filter={{.filter}}&q={{.query}}&priority={{.priority}}">
                        <i class="bi bi-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    {{end}}
</div>

<script>
    function updateCountdowns() {
        const now = new Date();
        document.querySelectorAll('.assignment-row').forEach(row => {
            if (row.getAttribute('data-completed') === 'true') return;

            const dueTs = row.getAttribute('data-due-ts');
            if (!dueTs) return;

            // Fix: Use timestamp directly to avoid parsing issues
            const due = new Date(parseInt(dueTs) * 1000);
            if (isNaN(due.getTime())) return;

            const diff = due - now;
            const countdownEl = row.querySelector('.countdown');

            // Reset classes
            row.classList.remove('anxiety-danger', 'anxiety-warning', 'bg-danger-subtle');
            if (countdownEl) countdownEl.className = 'countdown small fw-bold font-monospace';

            if (diff < 0) {
                if (countdownEl) {
                    countdownEl.textContent = "期限切れ";
                    countdownEl.classList.add('text-danger');
                }
                row.classList.add('bg-danger-subtle');
                return;
            }

            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);

            let text = "";
            let remainingHours = (days * 24) + hours;

            if (days > 0) {
                text += `${days}日 `;
            }
            text += `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;

            if (countdownEl) countdownEl.textContent = text;

            // Anxiety Logic
            if (remainingHours < 24) {
                row.classList.add('anxiety-danger');
                if (countdownEl) {
                    countdownEl.classList.add('text-danger', 'countdown-urgent');
                    countdownEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill me-1"></i>' + text;
                }
            } else if (days < 7) {
                row.classList.add('anxiety-warning');
                if (countdownEl) {
                    countdownEl.classList.add('text-dark');
                    countdownEl.innerHTML = '<i class="bi bi-exclamation-triangle-fill text-warning me-1"></i>' + text;
                }
            } else {
                if (countdownEl) countdownEl.classList.add('text-secondary');
            }
        });
    }

    function toggleCountdown() {
        const cols = document.querySelectorAll('.countdown-col');
        const btnText = document.getElementById('countdownBtnText');
        const isHidden = cols[0] && cols[0].style.display === 'none';

        cols.forEach(col => {
            col.style.display = isHidden ? '' : 'none';
        });

        btnText.textContent = isHidden ? 'カウントダウン表示中' : 'カウントダウン非表示中';
        localStorage.setItem('countdownHidden', !isHidden);
    }

    // Init with higher frequency for smooth panic
    setInterval(updateCountdowns, 1000);
    updateCountdowns();

    // Check preference
    const isHidden = localStorage.getItem('countdownHidden') === 'true';
    if (isHidden) {
        document.querySelectorAll('.countdown-col').forEach(col => {
            col.style.display = 'none';
        });
        const btnText = document.getElementById('countdownBtnText');
        if (btnText) btnText.textContent = 'カウントダウン非表示中';
    }

    // Recurring modal handler - wait for DOM to be ready
    document.addEventListener('DOMContentLoaded', function() {
        const recurringModal = document.getElementById('recurringModal');
        if (recurringModal) {
            recurringModal.addEventListener('show.bs.modal', function (event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-recurring-id');
                const assignmentId = button.getAttribute('data-assignment-id');
                const title = button.getAttribute('data-recurring-title');
                const type = button.getAttribute('data-recurring-type');
                const isActive = button.getAttribute('data-recurring-active') === 'true';

                document.getElementById('recurringModalTitle').textContent = title;
                document.getElementById('recurringStopForm').action = '/recurring/' + id + '/stop';
                document.getElementById('recurringEditBtn').href = '/recurring/' + id + '/edit';

                const typeLabels = {
                    'daily': '毎日',
                    'weekly': '毎週',
                    'monthly': '毎月',
                    'unknown': '(読み込み中...)'
                };
                document.getElementById('recurringTypeLabel').textContent = typeLabels[type] || type || '不明';


                const statusEl = document.getElementById('recurringStatus');
                if (isActive) {
                    statusEl.innerHTML = '<span class="badge bg-success">有効</span>';
                    document.getElementById('recurringStopBtn').style.display = 'inline-block';
                } else {
                    statusEl.innerHTML = '<span class="badge bg-secondary">停止中</span>';
                    document.getElementById('recurringStopBtn').style.display = 'none';
                }
            });
        }
    });
</script>

<!-- Recurring Modal -->
<div class="modal fade" id="recurringModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fa-solid fa-repeat me-2"></i>繰り返し課題</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <h6 id="recurringModalTitle" class="mb-3 fw-bold"></h6>
                <table class="table table-sm table-borderless">
                    <tbody>
                        <tr>
                            <th class="text-muted" style="width: 100px;">繰り返し</th>
                            <td id="recurringTypeLabel">読み込み中...</td>
                        </tr>
                        <tr>
                            <th class="text-muted">状態</th>
                            <td id="recurringStatus">読み込み中...</td>
                        </tr>
                    </tbody>
                </table>
                <div class="alert alert-info small mb-0">
                    <i class="bi bi-info-circle me-1"></i>
                    繰り返しを停止すると、今後新しい課題は自動作成されなくなります。既存の課題はそのまま残ります。
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
                <a id="recurringEditBtn" href="#" class="btn btn-primary">
                    <i class="bi bi-pencil me-1"></i>編集
                </a>
                <form id="recurringStopForm" method="POST" class="d-inline">
                    <input type="hidden" name="_csrf" value="{{.csrfToken}}">
                    <button type="submit" id="recurringStopBtn" class="btn btn-danger"
                        onclick="return confirm('繰り返しを停止しますか？');">
                        <i class="bi bi-stop-fill me-1"></i>停止
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Delete Recurring Confirmation Modal -->
<div class="modal fade" id="deleteRecurringModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-trash me-2"></i>繰り返し課題の削除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>この課題は繰り返し設定に関連付けられています。</p>
                <p>繰り返し設定も停止しますか？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
                <form id="deleteOnlyForm" method="POST" class="d-inline">
                    <input type="hidden" name="_csrf" value="{{.csrfToken}}">
                    <button type="submit" class="btn btn-outline-danger">
                        課題のみ削除
                    </button>
                </form>
                <form id="deleteAndStopForm" method="POST" class="d-inline">
                    <input type="hidden" name="_csrf" value="{{.csrfToken}}">
                    <button type="submit" class="btn btn-danger">
                        削除して繰り返しも削除
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function showDeleteRecurringModal(assignmentId, recurringId) {
    var modal = new bootstrap.Modal(document.getElementById('deleteRecurringModal'));
    document.getElementById('deleteOnlyForm').action = '/assignments/' + assignmentId + '/delete';
    document.getElementById('deleteAndStopForm').action = '/assignments/' + assignmentId + '/delete?stop_recurring=' + recurringId;
    modal.show();
}
</script>
{{end}}