{% extends 'layouts/app.html.twig' %}

{% block title %}Dashboard | Luminous{% endblock %}

{% block app_content %}
    <section class="page-head">
        <div>
            <h1 class="page-head__title">Przegląd Operacyjny</h1>
            <p class="page-head__subtitle">Witaj w centrum zarządzania e-commerce Luminous.</p>
        </div>

        <div class="page-head__actions">
            <a href="{{ path('app_mapping_drive') }}" class="button button--ghost">Mapowanie Drive</a>
            <a href="{{ path('app_integrations') }}" class="button button--ghost">Integracje</a>
            <a href="{{ path('app_project_new') }}" class="button button--primary">
                <span class="ui-icon" aria-hidden="true">add</span>
                Nowy projekt
            </a>
        </div>
    </section>

    <section class="dashboard-kpi-grid" aria-label="KPI operacyjne">
        <article class="kpi-card">
            <span class="kpi-card__decor" aria-hidden="true"></span>
            <div class="kpi-card__top">
                <span class="kpi-card__label">Liczba projektów</span>
                <span class="ui-icon kpi-card__icon" aria-hidden="true">inventory_2</span>
            </div>
            <strong class="kpi-card__value">{{ dashboard_stats.projects_total|number_format(0, ',', ' ') }}</strong>
        </article>

        <article class="kpi-card">
            <span class="kpi-card__decor" aria-hidden="true"></span>
            <div class="kpi-card__top">
                <span class="kpi-card__label">Do uzupełnienia</span>
                <span class="ui-icon kpi-card__icon" aria-hidden="true">assignment_late</span>
            </div>
            <strong class="kpi-card__value">{{ dashboard_stats.needs_completion }}</strong>
        </article>

        <article class="kpi-card">
            <span class="kpi-card__decor" aria-hidden="true"></span>
            <div class="kpi-card__top">
                <span class="kpi-card__label">Gotowe do AI</span>
                <span class="ui-icon kpi-card__icon" aria-hidden="true">robot_2</span>
            </div>
            <strong class="kpi-card__value">{{ dashboard_stats.ready_for_ai }}</strong>
        </article>

        <article class="kpi-card kpi-card--accent">
            <span class="kpi-card__decor" aria-hidden="true"></span>
            <div class="kpi-card__top">
                <span class="kpi-card__label">AI Drafty akcept.</span>
                <span class="ui-icon kpi-card__icon" aria-hidden="true">fact_check</span>
            </div>
            <strong class="kpi-card__value">{{ dashboard_stats.ai_review }}</strong>
        </article>

        <article class="kpi-card kpi-card--success">
            <span class="kpi-card__decor" aria-hidden="true"></span>
            <div class="kpi-card__top">
                <span class="kpi-card__label">Drafty Presta</span>
                <span class="ui-icon kpi-card__icon" aria-hidden="true">shopping_cart_checkout</span>
            </div>
            <strong class="kpi-card__value">{{ dashboard_stats.presta_drafts }}</strong>
        </article>

        <article class="kpi-card kpi-card--danger">
            <span class="kpi-card__decor" aria-hidden="true"></span>
            <div class="kpi-card__top">
                <span class="kpi-card__label">Błędy publ.</span>
                <span class="ui-icon kpi-card__icon" aria-hidden="true">error</span>
            </div>
            <strong class="kpi-card__value">{{ dashboard_stats.publish_errors }}</strong>
        </article>
    </section>

    <section class="dashboard-main-grid">
        <article class="dashboard-card">
            <div class="dashboard-card__head">
                <h2 class="dashboard-card__title">Ostatnie projekty</h2>
                <div class="dashboard-card__actions">
                    <a href="{{ path('app_ai_review') }}" class="button button--tiny button--ghost">Do akceptacji AI</a>
                    <a href="{{ path('app_ai_jobs') }}" class="button button--tiny button--ghost">Kolejka AI</a>
                </div>
            </div>

            <div class="table-responsive">
                <table class="mini-project-list">
                    <thead>
                        <tr>
                            <th>Miniatura</th>
                            <th>Nazwa / Symbol</th>
                            <th>Status</th>
                            <th>Kanały</th>
                            <th class="text-right">Akcje</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for project in recent_projects %}
                        <tr>
                            <td>
                                <span class="mini-thumb">
                                    {% if project.artPath %}
                                        <img src="{{ asset(project.artPath) }}" alt="{{ project.name }}" loading="lazy">
                                    {% else %}
                                        <span class="ui-icon" aria-hidden="true">image</span>
                                    {% endif %}
                                </span>
                            </td>
                            <td>
                                <div class="mini-project-title">{{ project.name }}</div>
                                <div class="mini-project-symbol">{{ project.symbol }}</div>
                            </td>
                            <td>
                                {% include 'project/_status_badge.html.twig' with {
                                    code: project.status ? project.status.code : 'none',
                                    label: project.status ? project.status.name : 'Brak statusu'
                                } %}
                            </td>
                            <td>{% include 'project/_platform_badges.html.twig' with { project: project, variant: 'dashboard' } %}</td>
                            <td class="text-right"><a href="{{ path('app_project_show', { id: project.id }) }}" class="button button--tiny button--ghost">Otwórz</a></td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="5">
                                <div class="empty-state">
                                    <strong>Brak projektów.</strong>
                                    <span>Dodaj pierwszy projekt, żeby zobaczyć go w przeglądzie.</span>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </article>

        <article class="dashboard-card">
            <div class="dashboard-card__head">
                <h2 class="dashboard-card__title">
                    <span class="ui-icon" aria-hidden="true" style="color: var(--ww-red); vertical-align: -4px;">warning</span>
                    Ostatnie błędy
                </h2>
            </div>

            <div class="error-list">
                {% for error in recent_errors %}
                    <div class="error-card">
                        <div class="error-card__meta">
                            <span>{{ error.createdAt ? error.createdAt|date('d-m-Y H:i') : '—' }}</span>
                            <a href="{{ path('app_logs_index') }}">Napraw</a>
                        </div>
                        <div class="error-card__title">{{ error.context }}</div>
                        <div class="error-card__text">{{ error.message|length > 130 ? error.message|slice(0, 130) ~ '…' : error.message }}</div>
                    </div>
                {% else %}
                    <div class="empty-state">
                        <strong>Brak ostatnich błędów.</strong>
                        <span>Logi ostrzeżeń i błędów pojawią się tutaj automatycznie.</span>
                    </div>
                {% endfor %}
            </div>

            <div class="dashboard-card__footer">
                <a href="{{ path('app_logs_index') }}" class="button button--tiny button--ghost">Zobacz wszystkie logi</a>
            </div>
        </article>
    </section>
{% endblock %}