<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ — NUCLEAR+++
// File: /home/ploi/automarketer-ai.com/public/wp-content/plugins/automarketer-ai/templates/manual-post.php
// Description: Manual post compose — three-step hard flow, channel-aware (Facebook + Instagram + X + TikTok) - NUCLEAR+++
// Last Edited: 2026-04-18
// ==================================================
namespace AutoMarketerAI;
defined('ABSPATH') || exit;
if (!current_user_can('manage_options')) {
    wp_die('Unauthorized.');
}

$channel      = sanitize_key((string) ($_GET['channel'] ?? 'facebook'));
$is_instagram = $channel === 'instagram';
$is_x         = $channel === 'x';
$is_tiktok    = $channel === 'tiktok';
$is_facebook  = !$is_instagram && !$is_x && !$is_tiktok;

$amai_has_img_provider = false;
foreach ((array) get_option('amai_active_modules', []) as $_mid) {
    if (is_string($_mid) && str_starts_with($_mid, 'img-')) { $amai_has_img_provider = true; break; }
}

$char_limit         = $is_instagram ? 2200 : ($is_x ? 280 : ($is_tiktok ? 2200 : 63206));
$char_limit_display = $is_instagram ? '2,200' : ($is_x ? '280' : ($is_tiktok ? '2,200' : '63,206'));

$fb_connection = FacebookAuth::getConnection();
$page_name     = $fb_connection !== null ? esc_html((string) ($fb_connection['page_name'] ?? '')) : '';
$page_picture  = '';
if ($fb_connection !== null) {
    $att_id       = (int) get_option('amai_fb_page_picture_attachment_id', 0);
    $page_picture = $att_id > 0 ? (string) wp_get_attachment_url($att_id) : '';
}

$dashboard_url = admin_url('admin.php?page=automarketer-ai-social&channel=' . $channel);
$compose_url   = admin_url('admin.php?page=automarketer-ai-social&channel=' . $channel . '&tab=compose');

$feeling_labels = [
    'HAPPY'        => '😊 Happy',
    'EXCITED'      => '🤩 Excited',
    'GRATEFUL'     => '🙏 Grateful',
    'BLESSED'      => '✨ Blessed',
    'MOTIVATED'    => '💪 Motivated',
    'PROUD'        => '🦁 Proud',
    'THANKFUL'     => '💛 Thankful',
    'INSPIRED'     => '💡 Inspired',
    'HOPEFUL'      => '🌱 Hopeful',
    'DETERMINED'   => '🎯 Determined',
    'OPTIMISTIC'   => '☀️ Optimistic',
    'CONFIDENT'    => '💼 Confident',
    'LOVED'        => '❤️ Loved',
    'ACCOMPLISHED' => '🏆 Accomplished',
    'ENERGIZED'    => '⚡ Energized',
    'FOCUSED'      => '🔍 Focused',
    'JOYFUL'       => '🎉 Joyful',
    'CELEBRATED'   => '🥂 Celebrated',
    'AMBITIOUS'    => '🚀 Ambitious',
    'REFRESHED'    => '🌿 Refreshed',
    'FANTASTIC'    => '🌟 Fantastic',
    'WONDERFUL'    => '🦋 Wonderful',
    'POSITIVE'     => '👍 Positive',
    'STRONG'       => '💥 Strong',
    'THRILLED'     => '🎊 Thrilled',
];
?>
<!-- ── CHANNEL TAB ROW ── -->
<div class="amai-fb-tabs">
    <a href="<?php echo esc_url($dashboard_url); ?>"
       class="amai-fb-tab">Dashboard</a>
    <a href="<?php echo esc_url($compose_url); ?>"
       class="amai-fb-tab amai-fb-tab--active">Compose Post</a>
