{% extends "base.html" %}
{% block title %}Fabric & Power BI{% endblock %}
{% block heading %}Fabric & Power BI Pipeline{% endblock %}

{% block content %}
{% if request.query_params.get('saved') %}
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-xl flex items-center gap-2">
  <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
  </svg>
  <span class="text-sm text-green-700 font-medium">Fabric configuration saved successfully.</span>
</div>
{% endif %}

<!-- Pipeline flow -->
<div class="card p-6 mb-6">
  <h2 class="font-semibold mb-5">End-to-End Pipeline</h2>
  <div class="relative">
    <!-- Connecting line -->
    <div class="absolute top-8 left-8 right-8 h-0.5 bg-slate-200 z-0"></div>
    <div class="relative z-10 flex justify-between">
      {% set steps = [
        ("1", "Sources", cfg.sources|length ~ " configured", "blue",   cfg.sources|length > 0),
        ("2", "Bronze",  cfg.tables|selectattr('layer','eq','bronze')|list|length ~ " tables", "orange", cfg.tables|selectattr('layer','eq','bronze')|list|length > 0),
        ("3", "Silver",  cfg.tables|selectattr('layer','eq','silver')|list|length ~ " tables", "slate",  cfg.tables|selectattr('layer','eq','silver')|list|length > 0),
        ("4", "Gold",    cfg.tables|selectattr('layer','eq','gold')|list|length ~ " tables",   "yellow", cfg.tables|selectattr('layer','eq','gold')|list|length > 0),
        ("5", "Semantic","Model",                                                               "purple", cfg.fabric.semantic_model_name != ""),
        ("6", "Reports", "Power BI",                                                            "green",  cfg.fabric.workspace_name != ""),
      ] %}
      {% for num, label, sub, color, done in steps %}
      <div class="flex flex-col items-center gap-2">
        <div class="w-16 h-16 rounded-full flex items-center justify-center border-2 text-sm font-bold
          {% if done %}bg-{{ color }}-500 border-{{ color }}-500 text-white{% else %}bg-white border-slate-300 text-slate-400{% endif %}">
          {% if done %}✓{% else %}{{ num }}{% endif %}
        </div>
        <div class="text-center">
          <p class="text-xs font-semibold text-slate-700">{{ label }}</p>
          <p class="text-xs text-slate-400">{{ sub }}</p>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  <!-- Fabric config form -->
  <div class="card p-6">
    <div class="flex items-center gap-2 mb-5">
      <div class="w-8 h-8 rounded-lg bg-fabric-500 flex items-center justify-center">
        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
        </svg>
      </div>
      <h2 class="font-semibold">Microsoft Fabric Configuration</h2>
    </div>

    <form method="post" action="/pipeline/save-fabric" class="space-y-4">
      <input type="hidden" name="project" value="{{ project }}"/>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <label class="form-label">Workspace Name</label>
          <input name="workspace_name" value="{{ cfg.fabric.workspace_name }}"
                 placeholder="Analytics Platform" class="form-input"/>
        </div>
        <div>
          <label class="form-label">Lakehouse Name</label>
          <input name="lakehouse_name" value="{{ cfg.fabric.lakehouse_name }}"
                 placeholder="AnalyticsLakehouse" class="form-input"/>
        </div>
      </div>

      <div>
        <label class="form-label">Semantic Model Name</label>
        <input name="semantic_model_name" value="{{ cfg.fabric.semantic_model_name }}"
               placeholder="Sales Analytics" class="form-input"/>
      </div>

      <div>
        <label class="form-label">Refresh Schedule (cron expression)</label>
        <input name="refresh_schedule" value="{{ cfg.fabric.refresh_schedule }}"
               placeholder="0 6 * * *" class="form-input font-mono"/>
        <p class="text-xs text-slate-400 mt-1">
          Examples: <code>0 6 * * *</code> = daily 6am · <code>0 */4 * * *</code> = every 4 hours
        </p>
      </div>

      <div class="p-4 bg-slate-50 rounded-xl space-y-3 border border-slate-200">
        <p class="text-xs font-semibold text-slate-600 uppercase tracking-wide">DirectLake & Incremental Refresh</p>

        <label class="flex items-center gap-3">
          <input name="enable_directlake" type="checkbox" value="true"
                 {% if cfg.fabric.enable_directlake %}checked{% endif %}
                 class="w-4 h-4 rounded text-brand-600"/>
          <div>
            <p class="text-sm font-medium text-slate-700">Enable DirectLake</p>
            <p class="text-xs text-slate-400">Reads directly from OneLake Delta — no import latency</p>
          </div>
        </label>

        <label class="flex items-center gap-3">
          <input name="enable_incremental_refresh" type="checkbox" value="true"
                 {% if cfg.fabric.enable_incremental_refresh %}checked{% endif %}
                 class="w-4 h-4 rounded text-brand-600"/>
          <div>
            <p class="text-sm font-medium text-slate-700">Incremental Refresh</p>
            <p class="text-xs text-slate-400">Only refresh recent data; archive historical partitions</p>
          </div>
        </label>

        <div class="grid grid-cols-2 gap-3 pl-7">
          <div>
            <label class="form-label text-xs">Rolling Window (years)</label>
            <input name="rolling_window_years" type="number" value="{{ cfg.fabric.rolling_window_years }}"
                   min="1" max="10" class="form-input"/>
          </div>
          <div>
            <label class="form-label text-xs">Incremental Window (days)</label>
            <input name="incremental_days" type="number" value="{{ cfg.fabric.incremental_days }}"
                   min="1" max="90" class="form-input"/>
          </div>
        </div>
      </div>

      <button type="submit" class="btn-primary w-full justify-center">Save Fabric Config</button>
    </form>
  </div>

  <!-- Right column: CLI commands + checklist -->
  <div class="space-y-4">
    <!-- CLI commands -->
    <div class="card p-5">
      <h3 class="font-semibold text-sm mb-3">CLI Commands to Run</h3>
      <div class="space-y-2 text-xs font-mono">
        {% set cmds = [] %}
        {% if cfg.fabric.workspace_name %}
        <div class="bg-slate-900 rounded-lg p-3 text-slate-100 overflow-x-auto">
          <p class="text-slate-400 mb-1"># 1. Authenticate with Fabric</p>
          <p>pbi-agent fabric login</p>
        </div>
        <div class="bg-slate-900 rounded-lg p-3 text-slate-100 overflow-x-auto">
          <p class="text-slate-400 mb-1"># 2. List workspaces (verify access)</p>
          <p>pbi-agent fabric workspaces</p>
        </div>
        {% if cfg.fabric.semantic_model_name %}
        <div class="bg-slate-900 rounded-lg p-3 text-slate-100 overflow-x-auto">
          <p class="text-slate-400 mb-1"># 3. Trigger semantic model refresh</p>
          <p>pbi-agent fabric refresh "{{ cfg.fabric.semantic_model_name }}" \</p>
          <p class="pl-4">--workspace "{{ cfg.fabric.workspace_name }}" --wait</p>
        </div>
        {% endif %}
        {% else %}
        <div class="bg-slate-50 rounded-lg p-4 text-slate-500 text-center">
          Configure workspace above to see CLI commands.
        </div>
        {% endif %}
      </div>
    </div>

    <!-- Go-live checklist -->
    <div class="card p-5">
      <h3 class="font-semibold text-sm mb-3">Go-Live Checklist</h3>
      <div class="space-y-2">
        {% set checks = [
          (cfg.sources|length > 0,   "Data sources configured"),
          (cfg.rules|length > 0,     "Quality rules defined"),
          (cfg.tables|selectattr('layer','eq','bronze')|list|length > 0, "Bronze tables mapped"),
          (cfg.tables|selectattr('layer','eq','silver')|list|length > 0, "Silver transformations defined"),
          (cfg.tables|selectattr('layer','eq','gold')|list|length > 0,   "Gold star schema designed"),
          (cfg.fabric.workspace_name != "",      "Fabric workspace set"),
          (cfg.fabric.lakehouse_name != "",      "Lakehouse name set"),
          (cfg.fabric.semantic_model_name != "", "Semantic model named"),
        ] %}
        {% for done, label in checks %}
        <div class="flex items-center gap-2">
          <span class="w-5 h-5 flex-shrink-0 rounded-full flex items-center justify-center text-xs
            {% if done %}bg-green-100 text-green-600{% else %}bg-slate-100 text-slate-400{% endif %}">
            {% if done %}✓{% else %}○{% endif %}
          </span>
          <span class="text-sm {% if done %}text-slate-700{% else %}text-slate-400{% endif %}">{{ label }}</span>
        </div>
        {% endfor %}

        {% set done_count = checks|selectattr('0')|list|length %}
        <div class="mt-3 pt-3 border-t border-slate-100">
          <div class="flex items-center justify-between text-xs mb-1">
            <span class="text-slate-500">Readiness</span>
            <span class="font-semibold {% if done_count == checks|length %}text-green-600{% else %}text-slate-600{% endif %}">
              {{ done_count }}/{{ checks|length }}
            </span>
          </div>
          <div class="w-full bg-slate-100 rounded-full h-2">
            <div class="h-2 rounded-full {% if done_count == checks|length %}bg-green-500{% else %}bg-brand-500{% endif %}"
                 style="width: {{ (done_count / checks|length * 100)|round }}%"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Fabric skills hint -->
    <div class="card p-4 bg-gradient-to-br from-fabric-500 to-brand-700 text-white">
      <p class="text-sm font-semibold mb-1">Ask Claude</p>
      <p class="text-xs opacity-80 mb-2">Once config is saved, Claude can run all of this for you:</p>
      <div class="bg-white/10 rounded-lg p-3 text-xs font-mono space-y-1">
        <p>"Set up my Fabric workspace and create the medallion lakehouse"</p>
        <p>"Trigger a full refresh and wait for completion"</p>
        <p>"Validate my Delta tables are DirectLake-ready"</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}