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

const props = defineProps({
    contact: {
        type: Object,
        required: true,
    },
});

const form = useForm({
    support_phone: props.contact?.support_phone || '',
    support_email: props.contact?.support_email || '',
    whatsapp_number: props.contact?.whatsapp_number || '',
    whatsapp_group_url: props.contact?.whatsapp_group_url || '',
    telegram_url: props.contact?.telegram_url || '',
    website_url: props.contact?.website_url || '',
    office_address: props.contact?.office_address || '',
    business_hours: props.contact?.business_hours || '',
    support_note: props.contact?.support_note || '',
});

const whatsappChatUrl = computed(() => {
    const raw = String(form.whatsapp_number || '').trim();
    if (!raw) return '';

    let digits = raw.replace(/\D+/g, '');
    if (!digits) return '';
    if (digits.startsWith('0')) {
        digits = `234${digits.slice(1)}`;
    }

    return `https://wa.me/${digits}`;
});

const submit = () => {
    form.put(route('admin.settings.contact.update'), {
        preserveScroll: true,
    });
};
</script>

<template>
    <Head title="Contact Settings" />

    <AdminLayout>
        <template #header>
            <div>
                <h2 class="text-xl font-semibold text-gray-800">Contact Settings</h2>
                <p class="mt-1 text-sm text-gray-500">Manage user-facing support contact details shown on the Contact Us page.</p>
            </div>
        </template>

        <div class="mx-auto max-w-5xl space-y-6 px-4 py-6 sm:px-6 lg:px-8">
            <form class="space-y-6" @submit.prevent="submit">
                <AppCard title="Direct Support Channels" subtitle="These channels are shown as clickable actions to users.">
                    <div class="grid gap-4 md:grid-cols-2">
                        <FormField label="Support Phone" :error="form.errors.support_phone" help="Example: 07000000000 or +2347000000000">
                            <input v-model="form.support_phone" type="text" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="Support Email" :error="form.errors.support_email" help="Example: support@yourapp.com">
                            <input v-model="form.support_email" type="email" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="WhatsApp Number" :error="form.errors.whatsapp_number" help="Used to generate the WhatsApp chat button.">
                            <input v-model="form.whatsapp_number" type="text" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="Join WhatsApp Group URL" :error="form.errors.whatsapp_group_url" help="Must start with https://chat.whatsapp.com/...">
                            <input v-model="form.whatsapp_group_url" type="url" class="w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="https://chat.whatsapp.com/..." />
                        </FormField>

                        <FormField label="Telegram URL" :error="form.errors.telegram_url" help="Optional channel.">
                            <input v-model="form.telegram_url" type="url" class="w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="https://t.me/yourchannel" />
                        </FormField>

                        <FormField label="Website URL" :error="form.errors.website_url" help="Optional public website link.">
                            <input v-model="form.website_url" type="url" class="w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="https://yourdomain.com" />
                        </FormField>
                    </div>
                </AppCard>

                <AppCard title="Support Profile" subtitle="Additional details to help users contact support correctly.">
                    <div class="grid gap-4">
                        <FormField label="Office Address" :error="form.errors.office_address">
                            <textarea v-model="form.office_address" rows="3" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="Business Hours" :error="form.errors.business_hours" help="Example: Mon-Sat, 8:00 AM - 7:00 PM">
                            <input v-model="form.business_hours" type="text" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>

                        <FormField label="Support Note" :error="form.errors.support_note" help="Shown to users at the top of Contact page.">
                            <textarea v-model="form.support_note" rows="4" class="w-full rounded-md border-gray-300 text-sm shadow-sm" />
                        </FormField>
                    </div>
                </AppCard>

                <AppCard title="Preview" subtitle="Quick link checks before saving.">
                    <div class="grid gap-2 text-sm">
                        <a
                            v-if="form.support_phone"
                            :href="`tel:${form.support_phone}`"
                            class="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-slate-700 hover:bg-slate-100"
                        >
                            📞 Call {{ form.support_phone }}
                        </a>
                        <a
                            v-if="form.support_email"
                            :href="`mailto:${form.support_email}`"
                            class="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-slate-700 hover:bg-slate-100"
                        >
                            ✉️ Email {{ form.support_email }}
                        </a>
                        <a
                            v-if="whatsappChatUrl"
                            :href="whatsappChatUrl"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="inline-flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-slate-700 hover:bg-slate-100"
                        >
                            💬 WhatsApp Chat
                        </a>
                    </div>
                </AppCard>

                <div class="flex justify-end">
                    <PrimaryButton :disabled="form.processing">
                        {{ form.processing ? 'Saving...' : 'Save Contact Settings' }}
                    </PrimaryButton>
                </div>
            </form>
        </div>
    </AdminLayout>
</template>

