<?php
/**
 * History Page Partial - Modern Design with Pagination
 *
 * @package    Ai_Magic
 * @subpackage Ai_Magic/admin/partials
 */

// Pagination & filter settings
$per_page = 20;
$current_page = isset($_GET['paged']) ? max(1, intval($_GET['paged'])) : 1;
$offset = ($current_page - 1) * $per_page;
$date_filter = isset($_GET['date_filter']) ? sanitize_text_field($_GET['date_filter']) : 'all';

// Date filter logic
$date_from = null;
$date_to = null;
switch ($date_filter) {
    case 'today':
        $date_from = date('Y-m-d 00:00:00');
        break;
    case 'yesterday':
        $date_from = date('Y-m-d 00:00:00', strtotime('-1 day'));
        $date_to = date('Y-m-d 23:59:59', strtotime('-1 day'));
        break;
    case '7days':
        $date_from = date('Y-m-d 00:00:00', strtotime('-7 days'));
        break;
    case '30days':
        $date_from = date('Y-m-d 00:00:00', strtotime('-30 days'));
        break;
}

$history = Ai_Magic_History::get_history(array(
    'user_id' => get_current_user_id(),
    'limit' => $per_page,
    'offset' => $offset,
    'date_from' => $date_from,
    'date_to' => $date_to
));
$total_count = Ai_Magic_History::get_count(get_current_user_id(), $date_from, $date_to);
$total_cost = Ai_Magic_History::get_total_cost(get_current_user_id(), $date_from, $date_to);
$total_pages = ceil($total_count / $per_page);
?>
<div class="ai-magic-wizard-wrap">
    <div class="ai-magic-wizard-header">
        <span class="dashicons dashicons-backup"></span>
        <h1>Content History</h1>
    </div>

    <!-- Stats Cards -->
    <div class="ai-magic-analytics-stats">
        <div class="ai-magic-card ai-magic-stat-card">
            <div class="ai-magic-stat-icon">
                <span class="dashicons dashicons-text-page"></span>
            </div>
            <div class="ai-magic-stat-content">
                <div class="ai-magic-stat-value"><?php echo number_format($total_count); ?></div>
                <div class="ai-magic-stat-label">Total Generations</div>
            </div>
        </div>
        <div class="ai-magic-card ai-magic-stat-card">
            <div class="ai-magic-stat-icon cost">
                <span class="dashicons dashicons-money-alt"></span>
            </div>
            <div class="ai-magic-stat-content">
                <div class="ai-magic-stat-value cost">$<?php echo number_format($total_cost, 4); ?></div>
                <div class="ai-magic-stat-label">Total Cost</div>
            </div>
        </div>
    </div>

    <!-- Search & Filter Box -->
    <div class="ai-magic-card" style="margin-bottom: 20px;">
        <div class="ai-magic-filter-row">
            <div class="ai-magic-search-box">
                <span class="dashicons dashicons-search"></span>
                <input type="text" id="ai-magic-history-search" placeholder="Search history..."
                    class="ai-magic-search-input">
            </div>
            <div class="ai-magic-date-filters">
                <?php
                $current_filter = isset($_GET['date_filter']) ? sanitize_text_field($_GET['date_filter']) : 'all';
                $base_url = admin_url('admin.php?page=ai-magic-history');
                ?>
                <a href="<?php echo esc_url(add_query_arg('date_filter', 'today', $base_url)); ?>"
                    class="ai-magic-filter-btn <?php echo $current_filter === 'today' ? 'active' : ''; ?>">
                    Today
                </a>
                <a href="<?php echo esc_url(add_query_arg('date_filter', 'yesterday', $base_url)); ?>"
                    class="ai-magic-filter-btn <?php echo $current_filter === 'yesterday' ? 'active' : ''; ?>">
                    Yesterday
                </a>
                <a href="<?php echo esc_url(add_query_arg('date_filter', '7days', $base_url)); ?>"
                    class="ai-magic-filter-btn <?php echo $current_filter === '7days' ? 'active' : ''; ?>">
                    Last 7 Days
                </a>
                <a href="<?php echo esc_url(add_query_arg('date_filter', '30days', $base_url)); ?>"
                    class="ai-magic-filter-btn <?php echo $current_filter === '30days' ? 'active' : ''; ?>">
                    Last 30 Days
                </a>
                <a href="<?php echo esc_url($base_url); ?>"
                    class="ai-magic-filter-btn <?php echo $current_filter === 'all' || !isset($_GET['date_filter']) ? 'active' : ''; ?>">
                    All Time
                </a>
            </div>
        </div>
    </div>

    <!-- History Table -->
    <div class="ai-magic-card">
        <div class="ai-magic-card-header">
            <h2>Generation History</h2>
            <span class="ai-magic-page-info">
                <?php if ($total_pages > 1): ?>
                    Page <?php echo $current_page; ?> of <?php echo $total_pages; ?> •
                <?php endif; ?>
                <?php echo number_format($total_count); ?> records
            </span>
        </div>

        <?php if (empty($history)): ?>
            <div class="ai-magic-empty-state">
                <span class="dashicons dashicons-edit"></span>
                <p>No history found</p>
                <span class="ai-magic-empty-hint">Start generating content to see your history</span>
            </div>
        <?php else: ?>
            <div class="ai-magic-table-wrap">
                <table class="ai-magic-table">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Model</th>
                            <th>Tokens</th>
                            <th>Cost</th>
                            <th>Time</th>
                            <th>Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($history as $item): ?>
                            <tr>
                                <td>
                                    <strong><?php echo esc_html($item->title ?: '(No Title)'); ?></strong>
                                    <?php if (!empty($item->post_id)): ?>
                                        <br>
                                        <a href="<?php echo get_edit_post_link($item->post_id); ?>" target="_blank"
                                            class="ai-magic-edit-link">
                                            Edit Post <span class="dashicons dashicons-external"></span>
                                        </a>
                                    <?php endif; ?>
                                </td>
                                <td><span class="ai-magic-badge"><?php echo esc_html($item->model); ?></span></td>
                                <td><?php echo number_format($item->tokens_used); ?></td>
                                <td class="cost">
                                    <?php echo isset($item->cost) ? '$' . number_format(floatval($item->cost), 4) : '-'; ?>
                                </td>
                                <td><?php echo number_format($item->generation_time, 2); ?>s</td>
                                <td><?php echo date('M d, Y H:i', strtotime($item->created_at)); ?></td>
                                <td>
                                    <div class="ai-magic-action-buttons">
                                        <button class="ai-magic-btn ai-magic-btn-small ai-magic-view-btn"
                                            data-id="<?php echo $item->id; ?>">
                                            <span class="dashicons dashicons-visibility"></span>
                                        </button>
                                        <button class="ai-magic-btn ai-magic-btn-small ai-magic-btn-danger ai-magic-delete-btn"
                                            data-id="<?php echo $item->id; ?>">
                                            <span class="dashicons dashicons-trash"></span>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <?php if ($total_pages > 1): ?>
                <div class="ai-magic-pagination">
                    <?php
                    $base_url = admin_url('admin.php?page=ai-magic-history');

                    // Previous button
                    if ($current_page > 1): ?>
                        <a href="<?php echo esc_url(add_query_arg('paged', $current_page - 1, $base_url)); ?>"
                            class="ai-magic-btn ai-magic-btn-small">
                            <span class="dashicons dashicons-arrow-left-alt2"></span> Previous
                        </a>
                    <?php else: ?>
                        <span class="ai-magic-btn ai-magic-btn-small disabled">
                            <span class="dashicons dashicons-arrow-left-alt2"></span> Previous
                        </span>
                    <?php endif; ?>

                    <!-- Page numbers -->
                    <div class="ai-magic-page-numbers">
                        <?php
                        // Show first page
                        if ($current_page > 3): ?>
                            <a href="<?php echo esc_url(add_query_arg('paged', 1, $base_url)); ?>" class="ai-magic-page-num">1</a>
                            <?php if ($current_page > 4): ?>
                                <span class="ai-magic-page-dots">...</span>
                            <?php endif; ?>
                        <?php endif;

                        // Show surrounding pages
                        for ($i = max(1, $current_page - 2); $i <= min($total_pages, $current_page + 2); $i++): ?>
                            <?php if ($i == $current_page): ?>
                                <span class="ai-magic-page-num current"><?php echo $i; ?></span>
                            <?php else: ?>
                                <a href="<?php echo esc_url(add_query_arg('paged', $i, $base_url)); ?>"
                                    class="ai-magic-page-num"><?php echo $i; ?></a>
                            <?php endif; ?>
                        <?php endfor;

                        // Show last page
                        if ($current_page < $total_pages - 2): ?>
                            <?php if ($current_page < $total_pages - 3): ?>
                                <span class="ai-magic-page-dots">...</span>
                            <?php endif; ?>
                            <a href="<?php echo esc_url(add_query_arg('paged', $total_pages, $base_url)); ?>"
                                class="ai-magic-page-num"><?php echo $total_pages; ?></a>
                        <?php endif; ?>
                    </div>

                    <!-- Next button -->
                    <?php if ($current_page < $total_pages): ?>
                        <a href="<?php echo esc_url(add_query_arg('paged', $current_page + 1, $base_url)); ?>"
                            class="ai-magic-btn ai-magic-btn-small">
                            Next <span class="dashicons dashicons-arrow-right-alt2"></span>
                        </a>
                    <?php else: ?>
                        <span class="ai-magic-btn ai-magic-btn-small disabled">
                            Next <span class="dashicons dashicons-arrow-right-alt2"></span>
                        </span>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</div>

