script.js

// Modern Portfolio JavaScript with Command Palette
// Initialize Supabase
let supabaseClient = null;
let currentSessionId = null;
let visitorId = null;

// Initialize Supabase
function initSupabase() {
    try {
        if (typeof SUPABASE_CONFIG !== 'undefined' && SUPABASE_CONFIG.url && SUPABASE_CONFIG.anonKey) {
            const { createClient } = window.supabase;
            supabaseClient = createClient(SUPABASE_CONFIG.url, SUPABASE_CONFIG.anonKey);
            console.log('✅ Supabase connected');
            initSession();
        } else {
            console.warn('⚠️ Supabase not configured. Running in offline mode.');
        }
    } catch (error) {
        console.error('❌ Supabase initialization error:', error);
    }
}

// Get visitor ID
function getVisitorId() {
    let id = localStorage.getItem('visitorId');
    if (!id) {
        id = 'visitor_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
        localStorage.setItem('visitorId', id);
    }
    return id;
}

// Initialize session
async function initSession() {
    visitorId = getVisitorId();
    currentSessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
    
    if (!supabaseClient) return;
    
    try {
        await supabaseClient.from('visitor_sessions').insert({
            session_id: currentSessionId,
            visitor_id: visitorId,
            user_agent: navigator.userAgent,
            screen_resolution: `${window.screen.width}x${window.screen.height}`,
            referrer: document.referrer || 'direct',
            landing_page: window.location.pathname
        });
    } catch (error) {
        console.error('Session init error:', error);
    }
}

// Track interaction
async function trackInteraction(type, details = {}) {
    if (!supabaseClient) return;
    
    try {
        await supabaseClient.from('user_interactions').insert({
            session_id: currentSessionId,
            visitor_id: visitorId,
            interaction_type: type,
            details: details,
            timestamp: new Date().toISOString()
        });
    } catch (error) {
        console.error('Tracking error:', error);
    }
}

// Save chat message
async function saveChatMessage(message, isUser, response = null) {
    if (!supabaseClient || !currentSessionId) return;
    
    try {
        await supabaseClient.from('chat_messages').insert({
            session_id: currentSessionId,
            visitor_id: visitorId,
            message: message,
            is_user: isUser,
            ai_response: response
        });
    } catch (error) {
        console.error('Chat save error:', error);
    }
}

// Submit contact message
async function submitContactMessage(name, email, message) {
    if (!supabaseClient) {
        console.warn('Supabase not configured. Message not saved.');
        return false;
    }
    
    try {
        await supabaseClient.from('contact_submissions').insert({
            visitor_id: visitorId,
            session_id: currentSessionId,
            name: name,
            email: email,
            message: message,
            source: 'ai_chat'
        });
        return true;
    } catch (error) {
        console.error('Contact submission error:', error);
        return false;
    }
}

// AI Knowledge Base
const knowledgeBase = {
    about: {
        name: "Deepak Paswan",
        role: "Full Stack Developer & AI Enthusiast",
        education: "B.Com ISM at Jain College",
        location: "India",
        description: "A passionate student with big tech dreams, currently learning web development and building exciting projects."
    },
    skills: {
        frontend: ["HTML5", "CSS3", "JavaScript", "React"],
        backend: ["Node.js", "MongoDB", "PostgreSQL", "Supabase"],
        tools: ["Git", "GitHub", "Command Line", "AI/ML Basics"]
    },
    projects: [
        {
            name: "AI Portfolio",
            description: "Interactive portfolio with AI chatbot and backend",
            technologies: ["HTML", "CSS", "JavaScript", "Supabase"]
        }
    ],
    contact: {
        github: "https://github.com/dpkpaswan",
        linkedin: "https://www.linkedin.com/in/deepakpaswan1",
        instagram: "https://www.instagram.com/_deepak_12_10/"
    }
};

