{% extends "dashboard_base.html" %}
{% block title %}{{ t("overview-page-title") }} — calrs{% endblock %}
{% block dashboard_content %}
<div class="card" style="border-top: 2px solid var(--accent);">
  <h1>{{ t("overview-welcome", name=user_name) }}</h1>
  <p class="subtitle" style="margin-bottom: 0;">
    {{ user_email }}{% if user_role == "admin" %} &middot; <strong>{{ t("admin-badge-admin") }}</strong>{% endif %}
  </p>
  {% if username %}
  <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.5rem;">
    {{ t("overview-public-page") }} <a href="/u/{{ username }}" target="_blank" rel="noopener" style="color: var(--accent); text-decoration: none;">/u/{{ username }}</a>
  </p>
  {% endif %}
</div>

<div id="avail-banner" style="display: none; margin-bottom: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);">
  <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
    <div style="flex: 1;">
      <div style="font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem;">{{ t("overview-avail-banner-title") }}</div>
      <div style="font-size: 0.85rem; color: var(--text-muted);">{{ t("overview-avail-banner-body") }}</div>
      <a href="/dashboard/settings#availability" style="display: inline-block; margin-top: 0.5rem; font-size: 0.85rem; color: var(--accent); font-weight: 500; text-decoration: none;">{{ t("overview-avail-banner-cta") }} &rarr;</a>
    </div>
    <button type="button" id="avail-banner-dismiss" style="background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; padding: 0; line-height: 1;" title="{{ t('overview-dismiss') }}">&times;</button>
  </div>
</div>
<script>
(function() {
  if (!localStorage.getItem('calrs_avail_banner_dismissed')) {
    var b = document.getElementById('avail-banner');
    if (b) b.style.display = '';
  }
  var btn = document.getElementById('avail-banner-dismiss');
  if (btn) btn.addEventListener('click', function() {
    localStorage.setItem('calrs_avail_banner_dismissed', '1');
    var b = document.getElementById('avail-banner');
    if (b) b.style.display = 'none';
  });
})();
</script>

{% if source_count == 0 or event_type_count == 0 %}
<div class="card" style="margin-bottom: 1.25rem; border-left: 3px solid var(--accent);">
  <h2 style="font-size: 1rem; margin-bottom: 0.75rem;">{{ t("overview-getting-started") }}</h2>
  <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem;">{{ t("overview-getting-started-help") }}</p>
  <div style="display: flex; flex-direction: column; gap: 0.75rem;">
    <div style="display: flex; align-items: center; gap: 0.75rem;">
      {% if source_count > 0 %}
        <span style="color: var(--success); font-size: 1.1rem;">✓</span>
        <span style="font-size: 0.9rem;">{{ t("overview-step-connect-calendar") }}</span>
      {% else %}
        <span style="color: var(--text-muted); font-size: 1.1rem;">○</span>
        <a href="/dashboard/sources/new" style="font-size: 0.9rem; color: var(--accent); font-weight: 500;">{{ t("overview-step-connect-calendar") }}</a>
      {% endif %}
    </div>
    <div style="display: flex; align-items: center; gap: 0.75rem;">
      {% if event_type_count > 0 %}
        <span style="color: var(--success); font-size: 1.1rem;">✓</span>
        <span style="font-size: 0.9rem;">{{ t("overview-step-first-event-type") }}</span>
      {% else %}
        <span style="color: var(--text-muted); font-size: 1.1rem;">○</span>
        {% if source_count > 0 %}
          <a href="/dashboard/event-types/new" style="font-size: 0.9rem; color: var(--accent); font-weight: 500;">{{ t("overview-step-first-event-type") }}</a>
        {% else %}
          <span style="font-size: 0.9rem; color: var(--text-muted);">{{ t("overview-step-first-event-type") }}</span>
        {% endif %}
      {% endif %}
    </div>
    <div style="display: flex; align-items: center; gap: 0.75rem;">
      <span style="color: var(--text-muted); font-size: 1.1rem;">○</span>
      <span style="font-size: 0.9rem; color: var(--text-muted);">{{ t("overview-step-share-link") }}</span>
    </div>
  </div>
