<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pine Labs Voice Bot - Dashboard</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="dashboard">
        <div class="sidebar">
            <div class="logo">
                <h2>Pine Labs</h2>
                <p>Voice Sales Bot</p>
            </div>
            
            <div class="session-info">
                <h3>Session</h3>
                <div id="sessionId">Not started</div>
                <div id="callStatus" class="status-badge">Idle</div>
            </div>

            <div class="controls">
                <button id="startCallBtn" class="btn btn-primary">Start Call</button>
                <button id="endCallBtn" class="btn btn-danger" disabled>End Call</button>
                <button id="toggleMuteBtn" class="btn btn-secondary" disabled>Mute</button>
            </div>

            <div class="stats">
                <h3>Conversation Stats</h3>
                <div class="stat-item">
                    <span>State:</span>
                    <span id="conversationState">Not Started</span>
                </div>
                <div class="stat-item">
                    <span>Turns:</span>
                    <span id="turnCount">0</span>
                </div>
                <div class="stat-item">
                    <span>Duration:</span>
                    <span id="callDuration">00:00</span>
                </div>
            </div>
        </div>

        <div class="main-content">
            <div class="conversation-container">
                <div class="conversation-header">
                    <h3>Live Conversation</h3>
                    <div class="audio-indicator" id="audioIndicator"></div>
                </div>
                
                <div class="conversation-log" id="conversationLog">
                    <div class="empty-state">
                        Click "Start Call" to begin conversation
                    </div>
                </div>
            </div>

            <div class="debug-panel">
                <h4>Debug Info</h4>
                <pre id="debugInfo">Ready...</pre>
            </div>
        </div>
    </div>

    <audio id="audioPlayer" style="display: none;"></audio>
    
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/voice-bot.js"></script>
</body>
</html>