{% 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">Tools · Accounting Intelligence</p>
      <h1 class="mt-1 text-2xl font-semibold text-slate-900">GSTR-2B Purchase Intelligence</h1>
      <p class="mt-1 max-w-4xl text-sm text-slate-500">Import GSTR-2B purchase documents, classify them through the Phase 6 learning engine, and confirm the accounting nature and mapped Tally ledger. Phase 7 does not post vouchers to Tally.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a href="/tools/accounting/ledger-learning{% 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 text-slate-700 hover:bg-slate-50">Ledger Learning</a>
      <a href="/tools/tally{% if selected_client %}?client_id={{ selected_client.id }}{% endif %}" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Back to Tally</a>
    </div>
  </div>

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

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <form method="get" action="/tools/accounting/gstr2b" class="grid gap-4 lg:grid-cols-5">
      <label class="text-sm font-medium text-slate-700 lg:col-span-2">
        ERP Client
        <select name="client_id" required class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm">
          <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_name }}</option>
          {% endfor %}
        </select>
      </label>
      {% if selected_client %}
      <label class="text-sm font-medium text-slate-700 lg:col-span-2">
        Import Batch
        <select name="batch_id" class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm">
          <option value="">Latest batch</option>
          {% for batch in batches %}
          <option value="{{ batch.id }}" {% if selected_batch and selected_batch.id == batch.id %}selected{% endif %}>#{{ batch.id }} · {{ batch.return_period or 'No period' }} · {{ batch.original_filename }}</option>
          {% endfor %}
        </select>
      </label>
      {% endif %}
      <div class="flex items-end">
        <button type="submit" class="w-full rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Load</button>
      </div>
    </form>
  </section>

  {% if selected_client %}
  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h2 class="font-semibold text-slate-900">Import GSTR-2B</h2>
        <p class="mt-1 text-sm text-slate-500">Supported: .xlsx, .xlsm and .csv. Summary sheets are ignored automatically; invoice sheets are detected by column headers.</p>
      </div>
      <span class="rounded-full bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-700">Suggestion & review only · No Tally posting</span>
    </div>
    <form method="post" action="/tools/accounting/gstr2b/upload" enctype="multipart/form-data" class="mt-4 grid gap-4 lg:grid-cols-5">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      <input type="hidden" name="client_id" value="{{ selected_client.id }}" />
      <label class="text-sm font-medium text-slate-700">
        Return Period
        <input name="return_period" maxlength="20" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 text-sm" placeholder="e.g. 072026" />
      </label>
      <label class="text-sm font-medium text-slate-700 lg:col-span-2">
        Tally Company Context
        <select name="tally_guid" class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm">
          <option value="">No specific Tally company</option>
          {% for guid, company in tally_companies %}
          <option value="{{ guid }}">{{ company or guid }} · {{ guid }}</option>
          {% endfor %}
        </select>
      </label>
      <label class="text-sm font-medium text-slate-700">
        GSTR-2B File
        <input type="file" name="upload" accept=".xlsx,.xlsm,.csv,.txt" required class="mt-1 block w-full text-sm text-slate-700" />
      </label>
      <div class="flex items-end">
        <button type="submit" class="w-full rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800">Import</button>
      </div>
    </form>
  </section>

  {% if selected_batch %}
  <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-6">
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Batch</div><div class="mt-2 text-xl font-semibold">#{{ selected_batch.id }}</div></div>
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Rows Read</div><div class="mt-2 text-xl font-semibold">{{ selected_batch.rows_read }}</div></div>
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Imported</div><div class="mt-2 text-xl font-semibold text-emerald-700">{{ selected_batch.rows_imported }}</div></div>
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Duplicates</div><div class="mt-2 text-xl font-semibold text-amber-700">{{ selected_batch.rows_skipped_duplicate }}</div></div>
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Analyzed</div><div class="mt-2 text-xl font-semibold">{{ selected_batch.analyzed_rows }}</div></div>
    <div class="rounded-2xl bg-white p-4 shadow-soft"><div class="text-xs font-semibold uppercase text-slate-500">Reviewed</div><div class="mt-2 text-xl font-semibold">{{ selected_batch.reviewed_rows }}</div></div>
  </section>

  <section class="rounded-2xl bg-white p-5 shadow-soft">
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div>
        <h2 class="font-semibold text-slate-900">{{ selected_batch.original_filename }}</h2>
        <p class="mt-1 text-sm text-slate-500">Return period {{ selected_batch.return_period or '-' }} · Status {{ selected_batch.status|replace('_',' ')|title }}</p>
      </div>
      <form method="post" action="/tools/accounting/gstr2b/batch/{{ selected_batch.id }}/analyze">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
        <input type="hidden" name="client_id" value="{{ selected_client.id }}" />
        <button type="submit" class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Analyze / Refresh Suggestions</button>
      </form>
    </div>
  </section>

  <section class="space-y-4">
    {% for row in purchases %}
    {% set suggested = nature_by_id.get(row.suggested_nature_id) if row.suggested_nature_id else None %}
    {% set final = nature_by_id.get(row.final_nature_id) if row.final_nature_id else None %}
    <article class="rounded-2xl bg-white p-5 shadow-soft">
      <div class="grid gap-4 xl:grid-cols-12">
        <div class="xl:col-span-4">
          <div class="flex flex-wrap items-center gap-2">
            <h3 class="font-semibold text-slate-900">{{ row.supplier_name or row.supplier_gstin or 'Supplier' }}</h3>
            <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-semibold text-slate-600">{{ row.document_type|replace('_',' ')|title }}</span>
            {% if row.review_status == 'reviewed' %}
            <span class="rounded-full bg-emerald-50 px-2 py-1 text-xs font-semibold text-emerald-700">Reviewed</span>
            {% elif row.review_status == 'suggested' %}
            <span class="rounded-full bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-700">Suggested</span>
            {% else %}
            <span class="rounded-full bg-amber-50 px-2 py-1 text-xs font-semibold text-amber-700">Review required</span>
            {% endif %}
          </div>
          <div class="mt-2 space-y-1 text-sm text-slate-600">
            <div>GSTIN: <span class="font-medium text-slate-900">{{ row.supplier_gstin or '-' }}</span></div>
            <div>Invoice: <span class="font-medium text-slate-900">{{ row.invoice_number }}</span> · {{ row.invoice_date }}</div>
            <div>HSN: {{ row.hsn_code or '-' }} · POS: {{ row.place_of_supply or '-' }}</div>
            {% if row.description_text %}<div class="text-xs text-slate-500">{{ row.description_text }}</div>{% endif %}
          </div>
        </div>

        <div class="xl:col-span-3">
          <div class="grid grid-cols-2 gap-2 text-sm">
            <div class="rounded-xl bg-slate-50 p-2"><div class="text-xs text-slate-500">Taxable</div><div class="font-semibold">₹{{ '%.2f'|format(row.taxable_value) }}</div></div>
            <div class="rounded-xl bg-slate-50 p-2"><div class="text-xs text-slate-500">Invoice Value</div><div class="font-semibold">₹{{ '%.2f'|format(row.invoice_value) }}</div></div>
            <div class="rounded-xl bg-slate-50 p-2"><div class="text-xs text-slate-500">IGST</div><div class="font-semibold">₹{{ '%.2f'|format(row.igst) }}</div></div>
            <div class="rounded-xl bg-slate-50 p-2"><div class="text-xs text-slate-500">CGST + SGST</div><div class="font-semibold">₹{{ '%.2f'|format(row.cgst + row.sgst) }}</div></div>
          </div>
        </div>

        <div class="xl:col-span-5">
          {% if suggested %}
          <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
            <div class="flex flex-wrap items-center justify-between gap-2">
              <div>
                <div class="text-xs font-semibold uppercase text-slate-500">Suggested Nature</div>
                <div class="mt-1 font-semibold text-slate-900">{{ suggested.name }}</div>
              </div>
              <span class="rounded-full px-2.5 py-1 text-xs font-semibold {% if row.suggested_confidence >= 85 %}bg-emerald-100 text-emerald-700{% elif row.suggested_confidence >= 60 %}bg-blue-100 text-blue-700{% else %}bg-amber-100 text-amber-700{% endif %}">{{ row.suggested_confidence }}%</span>
            </div>
            {% if row.suggested_ledger_name %}<div class="mt-2 text-sm text-slate-700">Ledger: <span class="font-semibold">{{ row.suggested_ledger_name }}</span></div>{% endif %}
            {% if explanations.get(row.id) %}
            <ul class="mt-2 space-y-1 text-xs text-slate-600">
              {% for reason in explanations.get(row.id)[:4] %}<li>• {{ reason }}</li>{% endfor %}
            </ul>
            {% endif %}
          </div>
          {% endif %}

          {% if row.review_status != 'pending_analysis' %}
          <form method="post" action="/tools/accounting/gstr2b/purchase/{{ row.id }}/review" class="mt-3 grid gap-3 md:grid-cols-5">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
            <input type="hidden" name="client_id" value="{{ selected_client.id }}" />
            <label class="text-xs font-semibold text-slate-600 md:col-span-2">
              Final Nature
              <select name="final_nature_id" required class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-2 py-2 text-sm">
                {% for nature in natures %}
                <option value="{{ nature.id }}" {% if (final and final.id == nature.id) or (not final and suggested and suggested.id == nature.id) %}selected{% endif %}>{{ nature.name }}</option>
                {% endfor %}
              </select>
            </label>
            <label class="text-xs font-semibold text-slate-600 md:col-span-2">
              Final Tally Ledger
              <select name="final_ledger_name" class="mt-1 w-full rounded-xl border border-slate-300 bg-white px-2 py-2 text-sm">
                <option value="">No ledger selected yet</option>
                {% for mapping in mappings %}
                <option value="{{ mapping.ledger_name }}" {% if row.final_ledger_name == mapping.ledger_name or (not row.final_ledger_name and row.suggested_ledger_name == mapping.ledger_name) %}selected{% endif %}>{{ mapping.ledger_name }}</option>
                {% endfor %}
              </select>
            </label>
            <div class="flex items-end">
              <button type="submit" class="w-full rounded-xl bg-slate-900 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-800">{{ 'Update Review' if row.review_status == 'reviewed' else 'Confirm / Correct' }}</button>
            </div>
          </form>
          {% else %}
          <p class="mt-3 text-sm text-amber-700">Run Analyze / Refresh Suggestions before reviewing this invoice.</p>
          {% endif %}
        </div>
      </div>
    </article>
    {% else %}
    <div class="rounded-2xl bg-white p-8 text-center text-sm text-slate-500 shadow-soft">This batch has no imported purchase documents.</div>
    {% endfor %}
  </section>
  {% endif %}
  {% endif %}
</div>
{% endblock %}