const startBtn = document.getElementById('startBtn');
const rawNotesInput = document.getElementById('rawNotes');
const workflowStatus = document.getElementById('workflowStatus');
const outputSection = document.getElementById('outputSection');
const documentContent = document.getElementById('documentContent');
const revisionCount = document.getElementById('revisionCount');
const approveBtn = document.getElementById('approveBtn');
const feedbackContainer = document.getElementById('feedbackContainer');
const criticFeedback = document.getElementById('criticFeedback');

let socket = null;

function connectWebSocket() {
    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
    socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
    
    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        
        if (data.type === 'workflow_started') {
            console.log('Workflow started:', data.thread_id);
        } else if (data.type === 'workflow_approved') {
            updateStatus('approved', 'Approved');
            approveBtn.classList.add('hidden');
            feedbackContainer.classList.add('hidden');
            startBtn.disabled = false;
            startBtn.innerHTML = `
                <span>Draft New Document</span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            `;
        } else if (data.type === 'status_update') {
            revisionCount.textContent = `Rev: ${data.revision_count}`;

            if (data.latest_feedback) {
                feedbackContainer.classList.remove('hidden');
                criticFeedback.textContent = data.latest_feedback;
            }

            if (data.document) {
                documentContent.innerHTML = marked.parse(data.document);
            }

            if (data.waiting_for_human) {
                updateStatus('waiting', 'Needs Approval');
                approveBtn.classList.remove('hidden');
            } else if (data.status !== "approved") {
                updateStatus('running', 'Agents Reviewing...');
            }
        }
    };
    
    socket.onerror = (error) => {
        console.error('WebSocket Error:', error);
        updateStatus('idle', 'Error connecting');
    };
    
    socket.onclose = () => {
        console.log('WebSocket closed. Reconnecting in 5s...');
        setTimeout(connectWebSocket, 5000);
    };
}

// Connect immediately
connectWebSocket();

startBtn.addEventListener('click', () => {
    const rawInput = rawNotesInput.value.trim();
    if (!rawInput) {
        alert("Please enter some raw notes first.");
        return;
    }

    if (!socket || socket.readyState !== WebSocket.OPEN) {
        alert("WebSocket is not connected yet. Please wait.");
        return;
    }

    // Reset UI
    startBtn.disabled = true;
    outputSection.classList.remove('hidden');
    approveBtn.classList.add('hidden');
    feedbackContainer.classList.add('hidden');
    updateStatus('running', 'Drafting...');
    documentContent.innerHTML = `
        <div class="loader" role="status" aria-label="Processing">
            <div class="spinner"></div>
            <p>Agents are drafting and reviewing...</p>
        </div>
    `;

    // Send start command
    socket.send(JSON.stringify({ action: "start", raw_input: rawInput }));
});

approveBtn.addEventListener('click', () => {
    if (!socket || socket.readyState !== WebSocket.OPEN) return;
    
    approveBtn.disabled = true;
    updateStatus('running', 'Approving...');
    
    // Send approve command
    socket.send(JSON.stringify({ action: "approve" }));
});

function updateStatus(state, text) {
    workflowStatus.textContent = text;
    workflowStatus.className = `status-badge ${state}`;
}