{% extends 'base.html' %}

{% block title %}Reconcile Statement - {{ bank_account.name }}{% endblock %}

{% block page_pretitle %}
<div class="page-pretitle">
    <a href="{% url 'core:bank_account_list' %}">Bank Accounts</a> / 
    <a href="{% url 'core:bank_statement_list' bank_account.pk %}">{{ bank_account.name }}</a> / 
    <a href="{% url 'core:bank_statement_detail' bank_account.pk statement.pk %}">Statement</a> / 
    Reconcile
</div>
{% endblock %}

{% block page_title %}
Reconcile {{ statement.statement_period_start|date:"F Y" }} Statement
{% endblock %}

{% block page_actions %}
<a href="{% url 'core:bank_statement_detail' bank_account.pk statement.pk %}" class="btn btn-secondary">
    <i class="ti ti-arrow-left"></i>
    Back to Statement
</a>
{% endblock %}

{% block content %}
<!-- Reconciliation Instructions -->
<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info">
            <h4 class="alert-title"><i class="ti ti-info-circle"></i> How to Reconcile</h4>
            <div class="text-muted">
                <p>Match each bank statement line with a corresponding system transaction:</p>
                <ul class="mb-0">
                    <li><strong>Suggested Matches:</strong> Review AI-suggested matches based on date, amount, and description</li>
                    <li><strong>Manual Matching:</strong> Search and select the correct transaction if suggestions don't match</li>
                    <li><strong>Create Transaction:</strong> If no match exists, create a new transaction from the statement line</li>
                    <li><strong>Confidence Score:</strong> Higher percentages indicate better matches</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Unreconciled Lines -->
{% if line_matches %}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Unreconciled Statement Lines</h3>
                <div class="card-actions">
                    <span class="badge bg-warning">{{ line_matches|length }} lines to reconcile</span>
                </div>
            </div>
            <div class="card-body">
                {% for item in line_matches %}
                <div class="card mb-3 border-warning">
                    <div class="card-header bg-warning-lt">
                        <div class="row align-items-center">
                            <div class="col">
                                <h4 class="mb-0">
                                    Line #{{ item.line.line_number }}: {{ item.line.description|truncatewords:10 }}
                                </h4>
                                <div class="text-muted">
                                    <small>
                                        {{ item.line.date|date:"d M Y" }} | 
                                        {% if item.line.debit %}
                                            <span class="text-danger">Debit: RM {{ item.line.debit|floatformat:2 }}</span>
                                        {% else %}
                                            <span class="text-success">Credit: RM {{ item.line.credit|floatformat:2 }}</span>
                                        {% endif %}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        {% if item.matches %}
                        <h5 class="mb-3">Suggested Matches:</h5>
                        <div class="list-group">
                            {% for match in item.matches %}
                            <div class="list-group-item">
                                <div class="row align-items-center">
                                    <div class="col">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-fill">
                                                <div class="font-weight-medium">
                                                    {{ match.reference_no }} - {{ match.description|truncatewords:15 }}
                                                </div>
                                                <div class="text-muted">
                                                    <small>
                                                        {{ match.date|date:"d M Y" }} | 
                                                        {{ match.get_transaction_type_display }} | 
                                                        RM {{ match.amount|floatformat:2 }}
                                                        {% if match.contact %}
                                                            | {{ match.contact.name }}
                                                        {% endif %}
                                                    </small>
                                                </div>
                                            </div>
                                            <div class="ms-3">
                                                <button class="btn btn-success btn-sm" 
                                                        onclick="reconcileLine({{ item.line.pk }}, {{ match.pk }})">
                                                    <i class="ti ti-check"></i> Match
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% else %}
                        <div class="alert alert-warning mb-0">
                            <i class="ti ti-alert-triangle"></i> No matching transactions found for this line.
                            <div class="mt-2">
                                <button class="btn btn-primary btn-sm">
                                    <i class="ti ti-plus"></i> Create New Transaction
                                </button>
                                <button class="btn btn-secondary btn-sm">
                                    <i class="ti ti-search"></i> Search Manually
                                </button>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="row">
    <div class="col-12">
        <div class="empty">
            <div class="empty-icon text-success">
                <i class="ti ti-check"></i>
            </div>
            <p class="empty-title">All Lines Reconciled!</p>
            <p class="empty-subtitle text-muted">
                All statement lines have been successfully matched with system transactions.
            </p>
            <div class="empty-action">
                <a href="{% url 'core:bank_statement_detail' bank_account.pk statement.pk %}" class="btn btn-primary">
                    <i class="ti ti-arrow-left"></i>
                    Back to Statement
                </a>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Reconciliation Guide -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Reconciliation Tips</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h5><i class="ti ti-calendar"></i> Date Matching</h5>
                        <p class="text-muted">
                            System searches for transactions within ±3 days of the statement line date to account for processing delays.
                        </p>
                    </div>
                    <div class="col-md-4">
                        <h5><i class="ti ti-cash"></i> Amount Matching</h5>
                        <p class="text-muted">
                            Amounts must match exactly. Check for fees, charges, or rounding differences if no match is found.
                        </p>
                    </div>
                    <div class="col-md-4">
                        <h5><i class="ti ti-file-text"></i> Description Matching</h5>
                        <p class="text-muted">
                            Fuzzy matching is used for descriptions. Similar wording (e.g., "Petronas" vs "PETRONAS FUEL") will still match.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function reconcileLine(lineId, transactionId) {
    if (!confirm('Are you sure you want to match this line with the selected transaction?')) {
        return;
    }
    
    // TODO: Implement AJAX reconciliation
    // This would call a backend endpoint to mark the line as reconciled
    alert('Reconciliation functionality will be fully implemented in a future update.\n\nFor now, this shows the UI design for the reconciliation process.');
}
</script>
{% endblock %}