<?php defined('ABSPATH') || exit;

$iv1wpt_has_pro = iv1wpt_has_pro();
$ce_sub = sanitize_text_field($_GET['sub'] ?? 'css');
if (!in_array($ce_sub, ['css', 'js'], true)) {
    $ce_sub = 'css';
}
$sub_tabs = [
    'css' => 'CSS',
    'js'  => 'JavaScript',
];
?>

<div id="iv1wpt-codeeditor-result" style="margin:15px 0;"></div>

<div style="margin-bottom:0px; border-bottom:1px solid #ddd; padding-bottom:0;">
    <?php foreach ($sub_tabs as $key => $label) : ?>
        <a href="?page=iv1-wp-tools&tab=codeeditor&sub=<?php echo esc_attr($key); ?>"
           style="display:inline-block; padding:8px 16px; margin-right:4px; margin-bottom:-1px; font-weight:<?php echo $ce_sub === $key ? '600' : '400'; ?>; border:1px solid <?php echo $ce_sub === $key ? '#ddd' : 'transparent'; ?>; border-bottom-color:<?php echo $ce_sub === $key ? '#fff' : 'transparent'; ?>; background:<?php echo $ce_sub === $key ? '#fff' : 'transparent'; ?>; color:#1d2327; text-decoration:none; border-radius:3px 3px 0 0;">
            <?php echo (in_array($key, ['js'], true) && !$iv1wpt_has_pro) ? '🔒 ' : ''; echo esc_html($label); ?>
        </a>
    <?php endforeach; ?>
</div>

<div style="background:#fff; border:1px solid #ddd; border-top:none; padding:20px; border-radius:0 0 4px 4px;">

<?php if ($ce_sub === 'css') : ?>

<!-- ══════════════════════════════════════════ -->
<!-- CSS EDITOR                                 -->
<!-- ══════════════════════════════════════════ -->
<div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:16px;">
    <div>
        <h2 style="margin:0 0 4px;"><?php esc_html_e('Custom CSS', 'iv1-wp-tools'); ?></h2>
        <p class="description" style="margin:0;">
            <?php esc_html_e('Saved to', 'iv1-wp-tools'); ?> <code id="iv1wpt-css-file-path">wp-content/iv1-custom.css</code>
        </p>
    </div>
    <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <label style="display:flex; align-items:center; gap:6px; font-weight:600;">
            <input type="checkbox" id="iv1wpt-css-enabled">
            <?php esc_html_e('Active', 'iv1-wp-tools'); ?>
        </label>
        <label style="display:flex; align-items:center; gap:6px;">
            <?php esc_html_e('Position:', 'iv1-wp-tools'); ?>
            <select id="iv1wpt-css-position">
                <option value="header"><?php esc_html_e('Header (recommended)', 'iv1-wp-tools'); ?></option>
                <option value="footer"><?php esc_html_e('Footer', 'iv1-wp-tools'); ?></option>
            </select>
        </label>
        <span id="iv1wpt-css-size" style="font-size:12px; color:#666;"></span>
        <button type="button" id="iv1wpt-css-save" class="button button-primary"><?php esc_html_e('Save CSS', 'iv1-wp-tools'); ?></button>
    </div>
</div>

<div id="iv1wpt-css-fouc-warning" class="notice notice-warning inline" style="display:none; margin:0 0 12px; padding:8px 14px; border-left-color:#d63638;">
    <p><strong>⚠️ <?php esc_html_e('Caution:', 'iv1-wp-tools'); ?></strong>
    <?php esc_html_e('Loading CSS in the footer may cause a flash of unstyled content (FOUC).', 'iv1-wp-tools'); ?></p>
</div>

<!-- CodeMirror CSS Editor -->
<div id="iv1wpt-css-editor-wrap" style="border:1px solid #ddd; border-radius:4px; overflow:hidden;">
    <textarea id="iv1wpt-css-editor" style="width:100%; height:500px; font-family:monospace; font-size:13px; display:none;"></textarea>
    <div id="iv1wpt-css-cm" style="height:500px;"></div>
</div>

<?php elseif ($ce_sub === 'js') : ?>

<!-- ══════════════════════════════════════════ -->
<!-- JS EDITOR                                  -->
<!-- ══════════════════════════════════════════ -->
<div style="display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:16px;">
    <div>
        <h2 style="margin:0 0 4px;"><?php esc_html_e('Custom JavaScript', 'iv1-wp-tools'); ?></h2>
        <p class="description" style="margin:0;">
            <?php esc_html_e('Saved to', 'iv1-wp-tools'); ?> <code id="iv1wpt-js-file-path">wp-content/iv1-custom.js</code>
        </p>
    </div>
    <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
        <label style="display:flex; align-items:center; gap:6px; font-weight:600;">
            <input type="checkbox" id="iv1wpt-js-enabled" <?php echo !$iv1wpt_has_pro ? 'disabled' : ''; ?>>
            <?php esc_html_e('Active', 'iv1-wp-tools'); ?>
        </label>
        <label style="display:flex; align-items:center; gap:6px;">
            <?php esc_html_e('Position:', 'iv1-wp-tools'); ?>
            <select id="iv1wpt-js-position" <?php echo !$iv1wpt_has_pro ? 'disabled' : ''; ?>>
                <option value="footer"><?php esc_html_e('Footer (recommended)', 'iv1-wp-tools'); ?></option>
                <option value="header"><?php esc_html_e('Header', 'iv1-wp-tools'); ?></option>
            </select>
        </label>
        <span id="iv1wpt-js-size" style="font-size:12px; color:#666;"></span>
        <button type="button" id="iv1wpt-js-save" class="button button-primary" <?php echo !$iv1wpt_has_pro ? 'disabled' : ''; ?>><?php esc_html_e('Save JS', 'iv1-wp-tools'); ?></button>
    </div>
</div>

<div class="notice notice-warning inline" style="margin:0 0 12px; padding:8px 14px; border-left-color:#d63638;">
    <p><strong>⚠️ <?php esc_html_e('Caution:', 'iv1-wp-tools'); ?></strong>
    <?php esc_html_e('Invalid JavaScript can break your website. Always test in a staging environment first.', 'iv1-wp-tools'); ?></p>
</div>

<!-- CodeMirror JS Editor -->
<div id="iv1wpt-js-editor-wrap" style="border:1px solid #ddd; border-radius:4px; overflow:hidden; <?php echo !$iv1wpt_has_pro ? 'opacity:0.5; pointer-events:none;' : ''; ?>">
    <textarea id="iv1wpt-js-editor" style="width:100%; height:500px; font-family:monospace; font-size:13px; display:none;"></textarea>
    <div id="iv1wpt-js-cm" style="height:500px;"></div>
</div>

<?php endif; ?>

</div>

<?php
// WordPress eigenen CodeMirror laden
wp_enqueue_code_editor(['type' => $ce_sub === 'css' ? 'text/css' : 'text/javascript']);
wp_enqueue_script('wp-theme-plugin-editor');
wp_enqueue_style('wp-codemirror');
?>
