script.js

// ==========================================================================
// ⚙️ VNUS AI CONFIGURATIONS & GLOBAL STATES
// ==========================================================================
const AVAILABLE_TOOLS = ["Outlook", "Stripe", "Twilio", "OpenAI", "Gmail", "Google Calendar"];

let currentActivePrompt = "";
let fetchedAgentsArray = []; 

function openMyModal(modalId) {
    const modal = document.getElementById(modalId);
    if(modal) { modal.classList.remove('hidden'); modal.classList.add('flex'); }
}

function closeMyModal(modalId) {
    const modal = document.getElementById(modalId);
    if(modal) { modal.classList.remove('flex'); modal.classList.add('hidden'); }
    
    setTimeout(() => {
        document.getElementById('modalBox').className = "bg-white w-full max-w-[450px] rounded-3xl p-6 shadow-2xl relative border border-slate-100 transition-all duration-500 ease-in-out text-slate-800";
        document.getElementById('modalInitialState').classList.remove('hidden');
        document.getElementById('modalLoadingState').classList.add('hidden');
        document.getElementById('modalResultState').classList.add('hidden');
    }, 400);
}

// ==========================================================================
// 🧠 SMART KEYWORD EXTRACTOR & DYNAMIC AI ENGINE
// ==========================================================================
function generateSmartLocalAIResponse(promptText) {
    const query = promptText.toLowerCase();
    
    let detectedCategory = "Custom Business";
    let baseData = {
        starterName: "Operational Assistant",
        starterRole: "Automated processing agent built specifically to handle workflow queues. It monitors input parameters, processes standard data structures, and updates your main dashboard logs instantly.",
        proName: "Professional Automator",
        proRole: "Advanced operations manager configured to streamline your business pipeline. It automatically executes conditional multi-step routines, tracks customer metrics, filters entries, and generates status reports.",
        entName: "Autonomous Expert Suite",
        entRole: "Full-scale enterprise system designed to completely execute the entire lifecycle of your custom operations. It functions with self-healing data loops, connects to global databases, triggers multi-channel alerts, and scales workflows without manual supervision.",
        t1: ["OpenAI"], t2: ["OpenAI", "Gmail"], t3: ["OpenAI", "Gmail", "Stripe"],
        p1: 185, p2: 545, p3: 1295
    };

    if (query.includes("lead") || query.includes("scraper") || query.includes("maker") || query.includes("extract")) {
        detectedCategory = "Lead Generation";
        baseData.starterName = "B2B Lead Scraper";
        baseData.starterRole = "High-efficiency extraction agent that automatically crawls digital directories to gather accurate names, verified corporate emails, and telephone records matching your exact target profile.";
        
        baseData.proName = "Targeted Lead Optimizer";
        baseData.proRole = "Advanced outbound engine that scans multiple networking websites, validates data in real-time, removes duplicate entries, and populates your team spreadsheets with clean b2b prospects.";
        
        baseData.entName = "Autonomous Pipeline Fleet";
        baseData.entRole = "Comprehensive lead command center that monitors incoming signals, auto-enriches cold profiles, cross-checks active email deliverability scores, and immediately updates your internal CRM hooks to keep pipelines loaded.";
        
        baseData.t1 = ["OpenAI", "Gmail"]; baseData.t2 = ["OpenAI", "Gmail", "Outlook"]; baseData.t3 = ["OpenAI", "Gmail", "Outlook", "Twilio"];
        baseData.p1 = 249; baseData.p2 = 689; baseData.p3 = 1580;
    } 
    else if (query.includes("outreach") || query.includes("marketing") || query.includes("mail") || query.includes("campaign")) {
        detectedCategory = "Cold Outreach";
        baseData.starterName = "Campaign Courier";
        baseData.starterRole = "Smart delivery bot that automates initial message sequencing, manages contact schedules, and routes cold communications systematically without triggering spam folders.";
        
        baseData.proName = "Outreach Relationship Manager";
        baseData.proRole = "Dedicated outreach assistant that dynamic-injects user context into communication scripts, keeps track of open-rates, filters automatic out-of-office text replies, and catalogs high-interest responses.";
        
        baseData.entName = "Conversational Acquisition Fleet";
        baseData.entRole = "Autonomous marketing architecture running continuous follow-up logic. It detects positive intent, books direct discovery conversations via smart links, updates lead scoring, and syncs data to company dashboards.";
        
        baseData.t1 = ["OpenAI", "Outlook"]; baseData.t2 = ["OpenAI", "Outlook", "Gmail"]; baseData.t3 = ["OpenAI", "Outlook", "Gmail", "Twilio"];
        baseData.p1 = 299; baseData.p2 = 749; baseData.p3 = 1650;
    }
    else if (query.includes("dropship") || query.includes("store") || query.includes("shop") || query.includes("product")) {
        detectedCategory = "E-Commerce Store";
        baseData.starterName = "Catalog Sync Agent";
        baseData.starterRole = "Automated retail bot that monitors digital catalog listings, updates local stock quantities in real-time, and flags sudden wholesale price changes instantly to protect margins.";
        
        baseData.proName = "Order Processing Specialist";
        baseData.proRole = "Smart checkout companion that verifies incoming purchase requests, extracts shipping destination text, populates courier details, and pushes accurate notifications back to clients.";
        
        baseData.entName = "Fulfillment Matrix Fleet";
        baseData.entRole = "Autonomous commercial enterprise structure handling cart abandonment tracking, secure stripe checkout sequences, customized invoice deliveries, and automated international shipping allocation loops.";
        
        baseData.t1 = ["OpenAI", "Stripe"]; baseData.t2 = ["OpenAI", "Stripe", "Gmail"]; baseData.t3 = ["OpenAI", "Stripe", "Gmail", "Twilio"];
        baseData.p1 = 349; baseData.p2 = 899; baseData.p3 = 1950;
    }
    else if (query.includes("schedule") || query.includes("calendar") || query.includes("meet") || query.includes("booking")) {
        detectedCategory = "AI Scheduler";
        baseData.starterName = "Smart Booking Clerk";
        baseData.starterRole = "Digital slot coordinator that scans configured calendar windows, blocks incoming public meeting requests, and avoids timing overlaps automatically.";
        
        baseData.proName = "Dynamic Meeting Coordinator";
        baseData.proRole = "Advanced schedule manager providing automatic timezone shifts, broadcasting personalized calendar confirmations, and distributing briefing notes prior to team sessions.";
        
        baseData.entName = "Multi-Zone Scheduling Fleet";
        baseData.entRole = "Enterprise logistics manager handling high-volume client intake pipelines, processing payment-backed session checkouts, updating centralized databases, and firing operational sms reminders via api.";
        
        baseData.t1 = ["OpenAI", "Google Calendar"]; baseData.t2 = ["OpenAI", "Google Calendar", "Outlook"]; baseData.t3 = ["OpenAI", "Google Calendar", "Outlook", "Twilio"];
        baseData.p1 = 199; baseData.p2 = 599; baseData.p3 = 1390;
    }
    else if (query.includes("wingman") || query.includes("assistant") || query.includes("helper")) {
        detectedCategory = "Business Wingman";
        baseData.starterName = "Core Wingman Assistant";
        baseData.starterRole = "Personal organizational assistant handling daily notification filtering, action item tracking, and organizing notes to keep you focused on operational milestones.";
        
        baseData.proName = "Strategic Business Co-Pilot";
        baseData.proRole = "Proactive business wingman that summarizes lengthly text reports, suggests data-driven responses for conversations, and organizes your critical project goals systematically.";
        
        baseData.entName = "Autonomous Executive Suite";
        baseData.entRole = "The ultimate operations wingman running automated background checks across your business stack. It synchronizes calendars, drafts executive proposals, triggers custom task sequences, and maintains workflows.";
        
        baseData.t1 = ["OpenAI"]; baseData.t2 = ["OpenAI", "Gmail"]; baseData.t3 = ["OpenAI", "Gmail", "Google Calendar", "Outlook"];
        baseData.p1 = 220; baseData.p2 = 640; baseData.p3 = 1450;
    }

    const seed = Math.floor(Math.random() * 30);

    return [
        {
            "id": Date.now(),
            "name": baseData.starterName,
            "role": baseData.starterRole,
            "tools": baseData.t1,
            "price": "$" + (baseData.p1 + seed),
            "complexity": "Normal"
        },
        {
            "id": Date.now() + 1,
            "name": baseData.proName,
            "role": baseData.proRole,
            "tools": baseData.t2,
            "price": "$" + (baseData.p2 + (seed * 2)),
            "complexity": "Medium"
        },
        {
            "id": Date.now() + 2,
            "name": baseData.entName,
            "role": baseData.entRole,
            "tools": baseData.t3,
            "price": "$" + (baseData.p3 + (seed * 3)),
            "complexity": "Hard"
        }
    ];
}

