<?php
declare(strict_types=1);
// ==================================================
// Nuclear Fancy Pants Edition™ — NUCLEAR+++
// File: /templates/social-shell.php
// Description: Social Media page shell — channel nav + content area - NUCLEAR+++
// Last Edited: 2026-03-28
// ==================================================

namespace AutoMarketerAI;

defined('ABSPATH') || exit;

// Variables passed from SocialPage::render():
// $active_slug  string               — active channel slug
// $channels     ChannelInterface[]   — all registered channels keyed by slug
// $auth_error   mixed                — transient error string or false

// Channel SVG icons — keyed by slug
$channel_icons = [
    'facebook'  => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="4" fill="#1877F2"/><path d="M10.5 4H9a2 2 0 0 0-2 2v1H5.5v2H7v4.5h2V9h1.5l.5-2H9V6a.5.5 0 0 1 .5-.5h1V4z" fill="white"/></svg>',
    'instagram' => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="4" fill="#E1306C"/><rect x="4" y="4" width="8" height="8" rx="2.5" stroke="white" stroke-width="1.2" fill="none"/><circle cx="8" cy="8" r="2" stroke="white" stroke-width="1.2" fill="none"/><circle cx="10.5" cy="5.5" r=".6" fill="white"/></svg>',
    'x'         => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="4" fill="#000"/><path d="M4 4h2.2l2 2.8L10.5 4H12l-3 4 3.2 4H10l-2.2-3-2.5 3H4l3.2-4.1L4 4z" fill="white"/></svg>',
    'google'    => '<svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path fill="#4285F4" d="M47.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h13.2c-.6 3-2.3 5.5-4.8 7.2v6h7.7c4.5-4.1 7.4-10.2 7.4-17.5z"/><path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.7-6c-2.1 1.4-4.9 2.3-8.2 2.3-6.3 0-11.6-4.2-13.5-10H2.5v6.2C6.5 42.8 14.7 48 24 48z"/><path fill="#FBBC05" d="M10.5 28.5c-.5-1.4-.8-2.9-.8-4.5s.3-3.1.8-4.5v-6.2H2.5C.9 16.5 0 20.1 0 24s.9 7.5 2.5 10.7l8-6.2z"/><path fill="#EA4335" d="M24 9.5c3.5 0 6.7 1.2 9.2 3.6l6.9-6.9C36 2.4 30.5 0 24 0 14.7 0 6.5 5.2 2.5 13.3l8 6.2C12.4 13.7 17.7 9.5 24 9.5z"/></svg>',
    'linkedin'  => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="4" fill="#0A66C2"/><path d="M4.5 6.5h1.5V12H4.5V6.5zm.75-2a.875.875 0 1 1 0 1.75.875.875 0 0 1 0-1.75zM7 6.5h1.4v.75h.02C8.63 6.9 9.2 6.4 10 6.4c1.5 0 1.78.99 1.78 2.28V12h-1.5V9c0-.56-.01-1.28-.78-1.28-.78 0-.9.61-.9 1.24V12H7V6.5z" fill="white"/></svg>',
    'tiktok'    => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="4" fill="#000"/><path d="M10.3 3h-1.2v6.2a1.8 1.8 0 1 1-1.3-1.7V6.2a3 3 0 1 0 2.5 3V6.5c.5.3 1.1.5 1.7.5V5.8c-1-.1-1.7-.8-1.7-1.8V3z" fill="white"/></svg>',
    'store'   => '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" rx="4" fill="#D97757"/><path d="M3 4h10l-1 7H4L3 4z" stroke="white" stroke-width="1" fill="none"/><path d="M6 4V3a2 2 0 014 0v1" stroke="white" stroke-width="1" fill="none"/></svg>',
];
?>
<div class="wrap amai-social-wrap">

    <?php // ---- Page header ---- ?>
    <div class="amai-page-header">
        <h1 class="amai-page-title">Social Media</h1>
        <p class="amai-page-subtitle">Connect your social channels and let us handle the content.</p>
        <?php include AMAI_PLUGIN_DIR . 'templates/partials/tabs.php'; ?>
    </div>

    <?php // ---- Two-column layout: channel nav + content ---- ?>
    <div class="amai-social-layout">

        <?php // ---- Secondary channel nav ---- ?>
        <nav class="amai-channel-nav">
            <div class="amai-channel-nav-label">Channels</div>
            <?php foreach ($channels as $slug => $channel) :
                $status    = $channel->get_connection_status();
                $is_active = ($slug === $active_slug);
                $is_soon   = !$channel->is_available();
                $url       = admin_url('admin.php?page=automarketer-ai-social&channel=' . $slug);
                $classes   = 'amai-channel-item';
                if ($is_active) { $classes .= ' amai-channel-item-active'; }
                if ($is_soon)   { $classes .= ' amai-channel-item-soon'; }
            ?>
            <a href="<?php echo esc_url($url); ?>"
               class="<?php echo esc_attr($classes); ?>"
               <?php if ($is_soon) : ?>title="Coming soon"<?php endif; ?>>
                <span class="amai-channel-icon">
                    <?php echo $channel_icons[$slug] ?? ''; ?>
                </span>
                <span class="amai-channel-label"><?php echo esc_html($channel->get_label()); ?></span>
                <span class="amai-channel-status-dot amai-channel-status-<?php echo esc_attr($status); ?>"></span>
                <?php if ($is_soon) : ?>
                <span class="amai-channel-soon-badge">Soon</span>
                <?php endif; ?>
            </a>
            <?php endforeach; ?>
        </nav>

        <?php // ---- Channel content area ---- ?>
        <div class="amai-channel-content">
            <?php if ($auth_error) : ?>
            <div class="amai-fb-notice amai-fb-notice-warn" id="amai-fb-notice-auto">
                <div class="amai-fb-notice-body">
                    <?php
                    $error_messages = [
                        'user_cancelled'  => 'Facebook authorization was cancelled. You can try again whenever you\'re ready.',
                        'session_expired' => 'Your session expired before the page could be saved. Please try connecting again.',
                        'save_failed'     => 'Something went wrong saving your page. Please try again.',
                        'no_pages'        => 'No Facebook Business Pages were found on your account. You\'ll need a Business Page to connect.',
                        'token_missing'   => 'Authorization failed - no access token was returned. Please try again.',
                    ];
                    echo esc_html($error_messages[$auth_error] ?? 'Something went wrong. Please try again.');
                    ?>
                </div>
            </div>
            <?php endif; ?>

