<?php
// Scheduled Blogs UI (using design template)
if ( ! defined( 'ABSPATH' ) ) exit;

// Load the scheduled blog widgets class
require_once __DIR__ . '/ScheduledBlogWidgets.php';

// Get dynamic data
$stats = Blog82AI_ScheduledBlog_Widgets::get_schedule_stats();
$categories = Blog82AI_ScheduledBlog_Widgets::get_categories_for_dropdown();
$schedules = Blog82AI_ScheduledBlog_Widgets::get_all_schedules();
$scheduled_categories = Blog82AI_ScheduledBlog_Widgets::get_scheduled_categories();
?>
<div class="blog82ai-scheduled-blogs">
    <!-- Page header -->
    <div class="page-header">
        <h2>Schedule Blog</h2>
        <p>Schedule AI-generated blog posts to run automatically for selected categories.</p>
    </div>
    <?php // Schedule Statistics on top ?>
    <div class="blog82ai-schedule-stats">
        <h3>Schedule Statistics</h3>
        <div class="blog82ai-stats-grid">
            <div class="blog82ai-stat-item">
                <div class="blog82ai-stat-icon">🗓️</div>
                <div class="blog82ai-stat-value"><?php echo esc_html($stats['total_schedules']); ?></div>
                <div class="blog82ai-stat-label">Total Schedules</div>
            </div>
            <div class="blog82ai-stat-item">
                <div class="blog82ai-stat-icon">🟢</div>
                <div class="blog82ai-stat-value"><?php echo esc_html($stats['active_schedules']); ?></div>
                <div class="blog82ai-stat-label">Active</div>
            </div>
            <div class="blog82ai-stat-item">
                <div class="blog82ai-stat-icon">⏸️</div>
                <div class="blog82ai-stat-value"><?php echo esc_html($stats['paused_schedules']); ?></div>
                <div class="blog82ai-stat-label">Paused</div>
            </div>
            <div class="blog82ai-stat-item">
                <div class="blog82ai-stat-icon">📝</div>
                <div class="blog82ai-stat-value"><?php echo esc_html($stats['blogs_this_week']); ?></div>
                <div class="blog82ai-stat-label">Blogs Generated This Week</div>
            </div>
        </div>
    </div>

            
    <?php // Blog Scheduler section ?>
    <div class="blog82ai-scheduler-section">
        <h3>Blog Scheduler</h3>
        <form class="scheduler-form" id="blog82ai-scheduler-form">
            <?php wp_nonce_field('blog82ai_admin_action', 'blog82ai_schedule_nonce'); ?>
            <div class="form-row">
                <div class="form-group">
                    <label for="schedule-category">Category</label>
                    <select id="schedule-category" name="category" required>
                        <option value="">Select Category</option>
                        <?php foreach ($categories as $category): ?>
                            <option value="<?php echo esc_attr($category['value']); ?>">
                                <?php echo esc_html($category['label']); ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group">
                    <label for="schedule-date">Start Date</label>
                    <input type="date" id="schedule-date" name="start_date" required min="<?php echo date('Y-m-d'); ?>">
                </div>
                <div class="form-group">
                    <label for="schedule-time">Run Time</label>
                    <input type="time" id="schedule-time" name="run_time" required>
                </div>
                <div class="form-group">
                    <label for="schedule-frequency">Frequency</label>
                    <select id="schedule-frequency" name="frequency">
                        <option value="daily">Daily</option>
                        <option value="weekly">Weekly</option>
                        <option value="monthly">Monthly</option>
                        <option value="custom">Custom</option>
                    </select>
                </div>
                <div class="form-group">
                    <button type="submit" class="button button-primary">Schedule Blog</button>
                </div>
            </div>
        </form>
    </div>
    <?php // Active Schedules table ?>
    <div class="blog82ai-scheduled-blogs-table">
        <h3>Active Schedules</h3>
        

        <div class="blog82ai-table-filters">
            <div class="form-row">
            <div class="form-group">
                <label for="filter-category">Filter by Category:</label>
                <select id="filter-category" onchange="filterByCategory()">
                    <option value="">All Categories</option>
                    <?php foreach ($scheduled_categories as $category): ?>
                        <option value="<?php echo esc_attr($category); ?>">
                            <?php echo esc_html($category); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="form-group">
                <label for="filter-status">Filter by Status:</label>
                <select id="filter-status" onchange="filterByStatus()">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="paused">Paused</option>
                    <option value="completed">Completed</option>
                </select>
            </div>
            <div class="form-group">
                <input type="text" id="search-schedules" placeholder="Search schedules..." oninput="searchSchedules()">
            </div>
            <div class="form-group">
                <button type="button" class="button" onclick="clearAllFilters()">Clear Filters</button>
            </div>
            </div>
        </div>
        <div class="blog82ai-schedule-table-wrapper">
        <table class="blog82ai-schedule-table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="select-all-schedules"></th>
                    <th>Category</th>
                    <th>Start Date</th>
                    <th>Run Time</th>
                    <th>Frequency</th>
                    <th>Next Run</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="blog82ai-schedules-tbody">
                <?php if (!empty($schedules)): ?>
                    <?php foreach ($schedules as $schedule): ?>
                        <tr data-category="<?php echo esc_attr($schedule['category']); ?>" data-status="<?php echo esc_attr($schedule['status']); ?>">
                            <td><input type="checkbox" class="schedule-checkbox" value="<?php echo esc_attr($schedule['id']); ?>"></td>
                            <td>
                                <strong><?php echo esc_html($schedule['category_hierarchy']); ?></strong>
                                <div class="row-actions">
                                    <span class="edit"><a href="#" onclick="editSchedule('<?php echo esc_js($schedule['id']); ?>')">Edit</a> | </span>
                                    <span class="view"><a href="#" onclick="viewScheduleDetails('<?php echo esc_js($schedule['id']); ?>')">View Details</a></span>
                                </div>
                            </td>
                            <td><?php echo esc_html($schedule['start_date']); ?></td>
                            <td><?php echo esc_html($schedule['run_time']); ?></td>
                            <td><?php echo esc_html($schedule['frequency']); ?></td>
                            <td><?php echo esc_html($schedule['next_run']); ?></td>
                            <td>
                                <span class="status-badge status-<?php echo esc_attr($schedule['status']); ?>">
                                    <?php echo esc_html(strtoupper($schedule['status'])); ?>
                                </span>
                            </td>
                            <td>
                                <?php if ($schedule['status'] === 'paused'): ?>
                                        <button class="button button-small" aria-label="Resume schedule <?php echo esc_attr($schedule['id']); ?>" onclick="resumeSchedule('<?php echo esc_js($schedule['id']); ?>')">
                                            <span class="dashicons dashicons-controls-play" style="font-size: 12px; width: 12px; height: 12px;"></span> Resume
                                        </button>
                                    <?php else: ?>
                                        <button class="button button-small" aria-label="Pause schedule <?php echo esc_attr($schedule['id']); ?>" onclick="pauseSchedule('<?php echo esc_js($schedule['id']); ?>')">
                                            <span class="dashicons dashicons-controls-pause" style="font-size: 12px; width: 12px; height: 12px;"></span> Pause
                                        </button>
                                    <?php endif; ?>
                                    <button class="button button-small" aria-label="Delete schedule <?php echo esc_attr($schedule['id']); ?>" onclick="deleteSchedule('<?php echo esc_js($schedule['id']); ?>')">
                                        <span class="dashicons dashicons-trash" style="font-size: 12px; width: 12px; height: 12px;"></span> Delete
                                    </button>
                                    <button class="button button-small" aria-label="Generate blog now for <?php echo esc_attr($schedule['category']); ?>" onclick="fetchNow('<?php echo esc_js($schedule['category']); ?>')">
                                        <span class="dashicons dashicons-download" style="font-size: 12px; width: 12px; height: 12px;"></span> Fetch Now
                                    </button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="8" style="text-align: center; padding: 40px; color: #666;">
                            No schedules found. <a href="#" onclick="document.getElementById('schedule-category').focus()">Create your first schedule!</a>
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
        </div>
        <div class="blog82ai-bulk-actions">
            <select id="bulk-action">
                <option value="">Bulk Actions</option>
                <option value="pause">Pause Selected</option>
                <option value="resume">Resume Selected</option>
                <option value="delete">Delete Selected</option>
                <option value="fetch-now">Fetch Now (Selected)</option>
            </select>
            <button class="button" onclick="applyBulkAction()">Apply</button>
            <span class="displaying-num" style="margin-left: 20px;"><?php echo count($schedules); ?> total schedules</span>
        </div>
    </div>
