{% extends 'base.html' %}
{% block title %}Dashboard | Filament Manager{% endblock %}
{% block body_class %}page-dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block page_subtitle %}Scoreboard fuer Lager, Spulen, Rang, Community und alle relevanten Live-Signale an einem Ort.{% endblock %}
{% block content %}
{% set dashboard_profile_name = (app_settings_json.get('community_profile_name') if app_settings_json else '') or (app_settings_json.get('company_name') if app_settings_json else '') or 'Nexus Test User' %}
{% set dashboard_profile_avatar_url = (app_settings_json.get('community_profile_avatar_url') if app_settings_json else '') or '' %}
{% set dashboard_profile_initial = (dashboard_profile_name[:1] or 'N')|upper %}
{% set dashboard_public_id = (app_settings_json.get('community_profile_public_id') if app_settings_json else '') or (community_nav_stats.client_id if community_nav_stats else '') or '--------' %}
{% set dashboard_gamification = gamification_profile or {} %}

<section class="sci-panel dashboard-scoreboard-hero">
  <div class="dashboard-scoreboard-grid">
    <article class="dashboard-hero-profile-card">
      <div class="dashboard-hero-profile-head">
        <div class="dashboard-hero-avatar-wrap">
          <div class="dashboard-hero-avatar" aria-hidden="true">
            {% if dashboard_profile_avatar_url %}
            <img src="{{ dashboard_profile_avatar_url }}" alt="{{ dashboard_profile_name }}">
            {% else %}
            {{ dashboard_profile_initial }}
            {% endif %}
          </div>
          <div class="dashboard-hero-avatar-ring"></div>
        </div>
        <div class="dashboard-hero-identity">
          <span class="dashboard-chip">Nexus Scoreboard</span>
          <h2>{{ dashboard_profile_name }}</h2>
          <div class="dashboard-hero-id">ID {{ dashboard_public_id }}</div>
          <div class="dashboard-hero-ranks">
            <span class="dashboard-mini-pill">Rang {{ dashboard_gamification.rank_label or 'Lager-Novize' }}</span>
            <span class="dashboard-mini-pill">Level {{ dashboard_gamification.level or 1 }} / {{ dashboard_gamification.level_max or 60 }}</span>
          </div>
        </div>
      </div>

      <div class="dashboard-hero-stats">
        <div class="dashboard-hero-stat">
          <span>XP Gesamt</span>
          <strong>{{ dashboard_gamification.total_xp or 0 }}</strong>
        </div>
        <div class="dashboard-hero-stat">
          <span>Naechster Rang</span>
          <strong>{{ dashboard_gamification.next_rank_label or 'Max Rang erreicht' }}</strong>
        </div>
        <div class="dashboard-hero-stat">
          <span>Fehlende XP</span>
          <strong>{{ dashboard_gamification.xp_to_next_rank or 0 }}</strong>
        </div>
        <div class="dashboard-hero-stat">
          <span>Community Uploads</span>
          <strong>{{ community_share_stats.share_count or 0 }}</strong>
        </div>
      </div>

      <div class="dashboard-hero-progress-card">
        <div class="dashboard-hero-progress-head">
          <strong>Level Fortschritt</strong>
          <span>{{ dashboard_gamification.progress_percent or 0 }}%</span>
        </div>
        <div class="dashboard-hero-progress-track">
          <span style="width: {{ dashboard_gamification.progress_percent or 0 }}%;"></span>
        </div>
        <div class="dashboard-hero-progress-meta">
          <span>{{ dashboard_gamification.xp_into_level or 0 }} / {{ dashboard_gamification.xp_to_next_level or 0 }} XP im aktuellen Level</span>
          <span>{{ dashboard_gamification.app_xp or 0 }} App XP | {{ dashboard_gamification.community_xp or 0 }} Community XP</span>
        </div>
      </div>

      <div class="dashboard-hero-links">
        <a class="sci-btn small" href="{{ url_for('web.settings') }}#settings-community-profile">
          <iconify-icon icon="mdi:account-outline" aria-hidden="true"></iconify-icon> Profil
        </a>
        <button type="button" class="sci-btn subtle small" data-open-community-profile>
          <iconify-icon icon="mdi:palette-outline" aria-hidden="true"></iconify-icon> Avatar
        </button>
        <button type="button" class="sci-btn subtle small" data-open-global-welcome>
          <iconify-icon icon="mdi:information-outline" aria-hidden="true"></iconify-icon> Neuheiten
        </button>
        <button type="button" class="sci-btn subtle small" data-open-global-bug-tracker>
          <iconify-icon icon="mdi:bug-outline" aria-hidden="true"></iconify-icon> Feedback
        </button>
      </div>
    </article>

    <div class="dashboard-hero-side">
      <div class="dashboard-score-card-grid">
        {% for card in scoreboard_cards %}
        <article class="dashboard-score-card" style="--dashboard-accent: {{ card.accent }}; --dashboard-percent: {{ card.percent }}%;">
          <div class="dashboard-score-card-gauge">
            <div class="dashboard-score-card-ring">
              <div class="dashboard-score-card-core">
                <strong>{{ card.value }}</strong>
                <span>{{ card.unit }}</span>
              </div>
            </div>
          </div>
          <div class="dashboard-score-card-copy">
            <div class="dashboard-score-card-head">
              <iconify-icon icon="{{ card.icon }}" aria-hidden="true"></iconify-icon>
              <strong>{{ card.label }}</strong>
            </div>
            <p>{{ card.detail }}</p>
          </div>
        </article>
        {% endfor %}
      </div>

      <article class="dashboard-signal-panel">
        <div class="dashboard-panel-head">
          <div>
            <span class="dashboard-chip">Inventar Pulse</span>
            <h3>Bestands- und Risiko-Signale</h3>
          </div>
          <a class="sci-btn subtle small" href="{{ url_for('web.spools') }}">Spulen oeffnen</a>
        </div>
        <div class="dashboard-signal-list">
          {% for item in resource_bars %}
          <div class="dashboard-signal-row">
            <div class="dashboard-signal-copy">
              <strong>{{ item.label }}</strong>
              <span>{{ item.helper }}</span>
            </div>
            <div class="dashboard-signal-bar">
              <span style="width: {{ item.percent }}%; --dashboard-accent: {{ item.accent }};"></span>
            </div>
            <div class="dashboard-signal-value">{{ item.value }}</div>
          </div>
          {% endfor %}
        </div>
      </article>
    </div>
  </div>
