{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle.  If not, see <http://www.gnu.org/licenses />.
Note: Do NOT load Bootstrap from CDN - Moodle includes Bootstrap and loading another version breaks navigation
}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="{{config.wwwroot}}/report/adeptus_insights/styles/assistant.css">

{{#js}}
require(['jquery', 'core/ajax', 'core/notification', 'core/templates', 'report_adeptus_insights/assistant'], function($, Ajax, Notification, Templates, Assistant) {
// Note: Chart.js is loaded by assistant.js directly (not core/chartjs) to avoid Moodle reactive component conflicts
// Clear any existing AMD cache for our module
require.undef('report_adeptus_insights/assistant');
// Initialize the assistant
Assistant.init({{authenticated}});
});
{{/js}}

<!-- Header Banner -->
<div class="assistant-header">
    <div class="assistant-header-content">
        <h1 class="assistant-title">
            <i class="fa fa-robot assistant-icon"></i>
            AI Report Assistant
        </h1>
        <p class="assistant-subtitle">Generate custom reports using natural language</p>
    </div>
    <div class="assistant-header-actions">
        <a href="{{config.wwwroot}}/report/adeptus_insights/index.php" class="btn btn-light">
            <i class="fa fa-arrow-left"></i> Back to Dashboard
        </a>
    </div>
</div>

<div class="container-fluid">
    <div class="main-inner position-relative">
        <!-- Top-level tabs: AI Assistant vs. Reports -->
        <ul class="nav nav-tabs mb-4" id="mainTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active"
                        id="assistant-tab"
                        data-toggle="tab"
                        data-target="#assistant-panel"
                        type="button"
                        role="tab"
                        aria-controls="assistant-panel"
                        aria-selected="true">
                    <i class="fa fa-robot"></i>&nbsp;AI Assistant
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link"
                        id="reports-tab"
                        data-toggle="tab"
                        data-target="#reports-panel"
                        type="button"
                        role="tab"
                        aria-controls="reports-panel"
                        aria-selected="false">
                    <i class="fa fa-file-alt"></i>&nbsp;Reports
                </button>
            </li>
        </ul>
        <div class="tab-content" id="mainTabsContent">
            <!-- AI Assistant Tab -->
            <div class="tab-pane fade show active"
                id="assistant-panel"
                role="tabpanel"
                aria-labelledby="assistant-tab">
                <div class="row">
                    <!-- Chat Interface -->
                    <div class="col-md-8">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                <h5 class="card-title mb-0">AI Report Assistant</h5>
                                <div class="btn-group">
                                    <button class="btn btn-primary" id="create-new-chat">
                                        <i class="fa fa-plus"></i> New Chat
                                    </button>
                                </div>
                            </div>
                            <div class="card-body p-0 position-relative" style="height: calc(100vh - 390px); overflow-y: auto; min-height: 400px; max-height: 710px;">
                                <!-- Chat Messages -->
                                <div id="chat-container" class="chat-container fade-in"></div>
                                <!-- MCQ Container -->
                                <div id="mcq-container" class="mcq-container"></div>
                                <!-- Loading Indicator -->
                                <div id="loading-indicator" class="loading-indicator d-none">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <!-- Error Message -->
                                <div id="error-message" class="error-message d-none">
                                    <div class="alert alert-danger m-3">
                                        <i class="fa fa-exclamation-circle"></i>
                                        <span id="error-text"></span>
                                        <button type="button" class="btn-close" data-dismiss="alert"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-white chat-input-container border-top">
                                <div class="input-group">
                                    <textarea id="message-input"
                                            class="form-control"
                                            placeholder="Describe the report you need..."
                                            rows="1"></textarea>
                                    <button id="send-button" class="btn btn-primary">
                                        <i class="fa fa-paper-plane"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Chat History -->
                    <div class="col-md-4">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="card-title mb-0" style="padding:12px 0;">Chat History</h5>
                            </div>
                            <div class="card-body" style="height: calc(100vh - 300px); overflow-y: auto; min-height: 400px; max-height: 800px;">
                                <ul id="chat-history-list" class="list-group list-group-flush">
                                    <li id="chat-history-loading"
                                        class="list-group-item d-flex justify-content-center">
                                        <div class="spinner-border text-secondary" role="status">
                                            <span class="visually-hidden">Loading chats…</span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Reports Tab -->
            <div class="tab-pane fade"
                id="reports-panel"
                role="tabpanel"
                aria-labelledby="reports-tab">
                <div class="row">
                    <!-- Reports View -->
                    <div class="col-md-8">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="card-title mb-0 report-view-title">Select a Report</h5>
                            </div>
                            <div class="card-body p-4 report-view-body" style="height: calc(100vh - 300px); overflow-y: auto; min-height: 400px; max-height: 800px;">
                                <div class="text-center py-4">
                                    <p class="text-muted">Select a report from history to view details here.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Reports History -->
                    <div class="col-md-4">
                        <div class="card shadow-sm mb-4">
                            <div class="card-header bg-primary text-white">
                                <h5 class="card-title mb-0">Report History</h5>
                            </div>
                            <div class="card-body p-0 position-relative" style="height: calc(100vh - 300px); overflow-y: auto; min-height: 400px; max-height: 800px;">
                                <div id="report-history-loader" class="p-4 d-flex justify-content-center">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="sr-only">Loading...</span>
                                    </div>
                                </div>
                                <div class="table-responsive d-none" id="report-history-table-wrapper">
                                    <table id="reports-history-table" class="table mb-0">
                                        <thead>
                                            <tr>
                                                <th>Report Name</th>
                                                <th>Date</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Report history rows will be injected here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /tab-content -->
        </div>
    </div>
</div>
<!-- /container-fluid -->
<!-- Templates -->
<template id="message-template">
    <div class="message">
        <div class="message-content">
            <div class="message-text"></div>
            <div class="message-time small text-muted"></div>
        </div>
    </div>
</template>
<template id="optimization-suggestion-template">
    <div class="alert alert-info">
        <i class="fa fa-lightbulb"></i>
        <span class="suggestion-text"></span>
    </div>
</template>
<template id="metric-template">
    <div class="metric-item">
        <span class="metric-label"></span>
        <span class="metric-value"></span>
    </div>
</template>
<style>
.chat-container {
    /* Height managed by parent card-body */
    padding: 1rem;
    background-color: #f8f9fa;
}

.mr-auto {
    width: 100%;
}

.page-header-headings {
    width: 100%;
}

.message {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}

.user-message {
    align-items: flex-end;
}

.ai-message {
    align-items: flex-start;
}

.message-content {
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.user-message .message-content {
    background-color: #007bff;
    color: white;
}

/* Fix time label visibility in user messages */
.user-message .message-time {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1;
}

.ai-message .message-content {
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.loading-indicator {
    padding: 1rem;
    text-align: center;
    background-color: rgba(255,255,255,0.9);
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    z-index: 1000;
}

.chart-container {
    height: 400px;
    position: relative;
}

.optimization-suggestions {
    max-height: 300px;
    overflow-y: auto;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.metric-label {
    font-weight: 500;
}

.metric-value {
    color: #6c757d;
}

.chat-input-container {
    background-color: white;
    position: relative;
}

#message-input {
    resize: none;
    border-radius: 1.5rem;
    padding: 0.75rem 1rem;
}

#send-button {

    margin-left: 0.5rem;
}

.table-responsive {
    height: 600px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* SweetAlert2 custom styles */
.swal2-popup {
    font-size: 1rem !important;
}

.swal2-title {
    font-size: 1.5rem !important;
}

.swal2-html-container {
    font-size: 1rem !important;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

/* Error message bubble */
.error-message .message-content {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}

/* MCQ Container Styles */
.mcq-container {
    display: none; /* Hidden by default */
    padding: 1rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    margin: 1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.mcq-container .mcq-question {
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}

.mcq-container .form-check {
    margin-bottom: 0.5rem;
}

.mcq-container .form-check-input {
    margin-right: 0.5rem;
}

.mcq-container .form-check-label {
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.mcq-container .form-check-label:hover {
    background-color: #f8f9fa;
}

.mcq-container .btn {
    margin-top: 1rem;
}

/* anywhere in your existing <style> block */

#chat-history-list li {
    transition: background-color 0.15s ease;
}
#chat-history-list li:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}
#chat-history-list li.active {
    background-color: #e2e6ea;
}

.container-fluid{
    display: none;
}
  /* stretch top‐level tabs equally & center their content */
#mainTabs {
  width: 100%;
  display: flex;
}
#mainTabs .nav-item {
  flex: 1;
  text-align: center;
}
#mainTabs .nav-link {
  width: 100%;
  justify-content: center;  /* Bootstrap 5 flex utility */
  display: flex;
  align-items: center;
}
.message.user-message .message-content {
  padding-left: 2.5rem; /* make room for the retry icon */
}

/* Chat History - scroll managed by parent card-body */
#chat-history-list {
    /* Height managed by parent container */
    overflow-y: visible;
    margin: 0;
    padding: 0;
}

/* Card body containers for history sections */
.card-body {
    padding: 0;
    height: 600px;
    display: flex;
    flex-direction: column;
}

.card-body .list-group {
    flex: 1;
    overflow: hidden;
}

.card-body .table-responsive {
    flex: 1;
    overflow: hidden;
}

/* Specific styling for chat history - already defined above */

/* Report history table container - scroll managed by parent card-body */
#reports-panel .col-md-4 .table-responsive {
    /* Height managed by parent card-body */
    overflow: visible;
    margin: 0;
    padding: 0;
}

