{% extends "layout.html" %}
{% block title %}工作日志 - 中层领导工作助理{% endblock %}
{% block content %}
<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h4 class="mb-1"><i class="bi bi-journal-text me-2"></i>工作日志</h4>
        <small class="text-muted">记录 / 检索 / 趋势分析</small>
    </div>
    <div>
        <a class="btn btn-outline-success btn-sm" href="/api/export/logs"><i class="bi bi-download"></i> 导出CSV</a>
        <button class="btn btn-primary btn-sm" onclick="showAddLog()"><i class="bi bi-plus"></i> 记录日志</button>
    </div>
</div>

<!-- 顶部统计卡 -->
<div class="row g-3 mb-3">
    <div class="col-md-3 col-6">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-journals"></i></div>
                <div><div class="text-muted small">总日志数</div><div class="fs-4 fw-bold">{{ stats.total_logs }}</div></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon bg-success bg-opacity-10 text-success"><i class="bi bi-calendar-check"></i></div>
                <div><div class="text-muted small">活跃天数</div><div class="fs-4 fw-bold">{{ stats.active_days }}</div></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon bg-info bg-opacity-10 text-info"><i class="bi bi-graph-up"></i></div>
                <div><div class="text-muted small">日均条数</div><div class="fs-4 fw-bold">{{ "%.1f" | format(stats.total_logs / 30) if stats.total_logs else "0" }}</div></div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6">
        <div class="card stat-card p-3">
            <div class="d-flex align-items-center gap-3">
                <div class="stat-icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-tags"></i></div>
                <div><div class="text-muted small">分类数</div><div class="fs-4 fw-bold">{{ stats.categories | length }}</div></div>
            </div>
        </div>
    </div>
</div>

