<?php
/**
 * Code Snippets Manager - Edit/Add View
 *
 * @package Switchboard
 * @since 1.0.0
 */

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

// Snippet data should be passed from admin.php
if (!isset($snippet_data)) {
    $snippet_data = [
        'id' => '',
        'title' => '',
        'description' => '',
        'code' => '',
        'type' => 'js',
        'location' => 'header',
        'priority' => 10,
        'active' => false,
    ];
}

$is_edit = !empty($snippet_data['id']);
?>

<form method="post" id="csm-form" class="sb-module-csm-form">
    <input type="hidden" id="csm-snippet-id" value="<?php echo esc_attr($snippet_data['id']); ?>">
    <input type="hidden" id="csm-is-edit" value="<?php echo $is_edit ? '1' : '0'; ?>">

    <!-- Editor + Meta Grid -->
    <div class="csm-editor-layout">
        <!-- Left Column - Title, Description, Code Editor -->
        <div class="csm-editor-column">
            <!-- Title & Description -->
            <div class="sb-module-card">
                <div class="sb-module-card-body">
                    <!-- Title -->
                    <div class="sb-module-form-group" style="margin-bottom: 20px;">
                        <label for="csm-title" class="sb-module-form-label">
                            <?php esc_html_e('Snippet Title', 'wpswitchboard'); ?>
                            <span class="sb-module-required">*</span>
                        </label>
                        <input type="text" id="csm-title" class="sb-module-input" value="<?php echo esc_attr($snippet_data['title']); ?>" placeholder="<?php esc_attr_e('e.g., Custom Login Redirect', 'wpswitchboard'); ?>" required>
                    </div>

                    <!-- Description -->
                    <div class="sb-module-form-group">
                        <label for="csm-description" class="sb-module-form-label"><?php esc_html_e('Description (Optional)', 'wpswitchboard'); ?></label>
                        <textarea id="csm-description" class="sb-module-input" rows="2" placeholder="<?php esc_attr_e('What does this snippet do?', 'wpswitchboard'); ?>"><?php echo esc_textarea($snippet_data['description']); ?></textarea>
                    </div>
                </div>
            </div>

            <!-- Code Editor -->
            <div class="sb-module-card">
                <div class="sb-module-card-header">
                    <div class="sb-module-card-header-left">
                        <h2 class="sb-module-card-title"><?php esc_html_e('Code Editor', 'wpswitchboard'); ?></h2>
                        <p class="sb-module-card-desc"><?php esc_html_e('Write your custom code below', 'wpswitchboard'); ?></p>
                    </div>
                </div>
                <div class="sb-module-card-body">
                    <!-- Code Editor Notice -->
                    <div class="csm-editor-notice">
                        <span class="dashicons dashicons-info"></span>
                        <div>
                            <strong><?php esc_html_e('Important:', 'wpswitchboard'); ?></strong>
                            <span id="csm-editor-notice-js" style="display: <?php echo $snippet_data['type'] === 'js' ? 'inline' : 'none'; ?>;">
                                <?php esc_html_e('JavaScript will be wrapped in script tags automatically.', 'wpswitchboard'); ?>
                            </span>
                            <span id="csm-editor-notice-css" style="display: <?php echo $snippet_data['type'] === 'css' ? 'inline' : 'none'; ?>;">
                                <?php esc_html_e('CSS will be wrapped in style tags automatically.', 'wpswitchboard'); ?>
                            </span>
                            <span id="csm-editor-notice-html" style="display: <?php echo $snippet_data['type'] === 'html' ? 'inline' : 'none'; ?>;">
                                <?php esc_html_e('HTML will be inserted directly into the page.', 'wpswitchboard'); ?>
                            </span>
                        </div>
                    </div>

                    <!-- Code Editor Textarea -->
                    <textarea id="csm-code" name="csm_code" class="csm-code-editor" rows="20" placeholder="<?php esc_attr_e('// Write your code here...', 'wpswitchboard'); ?>" required><?php echo esc_textarea($snippet_data['code']); ?></textarea>
                </div>
            </div>
        </div>

        <!-- Right Column - Meta Fields -->
        <div class="csm-meta-column">
            <!-- Active Toggle Card -->
            <div class="sb-module-card">
                <div class="sb-module-card-body">
                    <div class="csm-meta-toggle">
                        <div class="csm-meta-toggle-content">
                            <strong class="csm-meta-toggle-title"><?php esc_html_e('Active', 'wpswitchboard'); ?></strong>
                            <p class="csm-meta-toggle-desc"><?php esc_html_e('Enable this snippet to run on your site', 'wpswitchboard'); ?></p>
                        </div>
                        <label class="sb-module-toggle">
                            <input type="checkbox" id="csm-active" name="csm_active" value="yes" <?php checked($snippet_data['active']); ?>>
                            <span class="sb-module-toggle-slider"></span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Settings Card -->
            <div class="sb-module-card">
                <div class="sb-module-card-header">
                    <div class="sb-module-card-header-left">
                        <h3 class="sb-module-card-title"><?php esc_html_e('Settings', 'wpswitchboard'); ?></h3>
                    </div>
                </div>
                <div class="sb-module-card-body">
                    <!-- Type -->
                    <div class="sb-module-form-group">
                        <label for="csm-type" class="sb-module-form-label">
                            <?php esc_html_e('Code Type', 'wpswitchboard'); ?>
                            <span class="sb-module-required">*</span>
                        </label>
                        <select id="csm-type" class="sb-module-select" required>
                            <option value="js" <?php selected($snippet_data['type'], 'js'); ?>><?php esc_html_e('JavaScript', 'wpswitchboard'); ?></option>
                            <option value="css" <?php selected($snippet_data['type'], 'css'); ?>><?php esc_html_e('CSS', 'wpswitchboard'); ?></option>
                            <option value="html" <?php selected($snippet_data['type'], 'html'); ?>><?php esc_html_e('HTML', 'wpswitchboard'); ?></option>
                        </select>
                    </div>

                    <!-- Location -->
                    <div class="sb-module-form-group">
                        <label for="csm-location" class="sb-module-form-label">
                            <?php esc_html_e('Execution Location', 'wpswitchboard'); ?>
                            <span class="sb-module-required">*</span>
                        </label>
                        <select id="csm-location" class="sb-module-select" required>
                            <option value="header" <?php selected($snippet_data['location'], 'header'); ?>><?php esc_html_e('Header (wp_head)', 'wpswitchboard'); ?></option>
                            <option value="footer" <?php selected($snippet_data['location'], 'footer'); ?>><?php esc_html_e('Footer (wp_footer)', 'wpswitchboard'); ?></option>
                        </select>
                    </div>

                    <!-- Priority -->
                    <div class="sb-module-form-group">
                        <label for="csm-priority" class="sb-module-form-label"><?php esc_html_e('Priority', 'wpswitchboard'); ?></label>
                        <input type="number" id="csm-priority" class="sb-module-input" value="<?php echo esc_attr($snippet_data['priority']); ?>" min="1" max="999">
                        <p class="sb-module-form-help"><?php esc_html_e('Execution order (lower = earlier)', 'wpswitchboard'); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Action Bar -->
    <div class="sb-module-form-actions">
        <div class="sb-module-form-actions-left">
            <?php if ($is_edit): ?>
                <button type="button" id="csm-delete-snippet" class="sb-module-button sb-module-button-danger sb-module-button-sm">
                    <?php esc_html_e('Delete', 'wpswitchboard'); ?>
                </button>
            <?php endif; ?>
        </div>
        <div class="sb-module-form-actions-right">
            <button type="button" id="csm-cancel-snippet" class="sb-module-button sb-module-button-secondary sb-module-button-sm">
                <?php esc_html_e('Cancel', 'wpswitchboard'); ?>
            </button>
            <button type="button" id="csm-save-snippet" class="sb-module-button sb-module-button-primary sb-module-button-sm">
                <?php echo $is_edit ? esc_html__('Update Snippet', 'wpswitchboard') : esc_html__('Create Snippet', 'wpswitchboard'); ?>
            </button>
        </div>
    </div>
</form>

<script>
// Snippet data for JavaScript
window.csmSnippetData = <?php echo wp_json_encode($snippet_data); ?>;
window.csmIsEdit = <?php echo $is_edit ? 'true' : 'false'; ?>;
</script>
