{% extends "base.html" %}
{% block content %}

<div class="page-header">
  <div>
    <div class="page-title">// <span>dashboard</span></div>
    <div class="page-subtitle">Scrylo · local lead generation pipeline</div>
  </div>
  <div style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--text-faint);">
    {{ current_time }}
  </div>
</div>

<div style="padding:2rem;">

  <!-- Stats row -->
  <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem;">

    <div class="stat-card">
      <div class="stat-label">Total Leads</div>
      <div class="stat-value">{{ stats.total }}</div>
    </div>

    <div class="stat-card">
      <div class="stat-label">With Email</div>
      <div class="stat-value" style="color:var(--accent);">{{ stats.with_email }}</div>
    </div>

    <div class="stat-card">
      <div class="stat-label">Sent</div>
      <div class="stat-value" style="color:var(--green);">{{ stats.sent }}</div>
    </div>

    <!-- Open rate — with tracking caveat tooltip -->
    <div class="stat-card" style="position:relative;">
      <div class="stat-label" style="display:flex;align-items:center;gap:0.4rem;">
        Open Rate
        <span class="or-info-icon">ⓘ</span>
      </div>
      <div class="stat-value">{{ stats.open_rate }}<span style="font-size:1rem;color:var(--text-dim);">%</span></div>

      <!-- Tooltip -->
      <div class="or-tooltip">
        <strong style="color:var(--text-body);">Tracked via invisible pixel.</strong><br><br>
        Open rate only works if Scrylo is reachable from the internet.<br><br>
        Running on <code>localhost</code> without a public URL (e.g. a VPS, ngrok, or Cloudflare Tunnel)?
        Recipients' email clients can't load the pixel — opens won't be recorded and this number will stay at 0%.<br><br>
        <span style="color:var(--green);">This is not a bug.</span> Expose Scrylo to the internet to enable tracking.
      </div>
    </div>

  </div>

  <!-- Setup checklist -->
  <div style="margin-bottom:2rem;">
    <div class="section-label" style="margin-bottom:0.75rem;">
      // setup checklist
      {% if setup_done %}
        <span style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--green);margin-left:0.75rem;">✓ all systems ready</span>
      {% else %}
        <span style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--text-faint);margin-left:0.75rem;">
          {{ checklist | selectattr('ok', 'equalto', false) | list | length }} item(s) remaining
        </span>
      {% endif %}
    </div>

    {% if setup_done %}
    <div style="
      padding:1rem 1.2rem;
      background:var(--card);
      border:1px solid rgba(34,197,94,0.25);
      border-radius:8px;
      font-family:'JetBrains Mono',monospace;
      font-size:0.72rem;
      color:var(--green);
    ">✓ Everything is configured. You're ready to find, score, pitch, and send.</div>

    {% else %}
    <div style="display:flex;flex-direction:column;gap:0.4rem;">
      {% for item in checklist %}
      <div style="
        display:flex;align-items:center;gap:1rem;
        padding:0.75rem 1.1rem;
        background:var(--card);
        border:1px solid {% if item.ok %}rgba(34,197,94,0.15){% else %}var(--border){% endif %};
        border-radius:6px;
        opacity:{% if item.ok %}0.6{% else %}1{% endif %};
      ">
        <!-- Status dot -->
        <div style="
          width:7px;height:7px;border-radius:50%;flex-shrink:0;
          background:{% if item.ok %}var(--green){% else %}rgba(245,158,11,0.7){% endif %};
          {% if not item.ok %}box-shadow:0 0 6px rgba(245,158,11,0.4);{% endif %}
        "></div>

        <!-- Label -->
        <div style="
          font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:600;
          color:{% if item.ok %}var(--text-dim){% else %}var(--text-body){% endif %};
          flex:1;
        ">{{ item.label }}</div>

        <!-- Hint (only when not configured) -->
        {% if not item.ok %}
        <div style="font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--text-faint);flex:2;">
          {{ item.hint }}
        </div>
        <a href="{{ item.link }}" style="
          font-family:'JetBrains Mono',monospace;font-size:0.62rem;
          color:var(--accent);text-decoration:none;flex-shrink:0;
          padding:0.25rem 0.6rem;border:1px solid var(--accent-ring);border-radius:4px;
        ">configure →</a>
        {% else %}
        <div style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--green);">✓ set</div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <!-- Quick actions -->
  <div>
    <div class="section-label" style="margin-bottom:0.75rem;">// quick start</div>
    <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;">

      <a href="/leads" style="
        display:block;padding:1.4rem;
        background:var(--card);border:1px solid var(--border);border-radius:8px;
        text-decoration:none;transition:all 0.18s;
      " onmouseover="this.style.borderColor='var(--accent-ring)';this.style.transform='translateY(-2px)'"
         onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <div style="font-size:1.3rem;margin-bottom:0.6rem;">🔍</div>
        <div style="font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--text-primary);margin-bottom:0.3rem;">Find Leads</div>
        <div style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--text-dim);">Serper · GitHub</div>
      </a>

      <a href="/pitch" style="
        display:block;padding:1.4rem;
        background:var(--card);border:1px solid var(--border);border-radius:8px;
        text-decoration:none;transition:all 0.18s;
      " onmouseover="this.style.borderColor='var(--accent-ring)';this.style.transform='translateY(-2px)'"
         onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <div style="font-size:1.3rem;margin-bottom:0.6rem;">✍️</div>
        <div style="font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--text-primary);margin-bottom:0.3rem;">Write Pitches</div>
        <div style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--text-dim);">Groq · Ollama · smart templates</div>
      </a>

      <a href="/settings" style="
        display:block;padding:1.4rem;
        background:var(--card);border:1px solid var(--border);border-radius:8px;
        text-decoration:none;transition:all 0.18s;
      " onmouseover="this.style.borderColor='var(--accent-ring)';this.style.transform='translateY(-2px)'"
         onmouseout="this.style.borderColor='var(--border)';this.style.transform='none'">
        <div style="font-size:1.3rem;margin-bottom:0.6rem;">⚙</div>
        <div style="font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--text-primary);margin-bottom:0.3rem;">Configure</div>
        <div style="font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--text-dim);">SMTP · API keys · ICP · pitch</div>
      </a>

    </div>
  </div>

</div>

<style>
.or-info-icon {
  font-size: 0.7rem;
  color: var(--text-faint);
  cursor: pointer;
  user-select: none;
}

.or-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 300px;
  background: var(--card-raised, #1e1e2e);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-dim);
  line-height: 1.6;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  pointer-events: none;
}

.or-tooltip code {
  background: rgba(255,255,255,0.07);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.63rem;
}

.stat-card:hover .or-tooltip {
  display: block;
}
</style>

{% endblock %}