<script setup>
import AppIcon from './AppIcon.vue';
import RowActions from './RowActions.vue';
import { boot, dateLabel, money, taka } from '../format';

/**
 * The sheet. Wide screens get the table, narrow screens the card list — which
 * one shows is decided by CSS, exactly as before, so print keeps the table.
 */
const props = defineProps({
    expenses: { type: Array, default: () => [] },
    summary: { type: Object, required: true },
    isFiltered: { type: Boolean, default: false },
    loading: { type: Boolean, default: false },
    refreshing: { type: Boolean, default: false },
    deletingId: { type: [Number, null], default: null },
    canCreate: { type: Boolean, default: false },
    canEdit: { type: Boolean, default: false },
    canDelete: { type: Boolean, default: false },
});

const emit = defineEmits(['edit', 'delete', 'add']);
</script>

<template>
    <section class="panel" :class="{ 'is-refreshing': refreshing }">
        <div class="panel-head no-print">
            <span class="head-icon"><AppIcon name="receipt" :size="16"/></span>
            <span class="panel-title">খরচের তালিকা</span>
            <span class="spacer"></span>
            <span class="panel-count tabular">{{ summary.count }} টি এন্ট্রি</span>
        </div>

        <!-- first load -->
        <div v-if="loading" class="skeleton-list" aria-hidden="true">
            <span v-for="n in 5" :key="n" class="skeleton-row"></span>
        </div>

        <div v-else-if="!expenses.length" class="empty">
            <div class="empty-icon"><AppIcon name="receipt" :size="24"/></div>
            <strong>কোনো খরচ পাওয়া যায়নি</strong>
            <template v-if="isFiltered">ফিল্টার বদলে আবার চেষ্টা করুন।</template>
            <template v-else-if="canCreate">“নতুন খরচ” বাটনে চাপ দিয়ে প্রথম এন্ট্রি যোগ করুন।</template>
            <template v-else>এখনো কোনো খরচ যোগ করা হয়নি।</template>
            <button v-if="!isFiltered && canCreate" type="button" class="btn btn-primary btn-sm"
                    style="margin-top:12px" @click="emit('add')">
                <AppIcon name="plus" :size="15"/>
                নতুন খরচ
            </button>
        </div>

        <template v-else>
            <!-- wide screens + print: the sheet -->
            <div class="table-wrap">
                <table class="sheet">
                    <thead>
                        <tr>
                            <th class="col-num">#</th>
                            <th class="col-date">{{ boot.labels.date }}</th>
                            <th class="col-cat">{{ boot.labels.category }}</th>
                            <th class="col-desc">{{ boot.labels.description }}</th>
                            <th class="col-pay">{{ boot.labels.payment_method }}</th>
                            <th class="col-remark">{{ boot.labels.remark }}</th>
                            <th class="col-amount">{{ boot.labels.amount }}</th>
                            <th v-if="canEdit || canDelete" class="col-actions no-print">
                                <span class="sr-only">অ্যাকশন</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(expense, index) in expenses" :key="expense.id">
                            <td class="col-num tabular">{{ index + 1 }}</td>
                            <td class="col-date tabular">{{ dateLabel(expense.expense_date) }}</td>
                            <td class="col-cat">
                                <span class="cat" :class="`tint-${expense.category_tint}`">
                                    <span class="cat-icon"><AppIcon :name="expense.category_icon" :size="15"/></span>
                                    <span class="cat-name">{{ expense.category }}</span>
                                </span>
                            </td>
                            <td class="col-desc">{{ expense.description }}</td>
                            <td class="col-pay">
                                <span class="pay" :data-pay="expense.payment_method">
                                    <AppIcon :name="expense.payment_icon" :size="15"/>
                                    {{ expense.payment_method }}
                                </span>
                            </td>
                            <td class="col-remark tabular">{{ expense.remark }}</td>
                            <td class="col-amount tabular">{{ money(expense.amount) }}</td>
                            <td v-if="canEdit || canDelete" class="col-actions no-print">
                                <div class="row-actions">
                                    <RowActions :expense="expense" compact :busy="deletingId === expense.id"
                                                :can-edit="canEdit" :can-delete="canDelete"
                                                @edit="emit('edit', expense)" @delete="emit('delete', expense)"/>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="6" class="total-label">{{ boot.labels.total }}</td>
                            <td class="total-value tabular">{{ money(summary.total) }}</td>
                            <td v-if="canEdit || canDelete" class="no-print"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <!-- narrow screens: cards -->
            <div class="cards">
                <article v-for="expense in expenses" :key="expense.id" class="xcard"
                         :class="`tint-${expense.category_tint}`">
                    <div class="xcard-top">
                        <span class="cat-icon"><AppIcon :name="expense.category_icon" :size="16"/></span>
                        <div class="xcard-body">
                            <div class="xcard-desc">{{ expense.description }}</div>
                            <div class="xcard-sub">
                                <span class="chip">{{ expense.category }}</span>
                                <span class="pay" :data-pay="expense.payment_method">
                                    <AppIcon :name="expense.payment_icon" :size="14"/>
                                    {{ expense.payment_method }}
                                </span>
                                <span v-if="expense.expense_date" class="xcard-date tabular">
                                    <AppIcon name="calendar" :size="13"/>
                                    {{ dateLabel(expense.expense_date) }}
                                </span>
                            </div>
                        </div>
                        <div class="xcard-amount tabular">{{ taka(expense.amount) }}</div>
                    </div>

                    <div v-if="expense.remark" class="xcard-remark tabular">
                        <AppIcon name="receipt" :size="14"/>
                        {{ expense.remark }}
                    </div>

                    <div v-if="canEdit || canDelete" class="xcard-actions">
                        <RowActions :expense="expense" :busy="deletingId === expense.id"
                                    :can-edit="canEdit" :can-delete="canDelete"
                                    @edit="emit('edit', expense)" @delete="emit('delete', expense)"/>
                    </div>
                </article>

                <div class="cards-total">
                    <AppIcon name="coins" :size="19"/>
                    <span>{{ boot.labels.total }}</span>
                    <span class="spacer"></span>
                    <span class="amount tabular">{{ taka(summary.total) }}</span>
                </div>
            </div>
        </template>
    </section>
</template>
