@using PowderCoating.Web.Controllers
@{
    ViewData["Title"] = "Reconcile";
    var recon    = ViewBag.Recon    as PowderCoating.Core.Entities.BankReconciliation;
    var deposits = ViewBag.Deposits as List<ReconciliationItem> ?? new();
    var payments = ViewBag.Payments as List<ReconciliationItem> ?? new();
}

<div class="d-flex align-items-center mb-3 gap-2 flex-wrap">
    <a asp-action="Index" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i>All Reconciliations
    </a>
    <h4 class="mb-0 fw-semibold ms-2">Reconcile: @recon?.Account?.Name</h4>
    <span class="text-muted small">Statement date: @recon?.StatementDate.ToString("MMM d, yyyy")</span>
</div>

@if (TempData["Error"] != null)
{
    <div class="alert alert-danger alert-permanent alert-dismissible fade show">
        @TempData["Error"]
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
}

<div class="row g-3 mb-3">
    <div class="col-md-3 text-center">
        <div class="card shadow-sm py-3">
            <div class="fw-bold fs-5">@recon?.BeginningBalance.ToString("C")</div>
            <div class="text-muted small">Beginning Balance</div>
        </div>
    </div>
    <div class="col-md-3 text-center">
        <div class="card shadow-sm py-3">
            <div class="fw-bold fs-5">@recon?.EndingBalance.ToString("C")</div>
            <div class="text-muted small">Statement Ending Balance</div>
        </div>
    </div>
    <div class="col-md-3 text-center">
        <div class="card shadow-sm py-3">
            <div class="fw-bold fs-5" id="clearedBalance">@recon?.BeginningBalance.ToString("C")</div>
            <div class="text-muted small">Cleared Balance</div>
        </div>
    </div>
    <div class="col-md-3 text-center">
        <div class="card shadow-sm py-3">
            <div class="fw-bold fs-5" id="difference">&mdash;</div>
            <div class="text-muted small">Difference</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header fw-semibold">Deposits / Credits</div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <thead class="table-light">
                        <tr><th>Date</th><th>Reference</th><th class="text-end">Amount</th><th class="text-center">Cleared</th></tr>
                    </thead>
                    <tbody>
                    @if (!deposits.Any())
                    {
                        <tr><td colspan="4" class="text-center text-muted py-3">No deposits found.</td></tr>
                    }
                    @foreach (var item in deposits.OrderBy(d => d.Date))
                    {
                        <tr class="recon-row" data-type="@item.EntityType" data-id="@item.EntityId"
                            data-amount="@item.Amount.ToString("F2")" data-direction="deposit">
                            <td class="small">@item.Date.ToString("MMM d")</td>
                            <td class="small text-truncate" style="max-width:120px" title="@item.Description">@item.Reference</td>
                            <td class="text-end">@item.Amount.ToString("C")</td>
                            <td class="text-center">
                                <input type="checkbox" class="form-check-input cleared-checkbox"
                                       @(item.IsCleared ? "checked" : "") />
                            </td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card shadow-sm">
            <div class="card-header fw-semibold">Payments / Debits</div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <thead class="table-light">
                        <tr><th>Date</th><th>Reference</th><th class="text-end">Amount</th><th class="text-center">Cleared</th></tr>
                    </thead>
                    <tbody>
                    @if (!payments.Any())
                    {
                        <tr><td colspan="4" class="text-center text-muted py-3">No payments found.</td></tr>
                    }
                    @foreach (var item in payments)
                    {
                        <tr class="recon-row" data-type="@item.EntityType" data-id="@item.EntityId"
                            data-amount="@item.Amount.ToString("F2")" data-direction="payment">
                            <td class="small">@item.Date.ToString("MMM d")</td>
                            <td class="small text-truncate" style="max-width:120px" title="@item.Description">@item.Reference</td>
                            <td class="text-end">@item.Amount.ToString("C")</td>
                            <td class="text-center">
                                <input type="checkbox" class="form-check-input cleared-checkbox"
                                       @(item.IsCleared ? "checked" : "") />
                            </td>
                        </tr>
                    }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- AI Auto-Match panel -->
<div class="card shadow-sm mb-3 border-0 bg-light">
    <div class="card-body d-flex align-items-center gap-3 flex-wrap">
        <div>
            <span class="fw-semibold"><i class="bi bi-robot text-primary me-1"></i>AI Auto-Match</span>
            <span class="text-muted small ms-2">Let Claude suggest which transactions to clear based on amounts and dates.</span>
        </div>
        <button id="aiMatchBtn" class="btn btn-outline-primary btn-sm ms-auto" type="button">
            <i class="bi bi-magic me-1"></i>Suggest Matches
        </button>
    </div>
    <div id="aiMatchResult" class="d-none px-3 pb-3">
        <div id="aiMatchInsights" class="mb-2 text-muted small"></div>
        <div id="aiMatchActions" class="d-flex gap-2 flex-wrap">
            <button id="aiMatchAccept" class="btn btn-sm btn-success d-none">
                <i class="bi bi-check-all me-1"></i>Apply All Suggestions
            </button>
        </div>
    </div>
</div>

<form asp-action="Complete" method="post" id="completeForm">
    @Html.AntiForgeryToken()
    <input type="hidden" name="id" value="@recon?.Id" />
    <input type="hidden" name="difference" id="differenceHidden" value="9999" />
    <button type="submit" class="btn btn-success" id="completeBtn" disabled>
        <i class="bi bi-check-circle me-1"></i>Complete Reconciliation
    </button>
    <span class="ms-2 text-muted small">Complete is enabled only when difference is $0.00</span>
</form>

@section Scripts {
<script>
(function() {
    const reconId    = @recon?.Id;
    const beginning  = @recon?.BeginningBalance.ToString("F2");
    const ending     = @recon?.EndingBalance.ToString("F2");
    let token        = document.querySelector('input[name="__RequestVerificationToken"]').value;

    function recalculate() {
        let clearedDeposits = 0, clearedPayments = 0;
        document.querySelectorAll('.recon-row').forEach(row => {
            const cb  = row.querySelector('.cleared-checkbox');
            const amt = parseFloat(row.dataset.amount);
            if (!cb.checked) return;
            if (row.dataset.direction === 'deposit') clearedDeposits += amt;
            else clearedPayments += amt;
        });

        const cleared    = beginning + clearedDeposits - clearedPayments;
        const difference = ending - cleared;

        document.getElementById('clearedBalance').textContent =
            cleared.toLocaleString('en-US', { style: 'currency', currency: 'USD' });

        const diffEl = document.getElementById('difference');
        diffEl.textContent = difference.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
        diffEl.className = Math.abs(difference) < 0.005 ? 'fw-bold fs-5 text-success' : 'fw-bold fs-5 text-danger';

        document.getElementById('differenceHidden').value = difference.toFixed(2);
        document.getElementById('completeBtn').disabled = Math.abs(difference) >= 0.005;
    }

    document.querySelectorAll('.cleared-checkbox').forEach(cb => {
        cb.addEventListener('change', async function() {
            const row  = this.closest('.recon-row');
            const type = row.dataset.type;
            const id   = row.dataset.id;
            const cleared = this.checked;

            try {
                const resp = await fetch('/BankReconciliations/ToggleCleared', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'RequestVerificationToken': token
                    },
                    body: new URLSearchParams({
                        reconId, entityType: type, entityId: id, isCleared: cleared
                    })
                });
                if (!resp.ok) this.checked = !cleared; // revert on error
            } catch {
                this.checked = !cleared; // revert on network error
            }
            recalculate();
        });
    });

    recalculate();

    // ── AI Auto-Match ──────────────────────────────────────────────────────────
    let aiSuggestions = [];

    document.getElementById('aiMatchBtn')?.addEventListener('click', async function() {
        const btn = this;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Analyzing&hellip;';

        try {
            const resp = await fetch('/BankReconciliations/AiSuggestMatches', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'RequestVerificationToken': token
                },
                body: new URLSearchParams({ reconId })
            });
            const data = await resp.json();

            const resultEl = document.getElementById('aiMatchResult');
            const insightsEl = document.getElementById('aiMatchInsights');
            resultEl.classList.remove('d-none');

            if (!data.success) {
                insightsEl.innerHTML = `<span class="text-danger"><i class="bi bi-exclamation-triangle me-1"></i>${data.errorMessage || 'AI unavailable.'}</span>`;
                return;
            }

            aiSuggestions = data.suggestedCleared || [];

            // Highlight suggested rows
            aiSuggestions.forEach(s => {
                const row = document.querySelector(`.recon-row[data-type="${s.entityType}"][data-id="${s.entityId}"]`);
                if (row) {
                    row.classList.add('table-info');
                    const td = row.querySelector('td:last-child');
                    if (td) {
                        const pct = Math.round(s.confidence * 100);
                        td.insertAdjacentHTML('afterend', `<td class="small text-info" style="white-space:nowrap">${pct}% &mdash; ${s.reason}</td>`);
                    }
                }
            });

            // Insights
            const insights = data.insights || [];
            insightsEl.innerHTML = insights.map(i => `<i class="bi bi-lightbulb me-1 text-warning"></i>${i}`).join('<br>');

            if (aiSuggestions.length > 0) {
                document.getElementById('aiMatchAccept').classList.remove('d-none');
            } else {
                insightsEl.innerHTML += '<br><span class="text-muted">No high-confidence suggestions found &mdash; review items manually.</span>';
            }
        } catch (err) {
            document.getElementById('aiMatchInsights').innerHTML = '<span class="text-danger">Error contacting AI service.</span>';
            document.getElementById('aiMatchResult').classList.remove('d-none');
        } finally {
            btn.disabled = false;
            btn.innerHTML = '<i class="bi bi-magic me-1"></i>Suggest Matches';
        }
    });

    document.getElementById('aiMatchAccept')?.addEventListener('click', async function() {
        for (const s of aiSuggestions) {
            const row = document.querySelector(`.recon-row[data-type="${s.entityType}"][data-id="${s.entityId}"]`);
            if (!row) continue;
            const cb = row.querySelector('.cleared-checkbox');
            if (!cb || cb.checked) continue;
            cb.checked = true;
            // Persist via the existing toggle endpoint
            try {
                await fetch('/BankReconciliations/ToggleCleared', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'RequestVerificationToken': token },
                    body: new URLSearchParams({ reconId, entityType: s.entityType, entityId: s.entityId, isCleared: true })
                });
            } catch {}
        }
        recalculate();
        this.textContent = 'Applied';
        this.disabled = true;
    });
})();
</script>
}