{% extends "base.html" %}

{% block body_class %}fire-animation-page{% endblock %}

{% block content %}
<div class="px-4 py-5 my-5 text-center">
    <div id="logo-container" class="mb-4">
        <img class="d-block mx-auto" src="{{ url_for('static', filename='FHIRFLARE.png') }}" alt="FHIRFLARE IG Toolkit" width="256" height="256">
    </div>
    <div id="animation-container" class="mb-4 d-none">
        <div class="section-center">
            <div class="moon">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="shooting-star"></div>
            <div class="shooting-star-2"></div>
            <div class="star"></div>
            <div class="star snd"></div>
            <div class="star trd"></div>
            <div class="star fth"></div>
            <div class="star fith"></div>
            <div class="circle"></div>
            <div class="wood-circle"></div>
            <div class="wood"></div>
            <div class="tree-1"></div>
            <div class="tree-2"></div>
            <div class="fire">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="smoke">
                <span class="s-0"></span>
                <span class="s-1"></span>
                <span class="s-2"></span>
                <span class="s-3"></span>
                <span class="s-4"></span>
                <span class="s-5"></span>
                <span class="s-6"></span>
                <span class="s-7"></span>
                <span class="s-8"></span>
                <span class="s-9"></span>
            </div>
        </div>
    </div>
    <h1 class="display-5 fw-bold text-body-emphasis">Welcome to {{ site_name }}</h1>
    <div class="col-lg-6 mx-auto">
        <p class="lead mb-2">Simple tool for importing, viewing, and validating FHIR Implementation Guides.</p>
        <p class="text-muted">Streamline Your FHIR Workflow</p>
    </div>
</div>

<div class="container">
    <div class="row g-4">
        <!-- IG Management -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">IG Management</h5>
                    <p class="card-text">Import and manage FHIR Implementation Guides.</p>
                    <div class="d-grid gap-2">
                        <!-- <a href="{{ url_for('import_ig') }}" class="btn btn-primary">Import FHIR IG</a> -->
                        <a href="{{ url_for('search_and_import') }}" class="btn btn-primary">Search & Import IGs</a>
                        <a href="{{ url_for('view_igs') }}" class="btn btn-outline-secondary">Manage FHIR Packages</a>
                        <a href="{{ url_for('push_igs') }}" class="btn btn-outline-secondary">Push IGs</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Validation & Testing -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">Validation & Testing</h5>
                    <p class="card-text">Validate and test FHIR resources.</p>
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('upload_test_data') }}" class="btn btn-outline-secondary">Upload Test Data</a>
                        <a href="{{ url_for('validate_sample') }}" class="btn btn-outline-secondary">Validate FHIR Sample</a>
                        <a href="{{ url_for('retrieve_split_data') }}" class="btn btn-outline-secondary">Retrieve & Split Data</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- API & Tools -->
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body text-center">
                    <h5 class="card-title">API & Tools</h5>
                    <p class="card-text">Explore FHIR APIs and convert resources.</p>
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('fhir_ui') }}" class="btn btn-outline-secondary">FHIR API Explorer</a>
                        <a href="{{ url_for('fhir_ui_operations') }}" class="btn btn-outline-secondary">FHIR UI Operations</a>
                        <a href="{{ url_for('fsh_converter') }}" class="btn btn-outline-secondary">FSH Converter</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center mt-4">
        <a href="{{ url_for('about') }}" class="btn btn-outline-info">About FHIRFLARE</a>
    </div>
</div>

<style>
    #logo-container {
        animation: fadeOut 30s forwards;
    }

    @keyframes fadeOut {
        0% { opacity: 1; }
        95% { opacity: 1; }
        100% { opacity: 0; display: none; }
    }

    #animation-container {
        transition: opacity 1s ease;
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const logoContainer = document.getElementById('logo-container');
    const animationContainer = document.getElementById('animation-container');
    const htmlElement = document.documentElement;

    // After 30 seconds, fade out logo and show animation
    setTimeout(() => {
        logoContainer.style.display = 'none';
        animationContainer.classList.remove('d-none');
        animationContainer.style.opacity = '1';
    }, 30000);

    // Sync animation with theme (reversed: dark = fire-on, light = fire-off)
    const updateAnimationState = () => {
        const savedTheme = localStorage.getItem('theme') || (document.cookie.includes('theme=dark') ? 'dark' : 'light');
        const isDark = savedTheme === 'dark';
        document.body.classList.toggle('fire-on', isDark); // Dark theme: fire-on, Light theme: fire-off
    };

    // Initial state
    updateAnimationState();

    // Override toggleTheme to ensure animation updates
    const originalToggleTheme = window.toggleTheme || function() {};
    window.toggleTheme = function() {
        originalToggleTheme();
        updateAnimationState();
    };

    // Observe changes to data-theme attribute
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.attributeName === 'data-theme') {
                updateAnimationState();
            }
        });
    });
    observer.observe(htmlElement, { attributes: true });

    // Clean up observer on page unload
    window.addEventListener('unload', () => {
        observer.disconnect();
    });
});
</script>
{% endblock %}