{% extends 'teamized/base.html' %}
{% load static i18n %}

{% comment %}This is the main app page. All the action happens on this page.{% endcomment %}

{% block title %}{% translate "App" %}{% endblock title %}

{% block stylesheets %}
    <style>
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        #react-root {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        #react-root-fallback {
            --fallback-fg: #000;
            --fallback-bg: #fff;
            --fallback-error: #dc2626;

            background-color: var(--fallback-bg);
            position: absolute;
            top: 0;
            left: 0;
            width: 100dvw;
            height: 100dvh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

            & .loading-spinner {
                width: 3rem;
                height: 3rem;
                border: 0.25rem solid var(--fallback-fg);
                border-top-color: var(--fallback-bg);
                border-radius: 50%;
                animation: spinner-rotate 0.75s linear infinite;
                margin-bottom: 1rem;
            }

            & .loading-text {
                margin: 0;
                color: var(--fallback-fg);
            }

            & .error-message {
                display: none;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
                max-width: 500px;
                padding: 2rem;
                text-align: center;
            }

            & .error-icon {
                font-size: 4rem;
                color: var(--fallback-error);
            }

            & .error-title {
                margin: 0;
                font-size: 1.5rem;
                font-weight: bold;
                color: var(--fallback-error);
            }

            & .error-details {
                margin: 0;
                color: var(--fallback-fg);
                line-height: 1.5;
            }

            & .error-reload-btn {
                padding: 0.75rem 1.5rem;
                background-color: var(--fallback-error);
                color: white;
                border: none;
                border-radius: 0.5rem;
                font-size: 1rem;
                font-weight: 500;
                cursor: pointer;
                transition: opacity 0.2s;
            }

            &.error .loading-spinner,
            &.error .loading-text {
                display: none;
            }

            &.error .error-message {
                display: flex;
            }
        }

        @keyframes spinner-rotate {
            to {
                transform: rotate(360deg);
            }
        }

        @media (prefers-color-scheme: dark) {
            #react-root-fallback {
                --fallback-fg: #fff;
                --fallback-bg: #000;
                --fallback-error: #ef4444;
            }
        }
    </style>
{% endblock %}

{% block body %}

    <div id="react-root">
        <!-- Filled by React / fallback content: -->
        <div id="react-root-fallback">
            <div class="loading-spinner" role="status" aria-label="Laden..."></div>
            <p class="loading-text">Teamized wird geladen...</p>

            <div class="error-message">
                <div class="error-icon">🙈</div>
                <h2 class="error-title">Teamized konnte nicht geladen werden</h2>
                <p class="error-details">
                    Das Anwendungsskript konnte nicht geladen werden. Möglicherweise gibt es ein Problem mit der
                    Netzwerkverbindung oder der Server ist vorübergehend nicht erreichbar. Bitte versuche es erneut.
                </p>
                <noscript>
                    <h3>Teamized benötigt JavaScript. Bitte aktiviere JavaScript.</h3>
                </noscript>
                <button class="error-reload-btn" onclick="window.location.reload()">
                    Seite neu laden
                </button>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script>
        window.teamized_globals = {
            api_base_url: '{% url 'teamized:home' %}api/',
            home_url: '{% url 'teamized:home' %}',
            debug_url: '{% url 'teamized:app-debug' %}',
            account_url: '{% url 'account:home' %}?next={% url 'teamized:app' %}',
            logout_url: '{% url 'account:logout' %}?next={% url 'teamized:home' %}',
        };

        /* Prevent dark-mode flickering by setting the device-theme as default until settings are loaded */
        const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
        document.body.dataset.tailwindTheme = prefersDarkScheme.matches ? 'dark' : 'light';

        /* Show error if script fails to load */
        function showAppLoadError() {
            const fallback = document.getElementById('react-root-fallback');
            if (fallback) {
                fallback.classList.add('error');
            }
        }
    </script>

    <!-- Main app script -->
    {% if dev_server_host %}
        <script src="{{ dev_server_host }}/mainapp.js" onerror="showAppLoadError()"></script>
    {% else %}
        <script src="{% static 'teamized/app/mainapp.js' %}" onerror="showAppLoadError()"></script>
    {% endif %}

    <noscript>
        <style>
            #react-root-fallback {
                & .loading-spinner,
                & .loading-text,
                & .error-reload-btn {
                    display: none;
                }

                & .error-message {
                    display: flex;
                }
            }
        </style>
    </noscript>

{% endblock body %}