{% extends 'base.html' %}
{% block title %}AI 生成歷史 - WOOO TECH{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- 頁面標題 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div>
                    <h2 class="mb-1">
                        <i class="fas fa-history text-primary me-2"></i>AI 生成歷史
                    </h2>
                    <p class="text-muted mb-0">查看、管理和複用之前生成的文案</p>
                </div>
                <div class="d-flex gap-2">
                    <a href="/ai_recommend" class="btn btn-primary">
                        <i class="fas fa-magic me-1"></i>生成新文案
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 統計卡片 -->
    <div class="row mb-4" id="statsRow">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 small">總生成次數</p>
                            <h3 class="mb-0" id="statTotal">-</h3>
                        </div>
                        <div class="bg-primary bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-robot text-primary fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 small">收藏文案</p>
                            <h3 class="mb-0" id="statFavorite">-</h3>
                        </div>
                        <div class="bg-warning bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-star text-warning fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 small">已使用文案</p>
                            <h3 class="mb-0" id="statUsed">-</h3>
                        </div>
                        <div class="bg-success bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-check-circle text-success fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <p class="text-muted mb-1 small">平均生成時間</p>
                            <h3 class="mb-0"><span id="statDuration">-</span><small class="text-muted fs-6">秒</small></h3>
                        </div>
                        <div class="bg-info bg-opacity-10 rounded-circle p-3">
                            <i class="fas fa-clock text-info fa-lg"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 篩選列 -->
    <div class="card shadow-sm mb-4">
        <div class="card-body py-3">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small text-muted">搜尋</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white"><i class="fas fa-search text-muted"></i></span>
                        <input type="text" class="form-control" id="searchInput" placeholder="商品名稱或內容...">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted">類型</label>
                    <select class="form-select" id="filterType">
                        <option value="">全部類型</option>
                        <option value="copy">銷售文案</option>
                        <option value="recommend">商品推薦</option>
                        <option value="weather_analysis">天氣分析</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted">收藏</label>
                    <select class="form-select" id="filterFavorite">
                        <option value="">全部</option>
                        <option value="true">僅收藏</option>
                        <option value="false">未收藏</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted">開始日期</label>
                    <input type="date" class="form-control" id="filterStartDate">
                </div>
                <div class="col-md-2">
                    <label class="form-label small text-muted">結束日期</label>
                    <input type="date" class="form-control" id="filterEndDate">
                </div>
                <div class="col-md-1">
                    <button class="btn btn-outline-secondary w-100" onclick="resetFilters()">
                        <i class="fas fa-undo"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 批次操作列 -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div class="d-flex align-items-center gap-2">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="selectAll">
                <label class="form-check-label" for="selectAll">全選</label>
            </div>
            <button class="btn btn-outline-danger btn-sm" id="batchDeleteBtn" disabled onclick="batchDelete()">
                <i class="fas fa-trash me-1"></i>批次刪除 (<span id="selectedCount">0</span>)
            </button>
        </div>
        <div class="text-muted small">
            共 <strong id="totalCount">0</strong> 筆記錄
        </div>
    </div>

    <!-- 歷史記錄列表 -->
    <div id="historyList">
        <!-- 動態載入 -->
    </div>

    <!-- 分頁 -->
    <nav aria-label="Page navigation" class="mt-4">
        <ul class="pagination justify-content-center" id="pagination">
            <!-- 動態生成 -->
        </ul>
    </nav>
</div>

<!-- 編輯 Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>編輯文案
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editId">

                <div class="mb-3">
                    <label class="form-label fw-bold">商品名稱</label>
                    <input type="text" class="form-control" id="editProductName" readonly>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">生成內容</label>
                    <textarea class="form-control" id="editContent" rows="6"></textarea>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <label class="form-label fw-bold">評分</label>
                        <div class="rating-stars" id="editRating">
                            <i class="fas fa-star" data-rating="1"></i>
                            <i class="fas fa-star" data-rating="2"></i>
                            <i class="fas fa-star" data-rating="3"></i>
                            <i class="fas fa-star" data-rating="4"></i>
                            <i class="fas fa-star" data-rating="5"></i>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">收藏</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="editFavorite">
                            <label class="form-check-label" for="editFavorite">標記為收藏</label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">已使用</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="editUsed">
                            <label class="form-check-label" for="editUsed">標記為已使用</label>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <label class="form-label fw-bold">備註</label>
                    <textarea class="form-control" id="editNotes" rows="2" placeholder="添加備註..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveEdit()">
                    <i class="fas fa-save me-1"></i>儲存變更
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 複製成功 Toast -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="copyToast" class="toast" role="alert">
        <div class="toast-header bg-success text-white">
            <i class="fas fa-check-circle me-2"></i>
            <strong class="me-auto">複製成功</strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            文案已複製到剪貼簿
        </div>
    </div>
</div>

<style>
.history-card {
    transition: all 0.2s ease;
    border: 1px solid #e9ecef;
}
.history-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.history-card.selected {
    border-color: #0d6efd;
    background-color: #f8f9ff;
}
.copy-content {
    max-height: 120px;
    overflow: hidden;
    position: relative;
}
.copy-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, white);
}
.rating-stars i {
    color: #dee2e6;
    cursor: pointer;
    font-size: 1.2rem;
    margin-right: 2px;
    transition: color 0.2s;
}
.rating-stars i.active,
.rating-stars i:hover {
    color: #ffc107;
}
.badge-type {
    font-size: 0.7rem;
    font-weight: 500;
}
.keyword-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
let currentPage = 1;
let perPage = 10;
let selectedIds = new Set();
let currentRating = 0;

