<template>
    <Dialog v-model="open" class="z-50">
        <form @submit.prevent="handleSubmit"
            class="bg-white dark:bg-neutral-800 p-6 rounded-lg shadow-xl w-full max-w-md">
            <div class="flex items-center justify-between mb-4">
                <Heading :level="3">{{ $t('expenseCreation.title', 'Add Expense') }}</Heading>
                <Button variant="ghost" size="sm" @click="open = false">
                    <BaseIcon name="heroicons:x-mark-20-solid" class="w-5 h-5" />
                </Button>
            </div>

            <Input v-model="form.description" :label="$t('expenseCreation.description', 'Description')" class="mb-3" />
            <Input type="number" step="0.01" v-model="form.total_amount" :label="$t('expenseCreation.amount', 'Amount')"
                class="mb-3" />

            <div class="flex justify-end gap-2 mt-6">
                <Button variant="ghost" @click.prevent="open = false">{{ $t('common.cancel', 'Cancel') }}</Button>
                <Button type="submit" :loading="submitting">{{ $t('common.save', 'Save') }}</Button>
            </div>
        </form>
    </Dialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { Dialog } from '@/components/ui'
import { Heading, Input, Button } from '@/components/ui'
import BaseIcon from '@/components/BaseIcon.vue'
import { useExpenses } from '@/composables/useExpenses'
import type { Expense } from '@/types/expense'
import { computed } from 'vue'

interface ExpenseForm {
    description: string
    total_amount: string
}

const open = defineModel<boolean>('modelValue', { default: false })

// Props
const props = defineProps<{ expense?: Expense | null }>()

const form = reactive<ExpenseForm>({ description: '', total_amount: '' })
const isEditing = computed(() => !!props.expense)

const { createExpense, updateExpense } = useExpenses()

// Sync form when editing
watch(
    () => props.expense,
    (val) => {
        if (val) {
            form.description = val.description
            form.total_amount = val.total_amount
        } else {
            form.description = ''
            form.total_amount = ''
        }
    },
    { immediate: true },
)

const submitting = ref(false)

async function handleSubmit() {
    submitting.value = true
    try {
        if (isEditing.value && props.expense) {
            await updateExpense(props.expense.id, { ...form, version: props.expense.version })
        } else {
            await createExpense({
                ...form,
                currency: 'USD',
                split_type: 'EQUAL',
                isRecurring: false,
                paid_by_user_id: 0,
            })
        }
        open.value = false
    } catch (e) {
        console.error('Failed to create expense', e)
    } finally {
        submitting.value = false
    }
}
</script>

<style scoped>
/* Tailwind styling */
</style>