// ==========================================================================
// 🚀 MODAL INTERCEPT LOGIC
// ==========================================================================
function handleSendAction() {
    const userInput = document.getElementById('userInput');
    const text = userInput.value.trim();
    if (!text) return;

    currentActivePrompt = text;
    openMyModal('architectModal');

    userInput.value = "";
    const submitBtn = document.getElementById('submitBtn');
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.style.backgroundColor = '#f1f5f9';
        submitBtn.style.color = '#cbd5e1';
        submitBtn.style.cursor = 'not-allowed';
    }
}

async function processSystemArchitecture() {
    const modalBox = document.getElementById('modalBox');
    const initialState = document.getElementById('modalInitialState');
    const loadingState = document.getElementById('modalLoadingState');
    const resultState = document.getElementById('modalResultState');
    const popupCardsGrid = document.getElementById('popupCardsGrid');

    if (!modalBox || !popupCardsGrid || !currentActivePrompt) return;

    initialState.classList.add('hidden');
    loadingState.classList.remove('hidden');

    fetchedAgentsArray = generateSmartLocalAIResponse(currentActivePrompt);

    setTimeout(() => {
        loadingState.classList.add('hidden');
        modalBox.classList.remove('max-w-[450px]');
        modalBox.classList.add('max-w-[840px]'); 
        resultState.classList.remove('hidden');

        let cardsHTML = "";
        fetchedAgentsArray.forEach(agent => {
            const toolsArr = agent.tools || ["OpenAI"];
            const badges = toolsArr.map(t => `<span class="bg-slate-100 text-slate-700 text-[9px] px-2 py-0.5 rounded font-bold border border-slate-200">${t}</span>`).join(' ');
            
            let compColor = "bg-emerald-50 text-emerald-700 border-emerald-200";
            if (agent.complexity === "Medium") compColor = "bg-amber-50 text-amber-700 border-amber-200";
            if (agent.complexity === "Hard") compColor = "bg-rose-50 text-rose-700 border-rose-200";

            cardsHTML += `
                <div class="bg-slate-50 border border-slate-200 rounded-2xl p-4 flex flex-col justify-between shadow-sm min-h-[220px]">
                    <div>
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-black text-slate-800 text-[12px] truncate max-w-[190px]" title="${agent.name}">${agent.name}</h4>
                            <span class="${compColor} text-[8px] px-2 py-0.5 rounded border font-black uppercase">${agent.complexity || "Normal"}</span>
                        </div>
                        <p class="text-[11px] text-slate-500 leading-relaxed mb-4">${agent.role}</p>
                    </div>
                    <div>
                        <div class="flex flex-wrap gap-1 mb-3">${badges}</div>
                        <div class="flex items-center justify-between border-t border-slate-200/60 pt-2.5">
                            <span class="text-sm font-black text-slate-900">${agent.price}</span>
                            <button onclick="handleHireAction(${agent.id})" class="bg-slate-950 text-white text-[9px] font-black px-3 py-1.5 rounded-xl hover:bg-slate-900 transition uppercase shadow-sm cursor-pointer">Hire Agent</button>
                        </div>
                    </div>
                </div>
            `;
        });

        popupCardsGrid.innerHTML = cardsHTML;
        currentActivePrompt = ""; 
    }, 800); 
}