// 頁面載入
document.addEventListener('DOMContentLoaded', function() {
    loadStatistics();
    loadHistory();

    // 搜尋防抖
    let searchTimeout;
    document.getElementById('searchInput').addEventListener('input', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            currentPage = 1;
            loadHistory();
        }, 300);
    });

    // 篩選變更
    ['filterType', 'filterFavorite', 'filterStartDate', 'filterEndDate'].forEach(id => {
        document.getElementById(id).addEventListener('change', () => {
            currentPage = 1;
            loadHistory();
        });
    });

    // 全選
    document.getElementById('selectAll').addEventListener('change', function() {
        document.querySelectorAll('.history-checkbox').forEach(cb => {
            cb.checked = this.checked;
            updateSelection(parseInt(cb.dataset.id), this.checked);
        });
    });

    // 評分星星點擊
    document.querySelectorAll('#editRating i').forEach(star => {
        star.addEventListener('click', function() {
            currentRating = parseInt(this.dataset.rating);
            updateStars(currentRating);
        });
        star.addEventListener('mouseenter', function() {
            updateStars(parseInt(this.dataset.rating));
        });
    });
    document.getElementById('editRating').addEventListener('mouseleave', function() {
        updateStars(currentRating);
    });
});

// 載入統計資料
async function loadStatistics() {
    try {
        const response = await fetch('/api/ai/statistics?days=30');
        const result = await response.json();
        if (result.success) {
            const stats = result.data;
            document.getElementById('statTotal').textContent = stats.total_count;
            document.getElementById('statFavorite').textContent = stats.favorite_count;
            document.getElementById('statUsed').textContent = stats.used_count;
            document.getElementById('statDuration').textContent = stats.avg_duration;
        }
    } catch (error) {
        console.error('載入統計失敗:', error);
    }
}

