<?php
/**
 * CPT Builder List View Template
 * Modern 2-column layout: Left sidebar for CPT list, Right main area for edit/create
 *
 * @package Switchboard
 * @since 1.0.0
 */

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

// Get existing CPTs
$cpts = get_option('switchboard_custom_post_types', []);

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

<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
            </svg>
            <div>
                <h1 class="sb-module-title">
                    <?php if ($action === 'add'): ?>
                        <?php esc_html_e('Creating a Custom Post Type', 'wpswitchboard'); ?>
                    <?php elseif ($action === 'edit'): ?>
                        <?php esc_html_e('Editing Custom Post Type', 'wpswitchboard'); ?>
                    <?php else: ?>
                        <?php esc_html_e('CPT 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 post type with powerful controls', 'wpswitchboard'); ?>
                    <?php elseif ($action === 'edit'): ?>
                        <?php esc_html_e('Edit your custom post type settings and configuration', 'wpswitchboard'); ?>
                    <?php else: ?>
                        <?php esc_html_e('Create and manage custom post types with powerful controls', 'wpswitchboard'); ?>
                    <?php endif; ?>
                </p>
            </div>
        </div>
        <div class="sb-module-header-right">
            <a href="https://docs.wpswitchboard.com/modules/content/cpt-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=cpt-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=cpt-builder&action=add')); ?>" class="sb-module-button sb-module-button-primary">
                    <?php esc_html_e('Add New CPT', 'wpswitchboard'); ?>
                </a>
            <?php endif; ?>
        </div>
    </div>

    <!-- Main Content -->
    <div class="sb-module-container">
    <!-- Stats Cards -->
    <div class="sb-module-stats">
        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Custom Post Types', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value" id="stat-total-cpts"><?php echo count($cpts); ?></div>
            </div>
        </div>

        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Registered & Active', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value" id="stat-registered-cpts">-</div>
            </div>
        </div>

        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Total Posts', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value" id="stat-total-posts">-</div>
            </div>
        </div>

        <div class="sb-module-stat-card">
            <div class="sb-module-stat-label"><?php esc_html_e('Avg Features', 'wpswitchboard'); ?></div>
            <div class="sb-module-stat-content">
                <div class="sb-module-stat-value" id="stat-avg-supports">-</div>
            </div>
        </div>
    </div>

    <?php if ($action === ''): ?>
        <!-- Default Dashboard View: Grid of CPTs -->
        <?php if (empty($cpts)): ?>
            <!-- Empty State -->
            <div class="cpt-empty-state">
                <div class="cpt-empty-state-icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                </div>
                <h3 class="cpt-empty-state-title"><?php esc_html_e('No post types yet', 'wpswitchboard'); ?></h3>
                <p class="cpt-empty-state-desc"><?php esc_html_e('Here are some ideas to get you started', 'wpswitchboard'); ?></p>

                <!-- Use Cases Grid -->
                <div class="cpt-use-cases-grid">
                    <div class="cpt-use-case-card">
                        <h4 class="cpt-use-case-title">Real Estate Listings</h4>
                        <p class="cpt-use-case-desc">Create 'Properties' custom post type with archive page and custom fields for real estate agent's MLS listings.</p>
                    </div>
                    <div class="cpt-use-case-card">
                        <h4 class="cpt-use-case-title">Team Member Profiles</h4>
                        <p class="cpt-use-case-desc">Build 'Team' post type for company about page showing all employees with bios, photos, and contact information.</p>
                    </div>
                    <div class="cpt-use-case-card">
                        <h4 class="cpt-use-case-title">Product Documentation</h4>
                        <p class="cpt-use-case-desc">Develop 'Docs' custom post type separate from blog for software documentation with different archive structure.</p>
                    </div>
                </div>

                <a href="<?php echo esc_url(admin_url('admin.php?page=cpt-builder&action=add')); ?>" class="cpt-empty-state-btn">
                    <span class="dashicons dashicons-plus-alt"></span>
                    <?php esc_html_e('Create Post Type', 'wpswitchboard'); ?>
                </a>
            </div>
        <?php else: ?>
            <div class="cpt-grid">
                <?php foreach ($cpts as $cpt):
                    $post_type_object = get_post_type_object($cpt['slug']);
                    $is_registered = $post_type_object !== null;
                    $post_count = 0;
                    if ($is_registered) {
                        $count_posts = wp_count_posts($cpt['slug']);
                        $post_count = $count_posts->publish ?? 0;
                    }
                    $supports_count = count($cpt['supports'] ?? ['title', 'editor', 'thumbnail']);
                ?>
                    <a href="<?php echo esc_url(admin_url('admin.php?page=cpt-builder&action=edit&cpt=' . urlencode($cpt['slug']))); ?>" class="cpt-card">
                        <h3 class="cpt-card-title"><?php echo esc_html($cpt['name']); ?></h3>
                        <code class="cpt-card-slug"><?php echo esc_html($cpt['slug']); ?></code>
                        <div class="cpt-card-badges">
                            <span class="cpt-card-badge"><?php echo number_format($post_count); ?> <?php echo $post_count !== 1 ? esc_html__('posts', 'wpswitchboard') : esc_html__('post', 'wpswitchboard'); ?></span>
                            <span class="cpt-card-badge"><?php echo $supports_count; ?> <?php echo $supports_count !== 1 ? esc_html__('features', 'wpswitchboard') : esc_html__('feature', 'wpswitchboard'); ?></span>
                        </div>
                        <?php if ($is_registered): ?>
                            <span class="cpt-card-status cpt-card-status-active"><?php esc_html_e('Active', 'wpswitchboard'); ?></span>
                        <?php else: ?>
                            <span class="cpt-card-status cpt-card-status-inactive"><?php esc_html_e('Inactive', 'wpswitchboard'); ?></span>
                        <?php endif; ?>
                        <div class="cpt-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=cpt-builder&action=add')); ?>" class="cpt-card cpt-card-add">
                    <h3 class="cpt-card-add-title"><?php esc_html_e('New Post Type', 'wpswitchboard'); ?></h3>
                    <p class="cpt-card-add-desc"><?php esc_html_e('Click to create', 'wpswitchboard'); ?></p>
                    <div class="cpt-card-add-icon">
                        <span class="dashicons dashicons-plus-alt"></span>
                    </div>
                </a>
            </div>
        <?php endif; ?>
    <?php else: ?>
        <!-- Add/Edit View -->
        <div class="sb-module-layout" style="grid-template-columns: 1fr;">
            <div class="sb-module-main">
                <?php
                $edit_file = plugin_dir_path(__FILE__) . 'edit.php';
                if (file_exists($edit_file)) {
                    include $edit_file;
                }
                ?>
            </div>
        </div>
    <?php endif; ?>
    </div>