// ==========================================================================
// 🛒 HIRE ACTION & FLEET MANAGEMENT
// ==========================================================================
function handleHireAction(agentId) {
    const selectedAgent = fetchedAgentsArray.find(a => a.id === agentId);
    if (!selectedAgent) return;

    const isLoggedIn = localStorage.getItem('userIsLoggedIn');

    if (isLoggedIn === 'true' || isLoggedIn === true) {
        let currentFleet = [];
        try {
            const existingFleet = localStorage.getItem('activeHiredAgentFleet');
            if (existingFleet) currentFleet = JSON.parse(existingFleet);
        } catch(e) { currentFleet = []; }

        currentFleet.push(selectedAgent);
        localStorage.setItem('activeHiredAgentFleet', JSON.stringify(currentFleet));
        
        renderHiredEmployeeState();
        closeMyModal('architectModal');
    } else {
        localStorage.setItem('pendingHiredAgent', JSON.stringify(selectedAgent));
        window.location.href = 'auth.html';
    }
}

// ==========================================================================
// 🛡️ AUTHENTICATION PROFILE & DASHBOARD SYNC LOGIC
// ==========================================================================
function checkAndRenderUserState() {
    const isLoggedIn = localStorage.getItem('userIsLoggedIn');
    const userDisplayName = localStorage.getItem('userDisplayName') || "User";
    
    const guestAuthArea = document.getElementById('guestAuthArea');
    const userProfileArea = document.getElementById('userProfileArea');
    const profileLetterCircle = document.getElementById('profileLetterCircle');
    const promoBanner = document.getElementById('promoBanner');

    if (isLoggedIn === 'true' || isLoggedIn === true) {
        if (guestAuthArea) guestAuthArea.classList.add('hidden');
        if (userProfileArea && profileLetterCircle) {
            userProfileArea.classList.remove('hidden');
            userProfileArea.classList.add('flex');
            profileLetterCircle.innerText = userDisplayName.charAt(0);
        }
        if (promoBanner) promoBanner.classList.add('hidden');

        const pendingAgent = localStorage.getItem('pendingHiredAgent');
        if (pendingAgent) {
            let currentFleet = [];
            try {
                const existingFleet = localStorage.getItem('activeHiredAgentFleet');
                if (existingFleet) currentFleet = JSON.parse(existingFleet);
            } catch(e) { currentFleet = []; }

            currentFleet.push(JSON.parse(pendingAgent));
            localStorage.setItem('activeHiredAgentFleet', JSON.stringify(currentFleet));
            localStorage.removeItem('pendingHiredAgent');
        }

        renderHiredEmployeeState();
    } else {
        if (guestAuthArea) guestAuthArea.classList.add('hidden');
        if (userProfileArea) userProfileArea.classList.add('hidden');
        if (promoBanner) promoBanner.classList.remove('hidden');
    }
}

