{% extends "base.html" %}
{% block title %}Heute | Nouri{% endblock %}
{% block content %}
<section class="hero">
    <div>
        <p class="eyebrow">Heute</p>
        <h1>Ein guter Blick auf euren Alltag</h1>
        <p class="lead">Du siehst, was zuhause da ist, was schon geplant wurde, welche Vorlagen passen und wo heute noch etwas dazukommen kann.</p>
    </div>
    <div class="hero-actions">
        <a class="button" href="{{ url_for('main.planner_day', date=today.isoformat()) }}">Heutigen Tagesplan öffnen</a>
        <a class="button secondary" href="{{ url_for('main.template_library') }}">Vorlagen öffnen</a>
    </div>
</section>

{% if setup_checklist %}
    <section class="panel">
        <div class="panel-head">
            <h2>Gut anfangen</h2>
        </div>
        <div class="more-link-grid">
            {% for step in setup_checklist %}
                <a class="more-link-card" href="{{ step.url }}">
                    <strong>{{ step.title }}</strong>
                    <small>{{ step.text }}</small>
                    <span class="chip">{{ step.label }}</span>
                </a>
            {% endfor %}
        </div>
    </section>
{% endif %}

<section class="stats-grid">
    <article class="stat-card">
        <span>Zuhause</span>
        <strong>{{ home_count }}</strong>
        <small>sichtbare Einträge</small>
    </article>
    <article class="stat-card">
        <span>Einkaufsliste</span>
        <strong>{{ shopping_count }}</strong>
        <small>offene Besorgungen</small>
    </article>
    <article class="stat-card">
        <span>Archiv</span>
        <strong>{{ archive_count }}</strong>
        <small>wiederverwendbare Erinnerungen</small>
    </article>
</section>

{% if dashboard_hints %}
    <section class="panel">
        <div class="panel-head">
            <h2>Heute passend</h2>
        </div>
        <div class="hint-list">
            {% for hint in dashboard_hints %}
                <p class="hint-chip">{{ hint }}</p>
            {% endfor %}
        </div>
    </section>
{% endif %}

