<?php
/**
 * Builder Main Template
 * 
 * Main HTML template for the schema builder interface
 * 
 * @package CustomSchemaSchemafy
 * @since 2.0.0
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Variables passed from render_builder()
$schema_id = isset($args['schema_id']) ? $args['schema_id'] : 0;
$context = isset($args['context']) ? $args['context'] : 'admin';
?>

<div class="wrap schemafy-builder-wrap">
    <div class="schemafy-builder-container">
        
        <!-- Header -->
        <div class="schemafy-builder-header">
            <h1 class="schemafy-builder-title">
                🚀 <?php echo esc_html__('Schema Builder', 'schemafy'); ?>
            </h1>
            <button type="button" class="schemafy-builder-close" onclick="history.back()">
                ×
            </button>
        </div>
        
        <!-- Body (Sidebar + Main) -->
        <div class="schemafy-builder-body">
            
            <!-- Sidebar Navigation -->
            <aside class="schemafy-builder-sidebar">
                <nav class="schemafy-builder-nav">
                    <ul class="schemafy-builder-nav-list">
                        <li class="schemafy-builder-nav-item">
                            <a href="#" class="schemafy-builder-nav-link active" data-target="schemafy-visual-panel">
                                <span class="schemafy-builder-nav-icon">📝</span>
                                <span><?php esc_html_e('Visual Builder', 'schemafy'); ?></span>
                            </a>
                        </li>
                        <li class="schemafy-builder-nav-item">
                            <a href="#" class="schemafy-builder-nav-link" data-target="schemafy-meta-tags-panel">
                                <span class="schemafy-builder-nav-icon">🏷️</span>
                                <span><?php esc_html_e('Meta Tags', 'schemafy'); ?></span>
                            </a>
                        </li>
                        <li class="schemafy-builder-nav-item">
                            <a href="#" class="schemafy-builder-nav-link" data-target="schemafy-preview-panel">
                                <span class="schemafy-builder-nav-icon">👁️</span>
                                <span><?php esc_html_e('Preview', 'schemafy'); ?></span>
                            </a>
                        </li>
                        <li class="schemafy-builder-nav-item">
                            <a href="#" class="schemafy-builder-nav-link" data-target="schemafy-json-panel">
                                <span class="schemafy-builder-nav-icon">{ }</span>
                                <span><?php esc_html_e('JSON Editor', 'schemafy'); ?></span>
                            </a>
                        </li>
                    </ul>
                </nav>
                
                <!-- SEO Score Widget -->
                <div class="schemafy-seo-score-widget">
                    <div class="schemafy-seo-score-label" id="schemafy-seo-score-label">
                        <?php esc_html_e('SEO Score', 'schemafy'); ?>
                    </div>
                    <div class="schemafy-seo-score-value" id="schemafy-seo-score-value">
                        0/100
                    </div>
                    <div class="schemafy-seo-score-bar">
                        <div class="schemafy-seo-score-fill" id="schemafy-seo-score-fill" style="width: 0%" data-score="poor"></div>
                    </div>
                    <ul class="schemafy-seo-checklist" id="schemafy-seo-checklist">
                        <!-- Populated by JS -->
                    </ul>
                </div>
            </aside>
            
            <!-- Main Content Area -->
            <main class="schemafy-builder-main">
                
                <!-- Schema Type Selector -->
                <div class="schemafy-field-group">
                    <label class="schemafy-field-label">
                        <?php esc_html_e('Schema Type', 'schemafy'); ?>
                        <span class="schemafy-required">*</span>
                    </label>
                    <select id="schemafy-schema-type" class="schemafy-field-select" required>
                        <option value=""><?php esc_html_e('-- Select Schema Type --', 'schemafy'); ?></option>
                        <!-- Populated by JS -->
                    </select>
                </div>
                
                <!-- Visual Builder Panel -->
                <div id="schemafy-visual-panel" class="schemafy-builder-panel" style="display: block;">
                    <h2><?php esc_html_e('Visual Editor', 'schemafy'); ?></h2>
                    
                    <!-- Template Selector -->
                    <div class="schemafy-templates" id="schemafy-templates" style="display: none;">
                        <label class="schemafy-field-label">
                            <?php esc_html_e('Load Template', 'schemafy'); ?>
                        </label>
                        <div id="schemafy-template-buttons">
                            <!-- Populated by JS based on schema type -->
                        </div>
                    </div>
                    
                    <!-- Dynamic Form Container -->
                    <div id="schemafy-visual-form">
                        <p class="schemafy-placeholder-text">
                            <?php esc_html_e('Select a schema type to start building...', 'schemafy'); ?>
                        </p>
                    </div>
                </div>
                
                <!-- Meta Tags Panel -->
                <div id="schemafy-meta-tags-panel" class="schemafy-builder-panel" style="display: none;">
                    <h2><?php esc_html_e('Meta Tags', 'schemafy'); ?></h2>
                    
                    <div class="schemafy-field-group">
                        <label class="schemafy-field-label">
                            <?php esc_html_e('Meta Title', 'schemafy'); ?>
                        </label>
                        <input type="text" name="meta_title" class="schemafy-field-input" maxlength="70" 
                               placeholder="<?php esc_attr_e('Page title for search engines (60-70 chars)', 'schemafy'); ?>" />
                        <div class="schemafy-char-counter">
                            <span class="current">0</span> / <span class="max">70</span>
                        </div>
                    </div>
                    
                    <div class="schemafy-field-group">
                        <label class="schemafy-field-label">
                            <?php esc_html_e('Meta Description', 'schemafy'); ?>
                        </label>
                        <textarea name="meta_description" class="schemafy-field-textarea" rows="3" maxlength="160"
                                  placeholder="<?php esc_attr_e('Page description for search engines (150-160 chars)', 'schemafy'); ?>"></textarea>
                        <div class="schemafy-char-counter">
                            <span class="current">0</span> / <span class="max">160</span>
                        </div>
                    </div>
                </div>
                
                <!-- Preview Panel -->
                <div id="schemafy-preview-panel" class="schemafy-builder-panel" style="display: none;">
                    <h2><?php esc_html_e('Google Search Preview', 'schemafy'); ?></h2>
                    
                    <h3><?php esc_html_e('Desktop', 'schemafy'); ?></h3>
                    <div id="schemafy-preview-desktop">
                        <p class="schemafy-placeholder-text">
                            <?php esc_html_e('Fill in your schema fields to see the preview...', 'schemafy'); ?>
                        </p>
                    </div>
                    
                    <h3 style="margin-top: 32px;"><?php esc_html_e('Mobile', 'schemafy'); ?></h3>
                    <div id="schemafy-preview-mobile">
                        <p class="schemafy-placeholder-text">
                            <?php esc_html_e('Fill in your schema fields to see the preview...', 'schemafy'); ?>
                        </p>
                    </div>
                </div>
                
                <!-- JSON Editor Panel -->
                <div id="schemafy-json-panel" class="schemafy-builder-panel" style="display: none;">
                    <h2><?php esc_html_e('JSON Editor', 'schemafy'); ?></h2>
                    
                    <div style="margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap;">
                        <button type="button" class="schemafy-btn schemafy-btn-secondary schemafy-mode-toggle" data-mode="visual">
                            <?php esc_html_e('← Switch to Visual', 'schemafy'); ?>
                        </button>
                        <button type="button" class="schemafy-btn schemafy-btn-secondary" onclick="SchemafyBuilder.JSON.format()">
                            📋 <?php esc_html_e('Format JSON', 'schemafy'); ?>
                        </button>
                        <button type="button" class="schemafy-btn schemafy-btn-secondary" onclick="SchemafyBuilder.JSON.copy()">
                            📄 <?php esc_html_e('Copy JSON', 'schemafy'); ?>
                        </button>
                        <button type="button" class="schemafy-btn schemafy-btn-secondary" onclick="SchemafyBuilder.JSON.validateJSON()">
                            ✓ <?php esc_html_e('Validate', 'schemafy'); ?>
                        </button>
                    </div>
                    
                    <div id="schemafy-json-validation" class="schemafy-field-validation"></div>
                    
                    <!-- Monaco Editor Container -->
                    <div id="schemafy-json-editor" style="height: 500px; border: 1px solid var(--schemafy-gray-300); border-radius: var(--schemafy-radius);"></div>
                </div>
                
                <!-- Action Buttons -->
                <div class="schemafy-builder-actions" style="margin-top: 32px; display: flex; gap: 12px;">
                    <button type="button" id="schemafy-save-schema" class="schemafy-btn schemafy-btn-primary">
                        💾 <?php esc_html_e('Save Schema', 'schemafy'); ?>
                    </button>
                    <button type="button" class="schemafy-btn schemafy-btn-secondary" onclick="window.open('https://search.google.com/test/rich-results', '_blank')">
                        🧪 <?php esc_html_e('Test with Google', 'schemafy'); ?>
                    </button>
                </div>
                
            </main>
            
        </div>
    </div>
</div>