// ==========================================================================
// 🤖 RENDER MULTIPLE HIRED EMPLOYEES (PURE CARD CLICKABLE)
// ==========================================================================
function renderHiredEmployeeState() {
    const activeFleetData = localStorage.getItem('activeHiredAgentFleet');
    const hiredEmployeeSection = document.getElementById('hiredEmployeeSection');
    const hiredEmployeeCardSpace = document.getElementById('hiredEmployeeCardSpace');

    if (activeFleetData && hiredEmployeeSection && hiredEmployeeCardSpace) {
        const fleetArray = JSON.parse(activeFleetData);
        
        if(fleetArray.length === 0) {
            hiredEmployeeSection.classList.add('hidden');
            return;
        }

        hiredEmployeeSection.classList.remove('hidden');
        let fullFleetHTML = `<div class="space-y-4">`; 

        fleetArray.forEach(agent => {
            const toolsArr = agent.tools || ["OpenAI"];
            const badges = toolsArr.map(t => `<span class="bg-indigo-600/20 text-indigo-900 text-[10px] px-2 py-0.5 rounded-md font-bold border border-indigo-300/30">${t}</span>`).join(' ');

            fullFleetHTML += `
                <div onclick="window.location.href='workspace.html?agentId=${agent.id}'" class="bg-white/90 text-slate-800 rounded-2xl p-5 shadow-lg border border-white/50 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 transition duration-300 hover:shadow-xl hover:scale-[1.005] cursor-pointer">
                    <div class="space-y-1">
                        <div class="flex items-center space-x-2">
                            <h4 class="font-black text-base text-slate-900">${agent.name}</h4>
                            <span class="bg-emerald-500 text-white text-[9px] px-2 py-0.5 rounded-full font-black uppercase tracking-wider">Live</span>
                        </div>
                        <p class="text-xs text-slate-600 leading-relaxed max-w-2xl">${agent.role}</p>
                        <div class="flex flex-wrap gap-1 pt-1">${badges}</div>
                    </div>
                    <div class="bg-slate-950 border border-slate-800 rounded-xl px-4 py-2.5 text-center min-w-[100px] flex flex-col justify-center shadow-md self-stretch sm:self-auto">
                        <span class="text-[8px] font-black text-indigo-400 uppercase tracking-wider">Subscribed</span>
                        <span class="text-sm font-black text-white">${agent.price}</span>
                    </div>
                </div>
            `;
        });

        fullFleetHTML += `</div>`;
        hiredEmployeeCardSpace.innerHTML = fullFleetHTML;
    }
}

