script.js

// ===========================
// STATE MANAGEMENT
// ===========================
let currentDate = new Date();
let selectedDate = null;
let trades = JSON.parse(localStorage.getItem('trades')) || [];
let mediaRecorder = null;
let audioChunks = [];
let recordingInterval = null;
let recordingSeconds = 0;

// ===========================
// INITIALIZATION
// ===========================
document.addEventListener('DOMContentLoaded', () => {
    initializeApp();
});

function initializeApp() {
    setupNavigation();
    renderCalendar();
    renderTrades();
    setupModal();
    setupPositionCalculator();
    updateMarketHours();
    setInterval(updateMarketHours, 1000);
    
    // Set default date to today
    const today = new Date();
    document.getElementById('trade-date').valueAsDate = today;
}

// ===========================
// NAVIGATION
// ===========================
function setupNavigation() {
    const navItems = document.querySelectorAll('.nav-item');
    const tabContents = document.querySelectorAll('.tab-content');
    
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            const tabName = item.dataset.tab;
            
            // Update active nav item
            navItems.forEach(nav => nav.classList.remove('active'));
            item.classList.add('active');
            
            // Update active tab content
            tabContents.forEach(tab => tab.classList.remove('active'));
            document.getElementById(`${tabName}-tab`).classList.add('active');
        });
    });
}

