<template>
    <Card class="settlement-card">
        <div class="settlement-content">
            <div class="settlement-main">
                <div class="settlement-icon">
                    <BaseIcon name="heroicons:banknotes-solid" class="w-6 h-6 text-success-600" />
                </div>
                <div class="settlement-details">
                    <div class="settlement-amount">
                        {{ formatCurrency(parseFloat(settlement.amount)) }}
                    </div>
                    <div class="settlement-parties">
                        <span class="payer">{{ getPayerName(settlement) }}</span>
                        <BaseIcon name="heroicons:arrow-right" class="w-4 h-4 text-neutral-400 mx-2" />
                        <span class="payee">{{ getPayeeName(settlement) }}</span>
                    </div>
                    <div v-if="settlement.description" class="settlement-description">
                        {{ settlement.description }}
                    </div>
                    <div class="settlement-meta">
                        <span class="settlement-date">{{ formatDate(settlement.settlement_date) }}</span>
                        <span class="settlement-creator">
                            Created by {{ getCreatorName(settlement) }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="settlement-actions">
                <Button variant="ghost" size="sm" @click="$emit('edit', settlement)">
                    <BaseIcon name="heroicons:pencil-square-20-solid" class="w-4 h-4" />
                </Button>
                <Button variant="ghost" size="sm" color="error" @click="$emit('delete', settlement)">
                    <BaseIcon name="heroicons:trash-20-solid" class="w-4 h-4" />
                </Button>
            </div>
        </div>
    </Card>
</template>

<script setup lang="ts">
import { Card, Button } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import type { Settlement } from '@/types/expense'
import { format } from 'date-fns'

const props = defineProps<{
    settlement: Settlement
}>()

const emit = defineEmits<{
    (e: 'edit', settlement: Settlement): void
    (e: 'delete', settlement: Settlement): void
}>()

function formatCurrency(amount: number) {
    try {
        return new Intl.NumberFormat(undefined, {
            style: 'currency',
            currency: 'USD'
        }).format(amount)
    } catch {
        return `$${amount.toFixed(2)}`
    }
}

function formatDate(dateString: string) {
    try {
        return format(new Date(dateString), 'MMM d, yyyy')
    } catch {
        return dateString
    }
}

function getPayerName(settlement: Settlement) {
    return settlement.payer?.name || settlement.payer?.email || `User #${settlement.paid_by_user_id}`
}

function getPayeeName(settlement: Settlement) {
    return settlement.payee?.name || settlement.payee?.email || `User #${settlement.paid_to_user_id}`
}

function getCreatorName(settlement: Settlement) {
    return settlement.created_by_user?.name || settlement.created_by_user?.email || `User #${settlement.created_by_user_id}`
}
</script>

<style scoped>
.settlement-card {
    @apply p-4 hover:shadow-md transition-shadow;
}

.settlement-content {
    @apply flex items-start justify-between;
}

.settlement-main {
    @apply flex items-start gap-3 flex-1;
}

.settlement-icon {
    @apply flex-shrink-0 mt-1;
}

.settlement-details {
    @apply flex-1 space-y-1;
}

.settlement-amount {
    @apply text-lg font-semibold text-neutral-900 dark:text-neutral-100;
}

.settlement-parties {
    @apply flex items-center text-sm text-neutral-600 dark:text-neutral-400;
}

.payer {
    @apply font-medium;
}

.payee {
    @apply font-medium;
}

.settlement-description {
    @apply text-sm text-neutral-600 dark:text-neutral-400 italic;
}

.settlement-meta {
    @apply flex items-center gap-3 text-xs text-neutral-500 dark:text-neutral-500;
}

.settlement-actions {
    @apply flex items-center gap-1 ml-4;
}
</style>