{% extends "layout.html" %}

{% block title %}Mac Agents Manager{% endblock %}

{% block content %}
<div class="ide-container">
    <!-- Left Sidebar -->
    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="new-service-buttons">
                <button class="btn-new" onclick="createNewService('scheduled')">+ New Scheduled</button>
                <button class="btn-new" onclick="createNewService('keepalive')">+ New KeepAlive</button>
            </div>
            <div class="new-service-buttons" style="margin-top: 10px;">
                <button class="btn-start-all" onclick="startAllKeepAlive()">🚀 Start All KeepAlive</button>
            </div>
        </div>
        
        <div class="tree-container">
            <!-- LaunchAgents Section -->
            <div class="tree-section">
                <div class="tree-title expanded" onclick="toggleSection(this)">
                    LaunchAgents
                </div>
                <div class="tree-content show" id="agents-tree">
                    <div class="loading">Loading...</div>
                </div>
            </div>
        </div>
    </aside>

    <!-- Right Editor Panel -->
    <main class="editor-panel">
        <!-- Editor Header with mode tabs and buttons -->
        <div class="editor-header" id="editor-header">
            <div class="editor-title" id="editor-title">Mac Agents Manager</div>
            <div class="editor-mode-tabs">
                <button class="mode-tab active" data-mode="ide" onclick="switchMode('ide')">IDE</button>
                <button class="mode-tab" data-mode="chat" onclick="switchMode('chat')">AI Chat</button>
            </div>
            <div class="editor-actions" id="ide-actions">
                <a id="btn-port-link" class="btn btn-port" href="#" target="_blank" style="display: none;"></a>
                <button type="button" class="btn btn-primary" onclick="saveServiceFromHeader()" id="btn-save-header">Save</button>
                <button type="button" class="btn btn-secondary" onclick="controlAction('load')" id="btn-load-header">Load</button>
                <button type="button" class="btn btn-secondary" onclick="controlAction('unload')" id="btn-unload-header">Unload</button>
                <button type="button" class="btn btn-secondary" onclick="runOnce()" id="btn-runonce-header" style="display: none;">Run Once</button>
                <button type="button" class="btn btn-secondary" onclick="reloadAgent()" id="btn-reload-header">Reload</button>
                <button type="button" class="btn btn-danger" onclick="deleteService()" id="btn-delete-header">Delete</button>
            </div>
        </div>
        
        <!-- IDE Mode: Top Section - Editor Form -->
        <div class="editor-top" id="editor-top">
            <div class="welcome">
                <h2>Welcome to Mac Agents Manager</h2>
                <p>Select an agent from the sidebar to edit, or create a new one.</p>
            </div>
        </div>

        <!-- IDE Mode: Bottom Section - Plist Preview / Logs -->
        <div class="editor-bottom" id="editor-bottom">
            <div class="panel-tabs">
                <button class="panel-tab active" onclick="switchPanel('plist', event)">Plist Preview</button>
                <button class="panel-tab" onclick="switchPanel('stdout', event)">Stdout</button>
                <button class="panel-tab" onclick="switchPanel('stderr', event)">Stderr</button>
            </div>
            <div class="panel-content">
                <div id="panel-plist" class="plist-preview">
                    <pre>No agent selected</pre>
                </div>
                <div id="panel-stdout" class="log-viewer hidden">
                    <pre class="log-empty">No logs available</pre>
                </div>
                <div id="panel-stderr" class="log-viewer hidden">
                    <pre class="log-empty">No logs available</pre>
                </div>
            </div>
        </div>

        <!-- AI Chat Mode Panel -->
        <div id="chat-panel" class="chat-panel hidden">
            <!-- Ollama Status Bar -->
            <div class="chat-status-bar" id="chat-status-bar">
                <div class="chat-status-left">
                    <span class="chat-status-dot" id="chat-status-dot"></span>
                    <span id="chat-status-text">Checking Ollama...</span>
                </div>
                <div class="chat-session-controls">
                    <select id="chat-session-select" onchange="onChatSessionSelected(this.value)">
                        <option value="">Current session</option>
                    </select>
                    <button type="button" id="chat-new-session-btn" onclick="startNewChat()">+ New Chat</button>
                </div>
            </div>

            <!-- Suggested Prompts -->
            <div class="chat-suggestions" id="chat-suggestions"></div>

            <!-- Messages -->
            <div class="chat-messages" id="chat-messages">
                <div class="chat-message assistant">
                    <span class="chat-avatar">🤖</span>
                    <div class="chat-bubble">Welcome! I can help manage your LaunchAgents. Select a service from the sidebar, or ask me anything.</div>
                </div>
            </div>

            <!-- Input -->
            <div class="chat-input-area">
                <textarea id="chat-input" placeholder="Type a message..." rows="1"></textarea>
                <button id="chat-send" onclick="sendChatMessage()">Send</button>
            </div>
        </div>
    </main>
</div>

<!-- Template for Editor Form -->
<script id="editor-template" type="text/template">
<div class="editor-form">
    <form id="service-form" onsubmit="return saveService(event)">
        <!-- Basic Section -->
        <div class="form-section">
            <h3>Basic Information</h3>
            
            <div class="form-group">
                <label for="service_label">Label</label>
                <input type="text" id="service_label" name="label" readonly>
                <small>Unique identifier for the agent</small>
            </div>
            
            <div class="form-group">
                <label for="service_name">Agent Name</label>
                <input type="text" id="service_name" name="name" required>
                <small>Short name (e.g., myapp)</small>
            </div>
            
            <div class="form-group">
                <label for="service_category">Category</label>
                <input type="text" id="service_category" name="category" required>
                <small>Category/namespace (e.g., finance, productivity, automation)</small>
            </div>
        </div>

        <!-- Execution Section -->
        <div class="form-section">
            <h3>Execution</h3>
            
            <div class="form-group">
                <label for="script_path">Script/Command Path *</label>
                <input type="text" id="script_path" name="script_path" required>
                <small>Examples: /path/to/script.sh or /bin/bash /path/to/script.sh (output redirects are handled automatically)</small>
            </div>
        </div>

        <!-- Schedule Section -->
        <div class="form-section" id="schedule-section">
            <h3>Schedule Times</h3>
            
            <div class="form-group">
                <label>Schedule Times</label>
                <div class="schedule-times" id="schedule-times">
                    <div class="time-slot">
                        <label>Hour:</label>
                        <input type="number" name="schedule_hour_0" min="0" max="23" value="10">
                        <label>Minute:</label>
                        <input type="number" name="schedule_minute_0" min="0" max="59" value="0">
                    </div>
                </div>
                <button type="button" class="btn-add-time" onclick="addTimeSlot()">+ Add Time</button>
            </div>
        </div>

        <!-- Optional Section -->
        <div class="form-section">
            <h3>Optional Settings</h3>
            
            <div class="form-group">
                <label for="working_directory">Working Directory</label>
                <input type="text" id="working_directory" name="working_directory">
                <small>Optional: Directory to run the script from (e.g., ~/myproject)</small>
            </div>
            
            <div class="form-group">
                <label for="environment">Environment Variables</label>
                <textarea id="environment" name="environment" rows="4"></textarea>
                <small>One per line in KEY=VALUE format</small>
            </div>
        </div>

    </form>
</div>
</script>
{% endblock %}
