{% extends "base.html" %}

{% block title %}Founder Dashboard — ComplyForm{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold" style="color: var(--text-primary);">Founder Dashboard</h1>
    <span class="text-sm" style="color: var(--text-secondary);">
      Last updated: {{ computed_at or "Never" }}
    </span>
  </div>

  {% if is_stale %}
  <div class="rounded-lg p-4 mb-6" style="background: #fef2f2; border: 1px solid #fecaca;">
    <p class="text-sm font-medium" style="color: #991b1b;">
      Metrics are stale (last computed {{ computed_at or "never" }}). Data may be outdated.
    </p>
  </div>
  {% endif %}

  {# ── TOP ROW: 2-second glance ── #}
  <div class="rounded-lg p-4 mb-4 cursor-pointer"
       style="background: var(--bg-surface); border: 1px solid var(--border-default);"
       hx-get="/founder/health" hx-target="#health-drilldown" hx-swap="innerHTML"
       x-data="{ open: false }" @click="open = !open">
    <h2 class="text-sm font-semibold uppercase tracking-wide mb-3" style="color: var(--text-secondary);">Overview</h2>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      {# ARR #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">ARR</p>
        <p class="text-2xl font-bold" style="color: var(--text-primary);">
          {% if top_row.arr is not none %}${{ "{:,.0f}".format(top_row.arr) }}{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# MRR #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">MRR</p>
        <p class="text-2xl font-bold" style="color: var(--text-primary);">
          {% if top_row.mrr is not none %}${{ "{:,.0f}".format(top_row.mrr) }}{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# Customers #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Customers</p>
        <p class="text-2xl font-bold" style="color: var(--text-primary);">
          {% if top_row.total_customers is not none %}{{ top_row.total_customers }}{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# System Health #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">System Health</p>
        <p class="text-2xl font-bold">
          {% if top_row.system_health == "green" %}
            <span style="color: #16a34a;">&#9679;</span>
          {% elif top_row.system_health == "yellow" %}
            <span style="color: #ca8a04;">&#9679;</span>
          {% else %}
            <span style="color: #dc2626;">&#9679;</span>
          {% endif %}
          <span class="text-sm capitalize" style="color: var(--text-secondary);">{{ top_row.system_health }}</span>
        </p>
      </div>
    </div>
    <div id="health-drilldown" class="mt-4" x-show="open" x-cloak></div>
  </div>

  {# ── GROWTH ROW ── #}
  <div class="rounded-lg p-4 mb-4 cursor-pointer"
       style="background: var(--bg-surface); border: 1px solid var(--border-default);"
       hx-get="/founder/growth" hx-target="#growth-drilldown" hx-swap="innerHTML"
       x-data="{ open: false }" @click="open = !open">
    <h2 class="text-sm font-semibold uppercase tracking-wide mb-3" style="color: var(--text-secondary);">Growth</h2>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      {# NRR #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">NRR</p>
        <p class="text-2xl font-bold {% if growth_row.nrr is not none and growth_row.nrr < 100 %}text-red-600{% endif %}">
          {% if growth_row.nrr is not none %}{{ growth_row.nrr }}%{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# Logo Churn #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Logo Churn (30d)</p>
        <p class="text-2xl font-bold {% if growth_row.logo_churn_30d is not none and growth_row.logo_churn_30d > 5 %}text-red-600{% endif %}">
          {% if growth_row.logo_churn_30d is not none %}{{ growth_row.logo_churn_30d }}%{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# Burn Multiple #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Burn Multiple</p>
        <p class="text-2xl font-bold
          {% if growth_row.burn_multiple is not none %}
            {% if growth_row.burn_multiple > 2 %}text-red-600{% elif growth_row.burn_multiple > 1.5 %}text-yellow-600{% endif %}
          {% endif %}">
          {% if growth_row.burn_multiple is not none %}{{ growth_row.burn_multiple }}x{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# CAC Payback #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">CAC Payback</p>
        <p class="text-2xl font-bold {% if growth_row.cac_payback_days is not none and growth_row.cac_payback_days > 90 %}text-yellow-600{% endif %}">
          {% if growth_row.cac_payback_days is not none %}{{ growth_row.cac_payback_days }}d{% else %}&mdash;{% endif %}
        </p>
      </div>
    </div>
    <div id="growth-drilldown" class="mt-4" x-show="open" x-cloak></div>
  </div>

  {# ── HEALTH ROW ── #}
  <div class="rounded-lg p-4 mb-4 cursor-pointer"
       style="background: var(--bg-surface); border: 1px solid var(--border-default);"
       hx-get="/founder/corpus" hx-target="#corpus-drilldown" hx-swap="innerHTML"
       x-data="{ open: false }" @click="open = !open">
    <h2 class="text-sm font-semibold uppercase tracking-wide mb-3" style="color: var(--text-secondary);">Health</h2>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      {# Scan Frequency Trend #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Scan Trend</p>
        <p class="text-2xl font-bold">
          {% if health_row.scan_frequency_trend == "up" %}
            <span style="color: #16a34a;">&#9650;</span>
          {% elif health_row.scan_frequency_trend == "declining" %}
            <span style="color: #ca8a04;">&#9660;</span>
          {% else %}
            <span style="color: var(--text-secondary);">&#9644;</span>
          {% endif %}
          <span class="text-sm capitalize" style="color: var(--text-secondary);">{{ health_row.scan_frequency_trend }}</span>
        </p>
      </div>
      {# Open Issues #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Open P1+P2</p>
        <p class="text-2xl font-bold {% if health_row.open_issues_p1_p2 is not none and health_row.open_issues_p1_p2 > 3 %}text-red-600{% endif %}">
          {% if health_row.open_issues_p1_p2 is not none %}{{ health_row.open_issues_p1_p2 }}{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# Corpus Triples #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Corpus Triples</p>
        <p class="text-2xl font-bold" style="color: var(--text-primary);">
          {% if health_row.corpus_triples is not none %}{{ "{:,}".format(health_row.corpus_triples) }}{% else %}&mdash;{% endif %}
        </p>
      </div>
      {# Cost-to-Revenue #}
      <div>
        <p class="text-xs uppercase" style="color: var(--text-muted);">Cost/Revenue</p>
        <p class="text-2xl font-bold
          {% if health_row.cost_to_revenue_ratio is not none %}
            {% if health_row.cost_to_revenue_ratio > 10 %}text-red-600{% elif health_row.cost_to_revenue_ratio > 5 %}text-yellow-600{% endif %}
          {% endif %}">
          {% if health_row.cost_to_revenue_ratio is not none %}{{ health_row.cost_to_revenue_ratio }}%{% else %}&mdash;{% endif %}
        </p>
      </div>
    </div>
    <div id="corpus-drilldown" class="mt-4" x-show="open" x-cloak></div>
  </div>
</div>
{% endblock %}