</div>
<!-- ── STEP INDICATOR ── -->
<div class="amai-manual-steps" id="amai-manual-steps">
    <div class="amai-manual-step amai-manual-step--active" data-step="1">
        <div class="amai-manual-step-num">1</div>
        <div class="amai-manual-step-label">Write</div>
    </div>
    <div class="amai-manual-step-connector"></div>
    <div class="amai-manual-step" data-step="2">
        <div class="amai-manual-step-num">2</div>
        <div class="amai-manual-step-label">Image</div>
    </div>
    <div class="amai-manual-step-connector"></div>
    <div class="amai-manual-step" data-step="3">
        <div class="amai-manual-step-num">3</div>
        <div class="amai-manual-step-label">Post</div>
    </div>
</div>

<!-- STEP 1 — WRITE -->
<div class="amai-manual-card" id="amai-step-1">
    <div class="amai-manual-card-header">
        <div class="amai-manual-card-title">Write your post</div>
        <div class="amai-manual-card-count" id="amai-char-count">0</div>
    </div>
    <div class="amai-manual-textarea-wrap">
        <textarea
            id="amai-post-content"
            class="amai-manual-textarea"
            placeholder="<?php echo $is_instagram ? 'Write your caption...' : 'What would you like to share?'; ?>"
            maxlength="<?php echo (int) $char_limit; ?>"
            rows="8"
        ></textarea>
        <button type="button" class="amai-emoji-corner-btn" id="amai-emoji-btn" title="Add emoji">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.4"/><path d="M6 11.5s1 1.5 3 1.5 3-1.5 3-1.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><circle cx="6.5" cy="7" r="1" fill="currentColor"/><circle cx="11.5" cy="7" r="1" fill="currentColor"/></svg>
        </button>
        <div class="amai-emoji-dropdown" id="amai-emoji-dropdown" style="display:none;">
            <div class="amai-emoji-sticky-cat" id="amai-emoji-sticky-cat"></div>
            <div class="amai-emoji-scroll" id="amai-emoji-grid"></div>
        </div>
    </div>
    <?php if ($is_facebook) : ?>
    <div class="amai-manual-type-row">
        <label class="amai-manual-type-label" for="amai-post-type">Post type</label>
        <select id="amai-post-type" class="amai-manual-type-select">
            <option value="educational" selected>Educational</option>
            <option value="product">Product</option>
            <option value="feel_good">Feel Good</option>
            <option value="behind_scenes">Behind the Scenes</option>
            <option value="engagement">Engagement</option>
            <option value="quote">Quote</option>
            <option value="humor">Humor</option>
            <option value="myth_bust">Myth Bust</option>
            <option value="tip">Tip</option>
        </select>
    </div>
    <?php endif; ?>
    <?php if ($is_facebook) : ?>
    <div class="amai-manual-toolbar">
        <span class="amai-manual-toolbar-label">Feeling</span>
        <button type="button" class="amai-enrich-btn" id="amai-feeling-btn" title="Add feeling">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true"><circle cx="9" cy="9" r="7" stroke="#F0B429" stroke-width="1.4"/><path d="M6 11s1 2 3 2 3-2 3-2" stroke="#F0B429" stroke-width="1.4" stroke-linecap="round"/><circle cx="6.5" cy="7.5" r="1" fill="#F0B429"/><circle cx="11.5" cy="7.5" r="1" fill="#F0B429"/></svg>
        </button>
        <span class="amai-enrich-chip" id="amai-feeling-chip" style="display:none;">
            <span class="amai-enrich-chip-label" id="amai-feeling-chip-label"></span>
            <button type="button" class="amai-enrich-chip-remove" id="amai-feeling-chip-remove">&#10005;</button>
        </span>
    </div>
    <?php endif; ?>
    <div class="amai-manual-card-footer">
        <div class="amai-seed-wrap">
        <button type="button" class="amai-manual-btn-seed" id="amai-seed-btn">
            ✨ Write with AI
        </button>
        <span class="amai-seed-label" id="amai-seed-label" style="display:none;"></span>
        </div>
        <button type="button" class="amai-manual-btn-primary" id="amai-step1-next">
            Next: Add Image
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
    </div>
