{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
      <h1 class="text-2xl font-semibold text-slate-900">{{ mapping.domain_name }}</h1>
      <p class="mt-1 text-sm text-slate-500">Domain mapping details and DNS verification token.</p>
    </div>
    <div class="flex gap-2">
      <a href="/domains/{{ mapping.id }}/ssl" class="rounded-xl border px-4 py-2 text-sm text-slate-700">SSL</a>
      <a href="/domains/{{ mapping.id }}/edit" class="rounded-xl border px-4 py-2 text-sm text-slate-700">Edit</a>
      <a href="/domains" class="rounded-xl bg-slate-900 px-4 py-2 text-sm text-white">Back to Domains</a>
    </div>
  </div>

  <div class="grid grid-cols-1 gap-5 lg:grid-cols-3">
    <div class="rounded-2xl border bg-white p-5 shadow-soft lg:col-span-2">
      <h2 class="text-lg font-semibold text-slate-900">Mapping</h2>
      <dl class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 text-sm">
        <div><dt class="text-slate-500">Type</dt><dd class="font-medium text-slate-900">{{ mapping.domain_type.replace('_', ' ')|title }}</dd></div>
        <div><dt class="text-slate-500">Status</dt><dd class="font-medium text-slate-900">{{ mapping.status.replace('_', ' ')|title }}</dd></div>
        <div><dt class="text-slate-500">Audit Firm</dt><dd>{{ mapping.tenant.display_name or mapping.tenant.name if mapping.tenant else '-' }}</dd></div>
        <div><dt class="text-slate-500">Branch</dt><dd>{{ mapping.branch.name if mapping.branch else '-' }}</dd></div>
        <div><dt class="text-slate-500">Consultant</dt><dd>{{ mapping.consultant.contact_person if mapping.consultant else '-' }}</dd></div>
        <div><dt class="text-slate-500">Parent Firm</dt><dd>{{ mapping.parent_tenant.display_name or mapping.parent_tenant.name if mapping.parent_tenant else '-' }}</dd></div>
        <div><dt class="text-slate-500">Primary</dt><dd>{{ 'Yes' if mapping.is_primary else 'No' }}</dd></div>
        <div><dt class="text-slate-500">SSL Mode</dt><dd>{{ mapping.ssl_mode }}</dd></div>
        <div><dt class="text-slate-500">SSL Status</dt><dd>{{ (mapping.ssl_status or "not_checked").replace("_", " ")|title }}</dd></div>
      </dl>
      {% if mapping.notes %}<div class="mt-5 rounded-xl bg-slate-50 p-4 text-sm text-slate-700">{{ mapping.notes }}</div>{% endif %}
    </div>

    <div class="rounded-2xl border bg-white p-5 shadow-soft">
      <h2 class="text-lg font-semibold text-slate-900">DNS Verification</h2>
      {% if dns_result is defined and dns_result %}
        <div class="mt-3 rounded-xl {% if dns_result.ok %}bg-emerald-50 text-emerald-800{% else %}bg-red-50 text-red-800{% endif %} p-3 text-sm">
          <div class="font-semibold">{{ 'Verification successful' if dns_result.ok else 'Verification failed' }}</div>
          <div class="mt-1">{{ dns_result.message }}</div>
          {% if dns_result.found_values %}
            <div class="mt-2 text-xs">Found TXT: {{ dns_result.found_values|join(', ') }}</div>
          {% endif %}
        </div>
      {% endif %}

      {% if mapping.is_verified %}
        <div class="mt-3 rounded-xl bg-emerald-50 p-3 text-sm text-emerald-800">This domain is marked as verified.</div>
      {% else %}
        <div class="mt-3 rounded-xl bg-amber-50 p-3 text-sm text-amber-800">Add the TXT record below at your DNS provider. Click Verify DNS after adding the TXT record at your DNS provider.</div>
      {% endif %}
      <div class="mt-4 space-y-3 text-sm">
        <div><div class="text-slate-500">TXT Name</div><code class="block rounded-lg bg-slate-100 p-2 text-xs break-all">{{ mapping.dns_txt_name or '-' }}</code></div>
        <div><div class="text-slate-500">TXT Value</div><code class="block rounded-lg bg-slate-100 p-2 text-xs break-all">{{ mapping.dns_txt_value or '-' }}</code></div>
      </div>
      <div class="mt-4 flex flex-col gap-2">
        <form method="post" action="/domains/{{ mapping.id }}/verify-dns">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="w-full rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white">Verify DNS TXT Now</button>
        </form>
        <form method="post" action="/domains/{{ mapping.id }}/mark-verified">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="w-full rounded-xl bg-emerald-700 px-4 py-2 text-sm font-medium text-white">Mark Verified Manually</button>
        </form>
        <form method="post" action="/domains/{{ mapping.id }}/regenerate-token">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="w-full rounded-xl border px-4 py-2 text-sm text-slate-700">Regenerate Token</button>
        </form>
      </div>
    </div>
  </div>

  {% if coolify_result is defined and coolify_result %}
  <div class="rounded-2xl {% if coolify_result.ok %}bg-emerald-50 text-emerald-800{% else %}bg-red-50 text-red-800{% endif %} p-4 text-sm">
    <div class="font-semibold">Coolify: {{ coolify_result.status.replace('_', ' ')|title }}</div>
    <div class="mt-1">{{ coolify_result.message }}</div>
    {% if coolify_result.domain_url %}<div class="mt-2 text-xs">Domain URL: {{ coolify_result.domain_url }}</div>{% endif %}
    {% if coolify_result.updated_domains %}<div class="mt-2 text-xs">Application domains: {{ coolify_result.updated_domains|join(', ') }}</div>{% endif %}
  </div>
  {% endif %}

  <div class="rounded-2xl border bg-white p-5 shadow-soft">
    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
      <div>
        <h2 class="text-lg font-semibold text-slate-900">Coolify / Traefik Route</h2>
        <p class="mt-1 text-sm text-slate-500">System Admin can add this custom domain to the configured Coolify ERP application. DNS should already point to your Coolify server before SSL is issued.</p>
      </div>
      <div class="flex flex-col gap-2 sm:flex-row">
        <form method="post" action="/domains/{{ mapping.id }}/coolify/check">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="w-full rounded-xl border px-4 py-2 text-sm font-medium text-slate-700">Check Coolify App</button>
        </form>
        <form method="post" action="/domains/{{ mapping.id }}/coolify/sync">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
          <button class="w-full rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white">Add to Coolify</button>
        </form>
      </div>
    </div>
    <div class="mt-4 grid grid-cols-1 gap-3 text-sm md:grid-cols-3">
      <div class="rounded-xl bg-slate-50 p-3"><div class="text-slate-500">Coolify URL format</div><div class="font-medium text-slate-900">https://{{ mapping.domain_name }}</div></div>
      <div class="rounded-xl bg-slate-50 p-3"><div class="text-slate-500">Proxy mode</div><div class="font-medium text-slate-900">{{ mapping.ssl_mode or 'manual' }}</div></div>
      <div class="rounded-xl bg-slate-50 p-3"><div class="text-slate-500">Proxy/SSL status</div><div class="font-medium text-slate-900">{{ (mapping.ssl_status or 'not_checked').replace('_', ' ')|title }}</div></div>
    </div>
  </div>

</div>
{% endblock %}