<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
<?php
/**
 * VMO User Dashboard - Sci-Fi HUD Interface
 * Modern dashboard with AI assistant and business tools
 */

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

$current_user = wp_get_current_user();
$plan = get_user_meta(get_current_user_id(), 'vmo_subscription_status', true) ?: 'free';
$balance = (int) get_user_meta(get_current_user_id(), 'vmo_token_balance', true);

// Get usage data for smart flexible allocation system
if (class_exists('VMO_Usage_Calculator')) {
    $usage_data = VMO_Usage_Calculator::get_usage_data();
} else {
    // Fallback if class doesn't exist yet
    $usage_data = [
        'plan_name' => ucfirst($plan),
        'usage_percent' => 0,
        'days_remaining' => 30,
        'status' => 'ok'
    ];
}
?>

<div class="vmo-hud-interface">
    <style>
        :root{
            --bg:#0a0f16; --bg-2:#0c111c; --ink:#e6f3ff; --muted:#9fb2c8;
            --cyan:#0fe1ff; --cyan-soft:#65f1ff; --violet:#7c5cff;
            --chrome:#223242; --chrome-hi:#334b5f; --chrome-lo:#0b1117;
            --rim:rgba(15,225,255,.5); --rim-2:rgba(15,225,255,.25);
            --radius:22px; --panel-radius:16px; --border:rgba(15,225,255,.28); --edge:rgba(15,225,255,.65);
            --shadow:0 24px 60px rgba(0,0,0,.55);
        }
        .vmo-hud-interface *{box-sizing:border-box}
        .vmo-hud-interface{
            min-height:90vh;color:var(--ink);font:500 14px/1.45 Inter,ui-sans-serif,system-ui;letter-spacing:.1px;
            background:radial-gradient(1200px 700px at 20% -10%, rgba(15,225,255,.06), transparent 60%),
                radial-gradient(1100px 650px at 100% 0%, rgba(124,92,255,.06), transparent 60%),
                linear-gradient(#07121a, #09131b 35%, #070d14);
            border-radius:var(--radius);
            overflow:hidden;
        }
        .vmo-bezel{position:relative;min-height:90vh;padding:14px;border-radius:var(--radius);
            background:linear-gradient(180deg,var(--chrome-hi),var(--chrome-lo));
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 -6px 24px rgba(0,0,0,.5), var(--shadow);
            overflow:hidden;
        }
        .vmo-bezel::before{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 2px var(--rim), inset 0 0 40px var(--rim-2)}
        .vmo-app{display:grid;grid-template-rows:auto 1fr auto;height:100%;gap:10px}

        .vmo-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-radius:14px;
            background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35));border:1px solid var(--border);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);backdrop-filter:blur(12px)}
        .vmo-brand{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.35));
            border:1px solid var(--border)}
        .vmo-brand img{width:28px;height:28px;filter:drop-shadow(0 0 6px rgba(15,225,255,.45))}
        .vmo-brand h1{margin:0;font-size:15px;color:var(--cyan-soft)}
        .vmo-hud-pills{display:flex;gap:10px}
        .vmo-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;color:var(--ink);cursor:pointer;
            background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.45));border:1px solid var(--border);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.6), 0 8px 22px rgba(0,0,0,.35)}
        .vmo-pill:hover{box-shadow:0 0 0 1px var(--edge) inset, 0 12px 30px rgba(15,225,255,.18)}
        .vmo-pill.primary{background:linear-gradient(180deg, rgba(15,225,255,.22), rgba(0,0,0,.55));border-color:var(--edge)}
        .vmo-pill.warning{border-color:rgba(255,170,0,.45);box-shadow:inset 0 1px 0 rgba(255,170,0,.15), 0 8px 22px rgba(255,170,0,.25)}
        .vmo-pill.critical{border-color:rgba(255,68,68,.55);box-shadow:inset 0 1px 0 rgba(255,68,68,.2), 0 8px 22px rgba(255,68,68,.35)}

        .vmo-main{display:grid;grid-template-columns:420px 1fr;gap:12px}
        .vmo-panel{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.55));border-radius:var(--panel-radius);
            border:1px solid var(--border);box-shadow:inset 0 2px 0 rgba(255,255,255,.06), inset 0 -2px 0 rgba(0,0,0,.7), var(--shadow);overflow:hidden}

        /* left chat column */
        .vmo-chat{display:grid;grid-template-rows:auto 1fr auto;padding:12px;min-height:500px}
        .vmo-title{font-weight:800;color:#d9ecff;margin:4px 0 10px 4px;text-shadow:0 0 12px rgba(15,225,255,.2)}
        .vmo-history{overflow:auto;padding:10px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.45));border:1px dashed rgba(15,225,255,.28);min-height:300px}
        .vmo-bubble{max-width:92%;padding:10px 12px;margin:8px 0;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
        .vmo-bubble.user{background:rgba(15,225,255,.08);border-color:rgba(15,225,255,.3)}
        .vmo-composer{display:grid;grid-template-columns:1fr auto auto;gap:10px;margin-top:10px;align-items:end}
        .vmo-composer textarea{min-height:72px;max-height:140px;resize:vertical;padding:12px 14px;color:var(--ink);background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85));border:1px solid var(--border);border-radius:12px}
        .vmo-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.55));color:var(--ink);cursor:pointer;text-decoration:none}
        .vmo-btn.primary{background:linear-gradient(180deg, rgba(15,225,255,.28), rgba(0,0,0,.6));border-color:var(--edge)}
        .vmo-btn.mini{padding:6px 10px;font-size:12px}
        .vmo-mic{position:relative}
        .vmo-mic .dot{position:absolute;inset:-6px;border-radius:999px;box-shadow:0 0 14px rgba(15,225,255,.55), inset 0 0 22px rgba(15,225,255,.35)}

        /* right dashboard area */
        .vmo-workspace{display:grid;grid-template-rows:auto 1fr;padding:12px}
        .vmo-tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
        .vmo-tab{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.5));cursor:pointer}
        .vmo-tab.active{border-color:var(--edge);box-shadow:0 0 0 1px var(--edge) inset, 0 8px 20px rgba(15,225,255,.18)}

        .vmo-canvas{position:relative;min-height:500px;border-radius:16px;background:var(--bg-2);border:1px solid var(--border);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 18px 60px rgba(0,0,0,.6);overflow:hidden}
        .vmo-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.02), rgba(255,255,255,0) 2px) top/100% 4px;opacity:.18}
        .vmo-section{position:absolute;inset:0;padding:14px 16px;overflow:auto;display:none}
        .vmo-section.active{display:block}

        /* common cards inside sections */
        .vmo-cards{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
        .vmo-card{grid-column:span 6;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.55));border:1px solid var(--border);border-radius:12px;padding:12px}
        .vmo-card h4{margin:0 0 8px;color:var(--cyan-soft)}
        .vmo-kv{display:grid;grid-template-columns:1fr auto;gap:6px;margin:4px 0;color:var(--muted)}

        .vmo-footer{padding:10px;text-align:center;color:var(--muted);border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.45));border:1px solid var(--border)}

        /* === Sci‑Fi Dialer Modal (HUD) === */
        .vmo-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;background:radial-gradient(800px 500px at 50% -10%, rgba(15,225,255,.12), transparent 60%), rgba(3,8,14,.75);backdrop-filter:blur(8px)}
        .vmo-overlay.show{display:flex}
        .vmo-dialer{width:380px;max-width:92vw;border-radius:18px;padding:14px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.6), 0 18px 60px rgba(0,0,0,.6)}
        .vmo-dialer h3{margin:0 0 10px;color:var(--cyan-soft);text-shadow:0 0 12px rgba(15,225,255,.25)}
        .vmo-dialer .screen{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85));font-size:18px}
        .vmo-dialer .screen input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);font-size:18px;letter-spacing:1px}
        .vmo-dialer .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
        .vmo-key{height:56px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.6));color:var(--ink);font-size:18px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.6)}
        .vmo-key:hover{box-shadow:0 0 0 1px var(--edge) inset, 0 8px 20px rgba(15,225,255,.18)}
        .vmo-dialer .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
        .vmo-btn.outline{background:transparent}
        .vmo-btn.success{background:linear-gradient(180deg, rgba(34,197,94,.4), rgba(0,0,0,.6));border-color:rgba(34,197,94,.7)}

        /* Status badges */
        .vmo-status-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;margin-left:8px}
        .vmo-status-active{background:rgba(34,197,94,.2);color:#10b981;border:1px solid rgba(16,185,129,.3)}
        .vmo-status-idle{background:rgba(107,114,128,.2);color:#9ca3af;border:1px solid rgba(156,163,175,.3)}
        .vmo-status-premium{background:rgba(124,92,255,.2);color:var(--violet);border:1px solid rgba(124,92,255,.3)}

        @media (max-width: 768px) {
            .vmo-main{grid-template-columns:1fr;gap:8px}
            .vmo-tabs{font-size:12px}
            .vmo-tab{padding:8px 12px}
        }
    </style>

    <!-- Dialer Modal -->
    <div class="vmo-overlay" id="vmoDialerModal" aria-hidden="true">
        <div class="vmo-dialer" role="dialog" aria-modal="true" aria-labelledby="vmoDialerTitle">
            <h3 id="vmoDialerTitle"><?php _e('VMO Dialer', 'vmo-consultant'); ?></h3>
            <div class="screen">
                <input id="vmoDialerInput" type="text" placeholder="<?php esc_attr_e('Enter number…', 'vmo-consultant'); ?>" />
                <button class="vmo-btn outline mini" id="vmoBtnBackspace" title="<?php esc_attr_e('Backspace', 'vmo-consultant'); ?>">⌫</button>
            </div>
            <div class="keys">
                <button class="vmo-key">1</button><button class="vmo-key">2</button><button class="vmo-key">3</button>
                <button class="vmo-key">4</button><button class="vmo-key">5</button><button class="vmo-key">6</button>
                <button class="vmo-key">7</button><button class="vmo-key">8</button><button class="vmo-key">9</button>
                <button class="vmo-key">*</button><button class="vmo-key">0</button><button class="vmo-key">#</button>
            </div>
            <div class="actions">
                <button class="vmo-btn success" id="vmoBtnDial"><?php _e('Call', 'vmo-consultant'); ?></button>
                <button class="vmo-btn" id="vmoBtnListen"><?php _e('Listen', 'vmo-consultant'); ?></button>
                <button class="vmo-btn" id="vmoBtnJoin"><?php _e('Join', 'vmo-consultant'); ?></button>
            </div>
            <div style="display:flex;justify-content:flex-end;margin-top:10px">
                <button class="vmo-btn outline mini" id="vmoBtnCloseDialer"><?php _e('Close', 'vmo-consultant'); ?></button>
            </div>
        </div>
    </div>

    <div class="vmo-bezel">
        <div class="vmo-app">
            <!-- Header -->
            <header class="vmo-header">
                <div class="vmo-brand">
                    <?php 
                    $icon_url = plugin_dir_url(dirname(__FILE__)) . 'assets/vmo-icon.svg';
                    ?>
                    <img src="<?php echo esc_url($icon_url); ?>" alt="<?php esc_attr_e('VMO', 'vmo-consultant'); ?>"/>
                    <h1><?php printf(__('Welcome, %s', 'vmo-consultant'), esc_html($current_user->display_name ?: $current_user->user_login)); ?></h1>
                </div>
                <div class="vmo-hud-pills">
                    <div class="vmo-pill">
                        <strong><?php echo esc_html($usage_data['plan_name']); ?></strong>
                        <?php if ($plan === 'premium' || $plan === 'pro'): ?>
                            <span class="vmo-status-badge vmo-status-premium"><?php _e('PRO', 'vmo-consultant'); ?></span>
                        <?php endif; ?>
                    </div>
                    <div class="vmo-pill <?php echo esc_attr($usage_data['status'] === 'critical' ? 'critical' : ($usage_data['status'] === 'warning' ? 'warning' : '')); ?>">
                        <?php printf(__('%d%% Used', 'vmo-consultant'), $usage_data['usage_percent']); ?>
                        <span style="opacity:0.7;margin-left:4px">•</span>
                        <?php printf(__('%d days left', 'vmo-consultant'), $usage_data['days_remaining']); ?>
                    </div>
                    <div class="vmo-pill primary" id="vmoBtnUpgrade">
                        <a href="<?php echo esc_url(admin_url('admin.php?page=vmo-my-plan')); ?>" style="color:inherit;text-decoration:none">
                            <?php _e('Upgrade', 'vmo-consultant'); ?>
                        </a>
                    </div>
                </div>
            </header>

            <div class="vmo-main">
                <!-- Left: Assistant chat -->
                <section class="vmo-panel vmo-chat">
                    <div class="vmo-title"><?php _e('AI Assistant', 'vmo-consultant'); ?></div>
                    <div class="vmo-history" id="vmoHistory">
                        <div class="vmo-bubble">
                            <?php printf(__('Welcome to VMO, %s! I\'m your AI business consultant. I can help you with phone management, SEO optimization, email campaigns, and more.', 'vmo-consultant'), esc_html($current_user->display_name ?: $current_user->user_login)); ?>
                        </div>
                        <?php if ($plan !== 'free'): ?>
                        <div class="vmo-bubble">
                            <?php 
                            if ($usage_data['usage_percent'] >= 75) {
                                printf(__('You\'ve used %d%% of your monthly allocation with %d days remaining. How can I help optimize your usage?', 'vmo-consultant'), $usage_data['usage_percent'], $usage_data['days_remaining']);
                            } else {
                                _e('You\'re on track this month! How can I assist you today?', 'vmo-consultant');
                            }
                            ?>
                        </div>
                        <?php else: ?>
                        <div class="vmo-bubble">
                            <?php _e('You\'re currently on the free plan. Upgrade to unlock unlimited AI assistance and advanced features.', 'vmo-consultant'); ?>
                        </div>
                        <?php endif; ?>
                    </div>
                    <div class="vmo-composer">
                        <textarea id="vmoPrompt" placeholder="<?php esc_attr_e('Ask VMO to analyze, optimize, or create…', 'vmo-consultant'); ?>"></textarea>
                        <button class="vmo-btn vmo-mic" id="vmoBtnMic">🎤<span class="dot" aria-hidden="true"></span></button>
                        <button class="vmo-btn primary" id="vmoBtnSend"><?php _e('Send', 'vmo-consultant'); ?></button>
                    </div>
                </section>

                <!-- Right: Tabbed work area -->
                <section class="vmo-panel vmo-workspace">
                    <div class="vmo-tabs" id="vmoTabs">
                        <div class="vmo-tab active" data-tab="phone">📞 <?php _e('Phone', 'vmo-consultant'); ?></div>
                        <div class="vmo-tab" data-tab="seo">🔎 <?php _e('SEO', 'vmo-consultant'); ?></div>
                        <div class="vmo-tab" data-tab="email">✉️ <?php _e('Emails', 'vmo-consultant'); ?></div>
                        <div class="vmo-tab" data-tab="documents">📄 <?php _e('Documents', 'vmo-consultant'); ?></div>
                        <div class="vmo-tab" data-tab="approvals">✅ <?php _e('Approvals', 'vmo-consultant'); ?></div>
                        <div class="vmo-tab" data-tab="billing">💳 <?php _e('Billing', 'vmo-consultant'); ?></div>
                    </div>
                    <div class="vmo-canvas">
                        <div class="vmo-scan"></div>

                        <!-- Phone section -->
                        <div class="vmo-section active" id="phone">
                            <div class="vmo-cards">
                                <div class="vmo-card" style="grid-column:span 6">
                                    <h4><?php _e('Business Phone', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Status', 'vmo-consultant'); ?></span><strong><?php _e('Active', 'vmo-consultant'); ?><span class="vmo-status-badge vmo-status-active"><?php _e('LIVE', 'vmo-consultant'); ?></span></strong></div>
                                    <div class="vmo-kv"><span><?php _e('AI Agent', 'vmo-consultant'); ?></span><strong><?php _e('Monitoring', 'vmo-consultant'); ?></strong></div>
                                    <a href="<?php echo esc_url(admin_url('admin.php?page=vmo-ai-dashboard#phone')); ?>" class="vmo-btn primary" style="margin-top:8px"><?php _e('Open Phone System', 'vmo-consultant'); ?></a>
                                </div>
                                <div class="vmo-card" style="grid-column:span 6">
                                    <h4><?php _e('Quick Dialer', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Ready to Call', 'vmo-consultant'); ?></span><strong><?php _e('Available', 'vmo-consultant'); ?></strong></div>
                                    <button class="vmo-btn primary" id="vmoOpenDialer" style="margin-top:8px"><?php _e('Open Sci‑Fi Dialer', 'vmo-consultant'); ?></button>
                                </div>
                            </div>
                        </div>

                        <!-- SEO section -->
                        <div class="vmo-section" id="seo">
                            <div class="vmo-cards">
                                <div class="vmo-card" style="grid-column:span 12">
                                    <h4><?php _e('SEO Reports & Optimization', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Status', 'vmo-consultant'); ?></span><strong><?php _e('Coming Soon', 'vmo-consultant'); ?><span class="vmo-status-badge vmo-status-idle"><?php _e('DEV', 'vmo-consultant'); ?></span></strong></div>
                                    <div class="vmo-kv"><span><?php _e('Features', 'vmo-consultant'); ?></span><strong><?php _e('Automated SEO analysis, content suggestions, optimization approvals', 'vmo-consultant'); ?></strong></div>
                                    <button class="vmo-btn" disabled style="margin-top:8px;opacity:0.5"><?php _e('Coming Soon', 'vmo-consultant'); ?></button>
                                </div>
                            </div>
                        </div>

                        <!-- Email section -->
                        <div class="vmo-section" id="email">
                            <div class="vmo-cards">
                                <div class="vmo-card" style="grid-column:span 12; padding:0; overflow:hidden;">
                                    <div class="vmo-webmail-container">
                                        <!-- Webmail Header -->
                                        <div class="vmo-webmail-header">
                                            <div class="vmo-webmail-title">
                                                <h4 id="vmo-current-folder-title"><?php _e('Inbox', 'vmo-consultant'); ?></h4>
                                                <span class="vmo-badge-local">Local Host</span>
                                            </div>
                                            <div class="vmo-webmail-controls">
                                                <label class="vmo-account-topline">
                                                    <span><?php esc_html_e('Account', 'vmo-consultant'); ?></span>
                                                    <select class="vmo-account-selector" data-vmo-provisioned="0">
                                                        <option value=""><?php esc_html_e('No provisioned email yet - drafts only', 'vmo-consultant'); ?></option>
                                                    </select>
                                                </label>
                                                <button class="vmo-btn-compose" onclick="vmoOpenComposeModal()">
                                                    <span class="icon">✏️</span> Compose
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Webmail Body -->
                                        <div class="vmo-webmail-body">
                                            <!-- Sidebar -->
                                            <div class="vmo-webmail-sidebar">
                                                <div class="vmo-folder active" data-folder="inbox" onclick="vmoSwitchMailFolder('inbox')">
                                                    <span class="icon">📥</span> Inbox <span id="vmo-inbox-count" class="count">0</span>
                                                </div>
                                                <div class="vmo-folder" data-folder="sent" onclick="vmoSwitchMailFolder('sent')">
                                                    <span class="icon">📤</span> Sent
                                                </div>
                                                <div class="vmo-folder" data-folder="drafts" onclick="vmoSwitchMailFolder('drafts')">
                                                    <span class="icon">📝</span> Drafts <span class="count vmo-drafts-count" data-vmo-drafts-count>0</span>
                                                </div>
                                                <div class="vmo-folder" data-folder="trash" onclick="vmoSwitchMailFolder('trash')">
                                                    <span class="icon">🗑️</span> Trash
                                                </div>
                                                
                                                <div class="vmo-sidebar-divider" style="height:1px; background:var(--border); margin:12px 0;"></div>
                                                
                                                <div class="vmo-ai-toggle-container">
                                                    <label class="vmo-toggle-label vmo-mail-switch-row">
                                                        <span><?php esc_html_e('Auto Reply', 'vmo-consultant'); ?></span>
                                                        <input type="checkbox" id="vmo-regular-ai-autoreply-toggle" onchange="vmoToggleAutoReply(this)">
                                                        <span class="vmo-mail-switch" aria-hidden="true"></span>
                                                    </label>
                                                    <p class="vmo-toggle-desc" style="margin:4px 0 0; font-size:10px; color:var(--muted);">Auto-respond to support & policy queries.</p>
                                                    <select id="vmo-ai-autoreply-mode" onchange="vmoUpdateAutoReplyMode()" style="width:100%; margin-top:8px; padding:8px; border-radius:6px; background:rgba(0,0,0,0.3); border:1px solid var(--border); color:var(--ink); font-size:12px;">
                                                        <option value="draft_only">Draft only</option>
                                                        <option value="auto_send_safe">Auto-send safe replies</option>
                                                        <option value="ask_every_reply">Ask before every reply</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Email List -->
                                            <div id="vmo-mail-list" class="vmo-webmail-list">
                                                <div style="padding:20px; text-align:center; color:var(--muted);">Loading emails...</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <style>
                            .vmo-webmail-container { display: flex; flex-direction: column; height: 500px; background: #0b1117; }
                            .vmo-webmail-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
                            .vmo-webmail-title { display: flex; align-items: center; gap: 10px; }
                            .vmo-webmail-title h4 { margin: 0; color: #e6f3ff; font-size: 1.1rem; }
                            .vmo-badge-local { font-size: 0.7rem; background: rgba(15,225,255,0.1); color: #0fe1ff; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(15,225,255,0.2); }
                            .vmo-webmail-controls { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: min(260px, 100%); }
                            .vmo-account-topline { display: flex; flex-direction: column; gap: 4px; color: #9fb2c8; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
                            .vmo-account-selector { background: #0f1722; border: 1px solid rgba(255,255,255,0.15); color: #e6f3ff; padding: 6px 10px; border-radius: 8px; font-size: 0.9rem; outline: none; }
                            .vmo-btn-compose { background: #0fe1ff; color: #000; border: none; padding: 8px 14px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; }
                            .vmo-btn-compose:hover { background: #65f1ff; transform: translateY(-1px); }
                            .vmo-ai-toggle-container { padding: 10px; background: rgba(15,225,255,0.05); border-radius: 8px; border: 1px solid rgba(15,225,255,0.1); }
                            .vmo-mail-switch-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; cursor: pointer; font-size: 12px; color: var(--cyan-soft); font-weight: 700; }
                            .vmo-mail-switch-row input { position: absolute; opacity: 0; pointer-events: none; }
                            .vmo-mail-switch { width: 42px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); position: relative; transition: all 0.2s ease; }
                            .vmo-mail-switch::after { content: ''; position: absolute; width: 16px; height: 16px; top: 2px; left: 3px; border-radius: 50%; background: #9fb2c8; transition: all 0.2s ease; }
                            .vmo-mail-switch-row input:checked + .vmo-mail-switch { background: rgba(15,225,255,0.26); border-color: rgba(15,225,255,0.7); }
                            .vmo-mail-switch-row input:checked + .vmo-mail-switch::after { transform: translateX(18px); background: #0fe1ff; }
                            
                            .vmo-webmail-body { display: flex; flex: 1; overflow: hidden; }
                            .vmo-webmail-sidebar { width: 200px; background: rgba(0,0,0,0.2); border-right: 1px solid rgba(255,255,255,0.08); padding: 15px 0; display: flex; flex-direction: column; gap: 2px; }
                            .vmo-folder { padding: 8px 20px; color: #9fb2c8; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.9rem; transition: all 0.2s; }
                            .vmo-folder:hover { background: rgba(255,255,255,0.05); color: #e6f3ff; }
                            .vmo-folder.active { background: rgba(15,225,255,0.1); color: #0fe1ff; border-right: 2px solid #0fe1ff; }
                            .vmo-folder .count { margin-left: auto; background: #0fe1ff; color: #000; font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; font-weight: 700; }
                            .vmo-folder-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 10px 20px; }
                            .vmo-folder-label { padding: 0 20px; font-size: 0.7rem; color: #5a6b7c; font-weight: 700; margin-bottom: 5px; letter-spacing: 0.5px; }
                            .dot { width: 8px; height: 8px; border-radius: 50%; }
                            .dot.sales { background: #10b981; }
                            .dot.system { background: #f59e0b; }

                            .vmo-webmail-list { flex: 1; overflow-y: auto; }
                            .vmo-email-item { padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; gap: 15px; cursor: pointer; transition: background 0.2s; }
                            .vmo-email-item:hover { background: rgba(255,255,255,0.02); }
                            .vmo-email-item.unread { background: rgba(15,225,255,0.03); border-left: 2px solid #0fe1ff; }
                            .vmo-email-item.unread .vmo-email-subject { font-weight: 700; color: #fff; }
                            .vmo-email-avatar { width: 36px; height: 36px; background: #1e293b; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #9fb2c8; border: 1px solid rgba(255,255,255,0.1); }
                            .vmo-email-content { flex: 1; min-width: 0; }
                            .vmo-email-top { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 0.85rem; }
                            .sender { color: #e6f3ff; font-weight: 500; }
                            .time { color: #5a6b7c; }
                            .vmo-email-subject { color: #e6f3ff; font-size: 0.95rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
                            .vmo-email-preview { color: #9fb2c8; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
                        </style>

                        <!-- Documents section -->
                        <div class="vmo-section" id="documents">
                            <div class="vmo-cards">
                                <div class="vmo-card" style="grid-column:span 12">
                                    <h4><?php _e('AI-Generated Documents', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Generated Pages', 'vmo-consultant'); ?></span><strong>
                                        <?php
                                        $docs = get_posts([
                                            'post_type' => 'page',
                                            'meta_key' => 'vmo_generated_doc',
                                            'meta_value' => '1',
                                            'numberposts' => 10
                                        ]);
                                        echo count($docs);
                                        ?>
                                    </strong></div>
                                    
                                    <?php if ($docs): ?>
                                        <?php foreach ($docs as $doc): ?>
                                        <div class="vmo-kv">
                                            <span><?php echo esc_html(get_the_title($doc->ID)); ?></span>
                                            <strong>
                                                <a href="<?php echo esc_url(get_permalink($doc->ID)); ?>" target="_blank" class="vmo-btn mini"><?php _e('View', 'vmo-consultant'); ?></a>
                                                <a href="<?php echo esc_url(get_edit_post_link($doc->ID)); ?>" class="vmo-btn mini"><?php _e('Edit', 'vmo-consultant'); ?></a>
                                            </strong>
                                        </div>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <div class="vmo-kv">
                                            <span><?php _e('No documents yet', 'vmo-consultant'); ?></span>
                                            <strong><?php _e('Ask the AI assistant to create content!', 'vmo-consultant'); ?></strong>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Approvals section -->
                        <div class="vmo-section" id="approvals">
                            <div class="vmo-cards">
                                <div class="vmo-card" style="grid-column:span 12">
                                    <h4><?php _e('Pending Approvals', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Queue', 'vmo-consultant'); ?></span><strong><?php _e('No pending items', 'vmo-consultant'); ?></strong></div>
                                    <div class="vmo-kv"><span><?php _e('Auto-Approve', 'vmo-consultant'); ?></span><strong><?php _e('Disabled', 'vmo-consultant'); ?></strong></div>
                                    <div id="vmo-approval-list" style="margin-top:12px">
                                        <div class="vmo-kv">
                                            <span style="color:var(--muted)"><?php _e('Approvals will appear here when AI generates content or makes recommendations', 'vmo-consultant'); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Billing section -->
                        <div class="vmo-section" id="billing">
                            <div class="vmo-cards">
                                <div class="vmo-card" style="grid-column:span 6">
                                    <h4><?php _e('Current Plan', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Plan', 'vmo-consultant'); ?></span><strong><?php echo esc_html($usage_data['plan_name']); ?></strong></div>
                                    <div class="vmo-kv">
                                        <span><?php _e('Usage', 'vmo-consultant'); ?></span>
                                        <strong style="color: <?php echo esc_attr($usage_data['status'] === 'critical' ? '#ff4444' : ($usage_data['status'] === 'warning' ? '#ffaa00' : '#0fe1ff')); ?>">
                                            <?php printf(__('%d%% Used', 'vmo-consultant'), $usage_data['usage_percent']); ?>
                                        </strong>
                                    </div>
                                    <div class="vmo-kv"><span><?php _e('Renews In', 'vmo-consultant'); ?></span><strong><?php printf(__('%d days', 'vmo-consultant'), $usage_data['days_remaining']); ?></strong></div>
                                    <?php if ($plan === 'free'): ?>
                                    <div class="vmo-kv"><span><?php _e('Status', 'vmo-consultant'); ?></span><strong><?php _e('Choose a plan to start building', 'vmo-consultant'); ?></strong></div>
                                    <?php endif; ?>
                                </div>
                                <div class="vmo-card" style="grid-column:span 6">
                                    <h4><?php _e('Upgrade & Billing', 'vmo-consultant'); ?></h4>
                                    <div class="vmo-kv"><span><?php _e('Manage', 'vmo-consultant'); ?></span><strong><?php _e('Plans & Usage', 'vmo-consultant'); ?></strong></div>
                                    <a href="<?php echo esc_url(admin_url('admin.php?page=vmo-my-plan')); ?>" class="vmo-btn primary" style="margin-top:8px"><?php _e('Open My Plan', 'vmo-consultant'); ?></a>
                                </div>
                            </div>
                        </div>

                    </div>
                </section>
            </div>

            <!-- Footer -->
            <footer class="vmo-footer">
                <p><?php _e('VMO AI Dashboard • Business Intelligence & Automation • © 2025', 'vmo-consultant'); ?></p>
            </footer>
        </div>
    </div>

    <script>
    jQuery(document).ready(function($) {
        const modal = $('#vmoDialerModal');
        const input = $('#vmoDialerInput');
        
        const setNumber = n => { 
            input.val(n || ''); 
            input.focus(); 
        };
        
        const open = (n='') => { 
            setNumber(n); 
            modal.addClass('show'); 
            modal.attr('aria-hidden','false'); 
        };
        
        const close = () => { 
            modal.removeClass('show'); 
            modal.attr('aria-hidden','true'); 
        };

        // Open from main Phone card
        $('#vmoOpenDialer').on('click', function() { 
            open(); 
        });

        // Open from any Call buttons
        $(document).on('click', '[data-call-number]', function(e) {
            e.preventDefault(); 
            const number = $(this).data('call-number') || '';
            open(number); 
        });

        // Keypad
        $('.vmo-key').on('click', function() { 
            input.val(input.val() + $(this).text().trim()); 
        });
        
        $('#vmoBtnBackspace').on('click', function() { 
            input.val(input.val().slice(0, -1)); 
        });

        // Actions (demo hooks)
        const say = msg => alert(msg + (input.val() ? (' — ' + input.val()) : ''));
        $('#vmoBtnDial').on('click', function() { say('<?php esc_js(_e('Dialing', 'vmo-consultant')); ?>'); });
        $('#vmoBtnListen').on('click', function() { say('<?php esc_js(_e('Listening to call', 'vmo-consultant')); ?>'); });
        $('#vmoBtnJoin').on('click', function() { say('<?php esc_js(_e('Joining call', 'vmo-consultant')); ?>'); });

        // Close handlers
        $('#vmoBtnCloseDialer').on('click', close);
        modal.on('click', function(e) { 
            if (e.target === this) close(); 
        });
        
        $(document).on('keydown', function(e) { 
            if (e.key === 'Escape' && modal.hasClass('show')) close(); 
        });

        // Tab switching
        $('.vmo-tab').on('click', function() {
            const tabId = $(this).data('tab');
            
            // Remove active from all tabs and sections
            $('.vmo-tab').removeClass('active');
            $('.vmo-section').removeClass('active');
            
            // Add active to clicked tab and corresponding section
            $(this).addClass('active');
            $('#' + tabId).addClass('active');
        });

        // Chat functionality
        $('#vmoBtnSend').on('click', function() {
            const message = $('#vmoPrompt').val().trim();
            if (message) {
                // Add user message
                $('#vmoHistory').append(
                    '<div class="vmo-bubble user">' + $('<div>').text(message).html() + '</div>'
                );
                
                // Clear input
                $('#vmoPrompt').val('');
                
                // Add AI response (placeholder)
                setTimeout(function() {
                    $('#vmoHistory').append(
                        '<div class="vmo-bubble"><?php esc_js(_e('I understand your request. This feature will be connected to the AI system to provide intelligent business assistance.', 'vmo-consultant')); ?></div>'
                    );
                    
                    // Scroll to bottom
                    $('#vmoHistory').scrollTop($('#vmoHistory')[0].scrollHeight);
                }, 1000);
                
                // Scroll to bottom
                $('#vmoHistory').scrollTop($('#vmoHistory')[0].scrollHeight);
            }
        });

        // Enter key for chat
        $('#vmoPrompt').on('keypress', function(e) {
            if (e.which == 13 && !e.shiftKey) {
                e.preventDefault();
                $('#vmoBtnSend').click();
            }
        });

        // Mic button placeholder
        $('#vmoBtnMic').on('click', function() {
            alert('<?php esc_js(_e('Voice input feature will be available soon!', 'vmo-consultant')); ?>');
        });
    });
    </script>
</div>
