{% extends "base.html" %}

{% block title %}Nextcloud MCP Server{% endblock %}

{% block extra_head %}
    <!-- htmx for dynamic loading -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>

    <!-- Alpine.js for state management -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Plotly.js for vector visualization -->
    <script src="https://cdn.plot.ly/plotly-3.3.0.min.js"></script>
{% endblock %}

{% block extra_styles %}
    /* Smooth htmx transitions */
    .htmx-swapping {
        opacity: 0;
        transition: opacity 200ms ease-out;
    }

    .htmx-settling {
        opacity: 1;
        transition: opacity 200ms ease-in;
    }

    /* Logout button styling */
    .logout-section {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--color-border);
    }
{% endblock %}

{% block content %}
<div class="app-content-wrapper" x-data="{ activeSection: 'user-info', navOpen: true }">
    <!-- Side Navigation -->
    <nav id="app-navigation" :class="{ 'app-navigation--closed': !navOpen }">
        <div class="app-navigation__content">
            <!-- Navigation List -->
            <ul class="app-navigation-list">
                <li class="app-navigation-entry" :class="{ 'active': activeSection === 'user-info' }">
                    <div class="app-navigation-entry__wrapper">
                        <a href="#"
                           @click.prevent="activeSection = 'user-info'"
                           class="app-navigation-entry-link">
                            <span class="app-navigation-entry-icon">
                                <svg class="nav-icon" viewBox="0 0 24 24">
                                    <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
                                </svg>
                            </span>
                            <span class="app-navigation-entry__name">User Info</span>
                        </a>
                    </div>
                </li>

                {% if show_vector_sync_tab %}
                <li class="app-navigation-entry" :class="{ 'active': activeSection === 'vector-sync' }">
                    <div class="app-navigation-entry__wrapper">
                        <a href="#"
                           @click.prevent="activeSection = 'vector-sync'"
                           class="app-navigation-entry-link">
                            <span class="app-navigation-entry-icon">
                                <svg class="nav-icon" viewBox="0 0 24 24">
                                    <path d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" />
                                </svg>
                            </span>
                            <span class="app-navigation-entry__name">Vector Sync</span>
                        </a>
                    </div>
                </li>

                <li class="app-navigation-entry" :class="{ 'active': activeSection === 'vector-viz' }">
                    <div class="app-navigation-entry__wrapper">
                        <a href="#"
                           @click.prevent="activeSection = 'vector-viz'"
                           class="app-navigation-entry-link">
                            <span class="app-navigation-entry-icon">
                                <svg class="nav-icon" viewBox="0 0 24 24">
                                    <path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" />
                                </svg>
                            </span>
                            <span class="app-navigation-entry__name">Vector Viz</span>
                        </a>
                    </div>
                </li>
                {% endif %}

                {% if show_webhooks_tab %}
                <li class="app-navigation-entry" :class="{ 'active': activeSection === 'webhooks' }">
                    <div class="app-navigation-entry__wrapper">
                        <a href="#"
                           @click.prevent="activeSection = 'webhooks'"
                           class="app-navigation-entry-link">
                            <span class="app-navigation-entry-icon">
                                <svg class="nav-icon" viewBox="0 0 24 24">
                                    <path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
                                </svg>
                            </span>
                            <span class="app-navigation-entry__name">Webhooks</span>
                        </a>
                    </div>
                </li>
                {% endif %}
            </ul>

            <!-- Settings/Logout at bottom -->
            {% if logout_url %}
            <ul class="app-navigation__settings">
                <li class="app-navigation-entry">
                    <div class="app-navigation-entry__wrapper">
                        <a href="{{ logout_url }}" class="app-navigation-entry-link">
                            <span class="app-navigation-entry-icon">
                                <svg class="nav-icon" viewBox="0 0 24 24">
                                    <path d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
                                </svg>
                            </span>
                            <span class="app-navigation-entry__name">Logout</span>
                        </a>
                    </div>
                </li>
            </ul>
            {% endif %}
        </div>

        <!-- Toggle Button (mobile) -->
        <button @click="navOpen = !navOpen"
                class="app-navigation-toggle"
                :aria-expanded="navOpen.toString()">
            ☰
        </button>
    </nav>

    <!-- Main Content Area -->
    <main id="app-content">
        <div class="page-content">
            <!-- User Info Section -->
            <div x-show="activeSection === 'user-info'">
                <div class="content-section">
                    <h1>User Information</h1>
                    {{ user_info_tab_html|safe }}
                </div>
            </div>

            {% if show_vector_sync_tab %}
            <!-- Vector Sync Section -->
            <div x-show="activeSection === 'vector-sync'">
                <div class="content-section">
                    <h1>Vector Sync Status</h1>
                    {{ vector_sync_tab_html|safe }}
                </div>
            </div>

            <!-- Vector Viz Section -->
            <div x-show="activeSection === 'vector-viz'">
                <div class="content-section">
                    <h1>Vector Visualization</h1>
                    <div hx-get="/app/vector-viz" hx-trigger="load" hx-swap="outerHTML">
                        <p style="color: #999;">Loading vector visualization...</p>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if show_webhooks_tab %}
            <!-- Webhooks Section -->
            <div x-show="activeSection === 'webhooks'">
                <div class="content-section">
                    <h1>Webhook Management</h1>
                    {{ webhooks_tab_html|safe }}
                </div>
            </div>
            {% endif %}
        </div>
    </main>
