<?php
/**
 * Options Page Builder Admin Page Template
 * 3-column layout: Left (Options Pages List), Middle (Editor), Right (Quick Add Fields)
 *
 * @package Switchboard
 * @since 1.0.0
 */

if (!defined('ABSPATH')) {
    exit;
}

// Determine current action
$action = isset($_GET['action']) ? sanitize_text_field($_GET['action']) : '';
$page_id = isset($_GET['page_id']) ? sanitize_key($_GET['page_id']) : '';

// Get page data if editing
$page_data = null;
if ($action === 'edit' && !empty($page_id)) {
    foreach ($options_pages as $page) {
        if (isset($page['id']) && $page['id'] === $page_id) {
            $page_data = $page;
            break;
        }
    }
} elseif ($action === 'add') {
    $page_data = [
        'id' => '',
        'page_title' => '',
        'menu_title' => '',
        'slug' => '',
        'parent_slug' => '',
        'capability' => 'manage_options',
        'icon' => '',
        'position' => '',
        'fields' => []
    ];
}

// Enqueue page data for JavaScript
if ($page_data) {
    wp_localize_script('switchboard-opb-admin', 'switchboard_opb_page_data', $page_data);
}
?>

<div class="wrap sb-module-wrap">
    <!-- Header -->
    <div class="sb-module-header">
        <div class="sb-module-header-left">
            <svg class="sb-module-title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
            </svg>
            <div>
                <h1 class="sb-module-title">
                    <?php if ($action === 'add'): ?>
                        <?php esc_html_e('Creating Options Page', 'wpswitchboard'); ?>
                    <?php elseif ($action === 'edit'): ?>
                        <?php esc_html_e('Editing Options Page', 'wpswitchboard'); ?>
                    <?php else: ?>
                        <?php esc_html_e('Options Page Builder', 'wpswitchboard'); ?>
                    <?php endif; ?>
                    <span class="switchboard-badge">SWITCHBOARD PRO</span>
                </h1>
                <p class="sb-module-subtitle">
                    <?php if ($action === 'add'): ?>
                        <?php esc_html_e('Create a new custom admin page with settings fields', 'wpswitchboard'); ?>
                    <?php elseif ($action === 'edit'): ?>
                        <?php esc_html_e('Edit your options page settings and fields', 'wpswitchboard'); ?>
                    <?php else: ?>
                        <?php esc_html_e('Create custom admin pages with settings panels to store site options and configuration', 'wpswitchboard'); ?>
                    <?php endif; ?>
                </p>
            </div>
        </div>
        <div class="sb-module-header-right">
            <a href="https://docs.wpswitchboard.com/modules/admin/options-page-builder" target="_blank" class="sb-module-help-link">
                <span class="sb-module-help-link-icon dashicons dashicons-editor-help"></span>
                Help
            </a>
            <?php if ($action === 'add' || $action === 'edit'): ?>
                <a href="<?php echo esc_url(admin_url('admin.php?page=switchboard-options-page-builder')); ?>" class="sb-module-button sb-module-button-secondary">
                    <?php esc_html_e('Go Back', 'wpswitchboard'); ?>
                </a>
            <?php else: ?>
                <a href="<?php echo esc_url(admin_url('admin.php?page=switchboard-options-page-builder&action=add')); ?>" class="sb-module-button sb-module-button-primary">
                    <?php esc_html_e('Add New Page', 'wpswitchboard'); ?>
                </a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Main Content -->
    <div class="sb-module-container">
        <?php if ($action === ''): ?>
            <!-- Default Dashboard View -->
            <!-- Stats Cards -->
            <div class="sb-module-stats">
                <div class="sb-module-stat-card">
                    <div class="sb-module-stat-label"><?php esc_html_e('Options Pages', 'wpswitchboard'); ?></div>
                    <div class="sb-module-stat-content">
                        <div class="sb-module-stat-value"><?php echo count($options_pages); ?></div>
                    </div>
                </div>

                <div class="sb-module-stat-card">
                    <div class="sb-module-stat-label"><?php esc_html_e('Total Fields', 'wpswitchboard'); ?></div>
                    <div class="sb-module-stat-content">
                        <div class="sb-module-stat-value">
                            <?php
                            $total_fields = 0;
                            foreach ($options_pages as $page) {
                                $total_fields += count($page['fields'] ?? []);
                            }
                            echo $total_fields;
                            ?>
                        </div>
                    </div>
                </div>

                <div class="sb-module-stat-card">
                    <div class="sb-module-stat-label"><?php esc_html_e('Active Pages', 'wpswitchboard'); ?></div>
                    <div class="sb-module-stat-content">
                        <div class="sb-module-stat-value"><?php echo count($options_pages); ?></div>
                    </div>
                </div>
            </div>

            <?php if (empty($options_pages)): ?>
                <!-- Empty State -->
                <div class="opb-empty-state">
                    <div class="opb-empty-state-icon">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
                        </svg>
                    </div>
                    <h3 class="opb-empty-state-title"><?php esc_html_e('No options pages yet', 'wpswitchboard'); ?></h3>
                    <p class="opb-empty-state-desc"><?php esc_html_e('Here are some ideas to get you started', 'wpswitchboard'); ?></p>

                    <!-- Use Cases Grid -->
                    <div class="opb-use-cases-grid">
                        <div class="opb-use-case-card">
                            <h4 class="opb-use-case-title">Site Settings Hub</h4>
                            <p class="opb-use-case-desc">Create centralized options page for client to manage social media links, contact information, and opening hours without touching theme code.</p>
                        </div>
                        <div class="opb-use-case-card">
                            <h4 class="opb-use-case-title">Plugin Settings Organization</h4>
                            <p class="opb-use-case-desc">Consolidate scattered plugin settings into single organized options page instead of having 10 different menu items.</p>
                        </div>
                        <div class="opb-use-case-card">
                            <h4 class="opb-use-case-title">Theme Options Panel</h4>
                            <p class="opb-use-case-desc">Build custom theme settings page for colors, layouts, and features without requiring expensive page builder or theme framework.</p>
                        </div>
                    </div>

                    <a href="<?php echo esc_url(admin_url('admin.php?page=switchboard-options-page-builder&action=add')); ?>" class="opb-empty-state-btn">
                        <span class="dashicons dashicons-plus-alt"></span>
                        <?php esc_html_e('Create Options Page', 'wpswitchboard'); ?>
                    </a>
                </div>
            <?php else: ?>
                <div class="opb-pages-grid">
                    <?php foreach ($options_pages as $page_id => $page):
                        $field_count = count($page['fields'] ?? []);
                    ?>
                        <a href="<?php echo esc_url(admin_url('admin.php?page=switchboard-options-page-builder&action=edit&page_id=' . urlencode($page['id']))); ?>" class="opb-page-card">
                            <h3 class="opb-page-card-title"><?php echo esc_html($page['page_title']); ?></h3>
                            <code class="opb-page-card-slug"><?php echo esc_html($page['slug']); ?></code>
                            <div class="opb-page-card-badges">
                                <span class="opb-page-card-badge"><?php echo $field_count . ' ' . ($field_count !== 1 ? esc_html__('fields', 'wpswitchboard') : esc_html__('field', 'wpswitchboard')); ?></span>
                                <span class="opb-page-card-badge"><?php echo esc_html(empty($page['parent_slug']) ? 'Top Level' : 'Submenu', 'wpswitchboard'); ?></span>
                            </div>
                            <span class="opb-page-card-status opb-page-card-status-active"><?php esc_html_e('Active', 'wpswitchboard'); ?></span>
                            <div class="opb-page-card-overlay">
                                <span class="dashicons dashicons-edit"></span>
                            </div>
                        </a>
                    <?php endforeach; ?>

                    <!-- Add New Card -->
                    <a href="<?php echo esc_url(admin_url('admin.php?page=switchboard-options-page-builder&action=add')); ?>" class="opb-page-card opb-page-card-add">
                        <h3 class="opb-page-card-add-title"><?php esc_html_e('New Options Page', 'wpswitchboard'); ?></h3>
                        <p class="opb-page-card-add-desc"><?php esc_html_e('Click to create', 'wpswitchboard'); ?></p>
                        <div class="opb-page-card-add-icon">
                            <span class="dashicons dashicons-plus-alt"></span>
                        </div>
                    </a>
                </div>
            <?php endif; ?>
        <?php else: ?>
            <!-- Add/Edit View -->
            <?php include dirname(__FILE__) . '/edit.php'; ?>
        <?php endif; ?>
    </div>
</div>