// ===========================
// CALENDAR
// ===========================
function renderCalendar() {
    const calendarGrid = document.getElementById('calendar-grid');
    const calendarTitle = document.getElementById('calendar-title');
    
    // Update title
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
                       'July', 'August', 'September', 'October', 'November', 'December'];
    calendarTitle.textContent = `${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
    
    // Clear calendar
    calendarGrid.innerHTML = '';
    
    // Add day headers
    const dayHeaders = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    dayHeaders.forEach(day => {
        const header = document.createElement('div');
        header.className = 'calendar-day-header';
        header.textContent = day;
        calendarGrid.appendChild(header);
    });
    
    // Get first day of month and number of days
    const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
    const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
    const prevLastDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
    
    const firstDayIndex = firstDay.getDay();
    const lastDayDate = lastDay.getDate();
    const prevLastDayDate = prevLastDay.getDate();
    
    // Add previous month days
    for (let i = firstDayIndex - 1; i >= 0; i--) {
        const day = document.createElement('div');
        day.className = 'calendar-day other-month';
        day.textContent = prevLastDayDate - i;
        calendarGrid.appendChild(day);
    }
    
    // Add current month days
    const today = new Date();
    for (let i = 1; i <= lastDayDate; i++) {
        const day = document.createElement('div');
        day.className = 'calendar-day';
        day.textContent = i;
        
        const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), i);
        
        // Check if today
        if (dayDate.toDateString() === today.toDateString()) {
            day.classList.add('today');
        }
        
        // Check if selected
        if (selectedDate && dayDate.toDateString() === selectedDate.toDateString()) {
            day.classList.add('selected');
        }
        
        // Check if has trades
        if (hasTradeOnDate(dayDate)) {
            day.classList.add('has-trade');
        }
        
        day.addEventListener('click', () => selectDate(dayDate));
        calendarGrid.appendChild(day);
    }
    
    // Add next month days
    const remainingDays = 42 - (firstDayIndex + lastDayDate);
    for (let i = 1; i <= remainingDays; i++) {
        const day = document.createElement('div');
        day.className = 'calendar-day other-month';
        day.textContent = i;
        calendarGrid.appendChild(day);
    }
}

function selectDate(date) {
    selectedDate = date;
    renderCalendar();
    filterTradesByDate(date);
}

function hasTradeOnDate(date) {
    return trades.some(trade => {
        const tradeDate = new Date(trade.date);
        return tradeDate.toDateString() === date.toDateString();
    });
}

function filterTradesByDate(date) {
    const filteredTrades = trades.filter(trade => {
        const tradeDate = new Date(trade.date);
        return tradeDate.toDateString() === date.toDateString();
    });
    renderTrades(filteredTrades);
}

// Calendar navigation
document.getElementById('prev-month').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar();
});

document.getElementById('next-month').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar();
});

// ===========================
// TRADES
// ===========================
function renderTrades(tradesToRender = trades) {
    const container = document.getElementById('trades-container');
    
    if (tradesToRender.length === 0) {
        container.innerHTML = `
            <div class="empty-state">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
                    <circle cx="32" cy="32" r="30" stroke="currentColor" stroke-width="2" opacity="0.2"/>
                    <path d="M32 20V32L40 36" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
                <p>No trades recorded yet</p>
                <p class="empty-subtitle">Click "Add Trade" to start tracking</p>
            </div>
        `;
        return;
    }
    
    // Sort trades by date (newest first)
    const sortedTrades = [...tradesToRender].sort((a, b) => new Date(b.date) - new Date(a.date));
    
    container.innerHTML = sortedTrades.map(trade => `
        <div class="trade-card">
            <div class="trade-card-header">
                <span class="trade-pair">${trade.pair}</span>
                <span class="trade-badge ${trade.bias.toLowerCase()}">${trade.bias}</span>
            </div>
            <div class="trade-details">
                <div class="trade-detail-item">
                    <span class="trade-detail-label">Date</span>
                    <span class="trade-detail-value">${formatDate(trade.date)}</span>
                </div>
                <div class="trade-detail-item">
                    <span class="trade-detail-label">Timeframe</span>
                    <span class="trade-detail-value">${trade.timeframe}</span>
                </div>
                <div class="trade-detail-item">
                    <span class="trade-detail-label">Session</span>
                    <span class="trade-detail-value">${trade.session}</span>
                </div>
                <div class="trade-detail-item">
                    <span class="trade-detail-label">Confluences</span>
                    <span class="trade-detail-value">${trade.confluences.length}</span>
                </div>
            </div>
            ${trade.comments ? `<p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.875rem;">${trade.comments}</p>` : ''}
        </div>
    `).join('');
}

function formatDate(dateString) {
    const date = new Date(dateString);
    const options = { month: 'short', day: 'numeric', year: 'numeric' };
    return date.toLocaleDateString('en-US', options);
}

// ===========================
// MODAL
// ===========================
function setupModal() {
    const modal = document.getElementById('trade-modal');
    const addBtn = document.getElementById('add-trade-btn');
    const closeBtn = document.getElementById('close-modal');
    const cancelBtn = document.getElementById('cancel-btn');
    const form = document.getElementById('trade-form');
    const overlay = document.querySelector('.modal-overlay');
    
    addBtn.addEventListener('click', () => {
        modal.classList.add('active');
    });
    
    const closeModal = () => {
        modal.classList.remove('active');
        form.reset();
        resetVoiceRecorder();
    };
    
    closeBtn.addEventListener('click', closeModal);
    cancelBtn.addEventListener('click', closeModal);
    overlay.addEventListener('click', closeModal);
    
    // Form submission
    form.addEventListener('submit', (e) => {
        e.preventDefault();
        saveTrade();
        closeModal();
    });
    
    // File upload preview
    const fileInput = document.getElementById('trade-screenshot');
    fileInput.addEventListener('change', handleFileUpload);
    
    // Voice recorder
    setupVoiceRecorder();
}

function handleFileUpload(e) {
    const files = e.target.files;
    const preview = document.getElementById('screenshot-preview');
    preview.innerHTML = '';
    
    Array.from(files).forEach(file => {
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const div = document.createElement('div');
                div.className = 'preview-image';
                div.innerHTML = `<img src="${e.target.result}" alt="Screenshot">`;
                preview.appendChild(div);
            };
            reader.readAsDataURL(file);
        }
    });
}

function saveTrade() {
    const trade = {
        id: Date.now(),
        date: document.getElementById('trade-date').value,
        pair: document.getElementById('trade-pair').value,
        timeframe: document.getElementById('trade-timeframe').value,
        session: document.getElementById('trade-session').value,
        confluences: Array.from(document.querySelectorAll('input[name="confluence"]:checked')).map(cb => cb.value),
        bias: document.querySelector('input[name="bias"]:checked').value,
        comments: document.getElementById('trade-comments').value,
        mistakes: document.getElementById('trade-mistakes').value,
        screenshots: [], // In a real app, you'd upload these to a server
        voiceNote: null // In a real app, you'd upload this to a server
    };
    
    trades.push(trade);
    localStorage.setItem('trades', JSON.stringify(trades));
    renderTrades();
    renderCalendar();
}

// ===========================
// VOICE RECORDER
// ===========================
function setupVoiceRecorder() {
    const recordBtn = document.getElementById('record-btn');
    recordBtn.addEventListener('click', toggleRecording);
}

async function toggleRecording() {
    const recordBtn = document.getElementById('record-btn');
    const recordText = document.getElementById('record-text');
    
    if (!mediaRecorder || mediaRecorder.state === 'inactive') {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(stream);
            audioChunks = [];
            
            mediaRecorder.ondataavailable = (event) => {
                audioChunks.push(event.data);
            };
            
            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                const audioUrl = URL.createObjectURL(audioBlob);
                const audioPlayback = document.getElementById('audio-playback');
                audioPlayback.src = audioUrl;
                audioPlayback.style.display = 'block';
            };
            
            mediaRecorder.start();
            recordBtn.classList.add('recording');
            recordText.textContent = 'Stop Recording';
            
            // Start timer
            recordingSeconds = 0;
            updateRecordingTime();
            recordingInterval = setInterval(updateRecordingTime, 1000);
            
        } catch (error) {
            console.error('Error accessing microphone:', error);
            alert('Unable to access microphone. Please check permissions.');
        }
    } else {
        mediaRecorder.stop();
        mediaRecorder.stream.getTracks().forEach(track => track.stop());
        recordBtn.classList.remove('recording');
        recordText.textContent = 'Start Recording';
        clearInterval(recordingInterval);
    }
}

function updateRecordingTime() {
    recordingSeconds++;
    const minutes = Math.floor(recordingSeconds / 60);
    const seconds = recordingSeconds % 60;
    document.getElementById('recording-time').textContent = 
        `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function resetVoiceRecorder() {
    if (mediaRecorder && mediaRecorder.state === 'recording') {
        mediaRecorder.stop();
        mediaRecorder.stream.getTracks().forEach(track => track.stop());
    }
    
    const recordBtn = document.getElementById('record-btn');
    const recordText = document.getElementById('record-text');
    const audioPlayback = document.getElementById('audio-playback');
    
    recordBtn.classList.remove('recording');
    recordText.textContent = 'Start Recording';
    audioPlayback.style.display = 'none';
    audioPlayback.src = '';
    document.getElementById('recording-time').textContent = '0:00';
    clearInterval(recordingInterval);
    recordingSeconds = 0;
}

