<template>
    <Card class="settlement-history-view">
        <div class="space-y-4">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
                    Settlement History
                </h3>
                <Button variant="ghost" size="sm" @click="refreshHistory">
                    <BaseIcon name="heroicons:arrow-path-20-solid" class="w-4 h-4" />
                </Button>
            </div>

            <div v-if="loading" class="text-center py-8">
                <Spinner label="Loading settlement history..." />
            </div>

            <Alert v-else-if="error" type="error" :message="error" />

            <div v-else-if="activities.length === 0" class="text-center py-8">
                <BaseIcon name="heroicons:banknotes-solid" class="w-12 h-12 mx-auto text-neutral-400 mb-4" />
                <p class="text-neutral-500">No settlement activities found</p>
            </div>

            <div v-else class="space-y-3">
                <div v-for="activity in activities" :key="activity.id"
                    class="flex items-center justify-between p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
                    <div class="flex items-center gap-3">
                        <div
                            class="w-8 h-8 bg-success-100 dark:bg-success-900 rounded-full flex items-center justify-center">
                            <BaseIcon name="heroicons:check-20-solid"
                                class="w-4 h-4 text-success-600 dark:text-success-400" />
                        </div>
                        <div>
                            <p class="text-sm font-medium text-neutral-900 dark:text-neutral-100">
                                {{ formatCurrency(parseFloat(activity.amount_paid)) }} paid
                            </p>
                            <p class="text-xs text-neutral-500">
                                by {{ activity.payer?.name || activity.payer?.email || `User
                                #${activity.paid_by_user_id}` }}
                            </p>
                        </div>
                    </div>
                    <div class="text-right">
                        <p class="text-xs text-neutral-500">{{ formatDate(activity.paid_at) }}</p>
                        <p v-if="activity.creator && activity.creator.id !== activity.paid_by_user_id"
                            class="text-xs text-neutral-400">
                            Recorded by {{ activity.creator.name || activity.creator.email }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </Card>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { Card, Button, Spinner, Alert } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import { settlementService } from '@/services/settlementService'
import type { SettlementActivity } from '@/types/expense'
import { format } from 'date-fns'

const props = defineProps<{
    expenseSplitId: number
}>()

// State
const activities = ref<SettlementActivity[]>([])
const loading = ref(false)
const error = ref<string | null>(null)

// Methods
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 h:mm a')
    } catch {
        return dateString
    }
}

async function loadSettlementHistory() {
    loading.value = true
    error.value = null

    try {
        activities.value = await settlementService.getSettlementActivitiesForSplit(props.expenseSplitId)
    } catch (err: any) {
        error.value = err.response?.data?.detail || 'Failed to load settlement history'
    } finally {
        loading.value = false
    }
}

function refreshHistory() {
    loadSettlementHistory()
}

// Lifecycle
onMounted(() => {
    loadSettlementHistory()
})

watch(() => props.expenseSplitId, () => {
    loadSettlementHistory()
})
</script>

<style scoped>
.settlement-history-view {
    @apply p-4;
}
</style>