{% extends 'base.html' %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
    
    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 h-fit">
        <h2 class="text-lg font-bold text-slate-900 mb-4 border-b pb-2">📅 予定のクイック追加</h2>
        <form action="{{ url_for('create_event') }}" method="POST" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">タイトル</label>
                <input type="text" name="title" required class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">カテゴリ</label>
                <select name="category" class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="other">その他予定</option>
                    <option value="lesson">授業</option>
                    <option value="shift">シフト・バイト</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">開始日時</label>
                <input type="datetime-local" name="start_at" id="quick_start_at" required class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">終了日時</label>
                <input type="datetime-local" name="end_at" id="quick_end_at" required class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
            </div>

            <div class="flex items-center">
                <input type="checkbox" name="is_all_day" id="is_all_day" value="true" class="h-4 w-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500">
                <label for="is_all_day" class="ml-2 block text-sm text-slate-900">終日対応にする</label>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">メモ・詳細</label>
                <textarea name="description" rows="2" class="w-full rounded-md border-slate-300 shadow-sm border p-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
            </div>

            <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md shadow transition text-sm">
                カレンダーに登録
            </button>
        </form>

        <div class="mt-6 pt-4 border-t border-slate-100 space-y-2 text-xs">
            <span class="font-semibold text-slate-500 block">カラー凡例:</span>
            <div class="flex items-center"><span class="w-3 h-3 bg-blue-500 rounded-full inline-block mr-2"></span>その他予定</div>
            <div class="flex items-center"><span class="w-3 h-3 bg-emerald-500 rounded-full inline-block mr-2"></span>授業</div>
            <div class="flex items-center"><span class="w-3 h-3 bg-amber-500 rounded-full inline-block mr-2"></span>シフト・バイト</div>
            <div class="flex items-center"><span class="w-3 h-3 bg-red-500 rounded-full inline-block mr-2"></span>未完了タスク期限</div>
        </div>
    </div>

    <div class="lg:col-span-3 bg-white p-6 rounded-xl shadow-sm border border-slate-200">
        <div id="calendar"></div>
    </div>
</div>

<div id="detailModal" class="fixed inset-0 bg-slate-900 bg-opacity-50 hidden items-center justify-center z-50">
    <div class="bg-white p-6 rounded-xl max-w-md w-full m-4 shadow-xl">
        <div class="flex justify-between items-center mb-4 border-b pb-2">
            <h3 class="text-xl font-bold text-slate-900">🗓️ 予定の詳細・編集</h3>
            <span id="modalType" class="text-xs font-semibold px-2 py-1 bg-indigo-50 text-indigo-600 rounded"></span>
        </div>
        
        <form id="editEventForm" method="POST" action="" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">タイトル（休講時は【休講】等に変更可能）</label>
                <input type="text" id="modalTitleInput" name="title" required class="w-full rounded-md border-slate-300 shadow-sm border p-2 text-sm">
            </div>
            
            <div id="eventTimeFields" class="grid grid-cols-2 gap-2">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">開始日時</label>
                    <input type="datetime-local" id="modalStartInput" name="start_at" required class="w-full rounded-md border-slate-300 shadow-sm border p-2 text-xs">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1">終了日時</label>
                    <input type="datetime-local" id="modalEndInput" name="end_at" required class="w-full rounded-md border-slate-300 shadow-sm border p-2 text-xs">
                </div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">カテゴリ</label>
                <select id="modalCategoryInput" name="category" class="w-full rounded-md border-slate-300 shadow-sm border p-2 text-sm">
                    <option value="other">その他予定</option>
                    <option value="lesson">授業</option>
                    <option value="shift">シフト・バイト</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1">メモ・詳細</label>
                <textarea id="modalDescInput" name="description" rows="3" class="w-full rounded-md border-slate-300 shadow-sm border p-2 text-sm"></textarea>
            </div>
            
            <div class="flex justify-between space-x-3 pt-2 border-t mt-4">
                <button type="button" id="modalDeleteBtn" class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-md transition text-sm">
                    削除する
                </button>
                <div class="flex space-x-2">
                    <button type="button" onclick="closeModal()" class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium py-2 px-4 rounded-md transition text-sm">
                        閉じる
                    </button>
                    <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-md transition text-sm">
                        変更を保存
                    </button>
                </div>
            </div>
        </form>

        <div id="taskActionArea" class="hidden space-y-4">
            <div class="p-3 bg-slate-50 rounded-lg">
                <p id="taskTitleDisplay" class="font-bold text-slate-900 text-base"></p>
                <p class="text-xs text-slate-500 mt-1">※タスクの編集は専用の管理画面で行います。</p>
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" onclick="closeModal()" class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium py-2 px-4 rounded-md transition text-sm">
                    閉じる
                </button>
                <a id="taskEditLink" href="#" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md transition text-sm text-center">
                    タスク編集画面へ
                </a>
            </div>
        </div>
    </div>
</div>

<form id="hiddenDeleteForm" method="POST" action="" class="hidden"></form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'ja',
        selectable: true, // 日付枠選択を有効化
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        buttonText: {
            today: '今日',
            month: '月',
            week: '週',
            day: '日'
        },
        events: '/api/events',
        
        // 枠内（日付）をクリックした時の処理
        dateClick: function(info) {
            var clickedDate = info.dateStr; // YYYY-MM-DD
            
            // クイック追加フォームの初期時間として 1限相当 (09:00〜10:30) を自動セット
            document.getElementById('quick_start_at').value = clickedDate + 'T09:00';
            document.getElementById('quick_end_at').value = clickedDate + 'T10:30';
            
            // スムーズに入力フォームへスクロール
            document.getElementById('quick_start_at').scrollIntoView({ behavior: 'smooth' });
        },

        // 予定（イベント・授業）をクリックした時の処理
        eventClick: function(info) {
            var props = info.event.extendedProps;
            var modal = document.getElementById('detailModal');
            var modalType = document.getElementById('modalType');
            var editEventForm = document.getElementById('editEventForm');
            var taskActionArea = document.getElementById('taskActionArea');
            
            if (props.type === 'event') {
                modalType.innerText = '予定の編集';
                editEventForm.classList.remove('hidden');
                taskActionArea.classList.add('hidden');
                
                // 各入力項目に現在の値を反映
                editEventForm.action = '/event/edit/' + props.db_id;
                document.getElementById('modalTitleInput').value = info.event.title;
                document.getElementById('modalCategoryInput').value = props.category;
                document.getElementById('modalDescInput').value = props.description;
                
                // 日時フォーマットを datetime-local 用 (YYYY-MM-DDTHH:mm) に成形してセット
                if (info.event.start) {
                    var startIso = new Date(info.event.start.getTime() - info.event.start.getTimezoneOffset() * 60000).toISOString();
                    document.getElementById('modalStartInput').value = startIso.substring(0, 16);
                }
                if (info.event.end) {
                    var endIso = new Date(info.event.end.getTime() - info.event.end.getTimezoneOffset() * 60000).toISOString();
                    document.getElementById('modalEndInput').value = endIso.substring(0, 16);
                }
                
                // 削除処理のバインド
                document.getElementById('modalDeleteBtn').onclick = function() {
                    if (confirm('この予定を削除しますか？\n（※自動作成された授業の場合、この日の予定のみが消去されます）')) {
                        var delForm = document.getElementById('hiddenDeleteForm');
                        delForm.action = '/event/delete/' + props.db_id;
                        delForm.submit();
                    }
                };
                
            } else if (props.type === 'task') {
                modalType.innerText = 'タスク期限';
                editEventForm.classList.add('hidden');
                taskActionArea.classList.remove('hidden');
                
                document.getElementById('taskTitleDisplay').innerText = info.event.title;
                document.getElementById('taskEditLink').href = '/tasks/' + props.db_id + '/edit';
            }
            
            modal.style.display = 'flex';
        }
    });
    calendar.render();
});

function closeModal() {
    document.getElementById('detailModal').style.display = 'none';
}
</script>
{% endblock %}