// AI Response Generator
class AIAssistant {
    generateResponse(userMessage) {
        const msg = userMessage.toLowerCase();
        
        if (msg.match(/\b(who|about|tell|know)\b.*\b(deepak|you)\b/i)) {
            return `I'm ${knowledgeBase.about.name}, ${knowledgeBase.about.role}. ${knowledgeBase.about.description}<br><br>
I'm pursuing ${knowledgeBase.about.education} and passionate about building modern web applications!<br><br>
What would you like to know more about?`;
        }
        
        if (msg.match(/\b(skill|technology|tech|know|programming)\b/i)) {
            return `Here are my technical skills:<br><br>
<strong>Frontend:</strong> ${knowledgeBase.skills.frontend.join(', ')}<br>
<strong>Backend:</strong> ${knowledgeBase.skills.backend.join(', ')}<br>
<strong>Tools:</strong> ${knowledgeBase.skills.tools.join(', ')}<br><br>
I'm continuously learning and improving!`;
        }
        
        if (msg.match(/\b(project|work|built)\b/i)) {
            let response = "Here are my featured projects:<br><br>";
            knowledgeBase.projects.forEach(project => {
                response += `📌 <strong>${project.name}</strong><br>${project.description}<br>Tech: ${project.technologies.join(', ')}<br><br>`;
            });
            return response + `Check out my GitHub for more: <a href="${knowledgeBase.contact.github}" target="_blank" rel="noopener">${knowledgeBase.contact.github}</a>`;
        }
        
        if (msg.match(/\b(contact|reach|connect)\b/i)) {
            return `Let's connect! You can find me at:<br><br>
🔗 GitHub: <a href="${knowledgeBase.contact.github}" target="_blank" rel="noopener">${knowledgeBase.contact.github}</a><br>
💼 LinkedIn: <a href="${knowledgeBase.contact.linkedin}" target="_blank" rel="noopener">${knowledgeBase.contact.linkedin}</a><br>
📸 Instagram: <a href="${knowledgeBase.contact.instagram}" target="_blank" rel="noopener">${knowledgeBase.contact.instagram}</a><br><br>
Feel free to reach out!`;
        }
        
        if (msg.match(/\b(hi|hello|hey)\b/i)) {
            return `Hello! 👋 I'm Deepak's AI assistant. Ask me about his skills, projects, or how to contact him!`;
        }
        
        if (msg.match(/\b(send|message|question|suggestion|feedback|email)\b/i) && msg.match(/\b(deepak|you|him)\b/i)) {
            return `I'd love to help you send a message to Deepak! 📧<br><br>
Please provide your details in this format:<br>
<strong>Name:</strong> Your Name<br>
<strong>Email:</strong> your@email.com<br>
<strong>Message:</strong> Your message here<br><br>
Or you can reach out directly at:<br>
• LinkedIn: <a href="${knowledgeBase.contact.linkedin}" target="_blank" rel="noopener">Connect on LinkedIn</a><br>
• GitHub: <a href="${knowledgeBase.contact.github}" target="_blank" rel="noopener">GitHub Profile</a>`;
        }
        
        return `That's interesting! I can tell you about:<br>
• Deepak's skills and expertise<br>
• His projects and work<br>
• How to contact him<br>
• Send a message to Deepak<br><br>
What would you like to know?`;
    }
}

const ai = new AIAssistant();

// Theme Management
function initTheme() {
    const theme = localStorage.getItem('theme') || 'dark';
    document.documentElement.setAttribute('data-theme', theme);
    updateThemeIcon(theme);
}

function toggleTheme() {
    const current = document.documentElement.getAttribute('data-theme');
    const newTheme = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeIcon(newTheme);
    trackInteraction('theme_toggle', { theme: newTheme });
}

function updateThemeIcon(theme) {
    const icon = document.querySelector('#themeToggle i');
    if (icon) {
        icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
    }
}

// Command Palette
const commandPalette = {
    init() {
        const palette = document.getElementById('commandPalette');
        const input = document.getElementById('commandInput');
        const btn = document.getElementById('cmdPaletteBtn');
        
        // Open command palette
        document.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
                e.preventDefault();
                this.open();
            }
            
            if (e.key === 'Escape' && palette.classList.contains('active')) {
                this.close();
            }
        });
        
        btn?.addEventListener('click', () => this.toggle());
        palette?.addEventListener('click', (e) => {
            if (e.target === palette) this.close();
        });
        
        // Handle command selection
        document.querySelectorAll('.command-item').forEach(item => {
            item.addEventListener('click', () => {
                const action = item.getAttribute('data-action');
                this.executeCommand(action);
                this.close();
            });
        });
    },
    
    open() {
        const palette = document.getElementById('commandPalette');
        const input = document.getElementById('commandInput');
        palette.classList.add('active');
        input.focus();
        trackInteraction('command_palette_opened');
    },
    
    close() {
        const palette = document.getElementById('commandPalette');
        palette.classList.remove('active');
    },
    
    toggle() {
        const palette = document.getElementById('commandPalette');
        palette.classList.contains('active') ? this.close() : this.open();
    },
    
    executeCommand(action) {
        const actions = {
            'home': () => scrollToSection('home'),
            'projects': () => scrollToSection('projects'),
            'experience': () => scrollToSection('experience'),
            'skills': () => scrollToSection('skills'),
            'ai-chat': () => scrollToSection('ai-chat'),
            'github': () => window.open(knowledgeBase.contact.github, '_blank'),
            'linkedin': () => window.open(knowledgeBase.contact.linkedin, '_blank'),
            'instagram': () => window.open(knowledgeBase.contact.instagram, '_blank'),
            'toggle-theme': () => toggleTheme()
        };
        
        if (actions[action]) {
            actions[action]();
            trackInteraction('command_executed', { command: action });
        }
    }
};

