<script setup>
import { Head, useForm } from '@inertiajs/vue3';
import AppCard from '@/Components/ui/AppCard.vue';
import FormField from '@/Components/ui/FormField.vue';
import MobileAppLayout from '@/Layouts/MobileAppLayout.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';

defineProps({
    transactions: Array,
});

const form = useForm({
    transaction_id: '',
    subject: '',
    message: '',
});

const submit = () => {
    form.post(route('app.support.tickets.store'));
};
</script>

<template>
    <Head title="Create Ticket" />
    <MobileAppLayout title="Support" subtitle="Raise an issue with in-app support">
        <div class="space-y-4">
            <div class="rounded-2xl border border-amber-200 bg-amber-50 p-3 text-xs font-medium text-amber-900">
                Include the transaction reference when reporting failed or pending purchases to speed up resolution.
            </div>

            <AppCard title="Create Ticket">
                <form class="space-y-4" @submit.prevent="submit">
                    <FormField label="Related Transaction (optional)" :error="form.errors.transaction_id">
                        <select v-model="form.transaction_id" class="w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-400">
                            <option value="">No transaction selected</option>
                            <option v-for="tx in transactions" :key="tx.id" :value="tx.id">
                                {{ tx.internal_reference }} ({{ tx.status }})
                            </option>
                        </select>
                    </FormField>

                    <FormField label="Subject" :error="form.errors.subject">
                        <input v-model="form.subject" class="w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-400" />
                    </FormField>

                    <FormField label="Message" :error="form.errors.message">
                        <textarea v-model="form.message" rows="6" class="w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-slate-500 focus:ring-slate-400" />
                    </FormField>

                    <PrimaryButton
                        :disabled="form.processing"
                        class="!inline-flex !w-full !justify-center !rounded-xl !bg-slate-800 !py-3 !text-sm !font-semibold hover:!bg-slate-800"
                    >
                        {{ form.processing ? 'Submitting...' : 'Submit Ticket' }}
                    </PrimaryButton>
                </form>
            </AppCard>
        </div>
    </MobileAppLayout>
</template>
