<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TO-DO LIST</title>
    <link rel="icon" id="favicon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>✓</text></svg>">
    <script>
    (function(){
        function draw(){
            var c=document.createElement('canvas');c.width=64;c.height=64;
            var x=c.getContext('2d'), dark=window.matchMedia('(prefers-color-scheme:dark)').matches;
            x.beginPath();x.arc(32,32,30,0,Math.PI*2);
            x.fillStyle=dark?'#5a6b5f':'#c8d6cc';x.fill();
            x.font=(dark?'bold 48px':'48px')+' serif';x.textAlign='center';x.textBaseline='middle';
            x.fillStyle=dark?'#b4c5b9':'#fff';x.fillText('✓',32,34);
            document.getElementById('favicon').href=c.toDataURL('image/png');
        }
        draw();
        window.matchMedia('(prefers-color-scheme:dark)').addEventListener('change',draw);
    })();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
    <script src="https://fastly.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; font-family:system-ui, 'Segoe UI', sans-serif; }
        body { background:#f2f6fc; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:1.5rem 1rem; }
        .app-card { max-width:760px; width:100%; height:100%; max-height:100%; background:#fff; border-radius:2rem; box-shadow:0 20px 35px -12px rgba(0,0,0,0.08); overflow:hidden; display:flex; flex-direction:column; }
        .app-header { padding:1.6rem 1.8rem 0.6rem 1.8rem; border-bottom:1px solid #eff3f8; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem; flex-shrink:0; }
        .app-header h1 { font-size:1.9rem; font-weight:650; background:linear-gradient(130deg,#2c3e4e,#4a627a); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
        .subhead { font-size:0.78rem; color:#64748b; margin-top:0.3rem; letter-spacing:0.2px; cursor:pointer; }
        .subhead span { font-weight:600; color:#2c3e4e; padding:0.1rem 0.4rem; border-radius:0.5rem; transition:0.15s; }
        .subhead span:hover { background:#eef3f8; }
        .todo-form { padding:1rem 1.8rem; display:flex; gap:0.75rem; border-bottom:1px solid #eff3f8; flex-wrap:wrap; flex-shrink:0; position:relative; }
        .task-input-wrapper { flex:3; min-width:150px; }
        .task-input-wrapper input { width:100%; padding:0.7rem 1rem; border-radius:2rem; border:1.5px solid #e2edf7; font-size:0.9rem; }
        .due-date-wrapper { flex:1; min-width:120px; }
        .due-date-wrapper input { width:100%; padding:0.7rem 0.7rem; border-radius:2rem; border:1.5px solid #e2edf7; font-size:0.8rem; color:#94a3b8; }
        .due-date-wrapper input:focus,
        .due-date-wrapper input.has-value { color:#0a1c2f; }
        .due-date-wrapper input::-webkit-datetime-edit-fields-wrapper { color:#94a3b8; }
        .due-date-wrapper input:focus::-webkit-datetime-edit-fields-wrapper,
        .due-date-wrapper input.has-value::-webkit-datetime-edit-fields-wrapper { color:#0a1c2f; }
        .add-circle { flex-shrink:0; width:44px; height:44px; background:#7C9E8E; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s; }
        .add-circle:hover { background:#6e8e7f; transform:scale(1.02); }
        .add-circle span { color:#fff; font-size:1.7rem; font-weight:400; line-height:1; }
        /* 重复按钮 */
        .repeat-btn { flex-shrink:0; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s; border:1.5px solid #c8d6e0; color:#a0b0c0; font-size:1.2rem; user-select:none; margin:auto 0; }
        .repeat-btn:hover { border-color:#8ca8be; color:#708090; }
        .repeat-btn.active { border-color:#7C9E8E; color:#7C9E8E; background:rgba(124,158,142,0.08); }
        /* 重复选项面板 */
        .repeat-panel { position:fixed; background:#fff; border:1px solid #e2edf7; border-radius:0.75rem; box-shadow:0 8px 24px rgba(0,0,0,0.1); padding:0.4rem; z-index:100; display:flex; flex-direction:column; gap:0.15rem; min-width:180px; }
        .repeat-option { padding:0.5rem 0.8rem; border-radius:0.5rem; cursor:pointer; font-size:0.85rem; color:#3a4a5a; transition:0.15s; display:flex; align-items:center; gap:0.4rem; white-space:nowrap; }
        .repeat-option:hover { background:#f0f5f9; }
        .repeat-option[data-selected="true"] { background:#e8f0f5; color:#7C9E8E; font-weight:600; }
        .custom-interval-wrap { color:#90a0b0; font-size:0.8rem; }
        .custom-interval-wrap input { width:44px; padding:0.15rem 0.3rem; border:1px solid #dde5ee; border-radius:0.3rem; text-align:center; font-size:0.8rem; color:#3a4a5a; }
        .custom-interval-wrap input:disabled { background:#f5f7fa; color:#bcc4cc; }
        /* 重复期限输入 */
        .repeat-limit-section { border-top:1px solid #e8e8e8; padding:6px 10px 8px; display:flex; flex-direction:column; gap:5px; }
        .repeat-limit-row { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:#888; }
        .repeat-limit-row input { padding:2px 6px; border:1px solid #d0d0d0; border-radius:4px; font-size:0.75rem; outline:none; }
        .repeat-limit-row input:focus { border-color:#7C9E8E; }
        .repeat-limit-date { width:115px; }
        .repeat-limit-count { width:45px; }
        .repeat-limit-hint { font-size:0.68rem; color:#bbb; }
        /* 任务卡片上的重复编辑面板 */
        .card-repeat-panel { position:fixed; background:#fff; border:1px solid #e2edf7; border-radius:0.75rem; box-shadow:0 4px 16px rgba(0,0,0,0.12); padding:0.4rem; z-index:100; display:flex; flex-direction:column; gap:0.15rem; min-width:180px; font-size:0.85rem; }
        .card-repeat-panel .repeat-option { padding:0.5rem 0.8rem; border-radius:0.5rem; cursor:pointer; color:#3a4a5a; }
        .card-repeat-panel .repeat-option:hover { background:#f0f5f9; }
        .card-repeat-panel .repeat-option.selected { background:#e8f0f5; color:#7C9E8E; font-weight:600; }
        .card-repeat-panel .repeat-limit-section { border-top:1px solid #e8e8e8; padding:6px 10px 8px; }
        /* 任务卡片重复标识 */
        .repeat-indicator { font-size:0.7rem; color:#7C9E8E; margin-left:0.3rem; white-space:nowrap; display:inline-flex; align-items:center; gap:0.15rem; cursor:pointer; }
        .repeat-indicator:hover { opacity:0.7; text-decoration:underline; }
        .action-bar { padding:0.6rem 1.8rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.8rem; border-bottom:1px solid #eff3f8; flex-shrink:0; }
        .delete-done-btn { background:#f1f5f9; border:none; padding:0.4rem 1.2rem; border-radius:2rem; font-size:0.8rem; font-weight:500; color:#4b556b; cursor:pointer; }
        .delete-done-btn:hover { background:#fee2e2; color:#c2410c; }
        .color-palette { display:flex; gap:0.7rem; align-items:center; }
        .color-swatch { width:28px; height:28px; border-radius:50%; cursor:pointer; border:2px solid transparent; box-shadow:0 1px 3px rgba(0,0,0,0.1); transition:0.1s; }
        .color-swatch.active { border-color:#fff; transform:scale(1.08); }
        .color-swatch:hover { transform:scale(1.05); }
        .todo-container { padding:1rem 1.5rem 0.6rem 1.5rem; flex:1; overflow:hidden; display:flex; flex-direction:column; min-height:0; }
        .todo-list-scroll { flex:1; overflow-y:auto; padding-right:5px; min-height:0; }
        .todo-list-scroll::-webkit-scrollbar { width:5px; }
        .todo-list-scroll::-webkit-scrollbar-track { background:transparent; }
        .todo-list-scroll::-webkit-scrollbar-thumb { background:rgba(199,178,162,0.35); border-radius:10px; }
        .todo-list-scroll::-webkit-scrollbar-thumb:hover { background:rgba(184,168,154,0.55); }
        .todo-list-scroll::-webkit-scrollbar-button { display:none; height:0; width:0; }
        .todo-list { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
        .todo-item { background:#fff; border-radius:1.2rem; padding:0.55rem 0.75rem; border-left:5px solid; box-shadow:0 2px 8px rgba(0,0,0,0.03); display:flex; align-items:center; gap:0.6rem; cursor:grab; }
        .todo-item:active { cursor:grabbing; }
        .sortable-drag { opacity:0.3; background:#f1f5f9; }
        .todo-check { flex-shrink:0; display:flex; align-items:center; }
        .custom-checkbox { display:flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; min-width:1.5rem; min-height:1.5rem; border-radius:50%; cursor:pointer; background:#f1f5f9; transition:0.15s; }
        .custom-checkbox.checked { background:var(--cb-color, #8C9E9E); }
        .custom-checkbox.checked::after { content:'✓'; color:#fff; font-size:0.85rem; font-weight:700; line-height:1; }
        .custom-checkbox input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
        .todo-title { flex:0 1 auto; min-width:15em; max-width:60%; font-size:0.95rem; font-weight:500; color:#0a1c2f; word-break:break-word; overflow-wrap:break-word; padding:0.2rem 0.4rem; cursor:text; line-height:1.45; }
        .todo-title:hover { background:#f8fafc; }
        .completed-task .todo-title { text-decoration:line-through; color:#94a3b8; }
        /* 原地编辑输入框 —— 与 .todo-title 尺寸完全一致 */
.inline-edit-input { flex:0 1 auto; min-width:15em; max-width:60%; font-size:0.95rem; font-weight:500; font-family:inherit; color:#0a1c2f; padding:0.2rem 0.4rem; margin:0; border:none; background:transparent; outline:none; resize:none; overflow:hidden; overflow-wrap:break-word; word-break:break-word; border-radius:0; line-height:1.45; box-sizing:border-box; }
        .due-and-delete { display:flex; align-items:center; gap:0.6rem; flex-shrink:0; margin-left:auto; }
        .todo-due { font-size:0.7rem; background:#f1f5f9; padding:0.3rem 0.8rem; border-radius:2rem; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; font-weight:500; cursor:pointer; }
        .todo-due:hover { background:#e6edf5; }
        /* 原地编辑日期输入框 */
        .inline-due-input { font-size:0.7rem; padding:0.3rem 0.5rem; border-radius:0.5rem; border:1.5px solid #8C9E9E; background:#f8fdfa; outline:none; width:130px; min-width:100px; }
        .inline-due-input:focus { border-color:#6b8b80; box-shadow:0 0 0 2px rgba(108,139,128,0.2); }
        .due-urgent { background:#f5e0e0; color:#ac6f6f; }
        .due-urgent.completed-due { background:#f1f0f0; color:#b0a0a0; }
        .due-soon { background:#f5ede0; color:#bc8f6a; }
        .due-normal { background:#e8edeb; color:#6b8b80; }
        .delete-simple { background:transparent; border:none; font-size:1.2rem; cursor:pointer; color:#8b9abb; padding:0.2rem 0.3rem; border-radius:2rem; }
        .delete-simple:hover { background:#fee9e6; color:#e5483b; }
        .stats-wrapper { padding:0.8rem 1.5rem 1.2rem 1.5rem; border-top:1px solid #eff3f8; flex-shrink:0; }
        .stats-box { background:#f8fafd; border-radius:2rem; padding:0.6rem 1rem; display:flex; justify-content:center; gap:1.8rem; font-size:0.8rem; font-weight:500; width:100%; flex-wrap:wrap; }
        .stat-number { font-weight:700; margin-right:4px; color:#5f7f7a; background:#eef2f9; display:inline-block; min-width:28px; text-align:center; border-radius:20px; padding:0 4px; }
        .empty-message { text-align:center; padding:2rem; color:#8ba0bc; background:#fafdff; border-radius:1.5rem; margin:0.5rem 0; }

        /* 模态框 */
        .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.3); display:none; align-items:center; justify-content:center; z-index:1000; }
        .modal-overlay.active { display:flex; }
        .modal-box { background:#fff; border-radius:2rem; padding:2rem; max-width:380px; width:90%; box-shadow:0 20px 40px rgba(0,0,0,0.2); text-align:center; }
        .modal-box .choice-group { display:flex; flex-direction:column; gap:1rem; margin:1.5rem 0; }
        .modal-box .choice-btn { padding:0.8rem; border:none; border-radius:2rem; background:#7C9E8E; color:#fff; font-size:1rem; font-weight:500; cursor:pointer; transition:0.2s; }
        .modal-box .choice-btn:hover { background:#6e8e7f; }
        .modal-box .choice-btn.secondary { background:#d1d9e0; color:#333; }
        .modal-box .choice-btn.secondary:hover { background:#c0cbd6; }

        .modal-box .form-group { display:none; flex-direction:column; gap:0.8rem; margin-top:1rem; }
        .modal-box .form-group.active { display:flex; }
        .modal-box .form-group input { width:100%; padding:0.7rem; border-radius:2rem; border:1px solid #ddd; font-size:0.9rem; }
        .modal-box .form-group .action-btn { padding:0.7rem; border:none; border-radius:2rem; background:#7C9E8E; color:#fff; font-size:1rem; font-weight:500; cursor:pointer; }
        .modal-box .form-group .action-btn:hover { background:#6e8e7f; }
        .modal-box .form-group .back-btn { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:0.8rem; margin-top:0.3rem; }
        .modal-box .error { color:#c2410c; font-size:0.8rem; margin-top:0.3rem; }
        .modal-box .error.hint { color:#94a3b8; }
        .modal-box .motto-display { background:#f1f5f9; padding:0.5rem; border-radius:0.5rem; margin:0.5rem 0; font-weight:500; }
        .modal-box .confirm-group { display:flex; gap:1rem; justify-content:center; margin-top:0.5rem; }
        .modal-box .confirm-btn { padding:0.6rem 1.5rem; border:none; border-radius:2rem; background:#7C9E8E; color:#fff; font-weight:500; cursor:pointer; }
        .modal-box .confirm-btn.secondary { background:#d1d9e0; color:#333; }
        .modal-box .confirm-btn:hover { opacity:0.85; }

        /* 移动端适配 */
        @media (max-width: 500px) {
            body { padding:0.5rem; }
            .app-card { border-radius:1.2rem; }
            .app-header { padding:1rem 1rem 0.4rem 1rem; }
            .app-header h1 { font-size:1.4rem; }
            .todo-form { padding:0.7rem 1rem; gap:0.5rem; }
            .task-input-wrapper { flex-basis:100%; }
            .due-date-wrapper { flex:1; min-width:0; margin-right:0.6rem; }
            .add-circle { flex-shrink:0; }
            .repeat-btn { flex-shrink:0; width:32px; height:32px; font-size:1rem; }
            .action-bar { padding:0.5rem 1rem; gap:0.5rem; }
            .todo-container { padding:0.6rem 0.8rem 0.4rem 0.8rem; }
            .todo-item { padding:0.6rem 0.7rem; gap:0.5rem; min-height:52px; }
            .todo-title { font-size:0.9rem; padding:0.5rem 0.3rem; min-height:36px; }
            .todo-check { padding:6px; }
            .custom-checkbox { width:1.7rem; height:1.7rem; min-width:1.7rem; min-height:1.7rem; }
            .custom-checkbox.checked::after { font-size:0.95rem; }
            .inline-edit-input { font-size:0.9rem; padding:0.2rem 0; min-height:36px; line-height:1.45; flex:0 1 auto; min-width:10em; }
            .inline-due-input { width:auto; max-width:130px; font-size:0.8rem; padding:0.5rem; min-height:36px; }
            .todo-due { font-size:0.7rem; padding:0.4rem 0.8rem; min-height:34px; }
            .due-and-delete { gap:0.4rem; }
            .delete-simple { font-size:1.5rem; padding:0.4rem 0.6rem; min-width:40px; min-height:40px; }
            .stats-wrapper { padding:0.6rem 0.8rem 0.8rem 0.8rem; }
            .stats-box { gap:1rem; font-size:0.7rem; padding:0.5rem 0.6rem; }
        }

        /* 深色模式 */
        @media (prefers-color-scheme: dark) {
            body { background:#1a1d23; }
            .app-card { background:#252830; box-shadow:0 20px 35px -12px rgba(0,0,0,0.3); }
            .app-header { border-bottom-color:#333840; }
            .app-header h1 { background:linear-gradient(130deg,#c0cdd8,#8899aa); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
            .subhead { color:#8899aa; }
            .subhead span { color:#c0cdd8; }
            .subhead span:hover { background:#333840; }
            .todo-form { border-bottom-color:#333840; }
            .task-input-wrapper input { background:#2a2d35; border-color:#3a3d46; color:#e0e4ea; }
            .task-input-wrapper input::placeholder { color:#666a75; }
            .due-date-wrapper input { background:#2a2d35; border-color:#3a3d46; color:#94a3b8; }
            .due-date-wrapper input:focus, .due-date-wrapper input.has-value { color:#e0e4ea; }
            .due-date-wrapper input::-webkit-datetime-edit-fields-wrapper { color:#94a3b8; }
            .due-date-wrapper input:focus::-webkit-datetime-edit-fields-wrapper,
            .due-date-wrapper input.has-value::-webkit-datetime-edit-fields-wrapper { color:#e0e4ea; }
            .action-bar { border-bottom-color:#333840; }
            .delete-done-btn { background:#2a2d35; color:#8899aa; }
            .delete-done-btn:hover { background:#3d2025; color:#e07070; }
            .repeat-btn { border-color:#444850; color:#667080; }
            .repeat-btn:hover { border-color:#667088; color:#8898a8; }
            .repeat-btn.active { border-color:#7C9E8E; color:#7C9E8E; background:rgba(124,158,142,0.12); }
            .repeat-panel { background:#2a2d35; border-color:#3a3d46; box-shadow:0 8px 24px rgba(0,0,0,0.3); }
            .repeat-option { color:#bcc4cc; }
            .repeat-option:hover { background:#333840; }
            .repeat-option[data-selected="true"] { background:#2a3835; color:#7C9E8E; }
            .custom-interval-wrap { color:#667080; }
            .custom-interval-wrap input { background:#333840; border-color:#444850; color:#bcc4cc; }
            .custom-interval-wrap input:disabled { background:#2a2d35; color:#556070; }
            .repeat-limit-section { border-top-color:#3a3d46; }
            .repeat-limit-row { color:#667080; }
            .repeat-limit-row input { background:#333840; border-color:#444850; color:#bcc4cc; }
            .repeat-limit-row input:focus { border-color:#7C9E8E; }
            .repeat-limit-hint { color:#556070; }
            .card-repeat-panel { background:#2a2d35; border-color:#3a3d46; box-shadow:0 4px 16px rgba(0,0,0,0.3); }
            .card-repeat-panel .repeat-option { color:#bcc4cc; }
            .card-repeat-panel .repeat-option:hover { background:#333840; }
            .card-repeat-panel .repeat-option.selected { background:#2a3835; color:#7C9E8E; }
            .card-repeat-panel .repeat-limit-section { border-top-color:#3a3d46; }
            .repeat-indicator { color:#7C9E8E; }
            .custom-checkbox { background:#333840; }
            .custom-checkbox.checked { background:var(--cb-color, #7a9a94); }
            .todo-item { background:#2a2d35; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
            .todo-title { color:#e0e4ea; }
            .todo-title:hover { background:#333840; }
            .completed-task .todo-title { color:#555a65; }
            .inline-edit-input { background:transparent; color:#e0e4ea; outline:none; box-shadow:none; -webkit-appearance:none; appearance:none; }
            .todo-due { background:#333840; color:#8899aa; }
            .todo-due:hover { background:#3a3d46; }
            .due-urgent { background:#3d2025; color:#e07070; }
            .due-urgent.completed-due { background:#2a2d32; color:#5a6068; }
            .due-soon { background:#3d3520; color:#d4a860; }
            .due-normal { background:#253530; color:#7a9a94; }
            .inline-due-input { background:#1e2027; border-color:#5a7d6a; color:#e0e4ea; }
            .inline-due-input:focus { border-color:#6e9e7e; box-shadow:0 0 0 2px rgba(124,158,142,0.3); }
            .delete-simple { color:#667080; }
            .delete-simple:hover { background:#3a3538; color:#c0a0a0; }
            .stats-wrapper { border-top-color:#333840; }
            .stats-box { background:#2a2d35; color:#8899aa; }
            .stat-number { color:#7a9a94; background:#333840; }
            .empty-message { color:#555a65; background:#2a2d35; }
            .modal-box { background:#252830; color:#c0cdd8; box-shadow:0 20px 40px rgba(0,0,0,0.5); }
            .modal-box .motto-display { background:#333840; }
            .modal-box .form-group input { background:#2a2d35; border-color:#3a3d46; color:#e0e4ea; }
            .modal-box .choice-btn.secondary { background:#3a3d46; color:#8899aa; }
            .modal-box .choice-btn.secondary:hover { background:#4a4d56; }
            .modal-box .confirm-btn.secondary { background:#3a3d46; color:#8899aa; }
            .modal-box .back-btn { color:#667080; }
            .modal-box .error { color:#e07070; }
            .modal-box .error.hint { color:#667080; }
            .color-swatch { box-shadow:0 1px 3px rgba(0,0,0,0.3); }
            .todo-list-scroll::-webkit-scrollbar-thumb { background:rgba(100,100,110,0.35); }
            .todo-list-scroll::-webkit-scrollbar-thumb:hover { background:rgba(120,120,130,0.55); }
        }
    </style>
</head>
<body>
<div class="app-card">
    <div class="app-header">
        <div>
            <h1>TO-DO LIST</h1>
            <div class="subhead">待办清单 · <span id="displayName">临时用户</span> · <span id="displayMotto">活在当下</span></div>
        </div>
    </div>

    <div class="todo-form">
        <div class="task-input-wrapper"><input type="text" id="taskTitle" placeholder="读本书，看舞台剧，看电影，多喝水..." autocomplete="off" maxlength="400"></div>
        <div class="due-date-wrapper"><input type="datetime-local" id="taskDueDate"></div>
        <div class="repeat-btn" id="repeatBtn" title="重复任务">↻</div>
        <div class="add-circle" id="addTaskBtn"><span>✓</span></div>
    </div>
    <div class="repeat-panel" id="repeatPanel" style="display:none;">
        <div class="repeat-option" data-type="none" data-selected="true">不重复</div>
        <div class="repeat-option" data-type="weekly">每周</div>
        <div class="repeat-option" data-type="biweekly">双周</div>
        <div class="repeat-option" data-type="monthly">每月</div>
        <div class="repeat-option" data-type="custom">
            自定义<span class="custom-interval-wrap">每 <input type="number" id="customInterval" min="1" max="365" value="1" disabled> 天</span>
        </div>
        <div class="repeat-limit-section">
            <div class="repeat-limit-row">截止日期 <input type="date" id="repeatEndDateInput" class="repeat-limit-date"></div>
            <div class="repeat-limit-row">次数上限 <input type="number" id="repeatMaxCountInput" class="repeat-limit-count" min="0" max="999" value="0"> 次<span class="repeat-limit-hint">(0=不限)</span></div>
        </div>
    </div>

    <div class="action-bar">
        <button class="delete-done-btn" id="clearCompletedBtn">删除已完成</button>
        <div class="color-palette" id="globalColorPicker">
            <div class="color-swatch" data-color="#C7B2A2" style="background:#C7B2A2;"></div>
            <div class="color-swatch" data-color="#C9A9A6" style="background:#C9A9A6;"></div>
            <div class="color-swatch" data-color="#8C9E9E" style="background:#8C9E9E;"></div>
            <div class="color-swatch" data-color="#B27D6D" style="background:#B27D6D;"></div>
            <div class="color-swatch" data-color="#B8A89A" style="background:#B8A89A;"></div>
        </div>
    </div>

    <div class="todo-container">
        <div class="todo-list-scroll" id="todoListScroll">
            <ul class="todo-list" id="todoList"></ul>
            <div id="emptyPlaceholder" class="empty-message" style="display:none;">清单空空，添加一点想做的小事吧</div>
        </div>
    </div>

    <div class="stats-wrapper">
        <div class="stats-box">
            <div class="stat-item"><span class="stat-number" id="completedCount">0</span> 已完成</div>
            <div class="stat-item"><span class="stat-number" id="expiredCount">0</span> 已到期</div>
            <div class="stat-item"><span class="stat-number" id="activeCount">0</span> 进行中</div>
        </div>
    </div>
</div>

<!-- 登录模态框 -->
<div class="modal-overlay" id="loginModal">
    <div class="modal-box">
        <div id="choiceStep">
            <div class="choice-group">
                <button class="choice-btn" id="choiceNew">new friend</button>
                <button class="choice-btn secondary" id="choiceOld">old friend</button>
            </div>
        </div>

        <div id="formStep" style="display:none;">
            <div class="form-group active" id="formContainer">
                <div id="newUserForm">
                    <input type="text" id="loginName" placeholder="nickname" autocomplete="off">
                    <input type="text" id="loginMotto" placeholder="motto">
                    <button class="action-btn" id="formActionBtn">Let's go!</button>
                    <div class="error" id="loginError"></div>
                </div>
                <div id="oldUserForm" style="display:none;">
                    <input type="text" id="oldLoginName" placeholder="nickname" autocomplete="off">
                    <div id="mottoDisplayArea" style="display:none;">
                        <div class="motto-display" id="foundMottoText"></div>
                        <div class="confirm-group">
                            <button class="confirm-btn" id="confirmItIsMe">It's me!</button>
                            <button class="confirm-btn secondary" id="confirmNotMe">Not me</button>
                        </div>
                    </div>
                    <div class="error" id="oldLoginError"></div>
                </div>
                <button class="back-btn" id="formBackBtn">返回</button>
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    // ---------- Supabase 数据库配置 ----------
    const SUPABASE_URL = 'https://sxccuavdavgygfptloxv.supabase.co';
    const SUPABASE_KEY = 'sb_publishable_YJJac02k8LI1wKYYGx2-lg_Y66jMN5T';
    let supabase = null;
    try {
        supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
        console.log('✅ Supabase 数据库已连接');
    } catch (e) {
        console.warn('⚠️ Supabase CDN 未加载或初始化失败，使用离线模式', e);
        supabase = null;
    }

    // Supabase anon key 直接可用，无需登录
    let authReady = !!supabase;

    // ---------- 离线备份存储（临时用户） ----------
    const TempDB = {
        getTempTasks() {
            try { return JSON.parse(localStorage.getItem('tempTasks')) || []; } catch { return []; }
        },
        saveTempTasks(tasks) {
            localStorage.setItem('tempTasks', JSON.stringify(tasks));
            localStorage.setItem('tempLastActive', Date.now().toString());
        },
        checkTempExpiry() {
            const last = localStorage.getItem('tempLastActive');
            if (last && (Date.now() - parseInt(last) > 24 * 3600 * 1000)) {
                localStorage.removeItem('tempTasks');
                localStorage.removeItem('tempLastActive');
                return true;
            }
            return false;
        }
    };

    // ---------- 状态 ----------
    let currentUser = null;
    let tasks = [];
    let isTemporary = true;
    let currentDefaultColor = '#C7B2A2';
    let sortableInstance = null;
    let repeatType = 'none';       // 'none' | 'weekly' | 'biweekly' | 'monthly' | 'custom'
    let repeatInterval = 1;       // 自定义间隔天数
    let repeatEndDate = '';       // 重复截止日期（ISO 日期字符串，空=不限）
    let repeatMaxCount = 0;       // 重复次数上限（0=无限制）
    let _editingTaskId = null;    // 当前正在编辑重复设置的任务 ID（null=新建模式）


    // DOM
    const todoListEl = document.getElementById('todoList');
    const emptyPlaceholder = document.getElementById('emptyPlaceholder');
    const taskTitleInput = document.getElementById('taskTitle');
    const taskDueDateInput = document.getElementById('taskDueDate');
    const addBtn = document.getElementById('addTaskBtn');
    const clearCompletedBtn = document.getElementById('clearCompletedBtn');
    const displayName = document.getElementById('displayName');
    const displayMotto = document.getElementById('displayMotto');

    const repeatBtnEl = document.getElementById('repeatBtn');
    const repeatPanelEl = document.getElementById('repeatPanel');
    const customIntervalInput = document.getElementById('customInterval');
    const repeatEndDateInput = document.getElementById('repeatEndDateInput');
    const repeatMaxCountInput = document.getElementById('repeatMaxCountInput');

    function updateRepeatUI() {
        repeatBtnEl.classList.toggle('active', repeatType !== 'none');
        repeatPanelEl.querySelectorAll('.repeat-option').forEach(opt => {
            opt.setAttribute('data-selected', opt.dataset.type === repeatType ? 'true' : 'false');
        });
        customIntervalInput.disabled = repeatType !== 'custom';
        if (repeatType === 'custom') {
            customIntervalInput.value = repeatInterval;
        }
        repeatEndDateInput.value = repeatEndDate || '';
        repeatMaxCountInput.value = repeatMaxCount;
    }

    const loginModal = document.getElementById('loginModal');
    const choiceStep = document.getElementById('choiceStep');
    const formStep = document.getElementById('formStep');
    const choiceNew = document.getElementById('choiceNew');
    const choiceOld = document.getElementById('choiceOld');
    const formBackBtn = document.getElementById('formBackBtn');
    const newUserForm = document.getElementById('newUserForm');
    const loginName = document.getElementById('loginName');
    const loginMotto = document.getElementById('loginMotto');
    const formActionBtn = document.getElementById('formActionBtn');
    const loginError = document.getElementById('loginError');
    const oldUserForm = document.getElementById('oldUserForm');
    const oldLoginName = document.getElementById('oldLoginName');
    const mottoDisplayArea = document.getElementById('mottoDisplayArea');
    const foundMottoText = document.getElementById('foundMottoText');
    const confirmItIsMe = document.getElementById('confirmItIsMe');
    const confirmNotMe = document.getElementById('confirmNotMe');
    const oldLoginError = document.getElementById('oldLoginError');

    let searchedUser = null;

    // ---------- 工具 ----------
    function showToast(msg, dur=1800) {
        let t = document.querySelector('.toast-msg');
        if(t) t.remove();
        const d = document.createElement('div');
        d.className = 'toast-msg';
        d.style.cssText = 'position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1e293bdd; backdrop-filter:blur(12px); color:#fff; padding:6px 18px; border-radius:40px; font-size:0.8rem; z-index:2000; pointer-events:none;';
        d.innerText = msg;
        document.body.appendChild(d);
        setTimeout(()=>d.remove(), dur);
    }

    // ---------- 云端操作 ----------
    async function loadCloudTasks(userId) {
        if (!supabase || !userId) return [];
        try {
            const { data, error } = await supabase
                .from('tasks')
                .select('*')
                .eq('user_id', userId)
                .eq('is_deleted', false);
            if (error) throw error;
            const tasks = (data || []).map(t => ({
                id: String(t.id),
                title: t.title,
                completed: t.completed,
                color: t.color,
                due: t.due,
                reminded: t.reminded,
                created_at: t.created_at,
                updated_at: t.updated_at || t.created_at,
                repeat_type: t.repeat_type || 'none',
                repeat_interval: t.repeat_interval || 1,
                repeat_end_date: t.repeat_end_date || null,
                repeat_max_count: t.repeat_max_count || 0,
                repeat_count: t.repeat_count || 0,
                _synced: true
            }));
            console.log(`[加载] 从云端加载 ${tasks.length} 个任务`);
            return tasks;
        } catch (error) {
            console.error('加载云端任务失败', error);
            return null; // null 表示加载失败，调用方应保留本地数据
        }
    }

    let cloudSyncBusy = false;  // 防止并发同步
    let pendingSync = false;   // 是否有待处理的同步

    // 保存同步（路径二）：只同步 _synced===false 的任务，按 ID 匹配
    // 不包含删除逻辑 — 删除走 markCloudDeleted（路径三）
    // 失败自动重试最多 3 次，指数退避（1s → 2s → 4s），重试时弹 toast 提示
    async function saveCloudTasks(userId) {
        const MAX_RETRIES = 3;
        if (!supabase || !userId) return true;
        if (cloudSyncBusy) {
            pendingSync = true;
            return false;
        }
        cloudSyncBusy = true;
        try {
            for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
                try {
                    const dirty = tasks.filter(t => t._synced === false);
                    if (dirty.length === 0) { return true; }
                    if (attempt === 0) console.log(`[同步] 开始上传 ${dirty.length} 个待同步任务...`);

                    const toInsert = dirty.filter(t => !t.id || t.id.length >= 14 || String(t.id).startsWith('tmptask') || String(t.id).startsWith('tmp_'));
                    const toUpdate = dirty.filter(t => !toInsert.includes(t));

                    // 新增 → 拿到真实 ID
                    if (toInsert.length > 0) {
                        const rows = toInsert.map(t => ({
                            user_id: userId, title: t.title, completed: t.completed,
                            color: t.color || '#C7B2A2', due: t.due || null, reminded: t.reminded || false,
                            repeat_type: t.repeat_type || 'none', repeat_interval: t.repeat_interval || 1,
                            repeat_end_date: t.repeat_end_date || null,
                            repeat_max_count: t.repeat_max_count || 0,
                            repeat_count: t.repeat_count || 0,
                            updated_at: new Date().toISOString()
                        }));
                        const { data: insData, error: insErr } = await supabase.from('tasks').insert(rows).select();
                        if (insErr) throw insErr;
                        if (!insData || insData.length !== toInsert.length) {
                            throw new Error(`Insert 返回 ${insData ? insData.length : 0} 条，预期 ${toInsert.length} 条`);
                        }
                        insData.forEach((db, i) => {
                            toInsert[i].id = String(db.id);
                            toInsert[i]._synced = true;
                        });
                        console.log('[同步] 新增完成，ID:', insData.map(d => d.id));
                    }

                    // 更新 → 按 ID
                    for (const t of toUpdate) {
                        const { error: upErr } = await supabase
                            .from('tasks').update({
                                title: t.title, completed: t.completed,
                                color: t.color || '#C7B2A2', due: t.due || null, reminded: t.reminded || false,
                                repeat_type: t.repeat_type || 'none', repeat_interval: t.repeat_interval || 1,
                                repeat_end_date: t.repeat_end_date || null,
                                repeat_max_count: t.repeat_max_count || 0,
                                repeat_count: t.repeat_count || 0,
                                updated_at: new Date().toISOString()
                            }).eq('id', t.id);
                        if (upErr) throw upErr;
                        t._synced = true;
                    }

                    console.log('[同步] 完成');
                    saveLocalCache();
                    return true;
                } catch (e) {
                    if (attempt === MAX_RETRIES) {
                        console.error('同步云端最终失败:', e);
                        showToast('同步失败，已重试3次。请检查网络后刷新页面', 5000);
                        return false;
                    }
                    const delay = Math.pow(2, attempt) * 1000; // 1s, 2s, 4s
                    console.warn(`同步云端失败，${delay}ms后重试 (${attempt + 1}/${MAX_RETRIES}):`, e);
                    showToast(`同步失败，${delay / 1000}秒后重试 (${attempt + 1}/${MAX_RETRIES})`, delay);
                    await new Promise(r => setTimeout(r, delay));
                }
            }
            return false;
        } finally {
            cloudSyncBusy = false;
            if (pendingSync) { pendingSync = false; saveCloudTasks(userId); }
        }
    }

    // 软删除通道（路径三），返回 true 表示成功
    async function markCloudDeleted(ids) {
        if (!supabase || !currentUser || !ids || ids.length === 0) return true;
        const numIds = ids.map(id => Number(id)).filter(n => !isNaN(n));
        if (numIds.length === 0) return true;
        try {
            const { error } = await supabase
                .from('tasks')
                .update({ is_deleted: true, updated_at: new Date().toISOString() })
                .in('id', numIds);
            if (error) throw error;
            return true;
        } catch (e) {
            console.error('markCloudDeleted 失败:', e);
            showToast('云端删除失败，刷新后可能恢复', 4000);
            return false;
        }
    }

    async function deleteTaskIds(ids) {
        const idSet = new Set(ids);
        const removed = tasks.filter(t => idSet.has(t.id));
        tasks = tasks.filter(t => !idSet.has(t.id));
        saveLocalCache();
        renderTasks();
        if (currentUser) {
            const cloudIds = removed.map(t => Number(t.id)).filter(n => !isNaN(n));
            await markCloudDeleted(cloudIds);
        }
    }

    let deleteQueue = [];
    let deleteBusy = false;

    // 兼容旧调用的 deleteCloudTask（路由到 markCloudDeleted）
    async function deleteCloudTask(taskId) {
        if (!currentUser) return;
        deleteQueue.push(taskId);
        if (deleteBusy) return;
        deleteBusy = true;
        while (deleteQueue.length > 0) {
            const ids = deleteQueue.splice(0, deleteQueue.length);
            await markCloudDeleted(ids);
        }
        deleteBusy = false;
    }

    // ---------- 核心操作 ----------
    let syncTimer = null;
    let statusTimer = null;

    // 本地缓存（统一入口）
    function saveLocalCache() {
        TempDB.saveTempTasks(tasks);
        localStorage.setItem('localTaskCache', JSON.stringify({
            userId: currentUser ? currentUser.id : null,
            tasks: tasks,
            updatedAt: Date.now()
        }));
    }

    function saveTasks() {
        saveLocalCache();  // 路径一：先存本地，保证即时响应
        if (currentUser) {
            clearTimeout(syncTimer);
            syncTimer = setTimeout(() => {
                saveCloudTasks(currentUser.id); // 路径二：300ms 防抖后同步云端（只推送 _synced=false 的任务）
            }, 300);
        }
    }

    // 检查任务到期并提醒
    function checkExpiryAndNotify() {
        const now = new Date();
        let hasChange = false;
        tasks.forEach(t => {
            if (!t.completed && t.due && !t.reminded) {
                const dueDate = new Date(t.due);
                if (dueDate <= now) {
                    t.reminded = true;
                    hasChange = true;
                    // 浏览器通知
                    if ('Notification' in window && Notification.permission === 'granted') {
                        new Notification('任务已到期', { body: t.title, icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="0.9em" font-size="90">⚠</text></svg>' });
                    }
                    showToast(`⚠️ "${t.title}" 已到期`, 3000);
                }
            }
        });
        if (hasChange) {
            saveTasks();
            renderTasks();
        }
    }

    // 实时更新过期状态
    function startStatusTimer() {
        if (statusTimer) clearInterval(statusTimer);
        statusTimer = setInterval(() => {
            updateStats();
            // 检查是否有任务过期（更新样式）
            const dueEls = document.querySelectorAll('.todo-due');
            dueEls.forEach(el => {
                const idx = parseInt(el.closest('.todo-item')?.dataset?.index);
                if (idx !== undefined && tasks[idx] && tasks[idx].due) {
                    const cls = getDueClass(tasks[idx].due, tasks[idx].completed);
                    el.className = `todo-due ${cls}`;
                    if (tasks[idx].due) {
                        if (cls.startsWith('due-urgent')) el.innerHTML = tasks[idx].completed ? `✓ ${formatDueDate(tasks[idx].due)}` : `⚠️ ${formatDueDate(tasks[idx].due)}`;
                        else if (cls === 'due-soon') el.innerHTML = `⏳ ${formatDueDate(tasks[idx].due)}`;
                        else el.innerHTML = `📅 ${formatDueDate(tasks[idx].due)}`;
                    }
                }
            });
            checkExpiryAndNotify();
        }, 5000);
    }

    // 请求通知权限
    function requestNotificationPermission() {
        if ('Notification' in window && Notification.permission === 'default') {
            Notification.requestPermission();
        }
    }

    async function loadTasks() {
        if (currentUser) {
            // 优先用本地缓存快速渲染
            const cache = localStorage.getItem('localTaskCache');
            if (cache) {
                try {
                    const cached = JSON.parse(cache);
                    if (cached.userId === currentUser.id && cached.tasks) {
                        tasks = cached.tasks;
                        renderTasks();
                    }
                } catch {}
            }
            // 异步加载云端数据；失败时保留本地数据不覆盖
            const cloudTasks = await loadCloudTasks(currentUser.id);
            if (cloudTasks !== null) {
                tasks = cloudTasks;
                renderTasks();
                // 更新本地缓存为云端最新数据
                localStorage.setItem('localTaskCache', JSON.stringify({
                    userId: currentUser.id,
                    tasks: cloudTasks,
                    updatedAt: Date.now()
                }));
            } else {
                showToast('云端加载失败，显示本地数据', 3000);
            }
        } else {
            tasks = TempDB.getTempTasks();
            renderTasks();
        }
    }

    function updateUI() {
        if (currentUser) {
            displayName.innerText = currentUser.name;
            displayMotto.innerText = currentUser.motto;
        } else {
            displayName.innerText = '临时用户';
            displayMotto.innerText = '活在当下';
        }
    }

    function updateStats() {
        const now = new Date();
        const completed = tasks.filter(t => t.completed).length;
        const expired = tasks.filter(t => !t.completed && t.due && new Date(t.due) < now).length;
        const active = tasks.filter(t => !t.completed && (!t.due || new Date(t.due) >= now)).length;
        document.getElementById('completedCount').innerText = completed;
        document.getElementById('expiredCount').innerText = expired;
        document.getElementById('activeCount').innerText = active;
    }

    function formatDueDate(dueISO) {
        if (!dueISO) return '';
        const d = new Date(dueISO);
        if (isNaN(d.getTime())) return '无效';
        return `${d.getFullYear()}/${d.getMonth()+1}/${d.getDate()} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
    }
    function formatShortDate(dateStr) {
        if (!dateStr) return '';
        const d = new Date(dateStr);
        if (isNaN(d.getTime())) return '';
        return `${d.getMonth()+1}/${d.getDate()}`;
    }
    function getDueClass(dueISO, completed) {
        if (!dueISO) return '';
        const now = new Date();
        const due = new Date(dueISO);
        if (isNaN(due)) return '';
        const diff = due - now;
        if (diff < 0) return completed ? 'due-urgent completed-due' : 'due-urgent';
        if (diff <= 3600000) return 'due-soon';
        return 'due-normal';
    }

    // ========== 统一工具函数 ==========
    function setError(el, msg) {
        el.innerText = msg;
        el.classList.remove('hint');
        el.style.color = '';
    }
    function clearError(el) {
        el.innerText = '';
        el.classList.add('hint');
    }
    function validateNickname(name) {
        if (!name || name.length < 2) return { valid: false, error: '名字至少 2 个字' };
        if (name.length > 16) return { valid: false, error: '名字最多 16 个字' };
        if (/\s/.test(name)) return { valid: false, error: '名字不能有空格' };
        return { valid: true, error: '' };
    }
    function bindPreventSortable(el) {
        el.addEventListener('pointerdown', (e) => { e.stopPropagation(); });
        el.addEventListener('touchstart', (e) => { e.stopPropagation(); });
    }
    function resetLoginModal() {
        const choiceStep = document.getElementById('choiceStep');
        const formStep = document.getElementById('formStep');
        if (choiceStep) choiceStep.style.display = 'block';
        if (formStep) formStep.style.display = 'none';
        clearError(document.getElementById('loginError'));
        clearError(document.getElementById('oldLoginError'));
        document.getElementById('mottoDisplayArea').style.display = 'none';
        searchedUser = null;
    }

    // 统一登录后处理
    async function afterLogin(user) {
        currentUser = user;
        isTemporary = false;
        localStorage.setItem('savedUser', JSON.stringify({ name: user.name, motto: user.motto }));
        closeLoginModal();
        showToast(`欢迎回来，${user.name}`, 1500);
        await reloadAndRender();
        mergeTempTasks();
        setupRealtimeSync();
    }

    // 统一加载→保存→渲染
    async function reloadAndRender() {
        await loadTasks();
        saveLocalCache();
        renderTasks();
        updateUI();
    }

    // 重复推进截止日期
    function advanceDueDate(task) {
        const d = new Date(task.due);
        if (isNaN(d)) return;
        const rt = task.repeat_type || 'none';
        if (rt === 'weekly') {
            d.setDate(d.getDate() + 7);
        } else if (rt === 'biweekly') {
            d.setDate(d.getDate() + 14);
        } else if (rt === 'monthly') {
            // 月份+1，保持同日号；若下月无该日号则取最后一天
            const day = d.getDate();
            d.setMonth(d.getMonth() + 1);
            if (d.getDate() !== day) {
                d.setDate(0); // 回到上月最后一天（即目标月最后一天）
            }
        } else if (rt === 'custom') {
            d.setDate(d.getDate() + (task.repeat_interval || 1));
        }
        task.due = d.toISOString();
    }

    // 检查重复任务是否应该终止（返回 true 表示永久完成）
    function shouldStopRepeating(task) {
        // 次数上限检查
        if ((task.repeat_max_count || 0) > 0 && (task.repeat_count || 0) >= (task.repeat_max_count || 0)) {
            return true;
        }
        // 截止日期检查：下一个重复日期超过截止日期
        if (task.repeat_end_date) {
            // 先推进日期看看会不会超过
            const tempTask = { ...task, due: task.due };
            advanceDueDate(tempTask);
            if (tempTask.due) {
                const nextDue = new Date(tempTask.due);
                const endDate = new Date(task.repeat_end_date);
                // 推进后的日期超过截止日期 → 终止
                if (!isNaN(nextDue) && !isNaN(endDate) && nextDue > endDate) {
                    return true;
                }
            }
        }
        return false;
    }

    // 处理重复任务完成（返回 true=重生，false=永久完成）
    function handleRepeatComplete(task) {
        const rt = task.repeat_type || 'none';
        if (rt === 'none') return false;
        // 增加已重复次数
        task.repeat_count = (task.repeat_count || 0) + 1;
        // 检查是否应终止
        if (shouldStopRepeating(task)) {
            task.completed = true;
            task.repeat_type = 'none'; // 停止重复
            return false;
        }
        // 推进日期，重生
        if (task.due) advanceDueDate(task);
        task.reminded = false;
        task.completed = false;
        return true;
    }

    // 任务卡片上的重复编辑面板
    function showCardRepeatPanel(task, anchorEl) {
        // 关闭已有的卡片面板
        const oldPanel = document.querySelector('.card-repeat-panel');
        if (oldPanel) oldPanel.remove();

        const panel = document.createElement('div');
        panel.className = 'card-repeat-panel';

        const types = [
            { type: 'none', label: '不重复' },
            { type: 'weekly', label: '每周' },
            { type: 'biweekly', label: '双周' },
            { type: 'monthly', label: '每月' },
            { type: 'custom', label: '自定义' }
        ];

        const curType = task.repeat_type || 'none';
        const curInterval = task.repeat_interval || 1;
        const curEndDate = task.repeat_end_date || '';
        const curMaxCount = task.repeat_max_count || 0;

        types.forEach(t => {
            const opt = document.createElement('div');
            opt.className = 'repeat-option';
            opt.textContent = t.label;
            if (t.type === curType) {
                opt.classList.add('selected');
                opt.dataset.selected = 'true';
            }
            if (t.type === 'custom') {
                const wrap = document.createElement('span');
                wrap.className = 'custom-interval-wrap';
                wrap.innerHTML = `每 <input type="number" class="card-custom-interval" min="1" max="365" value="${curInterval}" ${t.type !== curType ? 'disabled' : ''}> 天`;
                opt.appendChild(wrap);
            }
            opt.addEventListener('click', (ev) => {
                ev.stopPropagation();
                const newType = t.type;
                const intervalInput = panel.querySelector('.card-custom-interval');
                const interval = newType === 'custom' ? parseInt(intervalInput?.value) || 1 : 1;
                const endDateInput = panel.querySelector('.card-repeat-end-date');
                const maxCountInput = panel.querySelector('.card-repeat-max-count');
                const endDate = endDateInput?.value || null;
                const maxCount = parseInt(maxCountInput?.value) || 0;

                task.repeat_type = newType;
                task.repeat_interval = interval;
                task.repeat_end_date = endDate;
                task.repeat_max_count = maxCount;
                if (newType === 'none') {
                    task.repeat_count = 0;
                } else {
                    task.repeat_count = task.repeat_count || 0;
                }
                task._synced = !currentUser;
                saveTasks();
                renderTasks();
                panel.remove();
            });
            panel.appendChild(opt);
        });

        // 期限部分
        const limitSection = document.createElement('div');
        limitSection.className = 'repeat-limit-section';
        limitSection.innerHTML = `
            <div class="repeat-limit-row">截止日期 <input type="date" class="card-repeat-end-date repeat-limit-date" value="${curEndDate}"></div>
            <div class="repeat-limit-row">次数上限 <input type="number" class="card-repeat-max-count repeat-limit-count" min="0" max="999" value="${curMaxCount}"> 次<span class="repeat-limit-hint">(0=不限)</span></div>
        `;
        panel.appendChild(limitSection);

        // 与新建时保持一致：限制输入框实时保存
        const cardEndDateInput = limitSection.querySelector('.card-repeat-end-date');
        const cardMaxCountInput = limitSection.querySelector('.card-repeat-max-count');
        const cardCustomIntervalInput = panel.querySelector('.card-custom-interval');

        if (cardEndDateInput) {
            cardEndDateInput.addEventListener('click', (e) => e.stopPropagation());
            cardEndDateInput.addEventListener('input', () => {
                task.repeat_end_date = cardEndDateInput.value || null;
                task._synced = !currentUser;
                saveTasks();
                renderTasks();
            });
        }
        if (cardMaxCountInput) {
            cardMaxCountInput.addEventListener('click', (e) => e.stopPropagation());
            cardMaxCountInput.addEventListener('input', () => {
                task.repeat_max_count = parseInt(cardMaxCountInput.value) || 0;
                task._synced = !currentUser;
                saveTasks();
                renderTasks();
            });
        }
        if (cardCustomIntervalInput) {
            cardCustomIntervalInput.addEventListener('click', (e) => e.stopPropagation());
            cardCustomIntervalInput.addEventListener('input', () => {
                task.repeat_interval = parseInt(cardCustomIntervalInput.value) || 1;
                task._synced = !currentUser;
                saveTasks();
                renderTasks();
            });
        }

        // 位置
        const rect = anchorEl.getBoundingClientRect();
        panel.style.position = 'fixed';
        panel.style.top = (rect.bottom + 4) + 'px';
        panel.style.left = Math.min(rect.left, window.innerWidth - 210) + 'px';

        document.body.appendChild(panel);

        // 点击外部关闭
        const closeHandler = (ev) => {
            if (!panel.contains(ev.target) && ev.target !== anchorEl) {
                panel.remove();
                document.removeEventListener('click', closeHandler);
            }
        };
        // 延迟添加监听，避免当前点击立即触发
        setTimeout(() => { document.addEventListener('click', closeHandler); }, 10);
    }

    function renderTasks() {
        todoListEl.innerHTML = '';
        const scrollEl = document.getElementById('todoListScroll');
        // 排序：未完成在前（id降序），已完成在末尾（id降序）
        tasks.sort((a, b) => {
            if (a.completed !== b.completed) return a.completed ? 1 : -1;
            return (Number(b.id) || 0) - (Number(a.id) || 0);
        });
        if (tasks.length === 0) {
            emptyPlaceholder.style.display = 'block';
            todoListEl.style.display = 'none';
            if (scrollEl) scrollEl.style.maxHeight = 'none';
            updateStats();
            return;
        }
        emptyPlaceholder.style.display = 'none';
        todoListEl.style.display = 'flex';

        tasks.forEach((task, index) => {
            const li = document.createElement('li');
            li.className = 'todo-item';
            if (task.completed) li.classList.add('completed-task');
            li.style.borderLeftColor = task.color || '#C7B2A2';
            li.setAttribute('data-index', index);

            const checkDiv = document.createElement('div');
            checkDiv.className = 'todo-check';
            const checkLabel = document.createElement('label');
            checkLabel.className = 'custom-checkbox' + (task.completed ? ' checked' : '');
            checkLabel.style.setProperty('--cb-color', task.color || '#8C9E9E');
            const cb = document.createElement('input');
            cb.type = 'checkbox';
            cb.checked = task.completed;
            cb.addEventListener('change', (e) => {
                e.stopPropagation();
                if (cb.checked) {
                    const rt = task.repeat_type || 'none';
                    if (rt !== 'none' && task.due) {
                        const reborn = handleRepeatComplete(task);
                        if (reborn) {
                            cb.checked = false;
                            checkLabel.classList.remove('checked');
                            task._synced = !currentUser;
                            saveTasks();
                            renderTasks();
                            const nextDue = task.due ? formatDueDate(task.due) : '';
                            showToast(nextDue ? `已重置——下次截止：${nextDue}` : '已重置');
                            return;
                        }
                        // 永久完成（达到期限上限）
                    }
                    task.completed = true;
                    task._synced = !currentUser;
                } else {
                    task.completed = false;
                    task._synced = !currentUser;
                }
                checkLabel.classList.toggle('checked', cb.checked);
                saveTasks();
                renderTasks();
            });
            checkLabel.appendChild(cb);
            checkDiv.appendChild(checkLabel);

            const titleSpan = document.createElement('span');
            titleSpan.className = 'todo-title';
            titleSpan.innerText = task.title;
            titleSpan.addEventListener('click', (e) => {
                e.stopPropagation();
                // 原地编辑：替换为 textarea，宽度锁定与 title span 一致
                const oldTitle = task.title;
                const clickX = e.clientX;
                const clickY = e.clientY;
                const input = document.createElement('textarea');
                input.value = task.title;
                input.className = 'inline-edit-input';
                input.rows = 1;
                input.maxLength = 400;
                const finishEdit = () => {
                    const newTitle = input.value.trim();
                    if (newTitle && newTitle !== oldTitle) {
                        task.title = newTitle;
                        task._synced = !currentUser;
                        saveTasks();
                    }
                    renderTasks();
                };
                const autoResize = () => {
                    input.style.height = 'auto';
                    input.style.height = input.scrollHeight + 'px';
                };
                input.addEventListener('input', autoResize);
                input.addEventListener('blur', finishEdit);
                input.addEventListener('keypress', (ev) => {
                    if (ev.key === 'Enter' && !ev.shiftKey) { input.blur(); }
                });
                input.addEventListener('keydown', (ev) => {
                    if (ev.key === 'Escape') { input.value = oldTitle; input.blur(); }
                });
                // 移动端：阻止 touchend 冒泡到 SortableJS
                input.addEventListener('touchend', (ev) => {
                    ev.stopPropagation();
                });
                titleSpan.replaceWith(input);
                input.focus();
                // 先展开高度与显示态一致，再定位光标
                requestAnimationFrame(() => {
                    autoResize();
                    const caretPos = document.caretPositionFromPoint(clickX, clickY);
                    if (caretPos) {
                        input.setSelectionRange(caretPos.offset, caretPos.offset);
                    } else {
                        // 降级：光标放末尾
                        input.setSelectionRange(input.value.length, input.value.length);
                    }
                });
            });

            // 重复标识（仅当 repeat_type ≠ 'none' 时显示）
            let repeatLabel = '';
            const rt = task.repeat_type || 'none';
            if (rt === 'weekly') repeatLabel = '每周';
            else if (rt === 'biweekly') repeatLabel = '双周';
            else if (rt === 'monthly') repeatLabel = '每月';
            else if (rt === 'custom') repeatLabel = `每${task.repeat_interval || 1}天`;
            if (rt !== 'none') {
                const repeatSpan = document.createElement('span');
                repeatSpan.className = 'repeat-indicator';
                // 构建期限提示
                let limitSuffix = '';
                const mc = task.repeat_max_count || 0;
                const rc = task.repeat_count || 0;
                const remaining = mc > 0 ? (mc - rc) : 0;
                if (remaining > 0 && task.repeat_end_date) {
                    limitSuffix = `（还剩${remaining}次·截至${formatShortDate(task.repeat_end_date)}）`;
                } else if (remaining > 0) {
                    limitSuffix = `（还剩${remaining}次）`;
                } else if (task.repeat_end_date) {
                    limitSuffix = `（截至${formatShortDate(task.repeat_end_date)}）`;
                }
                repeatSpan.textContent = `↻ ${repeatLabel}${limitSuffix}`;
                // 点击 → 弹出编辑面板
                repeatSpan.addEventListener('click', (ev) => {
                    ev.stopPropagation();
                    showCardRepeatPanel(task, repeatSpan);
                });
                titleSpan.appendChild(repeatSpan);
            }

            const dueDeleteWrapper = document.createElement('div');
            dueDeleteWrapper.className = 'due-and-delete';
            const dueSpan = document.createElement('span');
            const dueCls = getDueClass(task.due, task.completed);
            dueSpan.className = `todo-due ${dueCls}`;
            if (task.due) {
                if (dueCls.startsWith('due-urgent')) dueSpan.innerHTML = task.completed ? `✓ ${formatDueDate(task.due)}` : `⚠️ ${formatDueDate(task.due)}`;
                else if (dueCls === 'due-soon') dueSpan.innerHTML = `⏳ ${formatDueDate(task.due)}`;
                else dueSpan.innerHTML = `📅 ${formatDueDate(task.due)}`;
            } else {
                dueSpan.innerHTML = '⏚ 无期限';
            }
            dueSpan.addEventListener('click', (e) => {
                e.stopPropagation();
                // 原地编辑日期
                const input = document.createElement('input');
                input.type = 'datetime-local';
                if (task.due) {
                    const d = new Date(task.due);
                    const pad = (n) => String(n).padStart(2,'0');
                    input.value = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
                }
                input.className = 'inline-due-input';
                let editing = true;
                let committed = false;
                const finishEdit = () => {
                    if (!editing || committed) return;
                    committed = true;
                    editing = false;
                    if (input.value) {
                        const d = new Date(input.value);
                        if (!isNaN(d.getTime())) {
                            task.due = d.toISOString();
                            task.reminded = false;
                        }
                    } else {
                        task.due = null;
                        task.reminded = false;
                    }
                    task._synced = !currentUser;
                    saveTasks();
                    renderTasks();
                };
                // change 优先：用户从原生选择器选定日期时触发，不会因日历弹出而误 fire
                input.addEventListener('change', finishEdit);
                // blur 兜底：300ms 避开原生选择器弹出的瞬间 blur，真正点别处才提交
                input.addEventListener('blur', () => {
                    if (editing && !committed) {
                        // 给原生选择器足够时间展开；若 focused 还在 input 上说明是日历弹出 blur
                        setTimeout(() => {
                            if (editing && !committed && document.activeElement !== input) {
                                finishEdit();
                            }
                        }, 300);
                    }
                });
                input.addEventListener('keydown', (ev) => {
                    if (ev.key === 'Enter') { ev.preventDefault(); finishEdit(); }
                    if (ev.key === 'Escape') { editing = false; committed = true; renderTasks(); }
                });
                // 移动端：阻止 touchend 冒泡到 SortableJS
                input.addEventListener('touchend', (ev) => {
                    ev.stopPropagation();
                });
                dueSpan.replaceWith(input);
                input.focus();
            });
            const deleteBtn = document.createElement('button');
            deleteBtn.innerHTML = '✕';
            deleteBtn.className = 'delete-simple';
            deleteBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                clearTimeout(syncTimer);
                const removed = tasks.splice(index, 1);
                if (removed.length > 0) {
                    deleteTaskIds([removed[0].id]);
                }
                showToast('已删除', 800);
            });
            dueDeleteWrapper.appendChild(dueSpan);
            dueDeleteWrapper.appendChild(deleteBtn);

            li.appendChild(checkDiv);
            li.appendChild(titleSpan);
            li.appendChild(dueDeleteWrapper);
            todoListEl.appendChild(li);
        });

        document.querySelectorAll('.todo-item').forEach(item => {
            item.addEventListener('dblclick', (e) => {
                if (e.target.closest('.todo-check') || e.target.closest('.delete-simple') || e.target.closest('.todo-due')) return;
                const idx = parseInt(item.dataset.index);
                const task = tasks[idx];
                if (!task) return;
                const picker = document.createElement('input');
                picker.type = 'color';
                picker.value = task.color || '#C7B2A2';
                picker.addEventListener('input', (e) => {
                    task.color = e.target.value;
                    saveTasks();
                    renderTasks();
                });
                picker.click();
            });
        });

        if (sortableInstance) sortableInstance.destroy();
        sortableInstance = new Sortable(todoListEl, {
            animation: 200,
            ghostClass: 'sortable-drag',
            filter: '.todo-check, .custom-checkbox, .custom-checkbox input, .todo-due, .todo-title, .inline-due-input, .inline-edit-input, .delete-simple',
            preventOnFilter: false,
            onEnd: () => {
                const items = document.querySelectorAll('#todoList .todo-item');
                const newOrder = [];
                items.forEach(li => { const idx = parseInt(li.dataset.index); newOrder.push(tasks[idx]); });
                tasks = newOrder;
                saveTasks();
                renderTasks();
            }
        });
        updateStats();
    }

    // ---------- 登录流程 ----------
    // 获取临时任务（用于登录后合并）
    function getTempTasksForMerge() {
        const tempTasks = TempDB.getTempTasks();
        return tempTasks.filter(t => !t.completed);
    }

    // 合并临时任务到当前任务列表
    function mergeTempTasks() {
        if (!currentUser || !isTemporary) {
            const tempTasks = getTempTasksForMerge();
            if (tempTasks.length > 0) {
                // 标记为待同步，saveCloudTasks 按编号处理：有云端编号→更新，没有→新增
                for (const t of tempTasks) t._synced = false;
                tasks = [...tempTasks, ...tasks];
                saveTasks();
                showToast(`已同步 ${tempTasks.length} 条临时任务`, 2000);
                // 清除临时存储
                TempDB.saveTempTasks([]);
            }
        }
    }
    function openLoginModal() {
        resetLoginModal();
        loginName.value = '';
        loginMotto.value = '';
        oldLoginName.value = '';
        mottoDisplayArea.style.display = 'none';
        clearError(loginError);
        clearError(oldLoginError);
        newUserForm.style.display = 'block';
        oldUserForm.style.display = 'none';
        searchedUser = null;
        loginModal.classList.add('active');
    }

    function closeLoginModal() {
        loginModal.classList.remove('active');
    }

    function showNewUserForm() {
        choiceStep.style.display = 'none';
        formStep.style.display = 'block';
        newUserForm.style.display = 'block';
        oldUserForm.style.display = 'none';
        clearError(loginError);
        loginName.value = '';
        loginMotto.value = '';
        setTimeout(() => loginName.focus(), 100);
    }

    function showOldUserForm() {
        choiceStep.style.display = 'none';
        formStep.style.display = 'block';
        newUserForm.style.display = 'none';
        oldUserForm.style.display = 'block';
        clearError(oldLoginError);
        oldLoginName.value = '';
        mottoDisplayArea.style.display = 'none';
        oldLoginError.innerText = '';
        oldLoginError.classList.remove('hint');
        searchedUser = null;
        setTimeout(() => oldLoginName.focus(), 100);
    }

    async function handleNewUserSubmit() {
        const name = loginName.value.trim();
        const motto = loginMotto.value.trim();
        const v = validateNickname(name);
        if (!v.valid) { setError(loginError, v.error); return; }
        if (!motto) { setError(loginError, '请完整填写'); return; }
        if (!supabase) { setError(loginError, '数据库未连接，请刷新页面重试'); return; }

        try {
            // 再次检查是否已存在（最终校验）
            const { data: existing, error: checkErr } = await supabase
                .from('users').select('*').ilike('name', name);
            if (checkErr) throw checkErr;
            if (existing && existing.length > 0) {
                setError(loginError, 'You were here! Old friend?');
                loginError.style.color = '#c2410c';
                return;
            }

            // 注册新用户
            const { data: newUser, error: addErr } = await supabase
                .from('users').insert({ name, motto }).select().single();
            if (addErr) throw addErr;
            await afterLogin({ id: newUser.id, name, motto });
        } catch (err) {
            setError(loginError, '注册失败: ' + err.message);
        }
    }

    async function handleOldUserSearch() {
        const name = oldLoginName.value.trim();
        const v = validateNickname(name);
        if (!v.valid) { setError(oldLoginError, v.error); return; }
        if (!supabase) { setError(oldLoginError, '数据库未连接，请刷新页面重试'); return; }
        oldLoginError.innerText = 'one sec...';
        oldLoginError.classList.add('hint');
        try {
            const { data, error } = await supabase
                .from('users').select('*').ilike('name', name);
            if (error) throw error;
            if (!data || data.length === 0) {
                setError(oldLoginError, '未找到该用户');
                mottoDisplayArea.style.display = 'none';
                searchedUser = null;
                return;
            }
            const user = data[0];
            foundMottoText.innerText = user.motto;
            mottoDisplayArea.style.display = 'block';
            clearError(oldLoginError);
            searchedUser = { id: user.id, name: user.name, motto: user.motto };
        } catch (err) {
            setError(oldLoginError, '搜索失败: ' + err.message);
            searchedUser = null;
        }
    }

    async function handleOldUserConfirm() {
        if (!searchedUser) {
            setError(oldLoginError, '请先搜索用户');
            return;
        }
        await afterLogin({ id: searchedUser.id, name: searchedUser.name, motto: searchedUser.motto });
    }

    function handleOldUserNotMe() {
        oldLoginName.value = '';
        mottoDisplayArea.style.display = 'none';
        searchedUser = null;
        clearError(oldLoginError);
        oldLoginName.focus();
    }

    // ---------- 事件绑定 ----------
    displayName.addEventListener('click', openLoginModal);

    choiceNew.addEventListener('click', showNewUserForm);
    choiceOld.addEventListener('click', showOldUserForm);

    formBackBtn.addEventListener('click', resetLoginModal);

    formActionBtn.addEventListener('click', handleNewUserSubmit);
    loginMotto.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleNewUserSubmit(); });
    loginName.addEventListener('keypress', (e) => { if (e.key === 'Enter') loginMotto.focus(); });

    // 实时校验名字重复
    let nameCheckTimer = null;
    loginName.addEventListener('input', () => {
        const name = loginName.value.trim();
        if (!name || /\s/.test(name)) {
            loginError.innerText = '';
            return;
        }
        // 防抖 400ms
        clearTimeout(nameCheckTimer);
        nameCheckTimer = setTimeout(async () => {
            try {
                const { data, error } = await supabase
                    .from('users')
                    .select('name')
                    .ilike('name', name)
                    .limit(1);
                if (error) return;
                if (data && data.length > 0) {
                    loginError.innerText = "You were here! Old friend?";
                    loginError.style.color = '#c2410c';
                } else {
                    loginError.innerText = '';
                }
            } catch {}
        }, 400);
    });

    oldLoginName.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            handleOldUserSearch();
        }
    });

    confirmItIsMe.addEventListener('click', handleOldUserConfirm);
    confirmNotMe.addEventListener('click', handleOldUserNotMe);

    loginModal.addEventListener('click', (e) => { if (e.target === loginModal) closeLoginModal(); });

    addBtn.addEventListener('click', () => {
        const title = taskTitleInput.value.trim();
        if (!title) { showToast('写点想做的小事吧'); return; }
        let due = null;
        if (taskDueDateInput.value) { const d = new Date(taskDueDateInput.value); if (!isNaN(d.getTime())) due = d.toISOString(); }
        tasks.unshift({
            id: 'tmp_' + Date.now(), title, completed: false, color: currentDefaultColor, due, reminded: false,
            repeat_type: repeatType, repeat_interval: repeatType === 'custom' ? repeatInterval : 1,
            repeat_end_date: repeatEndDate || null,
            repeat_max_count: repeatMaxCount, repeat_count: 0,
            _synced: !currentUser
        });
        repeatType = 'none';
        repeatInterval = 1;
        repeatEndDate = '';
        repeatMaxCount = 0;
        _editingTaskId = null;
        updateRepeatUI();
        saveTasks();
        renderTasks();
        taskTitleInput.value = '';
        taskDueDateInput.value = '';
        showToast(`添加了 "${title}"`);
    });
    taskTitleInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') addBtn.click(); });

    clearCompletedBtn.addEventListener('click', () => {
        const completed = tasks.filter(t => t.completed);
        if (completed.length === 0) { showToast('没有已完成的任务'); return; }
        clearTimeout(syncTimer);
        deleteTaskIds(completed.map(t => t.id));
        showToast('已完成任务已归档');
    });

    document.querySelectorAll('.color-swatch').forEach(el => {
        el.addEventListener('click', () => {
            const color = el.dataset.color;
            if (color) {
                currentDefaultColor = color;
                document.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
                el.classList.add('active');
            }
        });
        if (el.dataset.color === '#C7B2A2') el.classList.add('active');
    });

    // ---------- 登出 ----------
    window.logout = function() {
        if (currentUser) {
            saveCloudTasks(currentUser.id);
        }
        localStorage.removeItem('savedUser');
        currentUser = null;
        isTemporary = true;
        reloadAndRender().then(() => {
            showToast('已退出');
        });
    };

    // ---------- 初始化 ----------
    async function init() {
        // 确保 Supabase SDK 已加载
        if (!supabase) {
            console.warn('Supabase SDK 未加载，使用离线模式');
            tasks = TempDB.getTempTasks();
            renderTasks();
            updateUI();
            startStatusTimer();
            return;
        }

        requestNotificationPermission();

        if (TempDB.checkTempExpiry()) {
            tasks = [];
            TempDB.saveTempTasks(tasks);
        }

        const savedUser = localStorage.getItem('savedUser');
        if (savedUser) {
            try {
                const parsed = JSON.parse(savedUser);
                const { data, error } = await supabase
                    .from('users')
                    .select('*')
                    .eq('name', parsed.name)
                    .eq('motto', parsed.motto);
                if (error) throw error;
                if (data && data.length > 0) {
                    const user = data[0];
                    currentUser = { id: user.id, name: user.name, motto: user.motto };
                    isTemporary = false;
                    await reloadAndRender();
                    showToast(`欢迎回来，${currentUser.name}`, 1500);
                } else {
                    localStorage.removeItem('savedUser');
                    currentUser = null;
                    isTemporary = true;
                    await reloadAndRender();
                }
            } catch (e) {
                console.warn('恢复用户失败，使用离线模式', e);
                localStorage.removeItem('savedUser');
                currentUser = null;
                isTemporary = true;
                await reloadAndRender();
            }
        } else {
            currentUser = null;
            isTemporary = true;
            await reloadAndRender();
        }

        // 设置日期选择器最小值（避免选择过去太久的时间）
        const now = new Date();
        const pad = (n) => String(n).padStart(2, '0');
        taskDueDateInput.setAttribute('min', `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`);
        // 移动端 datetime-local 无 placeholder，通过监听 value 变化添加视觉提示
        const updateDateInputStyle = () => {
            if (taskDueDateInput.value) {
                taskDueDateInput.classList.add('has-value');
            } else {
                taskDueDateInput.classList.remove('has-value');
            }
        };
        taskDueDateInput.addEventListener('change', updateDateInputStyle);
        taskDueDateInput.addEventListener('input', updateDateInputStyle);
        updateDateInputStyle();

        startStatusTimer();

        // ---------- 重复按钮交互 ----------
        function positionRepeatPanel() {
            const rect = repeatBtnEl.getBoundingClientRect();
            repeatPanelEl.style.top = (rect.bottom + 6) + 'px';
            repeatPanelEl.style.left = Math.min(rect.left, window.innerWidth - 210) + 'px';
        }

        // 收集面板中的重复设置
        function collectRepeatSettings() {
            return {
                endDate: repeatEndDateInput.value || '',
                maxCount: parseInt(repeatMaxCountInput.value) || 0
            };
        }

        // 将重复设置应用到面板显示
        function applyRepeatSettings(ret, endDate, maxCount) {
            repeatType = ret;
            repeatEndDate = endDate || '';
            repeatMaxCount = maxCount || 0;
            if (ret === 'custom') {
                repeatInterval = parseInt(customIntervalInput.value) || 1;
            } else {
                repeatInterval = 1;
            }
            updateRepeatUI();
        }

        repeatBtnEl.addEventListener('click', (e) => {
            e.stopPropagation();
            _editingTaskId = null;
            const isOpen = repeatPanelEl.style.display !== 'none';
            if (isOpen) {
                repeatPanelEl.style.display = 'none';
            } else {
                applyRepeatSettings(repeatType, repeatEndDate, repeatMaxCount);
                positionRepeatPanel();
                repeatPanelEl.style.display = 'flex';
            }
        });

        repeatPanelEl.querySelectorAll('.repeat-option').forEach(opt => {
            opt.addEventListener('click', (e) => {
                e.stopPropagation();
                const type = opt.dataset.type;
                const settings = collectRepeatSettings();
                if (_editingTaskId) {
                    // 编辑模式：更新指定任务
                    const task = tasks.find(t => String(t.id) === String(_editingTaskId));
                    if (task) {
                        task.repeat_type = type;
                        task.repeat_interval = type === 'custom' ? repeatInterval : 1;
                        task.repeat_end_date = settings.endDate || null;
                        task.repeat_max_count = settings.maxCount;
                        task.repeat_count = 0; // 重置计数
                        task._synced = !currentUser;
                        if (type === 'none') {
                            // 关闭面板，刷新即可
                        }
                        saveTasks();
                        renderTasks();
                    }
                    _editingTaskId = null;
                } else {
                    applyRepeatSettings(type, settings.endDate, settings.maxCount);
                }
            });
        });

        customIntervalInput.addEventListener('click', (e) => e.stopPropagation());
        customIntervalInput.addEventListener('input', () => {
            repeatInterval = parseInt(customIntervalInput.value) || 1;
        });

        repeatEndDateInput.addEventListener('click', (e) => e.stopPropagation());
        repeatEndDateInput.addEventListener('input', () => {
            repeatEndDate = repeatEndDateInput.value;
        });

        repeatMaxCountInput.addEventListener('click', (e) => e.stopPropagation());
        repeatMaxCountInput.addEventListener('input', () => {
            repeatMaxCount = parseInt(repeatMaxCountInput.value) || 0;
        });

        // 点击外部关闭面板（含卡片面板）
        document.addEventListener('click', (e) => {
            if (!repeatBtnEl.contains(e.target) && !repeatPanelEl.contains(e.target)) {
                repeatPanelEl.style.display = 'none';
            }
        });

        // 窗口大小变化时更新面板位置
        window.addEventListener('resize', () => {
            if (repeatPanelEl.style.display !== 'none') positionRepeatPanel();
        });

        updateRepeatUI();

        // 初始化实时同步
        setupRealtimeSync();
    }

    // 实时同步：监听云端数据变化
    function setupRealtimeSync() {
        if (currentUser && supabase) {
            supabase
                .channel('tasks-sync')
                .on('postgres_changes', {
                    event: '*',
                    schema: 'public',
                    table: 'tasks',
                    filter: `user_id=eq.${currentUser.id}`
                }, async () => {
                    // 如果正在同步中（saveCloudTasks），跳过 Realtime 覆盖，避免竞态丢数据
                    if (cloudSyncBusy) {
                        console.log('[Realtime] 跳过：saveCloudTasks 正在同步中');
                        return;
                    }
                    const cloudTasks = await loadCloudTasks(currentUser.id);
                    tasks = cloudTasks;
                    saveLocalCache();
                    renderTasks();
                })
                .subscribe();
        }
    }

    init();
})();
</script>
</body>
</html>