<!-- 筛选条 -->
<div class="card mb-3">
    <div class="card-body py-2">
        <div class="row g-2 align-items-center">
            <div class="col-md-3">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input id="searchKeyword" class="form-control" placeholder="搜索关键字..." value="{{ keyword }}">
                </div>
            </div>
            <div class="col-md-2"><input id="startDate" type="date" class="form-control form-control-sm"></div>
            <div class="col-md-2"><input id="endDate" type="date" class="form-control form-control-sm"></div>
            <div class="col-md-3">
                <select id="filterCategory" class="form-select form-select-sm">
                    <option value="">全部分类</option>
                    {% for c in stats.categories %}
                    <option value="{{ c.category }}" {% if current_category == c.category %}selected{% endif %}>{{ c.category }} ({{ c.cnt }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <div class="btn-group btn-group-sm w-100">
                    <button class="btn btn-primary" onclick="applyFilter()"><i class="bi bi-funnel"></i> 应用</button>
                    <button class="btn btn-outline-secondary" onclick="resetFilter()">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-3">
        <div class="card mb-3">
            <div class="card-header small"><i class="bi bi-bar-chart me-1"></i>近 30 天趋势</div>
            <div class="card-body p-2"><canvas id="dailyChart" height="180"></canvas></div>
        </div>
        <div class="card">
            <div class="card-header small">分类占比</div>
            <div class="card-body p-2"><canvas id="catChart" height="200"></canvas></div>
        </div>
    </div>

    <div class="col-lg-9">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="bi bi-list-ul me-1"></i>日志列表 <span class="badge bg-secondary ms-1" id="resultCount">{{ logs | length }}</span></span>
                <small class="text-muted" id="resultHint">{% if keyword %}搜索: "{{ keyword }}"{% endif %}</small>
            </div>
            <div class="card-body p-0">
                <div id="logList" class="list-group list-group-flush" style="max-height:700px;overflow-y:auto;">
                    {% for log in logs %}
                    <div class="list-group-item log-item" data-category="{{ log.category }}" data-content="{{ log.content | lower }}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <div class="mb-1">
                                    <span class="badge bg-secondary me-2">{{ log.category }}</span>
                                    <small class="text-muted"><i class="bi bi-calendar3"></i> {{ log.log_date }}</small>
                                </div>
                                <div class="log-content">{{ log.content }}</div>
                            </div>
                            <div class="ms-2">
                                <button class="btn btn-sm btn-outline-danger py-0 px-1" onclick="deleteLog({{ log.id }})" title="删除"><i class="bi bi-trash"></i></button>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <div class="list-group-item text-center text-muted py-5">
                        <i class="bi bi-inbox fs-1"></i>
                        <p class="mt-2 mb-0">暂无日志记录</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="logModal" tabindex="-1">
    <div class="modal-dialog modal-lg"><div class="modal-content">
        <div class="modal-header"><h5 class="modal-title">记录工作日志</h5><button class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body">
            <textarea id="logContent" class="form-control mb-2" rows="4" placeholder="今天做了什么工作..."></textarea>
            <div class="row g-2">
                <div class="col-6"><select id="logCategory" class="form-select">
                    <option value="日常">日常</option><option value="会议">会议</option><option value="项目">项目</option>
                    <option value="汇报">汇报</option><option value="出差">出差</option><option value="培训">培训</option>
                </select></div>
                <div class="col-6"><input id="logDate" type="date" class="form-control"></div>
            </div>
        </div>
        <div class="modal-footer"><button class="btn btn-primary" onclick="submitLog()">保存</button></div>
    </div></div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const CATEGORY_COLORS = {"日常":"#0d6efd","会议":"#0dcaf0","项目":"#198754","汇报":"#ffc107","出差":"#dc3545","培训":"#6c757d"};

function showAddLog() {
    document.getElementById("logDate").value = new Date().toISOString().split("T")[0];
    document.getElementById("logContent").value = "";
    new bootstrap.Modal(document.getElementById("logModal")).show();
}

async function submitLog() {
    const content = document.getElementById("logContent").value.trim();
    if (!content) return showToast("请输入日志内容", "warning");
    await apiCall("/api/logs", "POST", {
        content,
        category: document.getElementById("logCategory").value,
        log_date: document.getElementById("logDate").value
    });
    showToast("日志已保存");
    setTimeout(() => location.reload(), 600);
}

async function deleteLog(id) {
    if (!confirm("确定删除该日志？此操作不可恢复。")) return;
    await apiCall("/api/logs/" + id, "DELETE");
    showToast("已删除");
    setTimeout(() => location.reload(), 400);
}

function applyFilter() {
    const kw = document.getElementById("searchKeyword").value.trim();
    const start = document.getElementById("startDate").value;
    const end = document.getElementById("endDate").value;
    const cat = document.getElementById("filterCategory").value;
    const params = new URLSearchParams();
    if (kw) params.set("keyword", kw);
    if (start) params.set("start", start);
    if (end) params.set("end", end);
    if (cat) params.set("category", cat);
    const qs = params.toString();
    location.href = "/logs" + (qs ? "?" + qs : "");
}

function resetFilter() { location.href = "/logs"; }

document.getElementById("searchKeyword").addEventListener("input", e => {
    const kw = e.target.value.toLowerCase().trim();
    document.querySelectorAll(".log-item").forEach(el => {
        const matches = !kw || el.dataset.content.includes(kw);
        el.style.display = matches ? "" : "none";
    });
    const visible = Array.from(document.querySelectorAll(".log-item")).filter(el => el.style.display !== "none").length;
    document.getElementById("resultCount").textContent = visible;
    document.getElementById("resultHint").textContent = kw ? "搜索: " + kw : "";
});

async function loadDailyChart() {
    const data = await apiCall("/api/logs/trends/daily?days=30");
    if (!data || !data.length) return;
    new Chart(document.getElementById("dailyChart"), {
        type: "bar",
        data: {
            labels: data.map(d => d.date.slice(5)),
            datasets: [{
                label: "日志数",
                data: data.map(d => d.count),
                backgroundColor: "rgba(13, 110, 253, 0.6)",
                borderRadius: 3
            }]
        },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
    });
}

(async function() {
    const stats = await apiCall("/api/logs/stats?days=30");
    if (stats && stats.categories && stats.categories.length) {
        new Chart(document.getElementById("catChart"), {
            type: "doughnut",
            data: {
                labels: stats.categories.map(c => c.category),
                datasets: [{
                    data: stats.categories.map(c => c.cnt),
                    backgroundColor: stats.categories.map(c => CATEGORY_COLORS[c.category] || "#999")
                }]
            },
            options: { responsive: true, plugins: { legend: { position: "bottom", labels: { boxWidth: 12, font: { size: 11 } } } } }
        });
    }
})();

loadDailyChart();
</script>
{% endblock %}