</div>

<!-- STEP 2 — IMAGE -->
<div class="amai-manual-card" id="amai-step-2" style="display:none;">
    <div class="amai-manual-card-header">
        <div class="amai-manual-card-title">Choose an image<?php if (!$is_instagram) : ?> <span class="amai-manual-optional">(optional)</span><?php endif; ?></div>
        <?php if ($is_instagram) : ?>
        <div class="amai-manual-card-required">Required for Instagram</div>
        <?php endif; ?>
    </div>
    <div id="amai-unsplash-searching" class="amai-manual-unsplash-searching" style="display:none;">
        <svg class="amai-regen-spin" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M14 3A7 7 0 1 0 15 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><path d="M11 3h3V0" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Searching Unsplash…
    </div>
    <div id="amai-unsplash-keyword-wrap" style="display:none;">
        <span class="amai-manual-keyword-label">Showing results for: </span>
        <span class="amai-manual-keyword" id="amai-unsplash-keyword"></span>
    </div>
    <div class="amai-manual-unsplash-grid" id="amai-unsplash-grid"></div>
    <div class="amai-manual-unsplash-error" id="amai-unsplash-error" style="display:none;"></div>
    <div class="amai-manual-selected-img-wrap" id="amai-selected-img-wrap" style="display:none;">
        <div class="amai-manual-selected-label">✓ Image selected</div>
        <img id="amai-selected-img" src="" alt="Selected image" class="amai-manual-selected-img"/>
        <div class="amai-manual-selected-credit" id="amai-selected-credit"></div>
        <button type="button" class="amai-manual-btn-ghost" id="amai-remove-image-btn">Remove image</button>
    </div>
    <div class="amai-manual-image-hint">Or upload your own image or choose one from your media library.</div>
    <div class="amai-manual-image-actions" id="amai-image-actions">
        <button type="button" class="amai-manual-btn-secondary" id="amai-media-library-btn">
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><rect x="1" y="2.5" width="13" height="10" rx="2" stroke="currentColor" stroke-width="1.4"/><circle cx="5" cy="6.5" r="1.5" fill="currentColor"/><path d="M1 10.5l3.5-3.5 2.5 2.5 2-2 4 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Upload or Choose Image
        </button>
        <input type="file" id="amai-file-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;"/>
        <div class="amai-manual-upload-strip" id="amai-upload-strip" style="display:none;">
            <svg class="amai-regen-spin" width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M11 2.5A5.5 5.5 0 1 0 12 6.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M9 2.5h2V.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Uploading…
        </div>
        <?php if ($amai_has_img_provider) : ?>
        <button type="button" class="amai-manual-btn-secondary" id="amai-ai-img-btn">
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true"><path d="M7.5 1.5L8.5 5.5L12.5 6.5L8.5 7.5L7.5 11.5L6.5 7.5L2.5 6.5L6.5 5.5L7.5 1.5Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
            Generate with AI
        </button>
        <?php endif; ?>
    </div>
    <?php if ($amai_has_img_provider) : ?>
    <div class="amai-manual-ai-img-wrap" id="amai-ai-img-wrap">
        <p class="amai-manual-ai-hint">Describe the image you want and your active image provider will generate it. Uses your image generation credits.</p>
        <div id="amai-ai-img-prompt-wrap" style="display:none;">
            <textarea id="amai-ai-img-prompt" class="amai-manual-ai-prompt" rows="3" maxlength="400" placeholder="e.g. Warm, inviting small business storefront on a sunny day, minimal background"></textarea>
            <div class="amai-manual-ai-prompt-row">
                <button type="button" class="amai-manual-btn-ghost" id="amai-ai-img-cancel">Cancel</button>
                <button type="button" class="amai-manual-btn-primary" id="amai-ai-img-generate">Generate image</button>
            </div>
        </div>
        <div id="amai-ai-img-generating" style="display:none;">
            <div class="amai-manual-ai-generating-row">
                <svg class="amai-regen-spin" width="14" height="14" viewBox="0 0 13 13" fill="none"><path d="M11 2.5A5.5 5.5 0 1 0 12 6.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M9 2.5h2V.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Generating image - this takes up to 30 seconds...
            </div>
        </div>
        <div id="amai-ai-img-error" class="amai-manual-ai-error" style="display:none;"></div>
    </div>
    <?php endif; ?>
    <div class="amai-manual-card-footer amai-manual-card-footer--split">
        <button type="button" class="amai-manual-btn-ghost" id="amai-step2-back">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M11 7H3M6 4L3 7l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back
        </button>
        <button type="button" class="amai-manual-btn-primary" id="amai-step2-next">
            Next: Review &amp; Post
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M3 7h8M8 4l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </button>
    </div>
