{% extends "base.html" %}

{% block title %}Home - API Demo{% endblock %}

{% block content %}
<div class="hero">
    <h1>Welcome to API7EE Demo Platform</h1>
    <p class="subtitle">Explore our API services with real-time data and AI-powered features</p>
</div>

<div class="cards-grid">
    <div class="card">
        <div class="card-icon">📦</div>
        <h3>Items Management</h3>
        <p>Browse and manage products in our catalog</p>
        <a href="/items" class="btn btn-primary">View Items</a>
    </div>

    <div class="card">
        <div class="card-icon">👥</div>
        <h3>Users</h3>
        <p>Manage user accounts and profiles</p>
        <a href="/users" class="btn btn-primary">View Users</a>
    </div>

    <div class="card">
        <div class="card-icon">🤖</div>
        <h3>AI Chat (LLM)</h3>
        <p>Chat with our videogame expert AI assistant</p>
        <a href="/llm" class="btn btn-primary">Start Chat</a>
    </div>

    <div class="card">
        <div class="card-icon">📚</div>
        <h3>API Documentation</h3>
        <p>Explore our OpenAPI/Swagger documentation</p>
        <a href="/api/docs" target="_blank" class="btn btn-primary">Open Docs</a>
    </div>
</div>

<div class="info-section">
    <h2>Features</h2>
    <ul class="features-list">
        <li>✅ RESTful API with FastAPI</li>
        <li>✅ AI Rate Limiting (100 tokens/60s for LLM)</li>
        <li>✅ Standard Rate Limiting (100 req/60s per IP)</li>
        <li>✅ OpenAI-compatible LLM endpoint</li>
        <li>✅ Real-time data management</li>
        <li>✅ Swagger/OpenAPI documentation</li>
    </ul>
</div>

<div class="stats">
    <div class="stat-box">
        <h3 id="items-count">-</h3>
        <p>Total Items</p>
    </div>
    <div class="stat-box">
        <h3 id="users-count">-</h3>
        <p>Active Users</p>
    </div>
    <div class="stat-box">
        <h3>AI Ready</h3>
        <p>LLM Service</p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Fetch stats from API
fetch('/api/items')
    .then(res => res.json())
    .then(data => {
        document.getElementById('items-count').textContent = data.length;
    })
    .catch(err => console.error('Error fetching items:', err));

fetch('/api/users')
    .then(res => res.json())
    .then(data => {
        document.getElementById('users-count').textContent = data.length;
    })
    .catch(err => console.error('Error fetching users:', err));
</script>
{% endblock %}