{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block heading %}Dashboard{% endblock %}

{% block content %}
<!-- Stats row -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
  {% set stats = [
    ("Data Sources",   cfg.sources|length,                    "blue",   "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"),
    ("Rules",          cfg.rules|length,                      "purple", "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"),
    ("Model Tables",   cfg.tables|length,                     "green",  "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"),
    ("Fabric Target",  cfg.fabric.workspace_name or "Not set","amber",  "M13 10V3L4 14h7v7l9-11h-7z"),
  ] %}
  {% for label, value, color, icon in stats %}
  <div class="card p-5 flex items-center gap-4">
    <div class="w-10 h-10 rounded-xl bg-{{ color }}-100 flex items-center justify-center flex-shrink-0">
      <svg class="w-5 h-5 text-{{ color }}-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ icon }}"/>
      </svg>
    </div>
    <div>
      <p class="text-2xl font-bold leading-none">{{ value }}</p>
      <p class="text-sm text-slate-500 mt-0.5">{{ label }}</p>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Data flow diagram -->
<div class="card p-6 mb-6">
  <h2 class="font-semibold text-base mb-4">Data Platform Flow</h2>
  <div class="flex items-center gap-2 overflow-x-auto py-2">
    {% set steps = [
      ("Sources",    cfg.sources|length,                       "blue",   "Databases · APIs · CSV · Scrape"),
      ("Bronze",     cfg.tables|selectattr('layer','eq','bronze')|list|length, "orange", "Raw Delta tables · No transforms"),
      ("Silver",     cfg.tables|selectattr('layer','eq','silver')|list|length, "slate",  "Clean · SCD · Validated"),
      ("Gold",       cfg.tables|selectattr('layer','eq','gold')|list|length,   "yellow", "Star Schema · Aggregated"),
      ("Semantic",   "Model",                                  "purple", "DAX · RLS · DirectLake"),
      ("Reports",    "Power BI",                               "green",  "PBIR · Visuals · Themes"),
    ] %}
    {% for label, count, color, sub in steps %}
    <div class="flex items-center gap-2 flex-shrink-0">
      <div class="text-center">
        <div class="w-20 h-20 rounded-xl bg-{{ color }}-100 border-2 border-{{ color }}-200 flex flex-col items-center justify-center">
          <span class="text-lg font-bold text-{{ color }}-700">{{ count }}</span>
          <span class="text-xs font-semibold text-{{ color }}-600 mt-0.5">{{ label }}</span>
        </div>
        <p class="text-xs text-slate-400 mt-1 w-20 leading-tight">{{ sub }}</p>
      </div>
      {% if not loop.last %}
      <svg class="w-5 h-5 text-slate-300 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
      </svg>
      {% endif %}
    </div>
    {% endfor %}
  </div>
</div>

<!-- Bottom row -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  <!-- Recent sources -->
  <div class="card p-5">
    <div class="flex items-center justify-between mb-4">
      <h2 class="font-semibold text-sm">Data Sources</h2>
      <a href="/sources/" class="text-xs text-brand-600 hover:text-brand-700 font-medium">Manage →</a>
    </div>
    {% if cfg.sources %}
    <div class="space-y-2">
      {% for src in cfg.sources[:5] %}
      <div class="flex items-center justify-between py-2 border-b border-slate-100 last:border-0">
        <div class="flex items-center gap-2">
          <span class="inline-flex px-2 py-0.5 rounded text-xs font-medium
            {% if src.source_type.value == 'database' %}bg-blue-100 text-blue-700
            {% elif src.source_type.value == 'api' %}bg-purple-100 text-purple-700
            {% elif src.source_type.value == 'csv' %}bg-green-100 text-green-700
            {% else %}bg-amber-100 text-amber-700{% endif %}">
            {{ src.source_type.value }}
          </span>
          <span class="text-sm font-medium">{{ src.name }}</span>
        </div>
        <span class="{% if src.enabled %}badge-enabled{% else %}badge-disabled{% endif %}">
          {{ "on" if src.enabled else "off" }}
        </span>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-6">
      <p class="text-sm text-slate-400">No sources configured yet.</p>
      <a href="/sources/" class="btn-primary mt-3 inline-flex text-xs">Add first source</a>
    </div>
    {% endif %}
  </div>

  <!-- Quick actions -->
  <div class="card p-5">
    <h2 class="font-semibold text-sm mb-4">Quick Actions</h2>
    <div class="grid grid-cols-2 gap-2">
      {% set actions = [
        ("/sources/", "Add Data Source",       "blue",   "M12 4v16m8-8H4"),
        ("/rules/",   "Add Quality Rule",       "purple", "M12 4v16m8-8H4"),
        ("/model/",   "Design Model",           "green",  "M4 5h16M4 12h16M4 19h16"),
        ("/pipeline/","Configure Fabric",       "amber",  "M13 10V3L4 14h7v7l9-11h-7z"),
      ] %}
      {% for href, label, color, icon in actions %}
      <a href="{{ href }}"
         class="flex items-center gap-3 p-3 rounded-lg bg-{{ color }}-50 hover:bg-{{ color }}-100 border border-{{ color }}-200 transition-colors">
        <svg class="w-4 h-4 text-{{ color }}-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ icon }}"/>
        </svg>
        <span class="text-sm font-medium text-{{ color }}-800">{{ label }}</span>
      </a>
      {% endfor %}
    </div>
    <div class="mt-4 p-3 bg-slate-50 rounded-lg border border-slate-200">
      <p class="text-xs text-slate-500 font-medium mb-1">Fabric target</p>
      {% if cfg.fabric.workspace_name %}
      <p class="text-sm text-slate-700">📂 {{ cfg.fabric.workspace_name }} / {{ cfg.fabric.lakehouse_name or "—" }}</p>
      <p class="text-xs text-slate-400 mt-0.5">Refresh: {{ cfg.fabric.refresh_schedule }}</p>
      {% else %}
      <p class="text-sm text-slate-400">Not configured — <a href="/pipeline/" class="text-brand-600 hover:underline">set up Fabric →</a></p>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}