<!-- View Modal -->
<div id="ai-magic-view-modal" class="ai-magic-modal">
    <div class="ai-magic-modal-content">
        <div class="ai-magic-modal-header">
            <h2 id="ai-magic-modal-title">Content Details</h2>
            <span class="ai-magic-close">&times;</span>
        </div>
        <div class="ai-magic-modal-body">
            <div class="ai-magic-modal-section">
                <h3>Prompt</h3>
                <div id="ai-magic-modal-prompt" class="ai-magic-modal-content-box"></div>
            </div>
            <div class="ai-magic-modal-section">
                <h3>Generated Content</h3>
                <div id="ai-magic-modal-content" class="ai-magic-modal-content-box"></div>
            </div>
        </div>
    </div>
</div>

<style>
    .ai-magic-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 20px;
        border-top: 1px solid #e5e7eb;
        margin-top: 10px;
    }

    .ai-magic-pagination-info {
        font-size: 13px;
        color: #6b7280;
        margin-right: auto;
    }

    .ai-magic-page-numbers {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .ai-magic-page-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        background: #f3f4f6;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        text-decoration: none;
        color: #374151;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.2s;
    }

    .ai-magic-page-num:hover {
        background: #e5e7eb;
        border-color: #d1d5db;
        color: #1f2937;
    }

    .ai-magic-page-num.current {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        border-color: #7c3aed;
        color: #fff;
    }

    .ai-magic-page-dots {
        padding: 0 8px;
        color: #9ca3af;
        font-size: 14px;
    }

    .ai-magic-pagination .ai-magic-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        font-size: 13px;
        font-weight: 600;
        background: #f3f4f6;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        color: #374151;
        text-decoration: none;
        transition: all 0.2s;
    }

    .ai-magic-pagination .ai-magic-btn:hover {
        background: #e5e7eb;
        border-color: #d1d5db;
    }

    .ai-magic-pagination .ai-magic-btn.disabled {
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
    }

    .ai-magic-pagination .ai-magic-btn .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    .ai-magic-page-info {
        font-size: 13px;
        color: #6b7280;
        margin-left: auto;
    }

    .ai-magic-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Filter Row */
    .ai-magic-filter-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
    }

    .ai-magic-filter-row .ai-magic-search-box {
        flex: 1;
        min-width: 200px;
        position: relative;
        display: flex;
        align-items: center;
    }

    .ai-magic-filter-row .ai-magic-search-box .dashicons {
        position: absolute;
        left: 14px;
        color: #9ca3af;
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

    .ai-magic-filter-row .ai-magic-search-input {
        width: 100%;
        padding: 12px 14px 12px 42px;
        border: 2px solid #e5e7eb;
        border-radius: 10px;
        font-size: 14px;
        background: #fff;
        transition: all 0.2s ease;
        color: #1d2327;
    }

    .ai-magic-filter-row .ai-magic-search-input:hover {
        border-color: #d1d5db;
    }

    .ai-magic-filter-row .ai-magic-search-input:focus {
        outline: none;
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
    }

    .ai-magic-filter-row .ai-magic-search-input::placeholder {
        color: #9ca3af;
    }

    .ai-magic-date-filters {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .ai-magic-filter-btn {
        display: inline-flex;
        align-items: center;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 500;
        background: #f3f4f6;
        border: 2px solid #e5e7eb;
        border-radius: 20px;
        color: #374151;
        text-decoration: none;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .ai-magic-filter-btn:hover {
        background: #e5e7eb;
        border-color: #d1d5db;
        color: #1f2937;
    }

    .ai-magic-filter-btn.active {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        border-color: #7c3aed;
        color: #fff;
    }

    @media (max-width: 768px) {
        .ai-magic-filter-row {
            flex-direction: column;
            align-items: stretch;
        }

        .ai-magic-date-filters {
            justify-content: center;
        }
    }
</style>