<script setup>
import AppLayout from '@/Layouts/AppLayout.vue'
import { useForm, Link } from '@inertiajs/vue3'
import { ref } from 'vue'

const props = defineProps({
  account: Object,
  payments: Array,
})

const showCreate = ref(false)
const form = useForm({
  amount: '',
  currency: 'EUR',
  reference: '',
  paid_at: '',
})

function openCreate() {
  form.reset()
  form.clearErrors()
  showCreate.value = true
}

function closeCreate() {
  showCreate.value = false
  form.clearErrors()
}

function submit() {
  form.post(route('accounts.payments.store', { account: props.account.id }), {
    preserveScroll: true,
    onSuccess: () => closeCreate(),
  })
}
</script>

<template>
  <AppLayout :title="`Payments - ${account.reference || account.id}`">
    <template #header>
      <div class="flex items-center justify-between">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">Payments · {{ account.reference || account.id }}</h2>
        <div class="flex items-center gap-2">
          <Link :href="route('accounts.bookings.index', { account: account.id })" class="text-sm underline">Bookings</Link>
          <button class="px-3 py-2 bg-emerald-600 text-white rounded" @click="openCreate">New Payment</button>
        </div>
      </div>
    </template>

    <div class="py-6">
      <div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white shadow sm:rounded-lg p-6">
          <table class="min-w-full text-left text-sm">
            <thead class="border-b text-gray-500">
              <tr>
                <th class="py-2 pr-4">Paid at</th>
                <th class="py-2 pr-4">Reference</th>
                <th class="py-2 pr-4">Amount</th>
                <th class="py-2 pr-0 text-right">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="p in payments" :key="p.id" class="border-b last:border-0">
                <td class="py-2 pr-4">{{ p.paid_at ? new Date(p.paid_at).toLocaleString() : '-' }}</td>
                <td class="py-2 pr-4">{{ p.reference || '-' }}</td>
                <td class="py-2 pr-4 font-medium">{{ Number(p.amount).toFixed(2) }} {{ p.currency }}</td>
                <td class="py-2 pr-0 text-right">
                  <form :action="route('accounts.payments.destroy', { account: account.id, payment: p.id })" method="post" @submit.prevent="$inertia.delete(route('accounts.payments.destroy', { account: account.id, payment: p.id }), { preserveScroll: true })">
                    <button type="submit" class="text-red-600 hover:underline">Delete</button>
                  </form>
                </td>
              </tr>
              <tr v-if="!payments?.length">
                <td colspan="4" class="py-6 text-center text-gray-500">No payments.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div v-if="showCreate" class="fixed inset-0 z-50 flex items-center justify-center">
      <div class="absolute inset-0 bg-black/30" @click="closeCreate"></div>
      <div class="relative bg-white rounded shadow-lg w-[32rem] max-w-[90%] p-5">
        <div class="text-lg font-semibold mb-2">New Payment</div>
        <div class="grid grid-cols-1 gap-3">
          <div>
            <label class="block text-sm text-gray-700 mb-1">Amount</label>
            <input type="number" step="0.01" v-model="form.amount" class="w-full border rounded px-3 py-2" :class="form.errors.amount && 'border-red-500'" />
            <div v-if="form.errors.amount" class="text-xs text-red-600 mt-1">{{ form.errors.amount }}</div>
          </div>
          <div class="flex gap-3">
            <div class="flex-1">
              <label class="block text-sm text-gray-700 mb-1">Currency</label>
              <input type="text" maxlength="3" v-model="form.currency" class="w-full border rounded px-3 py-2 uppercase" />
            </div>
            <div class="flex-1">
              <label class="block text-sm text-gray-700 mb-1">Paid at</label>
              <input type="datetime-local" v-model="form.paid_at" class="w-full border rounded px-3 py-2" />
            </div>
          </div>
          <div>
            <label class="block text-sm text-gray-700 mb-1">Reference</label>
            <input type="text" v-model="form.reference" class="w-full border rounded px-3 py-2" :class="form.errors.reference && 'border-red-500'" />
            <div v-if="form.errors.reference" class="text-xs text-red-600 mt-1">{{ form.errors.reference }}</div>
          </div>
        </div>
        <div class="flex items-center justify-end gap-2 mt-5">
          <button class="px-3 py-1.5 border rounded" @click="closeCreate" :disabled="form.processing">Cancel</button>
          <button class="px-3 py-1.5 rounded text-white bg-emerald-600 disabled:opacity-60" @click="submit" :disabled="form.processing">Create</button>
        </div>
      </div>
    </div>
  </AppLayout>
</template>