// Smooth scroll to section
function scrollToSection(sectionId) {
    const section = document.getElementById(sectionId);
    if (section) {
        const offset = 96; // navbar height
        const top = section.offsetTop - offset;
        window.scrollTo({ top, behavior: 'smooth' });
        
        // Update active nav link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('data-section') === sectionId) {
                link.classList.add('active');
            }
        });
    }
}

// Animate numbers
function animateStats() {
    const stats = document.querySelectorAll('.stat-number');
    
    stats.forEach(stat => {
        const target = parseInt(stat.getAttribute('data-target'));
        const duration = 2000;
        const increment = target / (duration / 16);
        let current = 0;
        
        const updateCount = () => {
            current += increment;
            if (current < target) {
                stat.textContent = Math.floor(current);
                requestAnimationFrame(updateCount);
            } else {
                stat.textContent = target;
            }
        };
        
        updateCount();
    });
}

// Clock
function updateClock() {
    const clock = document.getElementById('currentTime');
    if (clock) {
        const now = new Date();
        clock.textContent = now.toLocaleTimeString('en-US', { hour12: false });
    }
}

// Terminal Typing Animation
function initTerminalTyping() {
    const terminalBody = document.getElementById('terminalBody');
    if (!terminalBody) return;
    
    const commands = [
        { cmd: 'whoami', output: 'Deepak Paswan - Full Stack Developer', delay: 1000 },
        { cmd: 'cat skills.txt', output: '- JavaScript / TypeScript\n- React / Node.js\n- HTML / CSS / Tailwind\n- MongoDB / PostgreSQL\n- Git / GitHub', delay: 1500 },
        { cmd: 'ls projects/', output: 'ai-portfolio  web-apps  automation-tools', delay: 1000 },
        { cmd: 'echo $STATUS', output: '🚀 Available for opportunities!', delay: 1000 },
        { cmd: 'git log --oneline -3', output: '✨ Added AI chatbot integration\n🎨 Redesigned portfolio UI\n🔧 Implemented Supabase backend', delay: 1200 }
    ];
    
    let currentCommandIndex = 0;
    
    function typeCommand(text, element, speed = 50) {
        let i = 0;
        element.innerHTML = '';
        
        return new Promise((resolve) => {
            const interval = setInterval(() => {
                if (i < text.length) {
                    element.innerHTML += text.charAt(i);
                    i++;
                } else {
                    clearInterval(interval);
                    setTimeout(resolve, 300);
                }
            }, speed);
        });
    }
    
    async function executeCommand(command) {
        // Create new command line
        const commandLine = document.createElement('div');
        commandLine.className = 'terminal-line';
        commandLine.innerHTML = '<span class="prompt">$</span> <span class="command"></span>';
        
        // Remove cursor from previous line
        const oldCursor = terminalBody.querySelector('.typing-cursor');
        if (oldCursor) oldCursor.remove();
        
        terminalBody.appendChild(commandLine);
        
        // Type the command
        const cmdElement = commandLine.querySelector('.command');
        await typeCommand(command.cmd, cmdElement, 60);
        
        // Show output
        await new Promise(resolve => setTimeout(resolve, 200));
        
        const outputDiv = document.createElement('div');
        outputDiv.className = 'terminal-output';
        
        // Handle multiline output
        const lines = command.output.split('\n');
        if (lines.length > 1) {
            outputDiv.innerHTML = lines.join('<br>');
        } else {
            outputDiv.textContent = command.output;
        }
        
        terminalBody.appendChild(outputDiv);
        
        // Scroll to bottom
        terminalBody.scrollTop = terminalBody.scrollHeight;
        
        // Wait before next command
        await new Promise(resolve => setTimeout(resolve, command.delay));
        
        // Execute next command
        currentCommandIndex++;
        if (currentCommandIndex < commands.length) {
            await executeCommand(commands[currentCommandIndex]);
        } else {
            // Add final cursor
            const finalLine = document.createElement('div');
            finalLine.className = 'terminal-line';
            finalLine.innerHTML = '<span class="prompt">$</span> <span class="typing-cursor">|</span>';
            terminalBody.appendChild(finalLine);
        }
    }
    
    // Clear initial content and start animation
    setTimeout(() => {
        terminalBody.innerHTML = '';
        executeCommand(commands[0]);
    }, 500);
}