/* Main report display area - single scroll container */
#reports-panel .col-md-8 .report-view-body {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Main report display table - no separate scroll */
#reports-panel .col-md-8 .table-responsive {
    margin: 0;
    padding: 0;
    overflow: visible !important;
    /* Table expands within the scrollable card body */
}

/* Make table headers sticky within the scrolling container */
#reports-panel .col-md-8 table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/* Ensure proper scrolling behavior */
#reports-panel .col-md-8 .card-body.report-view-body {
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Chat history card body - dynamic height matching reports tab */
#assistant-panel .col-md-4 .card-body {
    padding: 0;
    /* Height managed by inline styles for consistency */
    display: flex;
    flex-direction: column;
}

/* Report history card body - dynamic height matching preview */
#reports-panel .col-md-4 .card-body {
    padding: 0;
    /* Height managed by inline styles for consistency */
    display: flex;
    flex-direction: column;
}

/* Report row hover effects */
.report-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.report-row:hover {
    background-color: #f8f9fa;
}

.report-row.table-primary {
    background-color: #e7f3ff !important;
}

/* Report header styling */
.report-header h4 {
    color: #333;
    margin-bottom: 0.5rem;
}

.report-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Report actions */
.report-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1rem;
}

/* Table styling for report data */
.report-data-table {
    font-size: 0.9rem;
}