// 載入歷史記錄
async function loadHistory() {
    const params = new URLSearchParams({
        page: currentPage,
        per_page: perPage
    });

    const search = document.getElementById('searchInput').value;
    const type = document.getElementById('filterType').value;
    const favorite = document.getElementById('filterFavorite').value;
    const startDate = document.getElementById('filterStartDate').value;
    const endDate = document.getElementById('filterEndDate').value;

    if (search) params.append('search', search);
    if (type) params.append('type', type);
    if (favorite) params.append('favorite', favorite);
    if (startDate) params.append('start_date', startDate);
    if (endDate) params.append('end_date', endDate);

    try {
        const response = await fetch(`/api/ai/history?${params}`);
        const result = await response.json();

        if (result.success) {
            renderHistory(result.data.items);
            renderPagination(result.data);
            document.getElementById('totalCount').textContent = result.data.total;
        }
    } catch (error) {
        console.error('載入歷史失敗:', error);
        document.getElementById('historyList').innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle me-2"></i>載入失敗，請稍後再試
            </div>
        `;
    }
}

// 渲染歷史列表
function renderHistory(items) {
    const container = document.getElementById('historyList');

    if (items.length === 0) {
        container.innerHTML = `
            <div class="text-center py-5">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <p class="text-muted">尚無生成記錄</p>
                <a href="/ai_recommend" class="btn btn-primary">
                    <i class="fas fa-magic me-1"></i>開始生成文案
                </a>
            </div>
        `;
        return;
    }

    container.innerHTML = items.map(item => {
        const typeLabels = {
            'copy': { text: '銷售文案', class: 'bg-primary' },
            'recommend': { text: '商品推薦', class: 'bg-success' },
            'weather_analysis': { text: '天氣分析', class: 'bg-info' }
        };
        const typeInfo = typeLabels[item.generation_type] || { text: item.generation_type, class: 'bg-secondary' };

        const keywords = item.input_keywords || [];
        const date = new Date(item.created_at).toLocaleString('zh-TW');

        return `
            <div class="card history-card mb-3 ${selectedIds.has(item.id) ? 'selected' : ''}" data-id="${item.id}">
                <div class="card-body">
                    <div class="row">
                        <div class="col-auto d-flex align-items-start">
                            <input type="checkbox" class="form-check-input history-checkbox mt-1"
                                   data-id="${item.id}" ${selectedIds.has(item.id) ? 'checked' : ''}
                                   onchange="updateSelection(${item.id}, this.checked)">
                        </div>
                        <div class="col">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <span class="badge ${typeInfo.class} badge-type me-2">${typeInfo.text}</span>
                                    <strong class="fs-5">${escapeHtml(item.product_name || '未命名')}</strong>
                                    ${item.is_favorite ? '<i class="fas fa-star text-warning ms-2"></i>' : ''}
                                    ${item.is_used ? '<span class="badge bg-success-subtle text-success ms-2">已使用</span>' : ''}
                                </div>
                                <div class="text-muted small">
                                    <i class="fas fa-clock me-1"></i>${date}
                                </div>
                            </div>

                            ${keywords.length > 0 ? `
                                <div class="mb-2">
                                    ${keywords.map(k => `<span class="badge bg-light text-dark keyword-badge me-1">#${escapeHtml(k)}</span>`).join('')}
                                </div>
                            ` : ''}

                            <div class="copy-content bg-light rounded p-3 mb-3">
                                <p class="mb-0 text-break">${escapeHtml(item.output_content)}</p>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <div class="small text-muted">
                                    <span class="me-3"><i class="fas fa-microchip me-1"></i>${item.model_name || '-'}</span>
                                    ${item.generation_duration ? `<span><i class="fas fa-stopwatch me-1"></i>${item.generation_duration}秒</span>` : ''}
                                    ${item.input_style ? `<span class="ms-3"><i class="fas fa-palette me-1"></i>${item.input_style}</span>` : ''}
                                </div>
                                <div class="btn-group btn-group-sm">
                                    <button class="btn btn-outline-secondary" onclick="copyContent('${escapeAttr(item.output_content)}')" title="複製">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                    <button class="btn btn-outline-warning" onclick="toggleFavorite(${item.id})" title="${item.is_favorite ? '取消收藏' : '收藏'}">
                                        <i class="fas fa-star"></i>
                                    </button>
                                    <button class="btn btn-outline-primary" onclick="openEdit(${item.id})" title="編輯">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="btn btn-outline-danger" onclick="deleteItem(${item.id})" title="刪除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

// 渲染分頁
function renderPagination(data) {
    const pagination = document.getElementById('pagination');
    const totalPages = data.total_pages;

    if (totalPages <= 1) {
        pagination.innerHTML = '';
        return;
    }

    let html = '';

    // 上一頁
    html += `<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="goToPage(${currentPage - 1})">
            <i class="fas fa-chevron-left"></i>
        </a>
    </li>`;

    // 頁碼
    const startPage = Math.max(1, currentPage - 2);
    const endPage = Math.min(totalPages, currentPage + 2);

    if (startPage > 1) {
        html += `<li class="page-item"><a class="page-link" href="#" onclick="goToPage(1)">1</a></li>`;
        if (startPage > 2) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
    }

    for (let i = startPage; i <= endPage; i++) {
        html += `<li class="page-item ${i === currentPage ? 'active' : ''}">
            <a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>
        </li>`;
    }

    if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
            html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
        }
        html += `<li class="page-item"><a class="page-link" href="#" onclick="goToPage(${totalPages})">${totalPages}</a></li>`;
    }

    // 下一頁
    html += `<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="goToPage(${currentPage + 1})">
            <i class="fas fa-chevron-right"></i>
        </a>
    </li>`;

    pagination.innerHTML = html;
}

function goToPage(page) {
    currentPage = page;
    loadHistory();
    window.scrollTo({ top: 0, behavior: 'smooth' });
}

// 選擇管理
function updateSelection(id, checked) {
    if (checked) {
        selectedIds.add(id);
    } else {
        selectedIds.delete(id);
    }

    const count = selectedIds.size;
    document.getElementById('selectedCount').textContent = count;
    document.getElementById('batchDeleteBtn').disabled = count === 0;

    // 更新卡片樣式
    const card = document.querySelector(`.history-card[data-id="${id}"]`);
    if (card) {
        card.classList.toggle('selected', checked);
    }
}

// 複製內容
function copyContent(content) {
    navigator.clipboard.writeText(content).then(() => {
        const toast = new bootstrap.Toast(document.getElementById('copyToast'));
        toast.show();
    });
}

// 切換收藏
async function toggleFavorite(id) {
    try {
        const response = await fetch(`/api/ai/history/${id}/favorite`, { method: 'POST' });
        const result = await response.json();
        if (result.success) {
            loadHistory();
            loadStatistics();
        }
    } catch (error) {
        console.error('切換收藏失敗:', error);
    }
}

// 開啟編輯
async function openEdit(id) {
    try {
        const response = await fetch(`/api/ai/history/${id}`);
        const result = await response.json();

        if (result.success) {
            const item = result.data;
            document.getElementById('editId').value = item.id;
            document.getElementById('editProductName').value = item.product_name || '';
            document.getElementById('editContent').value = item.output_content;
            document.getElementById('editFavorite').checked = item.is_favorite;
            document.getElementById('editUsed').checked = item.is_used;
            document.getElementById('editNotes').value = item.notes || '';

            currentRating = item.rating || 0;
            updateStars(currentRating);

            new bootstrap.Modal(document.getElementById('editModal')).show();
        }
    } catch (error) {
        console.error('載入詳情失敗:', error);
    }
}

function updateStars(rating) {
    document.querySelectorAll('#editRating i').forEach(star => {
        star.classList.toggle('active', parseInt(star.dataset.rating) <= rating);
    });
}

// 儲存編輯
async function saveEdit() {
    const id = document.getElementById('editId').value;

    try {
        const response = await fetch(`/api/ai/history/${id}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                output_content: document.getElementById('editContent').value,
                rating: currentRating || null,
                is_favorite: document.getElementById('editFavorite').checked,
                is_used: document.getElementById('editUsed').checked,
                notes: document.getElementById('editNotes').value
            })
        });

        const result = await response.json();
        if (result.success) {
            bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
            loadHistory();
            loadStatistics();
        } else {
            alert('儲存失敗: ' + result.error);
        }
    } catch (error) {
        console.error('儲存失敗:', error);
        alert('儲存失敗');
    }
}

