{% extends "base.html" %}

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

{% block extra_head %}
    <!-- Alpine.js for interactive elements -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
{% endblock %}

{% block extra_styles %}
    /* Welcome page specific styles */
    .hero-section {
        background: linear-gradient(135deg, var(--color-primary-element) 0%, #0082c9 100%);
        color: white;
        padding: 60px 24px;
        margin: -24px -24px 40px -24px;
        border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
        text-align: center;
    }

    .hero-section h1 {
        color: white;
        font-size: 36px;
        margin: 0 0 16px 0;
        font-weight: 600;
    }

    .hero-section p {
        font-size: 18px;
        opacity: 0.95;
        max-width: 700px;
        margin: 0 auto;
        line-height: 1.6;
    }

    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
        margin: 32px 0;
    }

    .feature-card {
        background: var(--color-main-background);
        border: 2px solid var(--color-border);
        border-radius: var(--border-radius-large);
        padding: 24px;
        transition: all 0.2s;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: block;
    }

    .feature-card:hover {
        border-color: var(--color-primary-element);
        box-shadow: 0 4px 12px rgba(0, 103, 158, 0.15);
        transform: translateY(-2px);
    }

    .feature-card h3 {
        color: var(--color-primary-element);
        font-size: 20px;
        margin: 12px 0 8px 0;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .feature-card p {
        color: var(--color-text-maxcontrast);
        font-size: 14px;
        line-height: 1.6;
        margin: 8px 0 0 0;
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        background: var(--color-primary-element-light);
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
    }

    .feature-icon svg {
        width: 28px;
        height: 28px;
        fill: var(--color-primary-element);
    }

    .info-section {
        background: var(--color-background-hover);
        border-radius: var(--border-radius-large);
        padding: 32px;
        margin: 32px 0;
    }

    .info-section h2 {
        color: var(--color-main-text);
        font-size: 24px;
        margin: 0 0 16px 0;
        border: none;
        padding: 0;
    }

    .info-section p {
        color: var(--color-text-maxcontrast);
        line-height: 1.7;
        margin: 12px 0;
    }

    .info-section ul {
        margin: 12px 0;
        padding-left: 24px;
    }

    .info-section li {
        color: var(--color-text-maxcontrast);
        line-height: 1.7;
        margin: 8px 0;
    }

    .info-section code {
        background: var(--color-main-background);
        padding: 2px 8px;
        border-radius: var(--border-radius);
        font-size: 13px;
    }

    .auth-status {
        background: var(--color-primary-element-light);
        border-left: 4px solid var(--color-primary-element);
        padding: 16px 20px;
        margin: 24px 0;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .auth-status svg {
        width: 24px;
        height: 24px;
        fill: var(--color-primary-element);
        flex-shrink: 0;
    }

    .auth-status-text {
        flex: 1;
    }

    .auth-status-text strong {
        display: block;
        color: var(--color-main-text);
        font-size: 14px;
        margin-bottom: 4px;
    }

    .auth-status-text span {
        color: var(--color-text-maxcontrast);
        font-size: 13px;
    }
{% endblock %}

{% block content %}
<div class="app-content-wrapper">
    <!-- Main Content Area -->
    <main id="app-content">
        <div class="page-content">
            <!-- Hero Section -->
            <div class="hero-section">
                <h1>Welcome to Nextcloud MCP Server</h1>
                <p>
                    Interactive user interface for semantic search and document retrieval.
                    Test queries, visualize results, and explore your Nextcloud content using RAG workflows.
                </p>
            </div>

            <!-- Authentication Status -->
            <div class="auth-status">
                <svg 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>
                <div class="auth-status-text">
                    <strong>Authenticated as: {{ username }}</strong>
                    <span>Authentication mode: <code>{{ auth_mode }}</code></span>
                </div>
            </div>

            {% if vector_sync_enabled %}
            <!-- Vector Sync Enabled Content -->
            <div class="info-section">
                <h2>About Semantic Search</h2>
                <p>
                    This interface provides access to <strong>semantic search</strong> capabilities powered by vector embeddings.
                    Unlike traditional keyword search, semantic search understands the <em>meaning</em> of your queries and finds
                    conceptually similar content across your Nextcloud apps.
                </p>
                <p>
                    <strong>How it works:</strong>
                </p>
                <ul>
                    <li>Documents from Notes, Calendar, Files, Contacts, and Deck are indexed into a vector database</li>
                    <li>Each document chunk is converted to a 768-dimensional vector embedding that captures semantic meaning</li>
                    <li>Queries are also converted to embeddings and matched against document vectors using similarity search</li>
                    <li>Results can be retrieved using pure semantic search or hybrid BM25 search combining keywords and semantics</li>
                </ul>
            </div>

            <div class="info-section">
                <h2>RAG Workflow Integration</h2>
                <p>
                    This UI allows you to <strong>test the same queries that Large Language Models (LLMs) would use</strong> in a
                    Retrieval-Augmented Generation (RAG) workflow. When an AI assistant needs to answer questions about your data:
                </p>
                <ul>
                    <li><strong>Step 1:</strong> The assistant converts your question into a search query</li>
                    <li><strong>Step 2:</strong> The MCP server retrieves relevant document chunks using semantic search</li>
                    <li><strong>Step 3:</strong> Retrieved context is passed to the LLM to generate an informed answer</li>
                </ul>

                <!-- RAG Workflow Diagram -->
                <div style="background: var(--color-main-background); border: 2px solid var(--color-primary-element); border-radius: var(--border-radius-large); padding: 24px; margin: 24px 0; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace; font-size: 13px; line-height: 1.8; overflow-x: auto;">
                    <div style="text-align: center; font-weight: 600; margin-bottom: 16px; color: var(--color-primary-element); font-size: 14px;">
                        MCP Sampling RAG Workflow
                    </div>
                    <pre style="margin: 0; color: var(--color-main-text);">
┌─────────────────┐
│   <strong>MCP Client</strong>   │  User asks: "What are health benefits of coffee?"
│  (Claude Code)  │
└────────┬────────┘
         │ (1) User question
         ↓
┌────────────────────────────────────────────────────────────────────────┐
│                      <strong>Nextcloud MCP Server</strong>                          │
│  ┌──────────────────────────────────────────────────────────────────┐  │
│  │ <strong>nc_semantic_search_answer</strong> Tool (MCP Sampling-enabled)      │  │
│  │                                                                  │  │
│  │  (2) Semantic Search                                             │  │
│  │  ┌────────────────────────────────────────────────────────┐     │  │
│  │  │ Query: "health benefits of coffee"                     │     │  │
│  │  │ → Convert to 768D vector embedding                     │     │  │
│  │  │ → Search Qdrant (BM25 Hybrid + RRF fusion)             │     │  │
│  │  │ → Retrieve top 5 relevant document chunks              │     │  │
│  │  └────────────────────────────────────────────────────────┘     │  │
│  │                                                                  │  │
│  │  (3) Construct Prompt with Context                               │  │
│  │  ┌────────────────────────────────────────────────────────┐     │  │
│  │  │ "What are health benefits of coffee?                   │     │  │
│  │  │                                                         │     │  │
│  │  │  Documents:                                             │     │  │
│  │  │  - [MED-2155] Effects of habitual coffee consumption...│     │  │
│  │  │  - [MED-1646] Beverage consumption guidance...         │     │  │
│  │  │  - [MED-1627] Coffee and depression risk...            │     │  │
│  │  │  ...                                                    │     │  │
│  │  │                                                         │     │  │
│  │  │  Provide answer with citations."                        │     │  │
│  │  └────────────────────────────────────────────────────────┘     │  │
│  │                                                                  │  │
│  │  (4) MCP Sampling Request                                        │  │
│  │  ─────────────────────────────────────────────────────────────> │  │
│  └──────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────────┘
         │
         │ Sampling request with prompt + context
         ↓
┌─────────────────┐
│   <strong>MCP Client</strong>   │  (5) Client's LLM generates answer using retrieved context
│    (Claude)     │      → "Coffee consumption (2-3 cups/day) is associated with
└────────┬────────┘         reduced risk of type 2 diabetes, cardiovascular disease,
         │                  and improved liver health (Document 1, 2)..."
         │
         │ (6) Answer with citations
         ↓
┌─────────────────┐
│      User       │  Receives comprehensive answer with source citations
└─────────────────┘</pre>
                </div>

                <p style="margin-top: 16px;">
                    <strong>Key Point:</strong> The MCP server retrieves context but doesn't generate answers itself.
                    Through <strong>MCP sampling</strong>, it requests the client's LLM to generate responses, giving users
                    full control over which model is used and ensuring all processing happens client-side.
                </p>

                <p>
                    By using this interface, you can preview search results, understand relevance scores, and verify
                    that the system retrieves the right information before it reaches the LLM.
                </p>
            </div>

            <!-- Feature Cards -->
            <h2>Available Features</h2>
            <div class="feature-grid">
                <a href="/app/user-info" class="feature-card">
                    <div class="feature-icon">
                        <svg 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>
                    </div>
                    <h3>User Information</h3>
                    <p>
                        View your authentication details, session information, and IdP profile.
                        Manage background access permissions.
                    </p>
                </a>

                <a href="/app/user-info#vector-sync" class="feature-card">
                    <div class="feature-icon">
                        <svg 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>
                    </div>
                    <h3>Vector Sync Status</h3>
                    <p>
                        Monitor real-time indexing progress with metrics for indexed documents, pending queue,
                        and synchronization status.
                    </p>
                </a>

                <a href="/app/user-info#vector-viz" class="feature-card">
                    <div class="feature-icon">
                        <svg viewBox="0 0 24 24">
                            <path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" />
                        </svg>
                    </div>
                    <h3>Vector Visualization</h3>
                    <p>
                        Interactive search interface with 2D PCA visualization. Compare algorithms,
                        view relevance scores, and explore matched document chunks.
                    </p>
                </a>
            </div>

            {% else %}
            <!-- Vector Sync Disabled Content -->
            <div class="warning">
                <h3 style="margin-top: 0;">Vector Sync is Disabled</h3>
                <p>
                    Semantic search and vector visualization features are currently disabled.
                    To enable these features, set <code>VECTOR_SYNC_ENABLED=true</code> in your environment configuration.
                </p>
                <p style="margin-bottom: 0;">
                    <strong>Learn more:</strong>
                    <a href="https://github.com/YOUR_REPO/docs/configuration.md" target="_blank" style="color: inherit; text-decoration: underline;">
                        Configuration Guide
                    </a>
                </p>
            </div>

            <!-- Limited Feature Card -->
            <h2>Available Features</h2>
            <div class="feature-grid">
                <a href="/app/user-info" class="feature-card">
                    <div class="feature-icon">
                        <svg 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>
                    </div>
                    <h3>User Information</h3>
                    <p>
                        View your authentication details, session information, and IdP profile.
                        Manage background access permissions.
                    </p>
                </a>
            </div>
            {% endif %}

            <!-- Documentation Section -->
            <div class="info-section" style="margin-top: 40px;">
                <h2>Documentation</h2>
                <p>
                    For detailed information about configuration, authentication modes, and advanced features,
                    please refer to the project documentation:
                </p>
                <ul>
                    <li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/installation.md" target="_blank">Installation Guide</a></li>
                    <li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/configuration.md" target="_blank">Configuration Options</a></li>
                    <li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/authentication.md" target="_blank">Authentication Modes</a></li>
                    {% if vector_sync_enabled %}
                    <li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/user-guide/vector-sync-ui.md" target="_blank">Vector Sync UI Guide</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </main>
</div>
{% endblock %}