</section>

<div class="dashboard-board-grid section-gap">
  <section class="sci-panel dashboard-panel dashboard-panel--wide">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Lager Matrix</span>
        <h3>Lagerstatus und Auslastung</h3>
      </div>
      <div class="sci-actions">
        <a class="sci-btn subtle small" href="{{ url_for('web.warehouses') }}">Lager</a>
        <a class="sci-btn subtle small" href="{{ url_for('web.spools') }}">Spulen</a>
      </div>
    </div>
    <div class="dashboard-warehouse-matrix">
      {% for warehouse in warehouse_scoreboard %}
      <article class="dashboard-warehouse-row">
        <div class="dashboard-warehouse-copy">
          <strong>{{ warehouse.name }}</strong>
          <span>{{ warehouse.code }} | {{ warehouse.grams }} g | {{ warehouse.free_slots }} frei</span>
        </div>
        <div class="dashboard-warehouse-track">
          <span style="width: {{ warehouse.occupancy_percent }}%;"></span>
        </div>
        <div class="dashboard-warehouse-meta">{{ warehouse.occupied_slots }} / {{ warehouse.max_slots }} Slots</div>
      </article>
      {% else %}
      <div class="sci-empty">Keine aktiven Lager vorhanden.</div>
      {% endfor %}
    </div>
  </section>

  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Fast Jump</span>
        <h3>Schnell zu allen Unterfunktionen</h3>
      </div>
      <a class="sci-btn subtle small" href="{{ url_for('web.wiki') }}">Wiki</a>
    </div>
    <div class="dashboard-quick-grid">
      {% for link in quick_link_groups %}
      <a class="dashboard-quick-card" href="{{ link.href }}">
        <iconify-icon icon="{{ link.icon }}" aria-hidden="true"></iconify-icon>
        <strong>{{ link.label }}</strong>
        <span>{{ link.helper }}</span>
      </a>
      {% endfor %}
    </div>
  </section>
</div>

