{% extends "base.html" %}

{% block page_title %}My Store Credit{% endblock %}

{% block content %}
<main class="mx-auto my-6 w-full max-w-5xl space-y-5 px-4 sm:px-6">
    {% if not eligible %}
    {% if data_error %}
    <div class="rounded-xl border border-danger bg-danger/10 p-4 text-sm leading-6 text-danger" role="alert">
        {{ error | default(value='Store Credit data could not be loaded. Ask an administrator to check tenant setup and applied migrations, then retry.') }}
    </div>
    {% else %}
    <div class="flex flex-col justify-between gap-6 rounded-2xl border border-divider bg-gradient-to-br from-canvas to-surface p-5 text-foreground shadow-sm sm:flex-row sm:items-center sm:p-7">
        <div class="min-w-0">
            <span class="text-xs font-bold uppercase tracking-wider text-muted">Available Credit</span>
            <h1 class="my-2 break-words text-4xl font-extrabold leading-tight text-brand sm:text-5xl">{{ currency_symbol | default(value='₹') }}{{ available | default(value=0) | price }}</h1>
            <p class="m-0 text-sm text-muted">Credit Limit: {{ currency_symbol | default(value='₹') }}{{ credit_limit | default(value=0) | price }}</p>
        </div>
    </div>
    <div class="rounded-xl border border-divider bg-canvas p-4 text-sm leading-6 text-foreground" role="status">
        {{ error | default(value='You do not have an active store credit account yet. Please contact the store to request a credit line.') }}
    </div>
    {% endif %}
    {% else %}
    <!-- Credit Account Summary Card -->
    <div class="flex flex-col justify-between gap-6 rounded-2xl border border-divider bg-gradient-to-br from-canvas to-surface p-5 text-foreground shadow-sm sm:flex-row sm:items-center sm:p-7">
        <div class="min-w-0">
            <span class="text-xs font-bold uppercase tracking-wider text-muted">Available Credit</span>
            <h1 class="my-2 break-words text-4xl font-extrabold leading-tight text-brand sm:text-5xl">{{ currency_symbol | default(value='₹') }}{{ available | default(value=0) | price }}</h1>
            <p class="m-0 text-sm text-muted">Credit Limit: {{ currency_symbol | default(value='₹') }}{{ credit_limit | default(value=0) | price }}</p>
        </div>
        <div class="grid w-full grid-cols-2 gap-4 sm:w-auto sm:min-w-64 sm:grid-cols-1">
            <div class="flex min-w-0 flex-col gap-1">
                <span class="text-xs font-medium text-muted">Outstanding Balance</span>
                <span class="text-lg font-bold text-danger">{{ currency_symbol | default(value='₹') }}{{ outstanding | default(value=0) | price }}</span>
            </div>
            <div class="flex min-w-0 flex-col gap-1">
                <span class="text-xs font-medium text-muted">Interest Due</span>
                <span class="text-lg font-bold text-warning">{{ currency_symbol | default(value='₹') }}{{ interest_due | default(value=0) | price }}</span>
            </div>
        </div>
    </div>

    <!-- Grace Period / Overdue Warning Alert -->
    {% if outstanding | default(value=0) > 0 %}
    <div class="rounded-xl border p-4 text-sm leading-6 {% if overdue %}border-danger bg-danger/10 text-danger{% else %}border-success bg-success/10 text-success{% endif %}" role="status">
        <div class="flex items-start gap-3">
            <span aria-hidden="true">{% if overdue %}⚠️{% else %}ℹ️{% endif %}</span>
            <div>
                {% if overdue %}
                <strong>Overdue Notice:</strong> Your grace period has ended. Daily interest of {{ daily_interest_rate_pct | default(value=0) }}% is being accrued. Please pay the outstanding balance immediately.
                {% else %}
                {% if days_remaining | default(value=0) == 0 %}
                <strong>Interest-Free Period:</strong> Your grace period ends today. Daily interest of {{ daily_interest_rate_pct | default(value=0) }}% starts tomorrow.
                {% else %}
                <strong>Interest-Free Period:</strong> You have <strong>{{ days_remaining | default(value=0) }} days</strong> remaining before interest starts accruing at {{ daily_interest_rate_pct | default(value=0) }}% per day.
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Payment CTA -->
    {% set total_due = outstanding | default(value=0) + interest_due | default(value=0) %}
    {% if total_due > 0 %}
    <div class="flex flex-col justify-between gap-4 rounded-2xl border border-divider bg-surface p-5 sm:flex-row sm:items-center sm:p-6">
        <div class="min-w-0">
            <h3 class="m-0 text-lg font-bold text-foreground">Pay Outstanding Amount</h3>
            <p class="mt-2 mb-0 text-sm leading-6 text-muted">Clear your outstanding balance of <strong>{{ currency_symbol | default(value='₹') }}{{ total_due | price }}</strong></p>
        </div>
        <div class="payment-action">
            <button type="button" id="btn-pay-credit" class="blocks-button blocks-button-primary min-h-12 w-full sm:w-auto" data-amount="{{ total_due }}" aria-live="polite">
                Pay Outstanding ({{ currency_symbol | default(value='₹') }}{{ total_due | price }})
            </button>
        </div>
    </div>
    {% endif %}

    <!-- Gateway Context Hidden Config -->
    <div id="credit-payment-config" hidden
         data-gateway-script-url="{{ gateway_script_url | default(value='') }}"
         data-active-gateway="{{ active_gateway | default(value='') }}"
         data-online-payment-available="{% if online_payment_available %}true{% else %}false{% endif %}"
         data-currency-symbol="{{ currency_symbol | default(value='₹') }}"
         data-currency-code="{{ currency_code | default(value='INR') }}"></div>

    <!-- Ledger & Activity History -->
    <section class="overflow-hidden rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6">
        <h3 class="mb-4 text-lg font-bold text-foreground">Transaction Ledger</h3>
        <div class="max-w-full overflow-x-auto rounded-xl border border-divider">
            <table class="w-full min-w-[38rem] border-collapse bg-surface text-left text-sm">
                <caption class="sr-only">Your store credit transactions</caption>
                <thead>
                    <tr>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Date</th>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Type</th>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Amount</th>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Reference / Description</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in ledger | default(value=[]) %}
                    <tr>
                        <td class="border-b border-divider px-3 py-3 align-top text-foreground sm:px-4">{{ item.created_at | date_in_tz(timezone=settings.timezone) }}</td>
                        <td class="border-b border-divider px-3 py-3 align-top text-foreground sm:px-4">
                            <span class="blocks-status-pill {% if item.type == 'debit' %}is-danger{% elif item.type == 'interest' %}is-warning{% else %}is-success{% endif %}">
                                {{ item.type | capitalize }}
                            </span>
                        </td>
                        <td class="whitespace-nowrap border-b border-divider px-3 py-3 align-top font-semibold sm:px-4 {% if item.type == 'debit' or item.type == 'interest' %}text-danger{% else %}text-success{% endif %}">
                            {% if item.type == 'debit' or item.type == 'interest' %}-{% else %}+{% endif %}{{ currency_symbol | default(value='₹') }}{{ item.amount | default(value=0) | price }}
                        </td>
                        <td class="border-b border-divider px-3 py-3 align-top text-foreground sm:px-4">
                            {% if item.order_ref %}
                            Order: <a href="/plugins/orders/my-order/{{ item.order_ref }}">{{ item.order_ref }}</a>
                            {% elif item.gateway_ref %}
                            Payment Ref: {{ item.gateway_ref }}
                            {% endif %}
                            {% if item.note %}<span class="mt-1 block text-xs text-muted">{{ item.note }}</span>{% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr class="credit-empty-row">
                        <td colspan="4" class="p-6 text-center text-muted">No transactions recorded yet.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <!-- Daily Interest Accruals (Collapsible) -->
    {% if interest_logs | default(value=[]) %}
    <section class="overflow-hidden rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6">
        <details>
            <summary class="min-h-11 cursor-pointer rounded-lg font-semibold text-brand underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand">View Daily Interest Accruals ({{ interest_logs | length }})</summary>
            <div class="mt-3 max-w-full overflow-x-auto rounded-xl border border-divider">
                <table class="w-full min-w-[38rem] border-collapse bg-surface text-left text-sm">
                    <caption class="sr-only">Daily interest charged to your store credit account</caption>
                    <thead>
                        <tr>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Accrual Date</th>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Principal Base</th>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Daily Rate</th>
                        <th class="whitespace-nowrap border-b border-divider bg-canvas px-3 py-3 text-xs font-bold uppercase tracking-wide text-muted sm:px-4">Amount Charged</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for log in interest_logs %}
                        <tr>
                            <td class="border-b border-divider px-3 py-3 align-top text-foreground sm:px-4">{{ log.accrual_date | date_in_tz(timezone=settings.timezone) }}</td>
                            <td class="border-b border-divider px-3 py-3 align-top text-foreground sm:px-4">{{ currency_symbol | default(value='₹') }}{{ log.principal | default(value=0) | price }}</td>
                            <td class="border-b border-divider px-3 py-3 align-top text-foreground sm:px-4">{{ log.rate_pct | default(value=0) }}%</td>
                            <td class="border-b border-divider px-3 py-3 align-top font-semibold text-danger sm:px-4">+{{ currency_symbol | default(value='₹') }}{{ log.amount | default(value=0) | price }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </details>
    </section>
    {% endif %}
    {% endif %}
</main>
{% endblock %}