</div>
{% endif %}

{# --- Pending bookings (most urgent — moved to top) --- #}
{% if pending_bookings %}
<div class="card">
  <h2>{{ t("overview-pending-approval") }}</h2>
  {% for b in pending_bookings %}
  <div class="booking-row" {% if not loop.last %}style="border-bottom: 1px solid var(--border);"{% endif %}>
    <div class="booking-info">
      <div>{{ t("overview-booking-with", title='<strong>' ~ (b.event_title | escape) ~ '</strong>', guest=b.guest_name | escape) | safe }} <span class="badge badge-pending">{{ t("overview-badge-pending") }}</span></div>
      <div style="color: var(--text-muted); font-size: 0.85rem;">{{ b.start_at }}</div>
      {% if b.start_at_guest %}<div style="color: var(--text-muted); font-size: 0.75rem;">{{ t("overview-guest-booked") }} {{ b.start_at_guest }}</div>{% endif %}
    </div>
    <div class="booking-actions">
      <form method="post" action="/dashboard/bookings/{{ b.id }}/confirm" style="margin: 0;">
        <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer; color: var(--success); border-color: var(--success);">{{ t("overview-confirm") }}</button>
      </form>
      <form method="post" action="/dashboard/bookings/{{ b.id }}/cancel" style="margin: 0;">
        <button type="submit" class="slot-btn" style="font-size: 0.8rem; cursor: pointer; color: var(--error-text);">{{ t("overview-decline") }}</button>
      </form>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}

{# --- Stats tiles --- #}
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem;">
  <a href="/dashboard/event-types" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; opacity: 0.04; line-height: 1; pointer-events: none;">&#128197;</div>
    <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ event_type_count }}</div>
    <div style="font-size: 0.85rem; color: var(--text-muted);">{{ t("overview-stat-event-types") }}</div>
  </a>
  <a href="/dashboard/bookings" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; opacity: 0.04; line-height: 1; pointer-events: none;">&#128203;</div>
    <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ upcoming_count }}</div>
    <div style="font-size: 0.85rem; color: var(--text-muted);">{{ t("overview-stat-upcoming") }}</div>
  </a>
  <a href="/dashboard/bookings" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; opacity: 0.04; line-height: 1; pointer-events: none;">&#9203;</div>
    <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ pending_count }}</div>
    <div style="font-size: 0.85rem; color: var(--text-muted);">{{ t("overview-stat-pending") }}</div>
  </a>
  <a href="/dashboard/sources" class="card" style="text-align: center; padding: 1.25rem; text-decoration: none; color: inherit; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; opacity: 0.04; line-height: 1; pointer-events: none;">&#128279;</div>
    <div style="font-size: 1.75rem; font-weight: 700; color: var(--accent);">{{ source_count }}</div>
    <div style="font-size: 0.85rem; color: var(--text-muted);">{{ t("overview-stat-sources") }}</div>
  </a>
</div>