<div class="dashboard-board-grid dashboard-board-grid--triple section-gap">
  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Material Leaderboard</span>
        <h3>Top Materialien und Farbdichte</h3>
      </div>
      <a class="sci-btn subtle small" href="{{ url_for('web.filament_stats') }}">Filament Statistik</a>
    </div>
    <div class="dashboard-material-list">
      {% for item in material_color_map[:6] %}
      <article class="dashboard-material-card">
        <div class="dashboard-material-head">
          <strong>{{ item.material }}</strong>
          <span>{{ item.count }} Rollen</span>
        </div>
        <div class="dashboard-material-swatches">
          {% for color in item.colors[:8] %}
          <span class="dashboard-material-dot" style="background: {{ color }};"></span>
          {% endfor %}
          {% if item.color_count > item.colors|length %}
          <span class="dashboard-material-more">+{{ item.color_count - item.colors|length }}</span>
          {% endif %}
        </div>
        <div class="dashboard-material-meta">
          <span>{{ item.grams }} g</span>
          <span>{{ item.color_count }} Farben</span>
        </div>
      </article>
      {% else %}
      <div class="sci-empty">Noch keine Materialdaten vorhanden.</div>
      {% endfor %}
    </div>
  </section>

  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">XP Missionen</span>
        <h3>Was du als Nächstes erreichen kannst</h3>
      </div>
      <a class="sci-btn subtle small" href="{{ url_for('web.settings') }}#settings-community-profile">Community</a>
    </div>
    <div class="dashboard-mission-list">
      {% for milestone in dashboard_gamification.milestones or [] %}
      <article class="dashboard-mission-card">
        <div class="dashboard-mission-head">
          <strong>{{ milestone.label }}</strong>
          <span>{{ milestone.status }}</span>
        </div>
        <div class="dashboard-mission-track">
          <span style="width: {{ milestone.percent }}%;"></span>
        </div>
        <div class="dashboard-mission-meta">
          <span>Noch {{ milestone.remaining }} bis zum naechsten Ziel</span>
          <span>{{ milestone.percent }}%</span>
        </div>
      </article>
      {% else %}
      <div class="sci-empty">Noch keine Missionsdaten vorhanden.</div>
      {% endfor %}
    </div>
  </section>

  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Datenbank Scope</span>
        <h3>Filamentvielfalt und Modi</h3>
      </div>
      <a class="sci-btn subtle small" href="{{ url_for('web.filaments') }}">Globale Filamente</a>
    </div>
    <div class="dashboard-db-stats dashboard-db-stats--scoreboard">
      <div><span>Hersteller</span><strong>{{ filament_db_stats.brand_count }}</strong></div>
      <div><span>Materialien</span><strong>{{ filament_db_stats.material_count }}</strong></div>
      <div><span>Farben</span><strong>{{ filament_db_stats.color_count }}</strong></div>
      <div><span>Lieferanten</span><strong>{{ filament_db_stats.supplier_count }}</strong></div>
    </div>
    <div class="dashboard-mode-chips">
      <span class="filament-mini-chip">SINGLE {{ filament_db_stats['color_mode_counts']['single'] }}</span>
      <span class="filament-mini-chip">MULTI {{ filament_db_stats['color_mode_counts']['multi'] }}</span>
      <span class="filament-mini-chip">RAINBOW {{ filament_db_stats['color_mode_counts']['rainbow'] }}</span>
    </div>
  </section>
</div>

<div class="dashboard-board-grid dashboard-board-grid--triple section-gap">
  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Bewegungsstrom</span>
        <h3>Was im Bestand gerade passiert</h3>
      </div>
      <a class="sci-btn subtle small" href="{{ url_for('web.spools') }}">Rollenliste</a>
    </div>
    <div class="dashboard-flow-list">
      {% for item in movement_board %}
      <article class="dashboard-flow-card">
        <div class="dashboard-flow-head">
          <strong>{{ item.label }}</strong>
          <span>{{ item.count }} Events</span>
        </div>
        <div class="dashboard-flow-track">
          <span style="width: {{ item.percent }}%;"></span>
        </div>
        <div class="dashboard-flow-meta">
          <span>{{ item.grams }} g</span>
          <span>{{ item.percent }}%</span>
        </div>
      </article>
      {% else %}
      <div class="sci-empty">Noch keine Bewegungsdaten vorhanden.</div>
      {% endfor %}
    </div>
  </section>

  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Live Feed</span>
        <h3>Zuletzt bewegt und geteilt</h3>
      </div>
      <button type="button" class="sci-btn subtle small" data-open-global-bug-tracker>Feedback</button>
    </div>
    <div class="dashboard-feed-grid">
      <div class="dashboard-feed-column">
        <div class="dashboard-feed-label">Bewegungen</div>
        {% for event in recent_movements[:4] %}
        <article class="dashboard-feed-item">
          <strong>{{ event.brand }} | {{ event.material }}</strong>
          <span>{{ event.movement_type }}{% if event.quantity_g %} | {{ event.quantity_g }} g{% endif %}</span>
        </article>
        {% else %}
        <div class="sci-empty">Keine Bewegungen vorhanden.</div>
        {% endfor %}
      </div>
      <div class="dashboard-feed-column">
        <div class="dashboard-feed-label">Community</div>
        {% for event in community_share_events[:4] %}
        <article class="dashboard-feed-item">
          <strong>{{ event.accepted_filament_count }} Profile | {{ event.accepted_brand_count }} Hersteller</strong>
          <span>{{ event.xp_awarded }} XP | {{ event.created_at }}</span>
        </article>
        {% else %}
        <div class="sci-empty">Noch keine Community Uploads vorhanden.</div>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="sci-panel dashboard-panel">
    <div class="dashboard-panel-head">
      <div>
        <span class="dashboard-chip">Watchlist</span>
        <h3>Low Stock und kritische Rollen</h3>
      </div>
      <a class="sci-btn subtle small" href="{{ url_for('web.spools', low_stock_only=1) }}">Nur Low Stock</a>
    </div>
    <div class="dashboard-watch-list">
      {% for spool in low_stock %}
      <article class="dashboard-watch-item">
        <div>
          <strong>{{ spool.brand }} | {{ spool.material }}</strong>
          <span>{{ spool.color_name }} | {{ spool.warehouse_name }}</span>
        </div>
        <span class="sci-badge {% if spool.stock_state == 'kritisch' %}critical{% else %}low{% endif %}">{{ spool.remaining_g }} g</span>
      </article>
      {% else %}
      <div class="sci-empty">Keine kritischen Rollen vorhanden.</div>
      {% endfor %}
    </div>
  </section>
</div>
{% endblock %}