// ==========================================================================
// 🏁 RUN LOGIC HANDLERS ON DOM READY
// ==========================================================================
document.addEventListener('DOMContentLoaded', () => {
    const userInput = document.getElementById('userInput');
    const submitBtn = document.getElementById('submitBtn');
    const architectTriggerBtn = document.getElementById('architectTriggerBtn');
    const closeArchitectModal = document.getElementById('closeArchitectModal');
    const closeBlueprintBtn = document.getElementById('closeBlueprintBtn');
    const logoutBtn = document.getElementById('logoutBtn');

    checkAndRenderUserState();

    if (logoutBtn) {
        logoutBtn.addEventListener('click', () => {
            localStorage.clear(); 
            window.location.reload();
        });
    }

    if (architectTriggerBtn) architectTriggerBtn.addEventListener('click', processSystemArchitecture);
    if (closeArchitectModal) closeArchitectModal.addEventListener('click', () => closeMyModal('architectModal'));
    if (closeBlueprintBtn) closeBlueprintBtn.addEventListener('click', () => closeMyModal('architectModal'));

    if (userInput && submitBtn) {
        userInput.addEventListener('input', function() {
            if(this.value.trim().length > 0) {
                submitBtn.disabled = false;
                submitBtn.style.backgroundColor = '#0f172a';
                submitBtn.style.color = '#ffffff';
                submitBtn.style.cursor = 'pointer';
            } else {
                submitBtn.disabled = true;
                submitBtn.style.backgroundColor = '#f1f5f9';
                submitBtn.style.color = '#cbd5e1';
                submitBtn.style.cursor = 'not-allowed';
            }
        });

        submitBtn.addEventListener('click', handleSendAction);

        userInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                handleSendAction();
            }
        });
    }

    document.querySelectorAll('.suggest-tag').forEach(tag => {
        tag.addEventListener('click', function() {
            const spans = this.querySelectorAll('span');
            let clickedText = spans.length >= 2 ? spans[1].innerText.trim() : this.innerText.trim();
            if (userInput && clickedText) {
                userInput.value = `I need an AI workflow optimized for ${clickedText} integrations...`;
                userInput.dispatchEvent(new Event('input')); 
                userInput.focus();
            }
        });
    });
});