</div>

<!-- Edit Schedule Modal -->
<div id="edit-schedule-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 500px; max-width: 90%;">
        <h3 style="margin-top: 0;">Edit Schedule</h3>
        <form id="edit-schedule-form">
            <input type="hidden" id="edit-schedule-id" name="schedule_id">
            <?php wp_nonce_field('blog82ai_admin_action', 'edit_schedule_nonce'); ?>
            
            <div style="margin-bottom: 20px;">
                <label for="edit-schedule-category" style="display: block; margin-bottom: 8px; font-weight: 500;">Category</label>
                <select id="edit-schedule-category" name="category" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="">Select Category</option>
                    <?php foreach ($categories as $category): ?>
                        <option value="<?php echo esc_attr($category['value']); ?>">
                            <?php echo esc_html($category['label']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            
            <div style="margin-bottom: 20px;">
                <label for="edit-schedule-date" style="display: block; margin-bottom: 8px; font-weight: 500;">Start Date</label>
                <input type="date" id="edit-schedule-date" name="start_date" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            
            <div style="margin-bottom: 20px;">
                <label for="edit-schedule-time" style="display: block; margin-bottom: 8px; font-weight: 500;">Run Time</label>
                <input type="time" id="edit-schedule-time" name="run_time" required style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            
            <div style="margin-bottom: 20px;">
                <label for="edit-schedule-frequency" style="display: block; margin-bottom: 8px; font-weight: 500;">Frequency</label>
                <select id="edit-schedule-frequency" name="frequency" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                    <option value="custom">Custom</option>
                </select>
            </div>
            
            <div style="text-align: right;">
                <button type="button" onclick="closeEditModal()" style="margin-right: 10px; padding: 8px 16px; border: 1px solid #ddd; background: #f7f7f7; border-radius: 4px;">Cancel</button>
                <button type="submit" style="padding: 8px 16px; border: none; background: #0073aa; color: white; border-radius: 4px;">Update Schedule</button>
            </div>
        </form>
    </div>
</div>

<!-- View Details Modal -->
<div id="view-details-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 500px; max-width: 90%;">
        <h3 style="margin-top: 0;">Schedule Details</h3>
        <div id="schedule-details-content">
            <!-- Details will be populated here -->
        </div>
        <div style="text-align: right; margin-top: 20px;">
            <button type="button" onclick="(typeof closeViewModal === 'function' ? closeViewModal() : (document.getElementById('view-details-modal') && (document.getElementById('view-details-modal').style.display='none')))" style="padding: 8px 16px; border: 1px solid #ddd; background: #f7f7f7; border-radius: 4px;">Close</button>
        </div>
    </div>
</div>

<!-- Confirmation Dialog Modal -->
<div id="confirmation-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10000;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
        <div style="text-align: center;">
            <div id="confirmation-icon" style="font-size: 48px; margin-bottom: 20px;">⚠️</div>
            <h3 id="confirmation-title" style="margin: 0 0 15px 0; color: #333;">Confirm Action</h3>
            <p id="confirmation-message" style="margin: 0 0 12px 0; color: #666; line-height: 1.5;">Are you sure you want to proceed?</p>

            <!-- Inline typed confirmation area (hidden by default). JS will show this when a typed confirmation is required -->
            <div id="confirmation-typed-area" style="display: none; margin: 8px 0 12px 0;">
                <label for="confirmation-input" style="display:block; margin-bottom:6px; font-weight:500; color:#333;">Type <strong>DELETE</strong> to confirm:</label>
                <input id="confirmation-input" type="text" placeholder="Type DELETE to confirm" style="width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;">
            </div>

            <div style="display: flex; gap: 10px; justify-content: center;">
                <button type="button" id="confirmation-cancel" onclick="(typeof closeConfirmationModal === 'function' ? closeConfirmationModal() : (document.getElementById('confirmation-modal') && (document.getElementById('confirmation-modal').style.display='none')))" 
                            style="padding: 10px 20px; border: 1px solid #ddd; background: #f7f7f7; border-radius: 4px; cursor: pointer; min-width: 80px;">
                    Cancel
                </button>
                <button type="button" id="confirmation-confirm" 
                        style="padding: 10px 20px; border: none; background: #dc3545; color: white; border-radius: 4px; cursor: pointer; min-width: 80px;">
                    Confirm
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Success/Error Message Modal -->
<div id="message-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10001;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 400px; max-width: 90%; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
        <div style="text-align: center;">
            <div id="message-icon" style="font-size: 48px; margin-bottom: 20px;">✅</div>
            <h3 id="message-title" style="margin: 0 0 15px 0; color: #333;">Success</h3>
            <p id="message-text" style="margin: 0 0 25px 0; color: #666; line-height: 1.5;">Operation completed successfully.</p>
            <button type="button" onclick="(typeof closeMessageModal === 'function' ? closeMessageModal() : (document.getElementById('message-modal') && (document.getElementById('message-modal').style.display='none')))" 
                    style="padding: 10px 20px; border: 1px solid #ddd; background: #0073aa; color: white; border-radius: 4px; cursor: pointer; min-width: 80px;">
                OK
            </button>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div id="loading-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 10002;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; width: 300px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
        <div style="font-size: 48px; margin-bottom: 20px;">⏳</div>
        <h3 style="margin: 0 0 15px 0; color: #333;">Processing...</h3>
        <p id="loading-message" style="margin: 0; color: #666;">Please wait while we process your request.</p>
    </div>
</div>
