{% extends "base.html" %}

{% block title %}Canvas Grading System - Profile Selection{% endblock %}

{% block content %}
    <div x-data="profileSelect()" x-init="init()" class="card">
        <div class="card-header">
            <h3 class="card-title">Profile Selection</h3>
        </div>
        <div class="card-body">
            <p>Select your Canvas and LLM profiles to begin grading.</p>
            <div class="auto-progress-notice">
                <i class="ph-lightbulb" style="font-size: 1.2rem; color: var(--color-warning);"></i>
                <span>The system will automatically proceed once both profiles are selected</span>
            </div>

            <!-- Loading State -->
            <div x-show="loading" class="loading">
                <div class="spinner"></div>
                <p class="loading-text">Loading profiles...</p>
            </div>

            <!-- Main Content -->
            <div x-show="!loading" x-cloak>
                <!-- Canvas Profiles -->
                <div class="profile-section">
                    <h4>Canvas Profiles</h4>
                    <div class="selection-grid">
                        <template x-if="canvasProfiles.length === 0">
                            <p class="text-muted">No Canvas profiles configured yet.</p>
                        </template>
                        <template x-for="profile in canvasProfiles" :key="profile.id">
                            <div class="card selection-card"
                                 :class="{'selected': isCanvasSelected(profile.id)}"
                                 @click="selectCanvasProfile(profile.id)">
                                <div class="selection-card-header">
                                    <h4 class="selection-card-title" x-text="profile.name"></h4>
                                    <span x-show="isCanvasActive(profile.id)" class="status-badge status-success">Active</span>
                                </div>
                                <div class="selection-card-body">
                                    <p class="text-secondary" x-text="profile.canvas_address"></p>
                                    <p class="text-secondary" x-text="profile.email || 'No email'"></p>
                                    <div class="profile-actions" @click.stop>
                                        <button class="btn btn-sm btn-secondary" @click="openEditCanvasModal(profile.id)">
                                            <i class="ph-pencil-simple"></i> Edit
                                        </button>
                                        <button class="btn btn-sm btn-danger" @click="deleteCanvasProfile(profile.id)">
                                            <i class="ph-trash"></i> Delete
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <button class="btn btn-secondary add-new-profile mt-3" @click="openAddCanvasModal()">
                        <span style="font-size: 1.2rem;">+</span> Add New Canvas Profile
                    </button>
                </div>

                <!-- LLM Profiles -->
                <div class="profile-section mt-4">
                    <h4>LLM Profiles</h4>
                    <div class="selection-grid">
                        <template x-if="llmProfiles.length === 0">
                            <p class="text-muted">No LLM profiles configured yet.</p>
                        </template>
                        <template x-for="profile in llmProfiles" :key="profile.id">
                            <div class="card selection-card"
                                 :class="{'selected': isLLMSelected(profile.id)}"
                                 @click="selectLLMProfile(profile.id)">
                                <div class="selection-card-header">
                                    <h4 class="selection-card-title" x-text="profile.name"></h4>
                                    <span x-show="isLLMActive(profile.id)" class="status-badge status-success">Active</span>
                                </div>
                                <div class="selection-card-body">
                                    <p class="text-secondary" x-text="profile.model_name"></p>
                                    <p class="text-secondary" x-text="profile.api_link"></p>
                                    <div class="profile-actions" @click.stop>
                                        <button class="btn btn-sm btn-secondary" @click="openEditLLMModal(profile.id)">
                                            <i class="ph-pencil-simple"></i> Edit
                                        </button>
                                        <button class="btn btn-sm btn-danger" @click="deleteLLMProfile(profile.id)">
                                            <i class="ph-trash"></i> Delete
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                    <button class="btn btn-secondary add-new-profile mt-3" @click="openAddLLMModal()">
                        <span style="font-size: 1.2rem;">+</span> Add New LLM Profile
                    </button>
                </div>

                <!-- Continue button -->
                <div class="btn-group mt-4">
                    <button @click="continueWithProfiles()" class="btn btn-primary" :disabled="!canContinue">
                        Continue with Selected Profiles →
                    </button>
                </div>
            </div>
        </div>

        <!-- Canvas Profile Modal (inside same x-data scope) -->
        <div x-show="showCanvasModal" x-cloak class="modal" @click.self="closeCanvasModal()">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 x-text="canvasModalTitle"></h3>
                    <button class="close-btn" @click="closeCanvasModal()">×</button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="saveCanvasProfile()">
                        <div class="form-group">
                            <label class="form-label">Profile Name</label>
                            <input type="text" x-model="canvasForm.name" class="form-control"
                                   placeholder="e.g., Main University Account" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Canvas URL</label>
                            <input type="url" x-model="canvasForm.canvas_address" class="form-control"
                                   placeholder="https://canvas.university.edu" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Access Token</label>
                            <input type="password" x-model="canvasForm.token" class="form-control"
                                   placeholder="Your Canvas API token" required>
                            <small class="text-muted">Generate from Canvas: Account → Settings → New Access Token</small>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Email (optional)</label>
                            <input type="email" x-model="canvasForm.email" class="form-control"
                                   placeholder="your.email@university.edu">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" @click="closeCanvasModal()">Cancel</button>
                    <button class="btn btn-primary" @click="saveCanvasProfile()">Save Profile</button>
                </div>
            </div>
        </div>

        <!-- LLM Profile Modal (inside same x-data scope) -->
        <div x-show="showLLMModal" x-cloak class="modal" @click.self="closeLLMModal()">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 x-text="llmModalTitle"></h3>
                    <button class="close-btn" @click="closeLLMModal()">×</button>
                </div>
                <div class="modal-body">
                    <form @submit.prevent="saveLLMProfile()">
                        <div class="form-group">
                            <label class="form-label">Profile Name</label>
                            <input type="text" x-model="llmForm.name" class="form-control"
                                   placeholder="e.g., GPT-4 Grading" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">API Endpoint</label>
                            <input type="url" x-model="llmForm.apiLink" class="form-control"
                                   placeholder="https://api.openai.com/v1/chat/completions" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">Model Name</label>
                            <input type="text" x-model="llmForm.modelName" class="form-control"
                                   placeholder="e.g., gpt-4" required>
                        </div>

                        <div class="form-group">
                            <label class="form-label">API Token</label>
                            <input type="password" x-model="llmForm.token" class="form-control"
                                   placeholder="Your API token (optional for local models)">
                        </div>

                        <div class="form-group">
                            <label class="form-label">Type</label>
                            <select class="form-control" x-model="llmForm.llmType">
                                <option value="remote">Remote API</option>
                                <option value="local">Local Model</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" @click="closeLLMModal()">Cancel</button>
                    <button class="btn btn-primary" @click="saveLLMProfile()">Save Profile</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="/frontend/static/js/profile_select.js"></script>
{% endblock %}