</div>

<script>
    // Initialize vizApp for vector visualization (if needed)
    function vizApp() {
        return {
            query: '',
            algorithm: 'bm25_hybrid',
            fusion: 'rrf',
            showAdvanced: false,
            docTypes: [''],
            limit: 50,
            scoreThreshold: 0.0,
            loading: false,
            results: [],
            expandedChunks: {},
            chunkLoading: {},

            async executeSearch() {
                this.loading = true;
                this.results = [];

                try {
                    const params = new URLSearchParams({
                        query: this.query,
                        algorithm: this.algorithm,
                        limit: this.limit,
                        score_threshold: this.scoreThreshold,
                    });

                    if (this.algorithm === 'bm25_hybrid') {
                        params.append('fusion', this.fusion);
                    }

                    const selectedTypes = this.docTypes.filter(t => t !== '');
                    if (selectedTypes.length > 0) {
                        params.append('doc_types', selectedTypes.join(','));
                    }

                    const response = await fetch(`/app/vector-viz/search?${params}`);
                    const data = await response.json();

                    if (data.success) {
                        this.results = data.results;
                        this.renderPlot(data.coordinates_2d, data.results);
                    } else {
                        alert('Search failed: ' + data.error);
                    }
                } catch (error) {
                    alert('Error: ' + error.message);
                } finally {
                    this.loading = false;
                }
            },

            renderPlot(coordinates, results) {
                const scores = results.map(r => r.score);
                const trace = {
                    x: coordinates.map(c => c[0]),
                    y: coordinates.map(c => c[1]),
                    mode: 'markers',
                    type: 'scatter',
                    text: results.map(r => `${r.title}<br>Raw Score: ${r.original_score.toFixed(3)} (${(r.score * 100).toFixed(0)}% relative)`),
                    marker: {
                        size: results.map(r => 6 + (Math.pow(r.score, 2) * 14)),
                        opacity: results.map(r => 0.2 + (r.score * 0.8)),
                        color: scores,
                        colorscale: 'Viridis',
                        showscale: true,
                        colorbar: { title: 'Relative Score' },
                        cmin: 0,
                        cmax: 1
                    }
                };

                const layout = {
                    title: `Vector Space (PCA 2D) - ${results.length} results`,
                    xaxis: { title: 'PC1' },
                    yaxis: { title: 'PC2' },
                    hovermode: 'closest',
                    height: 600
                };

                Plotly.newPlot('viz-plot', [trace], layout);
            },

            getNextcloudUrl(result) {
                const baseUrl = '{{ nextcloud_host_for_links }}';
                switch (result.doc_type) {
                    case 'note':
                        return `${baseUrl}/apps/notes/note/${result.id}`;
                    case 'file':
                        return `${baseUrl}/apps/files/?fileId=${result.id}`;
                    case 'calendar':
                        return `${baseUrl}/apps/calendar`;
                    case 'contact':
                        return `${baseUrl}/apps/contacts`;
                    case 'deck':
                        return `${baseUrl}/apps/deck`;
                    default:
                        return `${baseUrl}`;
                }
            },

            hasChunkPosition(result) {
                return result.chunk_start_offset != null && result.chunk_end_offset != null;
            },

            isChunkExpanded(resultKey) {
                return this.expandedChunks[resultKey] !== undefined;
            },

            async toggleChunk(result) {
                const resultKey = `${result.doc_type}_${result.id}`;

                if (this.isChunkExpanded(resultKey)) {
                    delete this.expandedChunks[resultKey];
                    return;
                }

                this.chunkLoading[resultKey] = true;

                try {
                    const params = new URLSearchParams({
                        doc_type: result.doc_type,
                        doc_id: result.id,
                        start: result.chunk_start_offset,
                        end: result.chunk_end_offset,
                        context: 500
                    });

                    const response = await fetch(`/app/chunk-context?${params}`);
                    const data = await response.json();

                    if (data.success) {
                        this.expandedChunks[resultKey] = data;
                    } else {
                        alert('Failed to load chunk: ' + data.error);
                    }
                } catch (error) {
                    alert('Error loading chunk: ' + error.message);
                } finally {
                    delete this.chunkLoading[resultKey];
                }
            }
        };
    }
</script>
{% endblock %}