</div>

<!-- STEP 3 — REVIEW & POST -->
<div class="amai-manual-card" id="amai-step-3" style="display:none;">
    <div class="amai-manual-card-header">
        <div class="amai-manual-card-title">Review &amp; post</div>
    </div>
    <div class="amai-manual-preview">
        <div class="amai-manual-preview-header">
            <?php if ($page_picture !== '') : ?>
            <img src="<?php echo esc_url($page_picture); ?>" alt="<?php echo $page_name; ?>" class="amai-manual-preview-avatar"/>
            <?php endif; ?>
            <div>
                <div class="amai-manual-preview-name"><?php echo $page_name; ?></div>
                <div class="amai-manual-preview-meta">
                    <?php if ($is_instagram) : ?>
                    Just now
                    <?php else : ?>
                    Just now · <span>🌐</span>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="amai-manual-preview-content" id="amai-preview-content"></div>
        <?php if ($is_facebook) : ?>
        <div class="amai-manual-preview-feeling" id="amai-preview-feeling" style="display:none;"></div>
        <?php endif; ?>
        <div class="amai-manual-preview-img-wrap" id="amai-preview-img-wrap" style="display:none;">
            <img id="amai-preview-img" src="" alt="Post image" class="amai-manual-preview-img"/>
            <div class="amai-manual-preview-credit" id="amai-preview-credit"></div>
        </div>
    </div>
    <div class="amai-manual-post-error" id="amai-post-error" style="display:none;"></div>
    <div class="amai-manual-post-success" id="amai-post-success" style="display:none;">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true"><circle cx="10" cy="10" r="9" stroke="#22c55e" stroke-width="1.6"/><path d="M6 10l3 3 5-5" stroke="#22c55e" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        Post published successfully!
    </div>
    <div class="amai-manual-card-footer amai-manual-card-footer--split">
        <button type="button" class="amai-manual-btn-ghost" id="amai-step3-back">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M11 7H3M6 4L3 7l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back
        </button>
        <button type="button" class="amai-manual-btn-primary" id="amai-post-btn">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><path d="M2 8l12-6-6 12-1.5-5.5L2 8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Post to <?php echo $is_x ? 'X' : ($is_instagram ? 'Instagram' : ($is_tiktok ? 'TikTok' : 'Facebook')); ?>
        </button>
    </div>
</div>

<?php if ($is_facebook) : ?>
<!-- FEELING MODAL — Facebook only -->
<div id="amai-feeling-modal" class="amai-feeling-modal" style="display:none;">
    <div class="amai-feeling-modal-wrap">
        <div class="amai-feeling-modal-header">
            <div class="amai-feeling-modal-title">How are you feeling?</div>
            <button type="button" class="amai-feeling-modal-close" id="amai-feeling-modal-close">&#10005;</button>
        </div>
        <div class="amai-feeling-modal-grid" id="amai-feeling-modal-grid">
            <?php foreach ($feeling_labels as $value => $label) : ?>
            <button type="button" class="amai-feeling-option" data-feeling="<?php echo esc_attr($value); ?>"><?php echo esc_html($label); ?></button>
            <?php endforeach; ?>
        </div>
    </div>
</div>
<?php endif; ?>