{% extends "base.html" %}
{% block content %}
<style>
  .hero { margin-bottom: 2.5rem; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--accent); background: var(--accent-dim); border: 1px solid rgba(88,166,255,.25);
    padding: 0.25rem 0.65rem; border-radius: 100px; margin-bottom: 1rem;
  }
  .hero h1 {
    font-size: 2rem; font-weight: 700; color: #e6edf3;
    letter-spacing: -0.5px; margin-bottom: 0.5rem; line-height: 1.25;
  }
  .hero p { font-size: 1.05rem; color: var(--muted); max-width: 560px; }
  .hero-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1.1rem; border-radius: var(--radius-sm);
    font-size: 0.875rem; font-weight: 500; text-decoration: none; cursor: pointer;
    transition: all 0.15s; border: 1px solid transparent;
  }
  .btn-primary { background: var(--accent); color: #0d1117; border-color: var(--accent); }
  .btn-primary:hover { background: #79b8ff; }
  .btn-secondary { background: var(--surface2); color: var(--text); border-color: var(--border); }
  .btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

  /* Summary card */
  .summary-card {
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); padding: 1.5rem 1.75rem;
    margin-bottom: 1.75rem; max-width: 760px;
  }
  .summary-card h2 {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    color: var(--muted); margin-bottom: 0.75rem;
  }
  .summary-text { color: var(--text); line-height: 1.7; font-size: 0.95rem; }
  .summary-text p { margin: 0.5em 0; }
  .summary-text code {
    background: var(--code-bg); border: 1px solid var(--border-subtle);
    padding: 0.15em 0.4em; border-radius: 3px;
    font-size: 0.85em; font-family: monospace;
  }

  /* Stats row */
  .stats-row { display: flex; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
  .stat-card {
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius); padding: 1rem 1.25rem;
    min-width: 130px; flex: 1;
  }
  .stat-card .stat-num { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1; }
  .stat-card .stat-label { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }

  /* Page grid */
  .pages-section h2 {
    font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    color: var(--muted); margin-bottom: 0.75rem;
  }
  .pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; max-width: 760px; }
  .page-card {
    display: flex; align-items: center; gap: 0.6rem;
    background: var(--surface); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm); padding: 0.65rem 0.9rem;
    text-decoration: none; color: var(--text); font-size: 0.875rem;
    transition: all 0.15s;
  }
  .page-card:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
  .page-card .page-icon { font-size: 0.8rem; opacity: 0.6; flex-shrink: 0; }

  .empty-state {
    background: var(--surface); border: 1px solid var(--border-subtle); border-radius: var(--radius);
    padding: 3rem; text-align: center; max-width: 500px;
  }
  .empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 1rem; }
  .empty-state h2 { font-size: 1.1rem; color: var(--text); margin-bottom: 0.5rem; }
  .empty-state p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
  .empty-state code {
    background: var(--code-bg); border: 1px solid var(--border);
    padding: 0.6rem 1rem; border-radius: var(--radius-sm); display: inline-block;
    font-family: monospace; font-size: 0.875rem; color: var(--green);
  }
</style>

{% if pages %}
<div class="hero">
  <div class="hero-badge">📖 Wiki</div>
  <h1>{{ project_name or "Project Wiki" }}</h1>
  <p>AI-generated knowledge base — always in sync with your codebase.</p>
  <div class="hero-actions">
    <a class="btn btn-primary" href="/wiki/{{ first_slug }}">→ Browse Wiki</a>
    <a class="btn btn-secondary" href="/ask">💬 Ask AI</a>
  </div>
</div>

{% if summary_html %}
<div class="summary-card">
  <h2>📋 Project Summary</h2>
  <div class="summary-text prose">{{ summary_html | safe }}</div>
</div>
{% endif %}

<div class="stats-row">
  <div class="stat-card">
    <div class="stat-num">{{ pages | length }}</div>
    <div class="stat-label">Wiki Pages</div>
  </div>
  {% if file_count %}
  <div class="stat-card">
    <div class="stat-num">{{ file_count }}</div>
    <div class="stat-label">Files Indexed</div>
  </div>
  {% endif %}
</div>

<div class="pages-section">
  <h2>📄 All Pages</h2>
  <div class="pages-grid">
    {% for page in pages %}
    <a class="page-card" href="/wiki/{{ page.slug }}">
      <span class="page-icon">◦</span>
      {{ page.title }}
    </a>
    {% endfor %}
  </div>
</div>

{% else %}
<div class="empty-state">
  <div class="empty-icon">📂</div>
  <h2>No wiki pages yet</h2>
  <p>Run a scan to generate your AI-powered wiki from your codebase.</p>
  <code>close-wiki scan .</code>
</div>
{% endif %}
{% endblock %}