{# --- Quick actions: always visible, greyed out with reasons when not available --- #}
<style>
  .quick-actions { margin-bottom: 1.25rem; }
  .quick-actions h2 { font-size: 0.95rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.75rem; }
  .action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .action-card {
    display: flex; align-items: flex-start; gap: 0.875rem;
    padding: 1rem 1.125rem; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    text-decoration: none; color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
  }
  .action-card:hover { border-color: var(--accent-muted); box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08); }
  .action-card:hover .action-icon { background: var(--accent); color: #fff; }
  .action-icon {
    width: 2.25rem; height: 2.25rem; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
    background: var(--accent-subtle); color: var(--accent);
  }
  .action-card-text { min-width: 0; }
  .action-card-title { font-weight: 600; font-size: 0.875rem; line-height: 1.3; margin-bottom: 0.2rem; }
  .action-card-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
  .action-card .action-arrow {
    position: absolute; top: 1rem; right: 1rem;
    color: var(--text-muted); font-size: 0.85rem;
    opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .action-card:hover .action-arrow { opacity: 1; transform: translateX(2px); }
  .action-card.disabled { opacity: 0.5; pointer-events: none; }
  .action-card.disabled:hover { border-color: var(--border); box-shadow: none; }
  .action-card.disabled .action-icon { background: var(--surface-hover); color: var(--text-muted); }
  .action-card-reason { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-top: 0.15rem; }
  @media (max-width: 640px) { .action-grid { grid-template-columns: 1fr; } }
</style>
<div class="quick-actions">
  <h2>{{ t("overview-quick-actions") }}</h2>
  <div class="action-grid">
    <a href="/dashboard/event-types/new?preset=public" class="action-card {% if source_count == 0 %}disabled{% endif %}">
      <div class="action-icon">&#127760;</div>
      <div class="action-card-text">
        <div class="action-card-title">{{ t("overview-action-public-title") }}</div>
        <div class="action-card-desc">{{ t("overview-action-public-desc") }}</div>
        {% if source_count == 0 %}<div class="action-card-reason">{{ t("overview-action-reason-calendar") }}</div>{% endif %}
      </div>
      <span class="action-arrow">&rarr;</span>
    </a>

    <a href="{% if team_count > 0 %}/dashboard/event-types/new?preset=team{% elif is_admin %}/dashboard/teams/new{% else %}/dashboard/teams{% endif %}" class="action-card {% if source_count == 0 %}disabled{% endif %}">
      <div class="action-icon">&#128101;</div>
      <div class="action-card-text">
        <div class="action-card-title">{{ t("overview-action-team-title") }}</div>
        <div class="action-card-desc">{% if team_count > 0 %}{{ t("overview-action-team-desc") }}{% else %}{{ t("overview-action-team-desc-empty") }}{% endif %}</div>
        {% if source_count == 0 %}<div class="action-card-reason">{{ t("overview-action-reason-calendar") }}</div>
        {% elif team_count == 0 and not is_admin %}<div class="action-card-reason">{{ t("overview-action-reason-ask-admin") }}</div>{% endif %}
      </div>
      <span class="action-arrow">&rarr;</span>
    </a>

    <a href="/dashboard/event-types/new?preset=private" class="action-card {% if source_count == 0 %}disabled{% endif %}">
      <div class="action-icon">&#128274;</div>
      <div class="action-card-text">
        <div class="action-card-title">{{ t("overview-action-private-title") }}</div>
        <div class="action-card-desc">{{ t("overview-action-private-desc") }}</div>
        {% if source_count == 0 %}<div class="action-card-reason">{{ t("overview-action-reason-calendar") }}</div>{% endif %}
      </div>
      <span class="action-arrow">&rarr;</span>
    </a>

    <a href="{% if team_count > 0 %}/dashboard/event-types/new?preset=internal{% else %}/dashboard/teams{% endif %}" class="action-card {% if source_count == 0 or team_count == 0 %}disabled{% endif %}">
      <div class="action-icon">&#127970;</div>
      <div class="action-card-text">
        <div class="action-card-title">{{ t("overview-action-shared-title") }}</div>
        <div class="action-card-desc">{{ t("overview-action-shared-desc") }}</div>
        {% if source_count == 0 %}<div class="action-card-reason">{{ t("overview-action-reason-calendar") }}</div>
        {% elif team_count == 0 %}<div class="action-card-reason">{% if is_admin %}{{ t("overview-action-reason-team-admin") }}{% else %}{{ t("overview-action-reason-team-member") }}{% endif %}</div>{% endif %}
      </div>
      <span class="action-arrow">&rarr;</span>
    </a>
  </div>
</div>
{% endblock %}