{% extends "base.html" %}
{% block title %}Sraosha — {{ contract.title }}{% endblock %}
{% block head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/theme/material-darker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.18/mode/yaml/yaml.min.js"></script>
<style>
  #yaml-readonly .CodeMirror {
    height: min(70vh, 36rem) !important;
    font-size: 13px;
    border-radius: 0 0 0.5rem 0.5rem;
  }
  #yaml-readonly .CodeMirror-scroll {
    max-height: min(70vh, 36rem);
  }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
  <a href="/ui/contracts" class="shrink-0 text-xs text-indigo-600 hover:underline dark:text-indigo-400">Contracts</a>
  <h1 class="truncate text-sm font-semibold text-gray-900 dark:text-white">{{ contract.title }}</h1>
  {% if not contract.is_active %}
  <span class="shrink-0 rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">Inactive</span>
  {% endif %}
  {% if downstream_count %}
  <span class="shrink-0 rounded-full bg-indigo-50 px-2 py-0.5 text-xs text-indigo-700 dark:bg-indigo-950 dark:text-indigo-200">{{ downstream_count }} downstream</span>
  {% endif %}
</div>
{% endblock %}

{% block content %}
<div class="space-y-4" x-data="{
  tab: 'overview',
  selectTab(name) {
    this.tab = name;
    if (name === 'schema') {
      this.$nextTick(() => { if (window.initContractYamlCm) window.initContractYamlCm(); });
    }
  }
}">
  <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
    <div class="flex flex-wrap gap-1 rounded-xl border border-gray-200 bg-white p-1 dark:border-gray-700 dark:bg-gray-900">
      <button type="button" @click="selectTab('overview')" :class="tab==='overview' ? 'bg-gray-100 dark:bg-gray-800' : ''" class="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200">Overview</button>
      <button type="button" @click="selectTab('schema')" :class="tab==='schema' ? 'bg-gray-100 dark:bg-gray-800' : ''" class="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200">Schema &amp; YAML</button>
      <button type="button" @click="selectTab('runs')" :class="tab==='runs' ? 'bg-gray-100 dark:bg-gray-800' : ''" class="rounded-lg px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200">Runs</button>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <button type="button" id="run-validation-btn" onclick="runValidation()"
              class="inline-flex items-center gap-1.5 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        Run validation
      </button>
      <a href="/ui/contracts/{{ contract.contract_id }}/edit"
         class="inline-flex items-center gap-1.5 rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
        Edit
      </a>
      <button type="button"
              hx-get="/ui/partials/delete-modal/{{ contract.contract_id }}"
              hx-target="#modal-overlay"
              hx-swap="innerHTML"
              class="inline-flex items-center gap-1.5 rounded-xl border border-rose-200 bg-white px-3 py-2 text-sm font-medium text-rose-600 hover:bg-rose-50 dark:border-rose-900 dark:bg-gray-800 dark:text-rose-400 dark:hover:bg-rose-950/30">
        Delete
      </button>
    </div>
  </div>

  <div id="validation-result" class="hidden"></div>

  <div x-show="tab === 'overview'" class="space-y-6">
    <div class="card rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
      <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Metadata</h2>
      <dl class="grid grid-cols-2 gap-4 text-sm md:grid-cols-4">
        <div>
          <dt class="text-gray-500 dark:text-gray-400">ID</dt>
          <dd class="font-mono text-gray-900 dark:text-white">{{ contract.contract_id }}</dd>
        </div>
        <div>
          <dt class="text-gray-500 dark:text-gray-400">Team</dt>
          <dd class="text-gray-900 dark:text-white">{{ contract.owner_team or "—" }}</dd>
        </div>
        <div>
          <dt class="text-gray-500 dark:text-gray-400">Mode</dt>
          <dd>
            {% if contract.enforcement_mode == "block" %}
            <span class="inline-flex rounded bg-rose-50 px-2 py-0.5 text-xs font-medium text-rose-700 dark:bg-rose-950 dark:text-rose-200">block</span>
            {% elif contract.enforcement_mode == "warn" %}
            <span class="inline-flex rounded bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-950 dark:text-amber-200">warn</span>
            {% else %}
            <span class="inline-flex rounded bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">log</span>
            {% endif %}
          </dd>
        </div>
        <div>
          <dt class="text-gray-500 dark:text-gray-400">Active</dt>
          <dd class="text-gray-900 dark:text-white">{{ "Yes" if contract.is_active else "No" }}</dd>
        </div>
      </dl>
      {% if contract.description %}
      <p class="mt-4 text-sm text-gray-600 dark:text-gray-300">{{ contract.description }}</p>
      {% endif %}
    </div>

    {% include "partials/contract_schedule_card.html" %}

    <a href="/ui/impact?focus={{ contract.contract_id }}" class="text-sm font-medium text-indigo-600 hover:underline dark:text-indigo-400">Open lineage →</a>
  </div>

  <div x-show="tab === 'schema'" x-cloak class="space-y-6">
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
      {% if parsed_models %}
      <div class="card rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
        <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Data models</h2>
        <div class="space-y-3">
          {% for model in parsed_models %}
          <details class="group overflow-hidden rounded-lg border border-gray-200 dark:border-gray-600" open>
            <summary class="flex cursor-pointer items-center justify-between bg-gray-50 px-4 py-3 hover:bg-gray-100 dark:bg-gray-800/80 dark:hover:bg-gray-800">
              <div class="flex items-center gap-2">
                <svg class="h-4 w-4 text-gray-400 transition-transform group-open:rotate-90" 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>
                <span class="text-sm font-medium text-gray-900 dark:text-white">{{ model.name }}</span>
              </div>
              <span class="text-xs text-gray-400">{{ model.fields|length }} field{{ "s" if model.fields|length != 1 }}</span>
            </summary>
            <div class="divide-y divide-gray-100 dark:divide-gray-700">
              {% for field in model.fields %}
              <div class="flex items-center justify-between px-4 py-2 text-sm hover:bg-gray-50/50 dark:hover:bg-gray-800/30">
                <span class="font-mono text-gray-800 dark:text-gray-200">{{ field.name }}</span>
                <div class="flex items-center gap-2">
                  <span class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">{{ field.type }}</span>
                  {% if field.required %}
                  <span class="rounded bg-indigo-50 px-1.5 py-0.5 text-xs text-indigo-600 dark:bg-indigo-950 dark:text-indigo-300">required</span>
                  {% endif %}
                  {% if field.unique %}
                  <span class="rounded bg-emerald-50 px-1.5 py-0.5 text-xs text-emerald-600 dark:bg-emerald-950 dark:text-emerald-300">unique</span>
                  {% endif %}
                </div>
              </div>
              {% endfor %}
            </div>
          </details>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      <div class="card flex min-h-0 flex-col overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700 dark:bg-gray-900">
        <div class="flex shrink-0 items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-3 dark:border-gray-700 dark:bg-gray-800/80">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Contract YAML</span>
          <a href="/ui/contracts/{{ contract.contract_id }}/edit" class="text-xs font-medium text-indigo-600 dark:text-indigo-400">Edit</a>
        </div>
        <div id="yaml-readonly" class="min-h-[min(70vh,36rem)] shrink-0 overflow-hidden bg-[#263238]"></div>
      </div>
    </div>
  </div>

  <div x-show="tab === 'runs'" x-cloak class="card rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
    <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Run history</h2>
    {% if runs %}
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 text-sm dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-800/80">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Time</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Status</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Checks</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">Duration</th>
            <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500 dark:text-gray-400">By</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
          {% for run in runs %}
          <tr class="cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50" onclick="location.href='/ui/runs/{{ run.id }}'">
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ run.run_at.strftime('%Y-%m-%d %H:%M') }}</td>
            <td class="px-4 py-3">
              {% if run.status == "passed" %}
              <span class="rounded-full bg-emerald-100 px-2 py-0.5 text-xs text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">passed</span>
              {% elif run.status == "failed" %}
              <span class="rounded-full bg-rose-100 px-2 py-0.5 text-xs text-rose-800 dark:bg-rose-950 dark:text-rose-200">failed</span>
              {% else %}
              <span class="rounded-full bg-gray-100 px-2 py-0.5 text-xs dark:bg-gray-700 dark:text-gray-200">{{ run.status }}</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ run.checks_passed }}/{{ run.checks_total }}</td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ "%dms" % run.duration_ms if run.duration_ms else "—" }}</td>
            <td class="px-4 py-3 text-gray-600 dark:text-gray-300">{{ run.triggered_by or "—" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p class="text-sm text-gray-500 dark:text-gray-400">No runs yet.</p>
    {% endif %}
  </div>
</div>

<script>
window.__CONTRACT_RAW_YAML__ = {{ (contract.raw_yaml or '') | tojson }};
let _contractYamlCm = null;
window.initContractYamlCm = function() {
  const mount = document.getElementById('yaml-readonly');
  if (!mount || typeof CodeMirror === 'undefined') return;
  if (_contractYamlCm) {
    _contractYamlCm.refresh();
    return;
  }
  const raw = window.__CONTRACT_RAW_YAML__;
  const value = raw == null ? '' : String(raw);
  _contractYamlCm = CodeMirror(mount, {
    value: value,
    mode: 'yaml',
    theme: 'material-darker',
    lineNumbers: true,
    readOnly: true,
    lineWrapping: true,
    tabSize: 2,
  });
  _contractYamlCm.setSize('100%', 'min(70vh, 36rem)');
  _contractYamlCm.refresh();
};
document.addEventListener('DOMContentLoaded', function() {
  var attempts = 0;
  function bootSchemaFromQuery() {
    try {
      if (new URLSearchParams(window.location.search).get('tab') !== 'schema') return;
      var root = document.querySelector('[x-data]');
      if (root && root._x_dataStack && root._x_dataStack[0]) {
        root._x_dataStack[0].tab = 'schema';
        requestAnimationFrame(function() { if (window.initContractYamlCm) window.initContractYamlCm(); });
        return;
      }
      if (attempts++ < 40) setTimeout(bootSchemaFromQuery, 50);
    } catch (e) {}
  }
  setTimeout(bootSchemaFromQuery, 0);
});

function runValidation() {
  const btn = document.getElementById('run-validation-btn');
  const resultDiv = document.getElementById('validation-result');
  btn.disabled = true;
  btn.innerHTML = '<span class="text-xs">Running…</span>';
  fetch('/api/v1/contracts/{{ contract.contract_id }}/run', { method: 'POST' })
    .then(r => r.json())
    .then(data => {
      resultDiv.classList.remove('hidden');
      if (data.status === 'passed') {
        resultDiv.innerHTML = '<div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 dark:border-emerald-900 dark:bg-emerald-950/30"><p class="text-sm font-medium text-emerald-800 dark:text-emerald-200">Validation passed</p><p class="text-xs text-emerald-700 dark:text-emerald-300">' + data.checks_passed + '/' + data.checks_total + ' checks · ' + (data.duration_ms || 0) + 'ms</p></div>';
      } else {
        resultDiv.innerHTML = '<div class="rounded-xl border border-rose-200 bg-rose-50 p-4 dark:border-rose-900 dark:bg-rose-950/30"><p class="text-sm font-medium text-rose-800 dark:text-rose-200">Validation ' + data.status + '</p><p class="text-xs text-rose-700 dark:text-rose-300">' + data.checks_passed + '/' + data.checks_total + ' checks</p></div>';
      }
      btn.disabled = false;
      btn.innerHTML = '<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Run validation';
    })
    .catch(() => {
      resultDiv.classList.remove('hidden');
      resultDiv.innerHTML = '<div class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800 dark:border-amber-900 dark:bg-amber-950/30 dark:text-amber-200">Validation could not be run.</div>';
      btn.disabled = false;
      btn.innerHTML = '<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Run validation';
    });
}
</script>
{% endblock %}