</div>

<style>
/* Empty State */
.cpt-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px;
    background: white;
    border-radius: 12px;
    margin-top: 24px;
}

.cpt-empty-state-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-50);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.cpt-empty-state-icon svg {
    width: 40px;
    height: 40px;
    color: var(--primary-500);
}

.cpt-empty-state-title {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.cpt-empty-state-desc {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
    line-height: 1.6;
}

.cpt-empty-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--primary-500);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.cpt-empty-state-btn:hover {
    background: var(--primary-600);
    color: white;
}

.cpt-empty-state-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Use Cases Grid */
.cpt-use-cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 32px 0;
    width: 100%;
    max-width: 900px;
}

.cpt-use-case-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    text-align: left;
    transition: all 0.2s ease;
}

.cpt-use-case-card:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--primary-500-rgb), 0.1);
}

.cpt-use-case-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.cpt-use-case-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .cpt-use-cases-grid {
        grid-template-columns: 1fr;
    }
}

/* CPT Grid */
.cpt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.cpt-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 32px 20px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.cpt-card:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.cpt-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.cpt-card-slug {
    font-size: 11px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
}

.cpt-card-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.cpt-card-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 10px;
    background: var(--primary-100);
    color: var(--primary-700);
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cpt-card:hover .cpt-card-badge {
    background: var(--primary-200);
    color: var(--primary-800);
}

.cpt-card-status {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 9px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cpt-card-status-active {
    background: var(--primary-100);
    color: var(--primary-800);
}

.cpt-card-status-inactive {
    background: #fee2e2;
    color: #991b1b;
}

.cpt-card-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: var(--primary-500);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cpt-card:hover .cpt-card-overlay {
    opacity: 1;
}

.cpt-card-overlay .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: white;
}

/* Add New Card */
.cpt-card-add {
    border: 2px dashed #cbd5e1;
    background: #f8fafc;
}

.cpt-card-add:hover {
    border-color: var(--primary-500);
    background: var(--primary-50);
}

.cpt-card-add-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.cpt-card-add-desc {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.cpt-card-add-icon {
    margin-top: 4px;
    width: 40px;
    height: 40px;
    background: #f1f5f9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cpt-card-add-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: #cbd5e1;
    transition: color 0.2s ease;
}

.cpt-card-add:hover .cpt-card-add-icon {
    background: var(--primary-100);
}

.cpt-card-add:hover .cpt-card-add-icon .dashicons {
    color: var(--primary-500);
}

/* Responsive */
@media (max-width: 1400px) {
    .cpt-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1024px) {
    .cpt-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .cpt-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    // Update stats
    $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: {
            action: 'get_cpt_stats',
            nonce: '<?php echo wp_create_nonce('switchboard_settings'); ?>'
        },
        success: function(response) {
            if (response.success) {
                $('#stat-registered-cpts').text(response.data.registered_cpts || 0);
                $('#stat-total-posts').text(response.data.total_posts || 0);
                $('#stat-avg-supports').text(response.data.avg_supports || 0);
            }
        }
    });

});
</script>

