{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap items-start justify-between gap-3">
    <div>
      <p class="text-xs font-semibold uppercase tracking-[0.16em] text-brand-600">Accounting · Bank Reconciliation</p>
      <h1 class="mt-1 text-2xl font-semibold text-slate-900">Bank Reconciliation</h1>
      <p class="mt-1 max-w-5xl text-sm text-slate-500">
        Compare the normalized transactions from a completed client-bound Bank Analyzer job with one selected Tally Bank ledger. This screen is read-only against Tally; unmatched bank rows can later be handled through the existing Accounting Bank Queue.
      </p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/tools/bank-statement-analyzer" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold">Bank Analyzer</a>
      <a href="/tools/accounting/bank-posting{% if selected_client %}?client_id={{ selected_client.id }}{% endif %}" class="rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold">Accounting Bank Queue</a>
    </div>
  </div>

  {% if message %}<div class="rounded-xl border border-emerald-200 bg-emerald-50 p-3 text-sm text-emerald-800">{{ message }}</div>{% endif %}
  {% if error %}<div class="rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-800">{{ error }}</div>{% endif %}

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <form method="get" class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <label class="text-sm font-semibold">ERP Client
        <select name="client_id" required class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2">
          <option value="">Select client</option>
          {% for client in clients %}
          <option value="{{ client.id }}" {% if selected_client and selected_client.id==client.id %}selected{% endif %}>{{ client.client_code }} · {{ client.client_name }}</option>
          {% endfor %}
        </select>
      </label>

      <label class="text-sm font-semibold">Tally Company
        <select name="tally_guid" class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2">
          <option value="">Select mapped company</option>
          {% for company in companies %}
          <option value="{{ company.guid }}" {% if selected_tally_guid==company.guid %}selected{% endif %}>{{ company.name }}</option>
          {% endfor %}
        </select>
      </label>

      <div class="flex items-end xl:col-span-2">
        <button class="rounded-xl bg-brand-600 px-5 py-2 text-sm font-semibold text-white">Load Reconciliation Setup</button>
      </div>
    </form>
  </section>

  {% if selected_client and selected_tally_guid %}
  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="mb-4">
      <h2 class="font-semibold">Start a reconciliation run</h2>
      <p class="text-sm text-slate-500">The Local Agent only reads vouchers from the selected Tally company/date range and filters them to the selected Bank ledger. No accounting entry is posted by this action.</p>
    </div>

    <form method="post" action="/tools/accounting/bank-reconciliation/run" class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="client_id" value="{{ selected_client.id }}">
      <input type="hidden" name="tally_guid" value="{{ selected_tally_guid }}">

      <label class="text-xs font-semibold xl:col-span-2">Completed Bank Analyzer Job
        <select name="source_job_id" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2">
          <option value="">Select job</option>
          {% for job in jobs %}
          <option value="{{ job.id }}" {% if selected_job_id==job.id %}selected{% endif %}>
            {{ job.completed_at_utc or job.submitted_at_utc }} · {{ job.file_count }} statement(s) · {{ job.purpose|replace('_',' ')|title }} · Import {{ job.accounting_import_status|replace('_',' ')|title }}
          </option>
          {% endfor %}
        </select>
      </label>

      <label class="text-xs font-semibold">Tally Company Name
        <select name="company_name" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2">
          {% for company in companies %}
          {% if company.guid==selected_tally_guid %}<option value="{{ company.name }}">{{ company.name }}</option>{% endif %}
          {% endfor %}
        </select>
      </label>

      <label class="text-xs font-semibold">Tally Bank Ledger
        <select name="bank_ledger_name" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2">
          <option value="">Select bank ledger</option>
          {% for ledger in bank_ledgers %}<option value="{{ ledger.name }}">{{ ledger.name }}</option>{% endfor %}
        </select>
      </label>

      <label class="text-xs font-semibold">Workstation
        <select name="workstation_id" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2">
          <option value="">Select connected workstation</option>
          {% for ws in workstations %}<option value="{{ ws.id }}">{{ ws.machine_name }} · Agent {{ ws.agent_version or '-' }}</option>{% endfor %}
        </select>
      </label>

      <div class="xl:col-span-5 flex justify-end">
        <button class="rounded-xl bg-emerald-700 px-5 py-2 text-sm font-semibold text-white">Read Tally & Reconcile</button>
      </div>
    </form>
  </section>
  {% endif %}

  {% if selected_client %}
  <section class="rounded-2xl bg-white shadow-soft">
    <div class="border-b border-slate-200 px-5 py-4">
      <h2 class="font-semibold">Recent Reconciliation Runs</h2>
      <p class="text-sm text-slate-500">Runs preserve their results and never modify Tally.</p>
    </div>
    <div class="overflow-x-auto">
      <table class="min-w-full text-sm">
        <thead><tr class="bg-slate-50 text-left text-xs uppercase text-slate-500"><th class="px-4 py-3">Run</th><th class="px-4 py-3">Bank Ledger</th><th class="px-4 py-3">Period</th><th class="px-4 py-3">Status</th><th class="px-4 py-3">Result</th><th class="px-4 py-3"></th></tr></thead>
        <tbody>
          {% for run in runs %}
          {% set summary = run.summary_json|default('{}') %}
          <tr class="border-t border-slate-100">
            <td class="px-4 py-3 font-semibold">#{{ run.id }}</td>
            <td class="px-4 py-3">{{ run.bank_ledger_name }}</td>
            <td class="px-4 py-3">{{ run.date_from }} → {{ run.date_to }}</td>
            <td class="px-4 py-3">{{ run.status|replace('_',' ')|title }}{% if run.last_error %}<div class="text-xs text-red-700">{{ run.last_error }}</div>{% endif %}</td>
            <td class="px-4 py-3 text-xs">
              {% if run.status=='completed' %}
              {% set s = run.summary_json|from_json if false else none %}
              <span class="text-slate-500">Open run to view matched / probable / bank-only / books-only detail.</span>
              {% else %}—{% endif %}
            </td>
            <td class="px-4 py-3 text-right"><a href="?client_id={{ selected_client.id }}&tally_guid={{ run.tally_guid }}&run_id={{ run.id }}" class="font-semibold text-brand-700 hover:underline">Open</a></td>
          </tr>
          {% else %}
          <tr><td colspan="6" class="px-4 py-8 text-center text-slate-500">No reconciliation runs yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  {% endif %}

  {% if selected_run %}
  <section class="rounded-2xl bg-white shadow-soft">
    <div class="flex flex-wrap items-start justify-between gap-3 border-b border-slate-200 px-5 py-4">
      <div>
        <h2 class="font-semibold">Run #{{ selected_run.id }} · {{ selected_run.bank_ledger_name }}</h2>
        <p class="text-sm text-slate-500">{{ selected_run.date_from }} → {{ selected_run.date_to }} · Status {{ selected_run.status|replace('_',' ')|title }}</p>
      </div>
      {% if selected_run.status=='completed' %}
      <form method="get" class="flex gap-2">
        <input type="hidden" name="client_id" value="{{ selected_client.id }}">
        <input type="hidden" name="tally_guid" value="{{ selected_run.tally_guid }}">
        <input type="hidden" name="run_id" value="{{ selected_run.id }}">
        <select name="status" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm">
          <option value="">All results</option>
          {% for value,label in [('matched','Matched'),('probable_match','Probable Match'),('bank_only','Bank Only'),('books_only','Books Only'),('duplicate_candidate','Duplicate Candidate')] %}
          <option value="{{ value }}" {% if status_filter==value %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
        <button class="rounded-lg border border-slate-300 px-3 py-2 text-sm font-semibold">Filter</button>
      </form>
      {% endif %}
    </div>

    {% if selected_run.status in ['queued','extracting'] %}
    <div class="p-8 text-center text-blue-700">The connected Local Agent is reading Tally vouchers. Refresh this page shortly.</div>
    {% elif selected_run.status=='failed' %}
    <div class="p-8 text-center text-red-700">{{ selected_run.last_error }}</div>
    {% elif selected_run.status=='completed' %}
    <div class="overflow-x-auto">
      <table class="min-w-full text-xs">
        <thead><tr class="bg-slate-50 text-left uppercase text-slate-500"><th class="px-3 py-2">Result</th><th class="px-3 py-2">Bank Statement</th><th class="px-3 py-2">Tally</th><th class="px-3 py-2">Why</th><th class="px-3 py-2">Action</th></tr></thead>
        <tbody>
          {% for item in items %}
          <tr class="border-t border-slate-100 align-top">
            <td class="px-3 py-3">
              <span class="rounded-full px-2 py-1 font-semibold
                {% if item.match_status=='matched' %}bg-emerald-100 text-emerald-800
                {% elif item.match_status=='probable_match' %}bg-amber-100 text-amber-800
                {% elif item.match_status=='bank_only' %}bg-blue-100 text-blue-800
                {% elif item.match_status=='books_only' %}bg-violet-100 text-violet-800
                {% else %}bg-red-100 text-red-800{% endif %}">
                {{ item.match_status|replace('_',' ')|title }}
              </span>
              {% if item.confidence %}<div class="mt-1 text-slate-500">{{ item.confidence }}%</div>{% endif %}
            </td>
            <td class="px-3 py-3">
              {% if item.bank_transaction_id %}
              <div class="font-semibold">{{ item.bank_date }} · {{ item.bank_direction }} · ₹{{ '%.2f'|format(item.bank_amount) }}</div>
              <div class="mt-1">{{ item.bank_reference or '-' }}</div>
              <div class="mt-1 max-w-md text-slate-500">{{ item.bank_narration }}</div>
              {% else %}—{% endif %}
            </td>
            <td class="px-3 py-3">
              {% if item.tally_voucher_number or item.tally_guid %}
              <div class="font-semibold">{{ item.tally_date }} · {{ item.tally_voucher_type }} · ₹{{ '%.2f'|format(item.tally_amount) }}</div>
              <div class="mt-1">Voucher {{ item.tally_voucher_number or item.tally_guid }}</div>
              <div class="mt-1">{{ item.tally_reference or '-' }}</div>
              <div class="mt-1 max-w-md text-slate-500">{{ item.tally_narration }}</div>
              {% else %}—{% endif %}
            </td>
            <td class="px-3 py-3 max-w-xs text-slate-600">{{ item.match_reason }}</td>
            <td class="px-3 py-3">
              {% if item.match_status=='bank_only' and item.bank_transaction_id %}
              <a href="/tools/accounting/bank-posting?client_id={{ selected_client.id }}" class="font-semibold text-blue-700 hover:underline">Review in Accounting Queue</a>
              {% elif item.match_status=='books_only' %}
              <span class="text-slate-500">Investigate timing / statement coverage.</span>
              {% else %}
              <span class="text-slate-500">Review if needed.</span>
              {% endif %}
            </td>
          </tr>
          {% else %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No reconciliation rows for this filter.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </section>
  {% endif %}
</div>
{% endblock %}