{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <p class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-600">Accounting Intelligence · Phase 4</p>
      <h1 class="mt-1 text-2xl font-semibold text-slate-900">Accounting Classification Taxonomy</h1>
      <p class="mt-1 max-w-3xl text-sm text-slate-500">Canonical accounting natures used by future classification and ledger-learning features. These codes are independent from client-specific Tally ledger names and do not post anything to Tally.</p>
    </div>
    <a href="/tools/tally" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50">Back to Tally Accounting</a>
  </div>

  {% if updated %}
  <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-800">Accounting nature status updated.</div>
  {% endif %}

  <section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Selectable Natures</div><div class="mt-2 text-2xl font-semibold text-slate-900">{{ counts.total }}</div></div>
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Active</div><div class="mt-2 text-2xl font-semibold text-emerald-700">{{ counts.active }}</div></div>
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Inactive</div><div class="mt-2 text-2xl font-semibold text-slate-700">{{ counts.inactive }}</div></div>
    <div class="rounded-2xl bg-white p-5 shadow-soft"><div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Capital Natures</div><div class="mt-2 text-2xl font-semibold text-slate-900">{{ counts.capital }}</div></div>
  </section>

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <form method="get" action="/tools/accounting/taxonomy" class="grid gap-4 md:grid-cols-3 md:items-end">
      <label class="text-sm font-medium text-slate-700">Status
        <select name="status" class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm">
          <option value="all" {% if selected_status == 'all' %}selected{% endif %}>All</option>
          <option value="active" {% if selected_status == 'active' %}selected{% endif %}>Active</option>
          <option value="inactive" {% if selected_status == 'inactive' %}selected{% endif %}>Inactive</option>
        </select>
      </label>
      <label class="text-sm font-medium text-slate-700">Classification Group
        <select name="group" class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm">
          <option value="">All groups</option>
          {% for value, label in [('purchase','Purchases'),('expense','Operating Expenses'),('repairs','Repairs & Maintenance'),('capital','Capital Assets'),('statutory','Taxes & Statutory'),('finance','Finance Costs'),('review','Review Required')] %}
          <option value="{{ value }}" {% if selected_group == value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </label>
      <div class="flex gap-2"><button type="submit" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Apply Filters</button><a href="/tools/accounting/taxonomy" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700">Reset</a></div>
    </form>
  </section>

  <div class="space-y-4">
    {% for section in taxonomy_groups %}
    <section class="overflow-hidden rounded-2xl bg-white shadow-soft">
      {% if section.root %}
      <div class="border-b border-slate-100 bg-slate-50 px-5 py-4">
        <div class="flex flex-wrap items-center justify-between gap-2">
          <div><h2 class="font-semibold text-slate-900">{{ section.root.name }}</h2><p class="mt-1 text-xs text-slate-500">{{ section.root.code }} · {{ section.root.description or '' }}</p></div>
          <span class="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600">{{ section.root.classification_group|replace('_',' ')|title }}</span>
        </div>
      </div>
      {% endif %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-200 text-sm">
          <thead class="bg-white"><tr><th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Accounting Nature</th><th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Stable Code</th><th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Treatment</th><th class="px-5 py-3 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">Status</th><th class="px-5 py-3 text-right text-xs font-semibold uppercase tracking-wide text-slate-500">Control</th></tr></thead>
          <tbody class="divide-y divide-slate-100">
            {% for row in section.children %}
            <tr>
              <td class="px-5 py-4"><div class="font-medium text-slate-900">{{ row.name }}</div><div class="mt-1 max-w-xl text-xs text-slate-500">{{ row.description or '' }}</div></td>
              <td class="px-5 py-4"><code class="rounded bg-slate-100 px-2 py-1 text-xs text-slate-700">{{ row.code }}</code></td>
              <td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {% if row.capital_revenue == 'capital' %}bg-violet-50 text-violet-700{% elif row.capital_revenue == 'review' %}bg-amber-50 text-amber-700{% else %}bg-blue-50 text-blue-700{% endif %}">{{ row.capital_revenue|title }}</span></td>
              <td class="px-5 py-4"><span class="rounded-full px-2.5 py-1 text-xs font-semibold {% if row.is_active %}bg-emerald-50 text-emerald-700{% else %}bg-slate-100 text-slate-600{% endif %}">{{ 'Active' if row.is_active else 'Inactive' }}</span></td>
              <td class="px-5 py-4 text-right">
                {% if 'accounting.taxonomy.manage' in current_user_permissions %}
                <form method="post" action="/tools/accounting/taxonomy/{{ row.id }}/active" class="inline">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                  <input type="hidden" name="status" value="{{ selected_status }}" />
                  <input type="hidden" name="group" value="{{ selected_group }}" />
                  <input type="hidden" name="is_active" value="{{ 'false' if row.is_active else 'true' }}" />
                  <button type="submit" class="rounded-lg border px-3 py-1.5 text-xs font-semibold {% if row.is_active %}border-slate-300 bg-white text-slate-700 hover:bg-slate-50{% else %}border-emerald-200 bg-emerald-50 text-emerald-700 hover:bg-emerald-100{% endif %}">{{ 'Deactivate' if row.is_active else 'Activate' }}</button>
                </form>
                {% else %}<span class="text-xs text-slate-400">View only</span>{% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
    {% else %}
    <div class="rounded-2xl bg-white p-8 text-center text-sm text-slate-500 shadow-soft">No accounting natures match the selected filters.</div>
    {% endfor %}
  </div>

  <div class="rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800">Phase 4 is classification-only. Activating or deactivating a nature changes whether future intelligence workflows may select it; it does not create, rename, delete or post any Tally ledger or voucher.</div>
</div>
{% endblock %}