{% extends "base.html" %}
{% block title %}Dashboard · CalMiner{% endblock %}

{% block head_extra %}
  <link rel="stylesheet" href="/static/css/dashboard.css" />
{% endblock %}

{% block content %}
  <section class="page-header dashboard-header">
    <div>
      <h1>Welcome back</h1>
      <p class="page-subtitle">Monitor project progress and scenario insights at a glance.</p>
    </div>
    <div class="header-actions">
      <a class="btn primary" href="{{ url_for('projects.create_project_form') }}">New Project</a>
      <a class="btn" href="#">Import Data</a>
    </div>
  </section>

  <section class="dashboard-metrics">
    <article class="metric-card">
      <h2>Total Projects</h2>
      <p class="metric-value">{{ metrics.total_projects }}</p>
      <span class="metric-caption">Across all operation types</span>
    </article>
    <article class="metric-card">
      <h2>Active Scenarios</h2>
      <p class="metric-value">{{ metrics.active_scenarios }}</p>
      <span class="metric-caption">Ready for analysis</span>
    </article>
    <article class="metric-card">
      <h2>Pending Simulations</h2>
      <p class="metric-value">{{ metrics.pending_simulations }}</p>
      <span class="metric-caption">Awaiting execution</span>
    </article>
    <article class="metric-card">
      <h2>Last Data Import</h2>
      <p class="metric-value">{{ metrics.last_import or '—' }}</p>
      <span class="metric-caption">UTC timestamp</span>
    </article>
  </section>

  <section class="dashboard-grid">
    <div class="grid-main">
      <div class="card">
        <header class="card-header">
          <h2>Recent Projects</h2>
          <a class="btn btn-link" href="{{ url_for('projects.project_list_page') }}">View all</a>
        </header>
        {% if recent_projects %}
          <table class="table">
            <thead>
              <tr>
                <th>Project</th>
                <th>Operation</th>
                <th>Updated</th>
              </tr>
            </thead>
            <tbody>
              {% for project in recent_projects %}
                <tr>
                  <td>
                    <a class="table-link" href="{{ url_for('projects.view_project', project_id=project.id) }}">{{ project.name }}</a>
                  </td>
                  <td>{{ project.operation_type.value.replace('_', ' ') | title }}</td>
                  <td>{{ project.updated_at.strftime('%Y-%m-%d') if project.updated_at else '—' }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <p class="empty-state">No recent projects. <a href="{{ url_for('projects.create_project_form') }}">Create one now.</a></p>
        {% endif %}
      </div>

      <div class="card">
        <header class="card-header">
          <h2>Simulation Pipeline</h2>
        </header>
        {% if simulation_updates %}
          <ul class="timeline">
            {% for update in simulation_updates %}
              <li>
                <span class="timeline-label">{{ update.timestamp_label or '—' }}</span>
                <div>
                  <strong>{{ update.title }}</strong>
                  <p>{{ update.description }}</p>
                </div>
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p class="empty-state">No simulation runs yet. Configure a scenario to start simulations.</p>
        {% endif %}
      </div>
    </div>

    <aside class="grid-sidebar">
      <div class="card">
        <header class="card-header">
          <h2>Scenario Alerts</h2>
        </header>
        {% if scenario_alerts %}
          <ul class="alerts-list">
            {% for alert in scenario_alerts %}
              <li>
                <strong>{{ alert.title }}</strong>
                <p>{{ alert.message }}</p>
                {% if alert.link %}
                <a class="btn btn-link" href="{{ alert.link }}">Review</a>
                {% endif %}
              </li>
            {% endfor %}
          </ul>
        {% else %}
          <p class="empty-state">All scenarios look good. We'll highlight issues here.</p>
        {% endif %}
      </div>

      <div class="card">
        <header class="card-header">
          <h2>Resources</h2>
        </header>
        <ul class="links-list">
          <li><a href="https://github.com/" target="_blank">CalMiner Repository</a></li>
          <li><a href="https://example.com/docs" target="_blank">Documentation</a></li>
          <li><a href="mailto:support@example.com">Contact Support</a></li>
        </ul>
      </div>
    </aside>
  </section>
{% endblock %}