// ===========================
// POSITION SIZE CALCULATOR
// ===========================
function setupPositionCalculator() {
    const calculateBtn = document.getElementById('calculate-position');
    calculateBtn.addEventListener('click', calculatePositionSize);
}

function calculatePositionSize() {
    const accountBalance = parseFloat(document.getElementById('account-balance').value);
    const riskPercentage = parseFloat(document.getElementById('risk-percentage').value);
    const entryPrice = parseFloat(document.getElementById('entry-price').value);
    const stopLoss = parseFloat(document.getElementById('stop-loss').value);
    const pipValue = parseFloat(document.getElementById('pip-value').value);
    
    // Validate inputs
    if (!accountBalance || !riskPercentage || !entryPrice || !stopLoss || !pipValue) {
        alert('Please fill in all fields');
        return;
    }
    
    if (riskPercentage > 5) {
        alert('Risk percentage should not exceed 5%');
        return;
    }
    
    // Calculate risk amount
    const riskAmount = accountBalance * (riskPercentage / 100);
    
    // Calculate pips at risk
    const pipsAtRisk = Math.abs(entryPrice - stopLoss) * 10000; // For 4 decimal pairs
    
    // Calculate position size in lots
    const positionSize = riskAmount / (pipsAtRisk * pipValue);
    
    // Display results
    const resultDiv = document.getElementById('position-result');
    resultDiv.style.display = 'block';
    
    document.getElementById('position-size').textContent = positionSize.toFixed(2) + ' lots';
    document.getElementById('risk-amount').textContent = '$' + riskAmount.toFixed(2);
    document.getElementById('pips-risk').textContent = pipsAtRisk.toFixed(1) + ' pips';
}

// ===========================
// MARKET HOURS
// ===========================
function updateMarketHours() {
    const now = new Date();
    
    // Convert to IST (UTC+5:30)
    const istOffset = 5.5 * 60; // in minutes
    const utcTime = now.getTime() + (now.getTimezoneOffset() * 60000);
    const istTime = new Date(utcTime + (istOffset * 60000));
    
    // Update current time display
    const timeString = istTime.toLocaleTimeString('en-IN', { 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit',
        hour12: false 
    });
    document.getElementById('current-ist-time').textContent = timeString;
    
    // Market sessions in IST
    const sessions = [
        { name: 'sydney', start: 3.5, end: 12.5, element: 'sydney-status', progress: '.sydney' },
        { name: 'tokyo', start: 5.5, end: 14.5, element: 'tokyo-status', progress: '.tokyo' },
        { name: 'london', start: 13.5, end: 22.5, element: 'london-status', progress: '.london' },
        { name: 'newyork', start: 19, end: 28, element: 'newyork-status', progress: '.newyork' } // 28 = 4 AM next day
    ];
    
    const currentHour = istTime.getHours() + (istTime.getMinutes() / 60);
    
    sessions.forEach(session => {
        const statusElement = document.getElementById(session.element);
        const progressBar = document.querySelector(`.session-progress${session.progress}`);
        
        let isOpen = false;
        let progress = 0;
        
        if (session.start < session.end) {
            isOpen = currentHour >= session.start && currentHour < session.end;
            if (isOpen) {
                progress = ((currentHour - session.start) / (session.end - session.start)) * 100;
            }
        } else {
            // Handles overnight sessions
            isOpen = currentHour >= session.start || currentHour < (session.end - 24);
            if (currentHour >= session.start) {
                progress = ((currentHour - session.start) / (session.end - session.start)) * 100;
            } else if (currentHour < (session.end - 24)) {
                progress = (((24 - session.start) + currentHour) / (session.end - session.start)) * 100;
            }
        }
        
        if (isOpen) {
            statusElement.textContent = 'Open';
            statusElement.classList.add('open');
            progressBar.style.width = progress + '%';
        } else {
            statusElement.textContent = 'Closed';
            statusElement.classList.remove('open');
            progressBar.style.width = '0%';
        }
    });
}

// ===========================
// UTILITY FUNCTIONS
// ===========================
function showNotification(message, type = 'info') {
    // Simple notification system
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.textContent = message;
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 1rem 1.5rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        z-index: 10000;
        animation: slideIn 0.3s ease;
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// Add CSS animations for notifications
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(400px);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(400px);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);