// 刪除單筆
async function deleteItem(id) {
    if (!confirm('確定要刪除這筆記錄嗎？')) return;

    try {
        const response = await fetch(`/api/ai/history/${id}`, { method: 'DELETE' });
        const result = await response.json();
        if (result.success) {
            loadHistory();
            loadStatistics();
        }
    } catch (error) {
        console.error('刪除失敗:', error);
    }
}

// 批次刪除
async function batchDelete() {
    if (!confirm(`確定要刪除選取的 ${selectedIds.size} 筆記錄嗎？`)) return;

    try {
        const response = await fetch('/api/ai/history/batch', {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ ids: Array.from(selectedIds) })
        });

        const result = await response.json();
        if (result.success) {
            selectedIds.clear();
            document.getElementById('selectedCount').textContent = '0';
            document.getElementById('batchDeleteBtn').disabled = true;
            document.getElementById('selectAll').checked = false;
            loadHistory();
            loadStatistics();
        }
    } catch (error) {
        console.error('批次刪除失敗:', error);
    }
}

// 重置篩選
function resetFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('filterType').value = '';
    document.getElementById('filterFavorite').value = '';
    document.getElementById('filterStartDate').value = '';
    document.getElementById('filterEndDate').value = '';
    currentPage = 1;
    loadHistory();
}

// 工具函數
function escapeHtml(text) {
    if (!text) return '';
    return String(text)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function escapeAttr(text) {
    if (!text) return '';
    return String(text)
        .replace(/\\/g, '\\\\')
        .replace(/'/g, "\\'")
        .replace(/"/g, '\\"')
        .replace(/\n/g, '\\n')
        .replace(/\r/g, '\\r');
}
</script>
{% endblock extra_js %}