<section class="two-column">
    <article class="panel">
        <div class="panel-head">
            <h2>Heute im Plan</h2>
            <a href="{{ url_for('main.planner_day', date=today.isoformat()) }}">Zum Tagesplan</a>
        </div>
        {% if today_entries %}
            <ul class="simple-list">
                {% for entry in today_entries %}
                    <li class="stacked-mobile">
                        <div>
                            <strong>{{ entry.daypart_name }}</strong>
                            <span>{{ entry.item_name }}</span>
                            <div class="chip-row">
                                <span class="chip">{{ entry.visibility_label }}</span>
                                <span class="chip status-soft">{{ entry.owner_label }}</span>
                                <span class="chip">{{ entry.for_label }}</span>
                            </div>
                        </div>
                        {% if entry.is_home %}
                            <span class="status-pill status-home">zuhause</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="empty-state">Für heute ist noch nichts fest eingeplant. Ein kleiner Anfang reicht völlig.</p>
        {% endif %}
    </article>

    <article class="panel dashboard-spaced-panel">
        <div class="panel-head">
            <h2>Kurz griffbereit</h2>
            <a href="{{ url_for('main.home_view') }}">Alles unter Zuhause</a>
        </div>
        {% if home_items %}
            <div class="mini-card-grid">
                {% for item in home_items %}
                    <article class="mini-card">
                        <div class="mini-card-body">
                            <strong>{{ item.name }}</strong>
                            <small>{{ item_kind_labels[item.kind] }} · {{ item.visibility_label }}</small>
                            <small>{{ item.for_label }}</small>
                            {% if item.dayparts %}
                                <div class="chip-row">
                                    {% for daypart in item.dayparts %}
                                        <span class="chip">{{ daypart }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">Sobald etwas eingekauft oder manuell auf Zuhause gesetzt wurde, erscheint es hier.</p>
        {% endif %}
    </article>
</section>

<section class="two-column">
    <article class="panel dashboard-spaced-panel">
        <div class="panel-head">
            <h2>Was zuhause gut zusammenpasst</h2>
            <a href="{{ url_for('main.home_view') }}">Zuhause öffnen</a>
        </div>
        {% if recipe_suggestions %}
            <div class="stack-sections">
                {% for suggestion in recipe_suggestions %}
                    <article class="template-list-card">
                        <div>
                            <strong>{{ suggestion.title }}</strong>
                            <small>{{ suggestion.reason }}</small>
                            {% if suggestion.needs_shopping and suggestion.missing_components %}
                                <div class="chip-row">
                                    <span class="chip status-idea">Es fehlt noch: {{ suggestion.missing_components|join(', ') }}</span>
                                </div>
                            {% endif %}
                        </div>
                        <div class="template-list-card-actions">
                            {% if suggestion.existing_item_id %}
                                <a class="ghost-button" href="{{ url_for('main.planner_day', date=today.isoformat(), item_id=suggestion.existing_item_id, daypart_id=suggestion.daypart_id or 1) }}">Im Tagesplan öffnen</a>
                            {% else %}
                                <a class="ghost-button" href="{{ url_for('main.item_create', kind='meal', name=suggestion.title, component_ids=suggestion.component_ids) }}">Als Mahlzeit anlegen</a>
                                <form method="post" action="{{ url_for('main.suggestion_hide') }}">
                                    {{ csrf_input() }}
                                    {% for component_id in suggestion.component_ids %}
                                        <input type="hidden" name="component_ids" value="{{ component_id }}">
                                    {% endfor %}
                                    <button class="ghost-button" type="submit">Dauerhaft ausblenden</button>
                                </form>
                            {% endif %}
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">Sobald ein paar Dinge unter Zuhause liegen, zeigt Nouri hier kleine Kombinationsideen.</p>
        {% endif %}
    </article>

    <article class="panel">
        <div class="panel-head">
            <h2>Vorlagen für später</h2>
            <a href="{{ url_for('main.template_library') }}">Alles ansehen</a>
        </div>
        {% if day_templates or week_templates %}
            <div class="stack-sections">
                {% for template in day_templates %}
                    <a class="mini-card" href="{{ url_for('main.day_template_edit', template_id=template.id) }}">
                        <strong>{{ template.name }}</strong>
                        <small>Tagesvorlage · {{ template.visibility_label }}</small>
                    </a>
                {% endfor %}
                {% for template in week_templates %}
                    <a class="mini-card" href="{{ url_for('main.week_template_edit', template_id=template.id) }}">
                        <strong>{{ template.name }}</strong>
                        <small>Wochenvorlage · {{ template.visibility_label }}</small>
                    </a>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">Vorlagen helfen später beim Wiederverwenden. Du kannst sie direkt aus einem Tag oder einer Woche heraus anlegen.</p>
        {% endif %}
    </article>
</section>

<section class="two-column">
    <article class="panel">
        <div class="panel-head">
            <h2>Nächster Einkauf</h2>
            <a href="{{ url_for('main.shopping_list') }}">Zur Einkaufsliste</a>
        </div>
        {% if upcoming_entries %}
            <div class="stack-sections">
                {% for entry in upcoming_entries %}
                    <article class="template-list-card">
                        <div>
                            <strong>{{ entry.item_name }}</strong>
                            <small>Wird ab {{ entry.activation_label }} sichtbar · {{ entry.needed_for_label }}</small>
                        </div>
                    </article>
                {% endfor %}
            </div>
        {% else %}
            <p class="empty-state">Gerade ist nichts für spätere Einkäufe vorgemerkt.</p>
        {% endif %}
    </article>

    <article class="panel">
        <div class="panel-head">
            <h2>Nächste Tage</h2>
            <a href="{{ url_for('main.planner') }}">Wochenansicht öffnen</a>
        </div>
        <div class="week-mini-grid">
            {% for card in week_cards %}
                <a class="week-mini-card" href="{{ url_for('main.planner_day', date=card.date.isoformat()) }}">
                    <strong>{{ weekday_short_name(card.date) }} {{ card.date.strftime('%d.%m.') }}</strong>
                    {% if card.filled_dayparts %}
                        <span>{{ card.planned_count }} Einträge</span>
                        <small>{{ card.filled_dayparts | map(attribute='name') | join(', ') }}</small>
                    {% else %}
                        <span>Noch offen</span>
                        <small>Du kannst mit einem Eintrag anfangen.</small>
                    {% endif %}
                </a>
            {% endfor %}
        </div>
    </article>
</section>
{% endblock %}