.report-data-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
}

/* Status badges */
.badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Tab styling improvements */
.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: #6c757d;
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: #007bff;
    border-bottom-color: #007bff;
    background-color: transparent;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: #007bff;
}

/* Report loading states */
.report-loading {
    text-align: center;
    padding: 2rem;
}

.report-loading .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Responsive table */
.table-responsive {

    overflow-y: auto;
}

/* Export button styling */
.btn-outline-primary {
    border-color: #fff;
    color: #007bff;
}

.btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* Report display type controls */
.report-display-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Report display area for switching between views */
.report-display-area {
    position: relative;
    min-height: 300px;
}
.report-content {
    flex: 1;
}

/* Ensure charts and graphs have reasonable heights */
.chart-container {
    height: 400px;
    width: 100%;
    position: relative;
}

#reportChart, #reportGraph {
    max-height: 400px;
    width: 100%;
}

.display-type-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
}
.display-type-btn.active {
    outline: 2px solid #333;
}
.save-display-type-btn {
    align-self: center;
}
.mr-10{
    margin-right: 10px;
}

/* Multiple choice question styles */
.mcq-question-container {
    width: 100%;
}

.mcq-options-grid {
    margin-top: 15px;
}

.mcq-option-button {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
}

.mcq-option-button:hover:not(:disabled) {
    background-color: #f8f9fa !important;
    border-color: #007bff !important;
    transform: translateX(5px);
}

.mcq-option-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mcq-option-button.selected {
    background-color: #e3f2fd !important;
    border-color: #2196f3 !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.2);
}

.mcq-option-button .mcq-option-letter {
    transition: all 0.3s ease;
}

.mcq-option-button.selected .mcq-option-letter {
    background: #28a745 !important;
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Responsive behavior for smaller screens */
@media (max-width: 768px) {
    /* On mobile, let containers adapt naturally */
    .card-body[style*="calc(100vh"] {
        height: auto !important;
        max-height: 500px !important;
        min-height: 300px !important;
    }

    /* Stack columns on mobile */
    .col-md-4, .col-md-8 {
        width: 100%;
    }
}

/* Don't Save button hover styling */
.btn-decline-report.btn-secondary:hover {
    color: #007bff !important;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

/* General secondary button hover for consistency */
.btn-secondary:hover {
    color: #007bff !important;
}
</style>