// Mobile Menu Management
function initMobileMenu() {
    const toggle = document.getElementById('mobileMenuToggle');
    const menu = document.querySelector('.nav-menu');
    const navLinks = document.querySelectorAll('.nav-link');
    
    if (!toggle || !menu) return;
    
    toggle.addEventListener('click', () => {
        toggle.classList.toggle('active');
        menu.classList.toggle('mobile-open');
        
        // Track interaction
        trackInteraction('mobile_menu_toggle', { 
            action: menu.classList.contains('mobile-open') ? 'open' : 'close' 
        });
    });
    
    // Close mobile menu when clicking nav links
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            toggle.classList.remove('active');
            menu.classList.remove('mobile-open');
        });
    });
    
    // Close mobile menu when clicking outside
    document.addEventListener('click', (e) => {
        if (!toggle.contains(e.target) && !menu.contains(e.target)) {
            toggle.classList.remove('active');
            menu.classList.remove('mobile-open');
        }
    });
    
    // Close mobile menu on escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && menu.classList.contains('mobile-open')) {
            toggle.classList.remove('active');
            menu.classList.remove('mobile-open');
        }
    });
}

// Particle System
function initParticles() {
    const canvas = document.getElementById('particles');
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    const particles = [];
    const particleCount = 50;
    
    class Particle {
        constructor() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.size = Math.random() * 2 + 1;
            this.speedX = Math.random() * 1 - 0.5;
            this.speedY = Math.random() * 1 - 0.5;
            this.opacity = Math.random() * 0.5 + 0.2;
        }
        
        update() {
            this.x += this.speedX;
            this.y += this.speedY;
            
            if (this.x > canvas.width) this.x = 0;
            if (this.x < 0) this.x = canvas.width;
            if (this.y > canvas.height) this.y = 0;
            if (this.y < 0) this.y = canvas.height;
        }
        
        draw() {
            ctx.fillStyle = `rgba(99, 102, 241, ${this.opacity})`;
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
            ctx.fill();
        }
    }
    
    for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
    }
    
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(particle => {
            particle.update();
            particle.draw();
        });
        
        particles.forEach((particle, i) => {
            particles.slice(i + 1).forEach(otherParticle => {
                const dx = particle.x - otherParticle.x;
                const dy = particle.y - otherParticle.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < 150) {
                    ctx.strokeStyle = `rgba(99, 102, 241, ${0.2 * (1 - distance / 150)})`;
                    ctx.lineWidth = 1;
                    ctx.beginPath();
                    ctx.moveTo(particle.x, particle.y);
                    ctx.lineTo(otherParticle.x, otherParticle.y);
                    ctx.stroke();
                }
            });
        });
        
        requestAnimationFrame(animate);
    }
    
    animate();
    
    window.addEventListener('resize', () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    });
}

// Mobile Menu Management
function initMobileMenu() {
    const toggle = document.getElementById('mobileMenuToggle');
    const menu = document.querySelector('.nav-menu');
    const navLinks = document.querySelectorAll('.nav-link');
    
    if (!toggle || !menu) return;
    
    toggle.addEventListener('click', () => {
        toggle.classList.toggle('active');
        menu.classList.toggle('mobile-open');
        
        // Track interaction
        trackInteraction('mobile_menu_toggle', { 
            action: menu.classList.contains('mobile-open') ? 'open' : 'close' 
        });
    });
    
    // Close mobile menu when clicking nav links
    navLinks.forEach(link => {
        link.addEventListener('click', () => {
            toggle.classList.remove('active');
            menu.classList.remove('mobile-open');
        });
    });
    
    // Close mobile menu when clicking outside
    document.addEventListener('click', (e) => {
        if (!toggle.contains(e.target) && !menu.contains(e.target)) {
            toggle.classList.remove('active');
            menu.classList.remove('mobile-open');
        }
    });
    
    // Close mobile menu on escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && menu.classList.contains('mobile-open')) {
            toggle.classList.remove('active');
            menu.classList.remove('mobile-open');
        }
    });
}