<div id="amai-bio-modal" class="amai-bio-modal-backdrop" style="display:none;">
    <div class="amai-bio-modal">
        <button type="button" class="amai-bio-modal-close" id="amai-bio-modal-close">&#10005;</button>
        <div class="amai-bio-modal-eyebrow">AI BIO WRITER</div>
        <h3 class="amai-bio-modal-title">Write your business bio</h3>
        <div class="amai-bio-modal-fields">
            <div class="amai-bio-modal-field">
                <label class="amai-bio-modal-label" for="amai-bio-biz-name">Business name</label>
                <input type="text" id="amai-bio-biz-name" class="amai-bio-modal-input" placeholder="e.g. Ron's Plumbing" />
            </div>
            <div class="amai-bio-modal-field">
                <label class="amai-bio-modal-label" for="amai-bio-website">Website <span class="amai-bio-modal-optional">(optional but recommended)</span></label>
                <input type="url" id="amai-bio-website" class="amai-bio-modal-input" placeholder="https://yoursite.com" />
            </div>
        </div>
        <button type="button" class="amai-bio-modal-generate" id="amai-bio-generate">Generate bio</button>
        <div class="amai-bio-modal-result" id="amai-biom-result" style="display:none;">
            <label class="amai-bio-modal-label">Your bio</label>
            <textarea id="amai-bio-output" class="amai-bio-modal-textarea" rows="3"></textarea>
            <button type="button" class="amai-bio-modal-copy" id="amai-bio-copy">Copy to clipboard</button>
            <p class="amai-bio-modal-hint">Paste this into the Bio field on the Facebook page creation form.</p>
        </div>
        <div class="amai-bio-modal-error" id="amai-biom-error" style="display:none;"></div>
    </div>
</div>
            <?php SocialPage::renderChannel($active_slug); ?>
        </div>

    </div>
</div>