{% extends 'base.html' %}

{% block content %}
<!-- Hero Section -->
<section class="text-center mb-2">
  <h1>Wuuuuhuuu! 🦉</h1>
  <p style="font-size: 1.25rem; color: var(--pico-muted-color);">
    Knowledge Management & Diary System with AI-powered RAG
  </p>
</section>

<!-- Feature Cards -->
<section class="grid-2" style="margin: 3rem 0;">
  <article class="card">
    <header>
      <h3>🤖 RAG System</h3>
    </header>
    <p>
      Semantic search and Q&A powered by OpenAI, Claude, or OpenRouter.
      Index your content and ask questions in natural language.
    </p>
    <footer>
      {% if user and user.role == 'admin' %}
        <a href="/admin/rag" role="button">Manage RAG →</a>
      {% else %}
        <small class="text-muted">Admin access required</small>
      {% endif %}
    </footer>
  </article>

  <article class="card">
    <header>
      <h3>📔 Diary System</h3>
    </header>
    <p>
      Personal diary entries with full-text search and AI insights.
      Each child has their own secure collection.
    </p>
    <footer>
      {% if user %}
        <a href="/api/hello?lang={{ lang }}" role="button" class="outline">Try API →</a>
      {% else %}
        <a href="/{{ lang }}/login" role="button" class="outline">Login to Access →</a>
      {% endif %}
    </footer>
  </article>

  <article class="card">
    <header>
      <h3>🌍 Multilingual</h3>
    </header>
    <p>
      Full internationalization support with German and English.
      Server-rendered templates with language switching.
    </p>
    <footer>
      <small class="text-muted">Current: <strong>{{ 'Deutsch' if lang == 'de' else 'English' }}</strong></small>
    </footer>
  </article>

  <article class="card">
    <header>
      <h3>🔐 Secure & GDPR</h3>
    </header>
    <p>
      Role-based access control, audit logging, and GDPR-compliant
      data handling for all operations.
    </p>
    <footer>
      <small class="text-muted">Audit log & immutable records</small>
    </footer>
  </article>
</section>

<!-- Quick Start / Status -->
<section style="margin: 3rem 0;">
  {% if user %}
    <article>
      <header>
        <h3>Welcome back, {{ user.email }}! 👋</h3>
      </header>
      <p>You're logged in as <strong>{{ user.role }}</strong></p>

      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
        {% if user.role == 'admin' %}
          <a href="/admin" role="button">Admin Dashboard</a>
          <a href="/admin/rag" role="button" class="secondary">RAG Management</a>
        {% endif %}
        <a href="/docs" role="button" class="outline" target="_blank">API Docs</a>
      </div>
    </article>
  {% else %}
    <article>
      <header>
        <h3>Get Started</h3>
      </header>
      <p>
        Login to access the admin dashboard, manage content, and use AI-powered features.
      </p>
      <div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;">
        <a href="/{{ lang }}/login" role="button">Login</a>
        <small class="text-muted">
          Demo: <code>demo@crumb.local</code> / <code>demo123</code>
        </small>
      </div>
    </article>
  {% endif %}
</section>

<!-- Tech Stack -->
<section style="margin: 3rem 0;">
  <details>
    <summary><strong>Tech Stack & APIs</strong></summary>
    <div style="padding: 1rem;">
      <h4>Backend</h4>
      <ul>
        <li><strong>FastAPI</strong> - Modern Python web framework</li>
        <li><strong>MariaDB</strong> - Relational database</li>
        <li><strong>Qdrant</strong> - Vector database for RAG</li>
        <li><strong>Jinja2</strong> - Template engine</li>
      </ul>

      <h4>API Endpoints</h4>
      <pre><code>GET  /api/hello                    - Hello World API
POST /api/diary/index               - Index diary entry
POST /api/diary/search              - Semantic search
POST /api/diary/ask                 - RAG Q&A
GET  /api/diary/{child_id}/status   - Status check</code></pre>

      <h4>Quick Test</h4>
      <pre><code>curl http://localhost:8000/api/hello?lang={{ lang }}
curl http://localhost:8000/health
curl http://localhost:8000/__routes</code></pre>
    </div>
  </details>
</section>

<!-- System Info (Debug) -->
{% if user and user.role == 'admin' %}
<section style="margin: 3rem 0;">
  <details>
    <summary><strong>System Information (Admin Only)</strong></summary>
    <div style="padding: 1rem;">
      <table>
        <tbody>
          <tr>
            <th scope="row">User</th>
            <td>{{ user.email }}</td>
          </tr>
          <tr>
            <th scope="row">Role</th>
            <td><span class="badge badge-admin">{{ user.role }}</span></td>
          </tr>
          <tr>
            <th scope="row">Locale</th>
            <td>{{ user.locale or lang }}</td>
          </tr>
          <tr>
            <th scope="row">Language</th>
            <td>{{ lang }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </details>
</section>
{% endif %}

{% endblock %}