<?php
/**
 * Couple Portal — Payment History & Transaction Logs (RC-017)
 */

function format_money(float $amount, string $currency = 'IDR'): string
{
    if ($currency === 'IDR') {
        return 'Rp ' . number_format($amount, 0, ',', '.');
    }
    return $currency . ' ' . number_format($amount, 2, '.', ',');
}

$currency = $summary['currency'] ?? 'IDR';
?>

<div class="max-w-6xl mx-auto space-y-6">

    <!-- ── Header Section ────────────────────────────────────────────────── -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <div class="page-breadcrumb">
                <a href="<?= url('/app/couple/budget') ?>">Budget Planner</a>
                <span class="sep">/</span>
                <span>Payment History</span>
            </div>
            <h1 class="page-h1">
                <span class="page-header-icon">
                    <i class="fa-solid fa-receipt"></i>
                </span>
                Payment History
            </h1>
            <p class="page-subtitle">All payment transactions and deposits recorded for your wedding.</p>
        </div>
        <div>
            <a href="<?= url('/app/couple/budget') ?>" class="cp-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back
            </a>
        </div>
    </div>

    <!-- ── Alerts ────────────────────────────────────────────────────────── -->
    <?php if (!empty($success)): ?>
        <div class="p-4 bg-emerald-50 border border-emerald-150 text-emerald-800 rounded-2xl flex items-center gap-3 text-sm shadow-sm">
            <i class="fa-solid fa-circle-check text-emerald-500 text-base flex-shrink-0"></i>
            <div class="font-semibold"><?= escape_html($success) ?></div>
        </div>
    <?php endif; ?>
    <?php if (!empty($error)): ?>
        <div class="p-4 bg-rose-50 border border-rose-150 text-rose-800 rounded-2xl flex items-center gap-3 text-sm shadow-sm">
            <i class="fa-solid fa-circle-xmark text-rose-500 text-base flex-shrink-0"></i>
            <div class="font-semibold"><?= escape_html($error) ?></div>
        </div>
    <?php endif; ?>

    <!-- ── Payments Table ────────────────────────────────────────────────── -->
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
        <div class="p-5 border-b border-slate-50 flex items-center justify-between">
            <h3 class="font-bold text-slate-800 text-sm">Transaction Logs</h3>
            <span class="text-xxs font-bold text-slate-400 uppercase tracking-wider"><?= $total_payments ?> Records</span>
        </div>

        <?php if (empty($payments)): ?>
            <div class="text-center py-12 text-slate-400 text-xs">
                No payment transactions recorded for this workspace yet.
            </div>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-slate-50 text-[10px] font-bold text-slate-400 uppercase tracking-wider border-b border-slate-100">
                            <th class="py-3 px-5 w-32">Date</th>
                            <th class="py-3 px-5">Expense Item</th>
                            <th class="py-3 px-5">Category</th>
                            <th class="py-3 px-5">Method</th>
                            <th class="py-3 px-5">Reference / Notes</th>
                            <th class="py-3 px-5 text-right w-44">Amount</th>
                            <th class="py-3 px-5 w-16 text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-xs">
                        <?php foreach ($payments as $pay): 
                            $expenseId = (int) $pay['expense_id'];
                        ?>
                            <tr class="hover:bg-slate-50/50 transition-colors">
                                <td class="py-3.5 px-5 text-slate-700 font-bold">
                                    <?= date('d M Y', strtotime($pay['payment_date'])) ?>
                                </td>
                                <td class="py-3.5 px-5 font-bold text-slate-800">
                                    <a href="<?= url("/app/couple/budget/expenses/{$expenseId}") ?>" class="hover:text-[#D4A28C] transition-all">
                                        <?= escape_html($pay['expense_name']) ?>
                                    </a>
                                </td>
                                <td class="py-3.5 px-5 text-slate-500 font-medium">
                                    <?= escape_html($pay['category_name']) ?>
                                </td>
                                <td class="py-3.5 px-5 text-slate-500 font-medium">
                                    <?= escape_html($pay['payment_method'] ?? 'Bank Transfer') ?>
                                </td>
                                <td class="py-3.5 px-5 text-slate-500">
                                    <?php if ($pay['reference_no']): ?>
                                        <code class="text-[10px] bg-slate-100 text-slate-700 px-1.5 py-0.5 rounded font-mono mr-1.5">
                                            <?= escape_html($pay['reference_no']) ?>
                                        </code>
                                    <?php endif; ?>
                                    <?= escape_html($pay['notes'] ?? 'Installment payment') ?>
                                </td>
                                <td class="py-3.5 px-5 text-right font-black text-emerald-600">
                                    <?= format_money((float)$pay['amount'], $currency) ?>
                                </td>
                                <td class="py-3.5 px-5 text-center">
                                    <div class="flex items-center justify-center gap-1">
                                        <a href="<?= url("/app/couple/budget/expenses/{$expenseId}") ?>" class="p-1 text-slate-400 hover:text-[#D4A28C] hover:bg-slate-50 rounded transition-all" title="View parent expense">
                                            <i class="fa-solid fa-eye text-xs"></i>
                                        </a>
                                        <form method="POST" action="<?= url('/app/couple/budget/payments/delete/' . $pay['id']) ?>" onsubmit="return confirm('Are you sure you want to delete this payment record? This will adjust the actual paid amounts.');" class="inline">
                                            <input type="hidden" name="_csrf" value="<?= escape_html($_SESSION['csrf_token'] ?? '') ?>">
                                            <button type="submit" class="p-1 text-rose-500 hover:text-rose-700 hover:bg-rose-50 rounded transition-all text-xs" title="Delete payment">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>

            <!-- Pagination block -->
            <?php if ($total_pages > 1): ?>
                <div class="p-4 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
                    <span class="text-xxs text-slate-400 font-bold uppercase">
                        Page <?= $page ?> of <?= $total_pages ?>
                    </span>
                    <div class="flex items-center gap-1">
                        <!-- Previous Page -->
                        <?php if ($page > 1): ?>
                            <a href="<?= url('/app/couple/budget/payments?page=' . ($page - 1)) ?>" class="px-3 py-1 bg-white hover:bg-slate-100 border border-slate-200 text-slate-600 rounded-lg text-xs font-bold flex items-center gap-1 transition-all">
                                <i class="fa-solid fa-chevron-left text-[10px]"></i> Previous
                            </a>
                        <?php endif; ?>

                        <!-- Next Page -->
                        <?php if ($page < $total_pages): ?>
                            <a href="<?= url('/app/couple/budget/payments?page=' . ($page + 1)) ?>" class="px-3 py-1 bg-white hover:bg-slate-100 border border-slate-200 text-slate-600 rounded-lg text-xs font-bold flex items-center gap-1 transition-all">
                                Next <i class="fa-solid fa-chevron-right text-[10px]"></i>
                            </a>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endif; ?>

        <?php endif; ?>
    </div>

</div>
