{% 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">Consultant Profile Domains</h1>
      <p class="mt-1 text-sm text-slate-500">Create domains for consultant public profile, login and lead capture pages. Examples: abc.accountants, consultant.filingabc.com, or yourname.arrr.accountant.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/domains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">All Domains</a>
      <a href="/domains/tenant-subdomains" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Tenant Subdomains</a>
      <a href="/domains/firm-domain" class="rounded-xl border px-4 py-2 text-sm font-medium text-slate-700 shadow-sm">Firm Domain</a>
    </div>
  </div>

  {% if errors %}
  <div class="rounded-2xl border border-red-200 bg-red-50 p-4 text-sm text-red-700">
    <ul class="list-disc pl-5">
      {% for err in errors %}<li>{{ err }}</li>{% endfor %}
    </ul>
  </div>
  {% endif %}
  {% if message %}
  <div class="rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">{{ message }}</div>
  {% endif %}

  <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
    <div class="xl:col-span-2 rounded-2xl border bg-white p-5 shadow-soft">
      <h2 class="text-lg font-semibold text-slate-900">Create Consultant Domain</h2>
      <p class="mt-1 text-sm text-slate-500">Use platform subdomains for quick setup. Use custom domains only after the consultant points DNS to your ERP server.</p>

      <form method="post" action="/domains/consultant-domains/create" class="mt-5 space-y-4">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="block text-sm font-medium text-slate-700">Consultant</label>
            <select name="consultant_id" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm" required>
              <option value="">Select consultant</option>
              {% for c in consultants %}
                <option value="{{ c.id }}">{{ c.firm_name or c.contact_person }}{% if c.email %} — {{ c.email }}{% endif %}</option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700">Domain type</label>
            <select name="domain_type" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm">
              <option value="consultant_marketplace_subdomain">Consultant platform subdomain</option>
              <option value="consultant_firm_domain">Consultant under firm domain</option>
              <option value="consultant_custom_domain">Consultant custom domain</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="block text-sm font-medium text-slate-700">Marketplace base domain</label>
            <input name="base_domain" value="{{ base_domain or 'filingabc.com' }}" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm" placeholder="filingabc.com" />
            <p class="mt-1 text-xs text-slate-500">Used for consultant.filingabc.com.</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-slate-700">Firm consultant base domain</label>
            <input name="firm_base_domain" value="{{ firm_base_domain or 'arrr.accountant' }}" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm" placeholder="arrr.accountant" />
            <p class="mt-1 text-xs text-slate-500">Used for yourname.arrr.accountant.</p>
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-slate-700">Custom / override domain, optional</label>
          <input name="domain_name" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm" placeholder="abc.accountants or yourname.arrr.accountant" />
          <p class="mt-1 text-xs text-slate-500">Leave blank to auto-generate based on the selected consultant and base domain. Enter a value for custom domains.</p>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
          <div>
            <label class="block text-sm font-medium text-slate-700">Parent audit firm, optional</label>
            <select name="parent_tenant_id" class="mt-1 w-full rounded-xl border px-3 py-2 text-sm">
              <option value="">Use consultant's linked firm / not applicable</option>
              {% for t in tenants %}
                <option value="{{ t.id }}">{{ t.display_name or t.name }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="rounded-2xl border bg-slate-50 p-4 text-sm text-slate-600">
            <div class="font-medium text-slate-900">Activation rule</div>
            <p class="mt-1">Platform subdomains can be active immediately if wildcard DNS/SSL is managed by you. Custom domains should normally remain pending until DNS verification is done.</p>
          </div>
        </div>

        <label class="flex items-start gap-3 rounded-2xl border bg-slate-50 p-4 text-sm text-slate-700">
          <input type="checkbox" name="mark_verified_active" value="1" class="mt-1 rounded border-slate-300" />
          <span>
            <span class="font-medium text-slate-900">Mark verified and active now</span><br />
            Use only when DNS is already pointing to the ERP server and SSL/proxy is ready.
          </span>
        </label>

        <div class="flex justify-end">
          <button class="rounded-xl bg-slate-900 px-5 py-2 text-sm font-semibold text-white shadow-sm">Create Consultant Domain</button>
        </div>
      </form>
    </div>

    <div class="space-y-4">
      <div class="rounded-2xl border bg-white p-5 shadow-soft">
        <h3 class="font-semibold text-slate-900">Recommended DNS</h3>
        <div class="mt-3 space-y-2 text-sm text-slate-600">
          <div><span class="font-medium text-slate-900">Platform:</span> *.filingabc.com → ERP server IP/proxy</div>
          <div><span class="font-medium text-slate-900">Firm brand:</span> *.arrr.accountant → ERP server IP/proxy</div>
          <div><span class="font-medium text-slate-900">Custom:</span> abc.accountants → ERP server IP/proxy</div>
          <div><span class="font-medium text-slate-900">SSL:</span> Coolify / proxy / Cloudflare will be configured later in 7T.9.</div>
        </div>
      </div>

      <div class="rounded-2xl border bg-white p-5 shadow-soft">
        <h3 class="font-semibold text-slate-900">Suggested domains</h3>
        <p class="mt-2 text-sm text-slate-600">The suggestions below are generated from consultant firm name or contact person.</p>
      </div>
    </div>
  </div>

  <div class="overflow-hidden rounded-2xl border bg-white shadow-soft">
    <div class="border-b bg-slate-50 p-4">
      <h2 class="font-semibold text-slate-900">Consultant Domain Suggestions</h2>
    </div>
    {% if candidates %}
    <table class="w-full text-sm">
      <thead class="bg-slate-50 text-slate-600">
        <tr>
          <th class="p-3 text-left">Consultant</th>
          <th class="p-3 text-left">Platform Domain</th>
          <th class="p-3 text-left">Firm Domain</th>
          <th class="p-3 text-left">Status</th>
        </tr>
      </thead>
      <tbody>
        {% for item in candidates %}
        <tr class="border-t align-top">
          <td class="p-3">
            <div class="font-semibold text-slate-900">{{ item.consultant.firm_name or item.consultant.contact_person }}</div>
            <div class="text-xs text-slate-500">{{ item.consultant.email or 'No email configured' }}</div>
          </td>
          <td class="p-3">
            <div class="font-medium text-slate-800">{{ item.platform_domain }}</div>
            {% if item.platform_mapping %}<a href="/domains/{{ item.platform_mapping.id }}" class="text-xs text-slate-900 underline">Open mapping</a>{% endif %}
          </td>
          <td class="p-3">
            <div class="font-medium text-slate-800">{{ item.firm_domain }}</div>
            {% if item.firm_mapping %}<a href="/domains/{{ item.firm_mapping.id }}" class="text-xs text-slate-900 underline">Open mapping</a>{% endif %}
          </td>
          <td class="p-3">
            {% if item.platform_mapping or item.firm_mapping %}
              <span class="rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">Mapped</span>
            {% else %}
              <span class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-700">Not mapped</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-8 text-center text-sm text-slate-500">No consultants found.</div>
    {% endif %}
  </div>
</div>
{% endblock %}