// Load GitHub Projects
async function loadProjects() {
    const grid = document.getElementById('projectsGrid');
    const username = 'dpkpaswan';
    
    try {
        const response = await fetch(`https://api.github.com/users/${username}/repos?sort=updated&per_page=6`);
        const repos = await response.json();
        
        grid.innerHTML = '';
        
        repos.forEach(repo => {
            const card = document.createElement('div');
            card.className = 'project-card';
            card.innerHTML = `
                <h3 style="margin-bottom: 0.5rem;">${repo.name}</h3>
                <p style="color: var(--text-tertiary); font-size: 0.875rem; margin-bottom: 1rem;">${repo.description || 'No description'}</p>
                <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;">
                    ${repo.language ? `<span class="tag">${repo.language}</span>` : ''}
                    <span class="tag"><i class="fas fa-star"></i> ${repo.stargazers_count}</span>
                </div>
                <a href="${repo.html_url}" target="_blank" class="btn btn-outline" style="width: 100%; justify-content: center;">
                    <i class="fab fa-github"></i> View on GitHub
                </a>
            `;
            grid.appendChild(card);
        });
    } catch (error) {
        console.error('Failed to load projects:', error);
    }
}

// Chat functionality
const chatForm = document.getElementById('chatForm');
const chatInput = document.getElementById('chatInput');
const chatMessages = document.getElementById('chatMessages');
let isTyping = false;

function addMessage(content, isUser = false) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user-message' : 'bot-message'}`;
    
    messageDiv.innerHTML = `
        <div class="message-avatar">
            <i class="fas fa-${isUser ? 'user' : 'robot'}"></i>
        </div>
        <div class="message-content">
            <p>${content}</p>
        </div>
    `;
    
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

function showTyping() {
    const typing = document.createElement('div');
    typing.className = 'message bot-message typing-message';
    typing.innerHTML = `
        <div class="message-avatar">
            <i class="fas fa-robot"></i>
        </div>
        <div class="message-content">
            <p style="opacity: 0.6;">Typing...</p>
        </div>
    `;
    chatMessages.appendChild(typing);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    return typing;
}

chatForm?.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const userMessage = chatInput.value.trim();
    if (!userMessage || isTyping) return;
    
    addMessage(userMessage, true);
    chatInput.value = '';
    
    isTyping = true;
    const typingIndicator = showTyping();
    
    setTimeout(async () => {
        typingIndicator.remove();
        const response = ai.generateResponse(userMessage);
        addMessage(response, false);
        isTyping = false;
        
        await saveChatMessage(userMessage, true, response);
    }, 800 + Math.random() * 800);
});

// Suggestion buttons
document.addEventListener('click', (e) => {
    if (e.target.classList.contains('suggestion-btn')) {
        const question = e.target.getAttribute('data-question');
        chatInput.value = question;
        chatForm.dispatchEvent(new Event('submit'));
    }
});

// Navigation scroll spy
window.addEventListener('scroll', () => {
    const sections = document.querySelectorAll('.section, .hero-section');
    const navLinks = document.querySelectorAll('.nav-link');
    
    let current = '';
    sections.forEach(section => {
        const sectionTop = section.offsetTop - 100;
        if (window.pageYOffset >= sectionTop) {
            current = section.getAttribute('id');
        }
    });
    
    navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('data-section') === current) {
            link.classList.add('active');
        }
    });
});

// Initialize everything
document.addEventListener('DOMContentLoaded', () => {
    initTheme();
    initSupabase();
    initParticles();
    initTerminalTyping();
    initMobileMenu();
    commandPalette.init();
    loadProjects();
    animateStats();
    updateClock();
    setInterval(updateClock, 1000);
    
    // Theme toggle
    document.getElementById('themeToggle')?.addEventListener('click', toggleTheme);
    
    // Track social clicks
    document.querySelectorAll('.social-link').forEach(link => {
        link.addEventListener('click', () => {
            trackInteraction('social_click', { platform: link.title });
        });
    });
});