{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block topbar_actions %}
  <a href="{{ url_for('posts.create') }}" class="btn btn-primary btn-sm">
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    New Post
  </a>
{% endblock %}

{% block content %}
<!-- Stats -->
<div class="stats-grid">
  <div class="stat-card stat-published">
    <div class="stat-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <div class="stat-info">
      <div class="stat-value">{{ total_published }}</div>
      <div class="stat-label">Published</div>
    </div>
  </div>
  <div class="stat-card stat-scheduled">
    <div class="stat-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
    </div>
    <div class="stat-info">
      <div class="stat-value">{{ total_scheduled }}</div>
      <div class="stat-label">Scheduled</div>
    </div>
  </div>
  <div class="stat-card stat-failed">
    <div class="stat-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
    </div>
    <div class="stat-info">
      <div class="stat-value">{{ total_failed }}</div>
      <div class="stat-label">Failed</div>
    </div>
  </div>
  <div class="stat-card stat-draft">
    <div class="stat-icon">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
    </div>
    <div class="stat-info">
      <div class="stat-value">{{ total_draft }}</div>
      <div class="stat-label">Drafts</div>
    </div>
  </div>
</div>

<div class="grid-2" style="gap:20px">
  <!-- Upcoming Schedules -->
  <div class="card">
    <div class="card-header">
      <div class="card-title">⏱ Upcoming Posts</div>
      <a href="{{ url_for('schedules.index') }}" class="btn btn-secondary btn-sm">View All</a>
    </div>
    {% if upcoming %}
      <div class="timeline">
        {% for s in upcoming %}
        <div class="upcoming-item">
          <div class="upcoming-time">
            <div class="time-val">{{ s.next_run_at.strftime('%H:%M') if s.next_run_at else '--' }}</div>
            <div class="time-date">{{ s.next_run_at.strftime('%b %d') if s.next_run_at else '' }}</div>
          </div>
          <div class="upcoming-body">
            <div class="upcoming-title">{{ s.post.content[:60] }}{% if s.post.content|length > 60 %}…{% endif %}</div>
            <div class="upcoming-page">{{ s.page.page_name }} · {{ s.schedule_type }}</div>
          </div>
          <span class="badge badge-warning">{{ s.schedule_type }}</span>
        </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="empty-state" style="padding:30px 0">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        <h3>No upcoming posts</h3>
        <p>Create and schedule a post to get started.</p>
        <a href="{{ url_for('posts.create') }}" class="btn btn-primary btn-sm">Create Post</a>
      </div>
    {% endif %}
  </div>

  <!-- Page Activity -->
  <div class="card">
    <div class="card-header">
      <div class="card-title">📊 Page Activity</div>
      <a href="{{ url_for('pages.index') }}" class="btn btn-secondary btn-sm">Manage</a>
    </div>
    {% if page_activity %}
      {% set max_count = page_activity[0].count if page_activity[0].count > 0 else 1 %}
      {% for item in page_activity %}
      <div style="margin-bottom:14px">
        <div style="display:flex;justify-content:space-between;margin-bottom:5px">
          <span style="font-size:0.85rem;font-weight:600;color:var(--text-primary)">{{ item.page.page_name }}</span>
          <span style="font-size:0.8rem;color:var(--text-secondary)">{{ item.count }} published</span>
        </div>
        <div class="progress">
          <div class="progress-bar" style="width:{{ [(item.count / max_count * 100)|int, 100]|min }}%"></div>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <div class="empty-state" style="padding:30px 0">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/></svg>
        <h3>No pages connected</h3>
        <p><a href="{{ url_for('auth.facebook_login') }}">Connect Facebook</a> to sync your pages.</p>
      </div>
    {% endif %}
  </div>
</div>

<!-- Recent Logs -->
<div class="card" style="margin-top:20px">
  <div class="card-header">
    <div class="card-title">📋 Recent Activity</div>
    <a href="{{ url_for('logs.index') }}" class="btn btn-secondary btn-sm">View All Logs</a>
  </div>
  {% if recent_logs %}
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Status</th>
          <th>Page</th>
          <th>Response</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody>
        {% for log in recent_logs %}
        <tr class="log-row-{{ log.status }}">
          <td><span class="badge badge-{{ 'success' if log.status == 'success' else 'danger' }}">{{ log.status }}</span></td>
          <td>{{ log.page.page_name if log.page else '—' }}</td>
          <td style="max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ log.response_message[:80] if log.response_message else '—' }}</td>
          <td style="white-space:nowrap">{{ log.executed_at.strftime('%b %d, %H:%M') }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="empty-state" style="padding:30px 0">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
    <h3>No activity yet</h3>
    <p>Published post logs will appear here.</p>
  </div>
  {% endif %}
</div>
{% endblock %}