<script setup lang="ts">
import {Head, Link, useForm, usePage} from '@inertiajs/vue3'
import MainLayout from "@/Layouts/MainLayout.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
import {SharedProps} from "@/Types/types";
import {computed} from "vue";

defineOptions({ layout: MainLayout })
const page = usePage<SharedProps>().props;

const REASONS = [
    { value: 'general_feedback', label: 'General Feedback' },
    { value: 'bug_report', label: 'Bug Report' },
    { value: 'missing_data', label: 'Missing Data' },
]

const form = useForm({
    reason: null as string | null,
    name: page.auth.user?.name ?? '',
    email: page.auth.user?.email ?? '',
    message: '',
})

const rules = {
    required: (v: string) => !!v || 'Required',
    email: (v: string) => /.+@.+\..+/.test(v) || 'Enter a valid email',
}

const submitted = computed(() => !!page.flash.success)

const submit = () => {
    form.post(route('support.store'), {
        preserveScroll: true,
        onSuccess: () => form.reset(),
    })
}
</script>

<template>
    <Panel>
        <Head title="Support" />
        <PanelHeader centered>Technical Support</PanelHeader>

        <template v-if="!submitted">
            <PanelSubHeader centered>
                Please fill out this form or email <Link href="mailto:hello@flightsgoneby.com">hello@flightsgoneby.com</Link> for any feedback or technical support needed.
            </PanelSubHeader>
            <PanelSubHeader centered>
                For missing airlines or airports, please include a link to Wikipedia page or airlines website if available.
            </PanelSubHeader>

            <v-form class="contact-form" @submit.prevent="submit">

                <v-text-field
                    v-model="form.name"
                    label="Name"
                    :error-messages="form.errors.name"
                    variant="outlined"
                    class="contact-field"
                />

                <v-text-field
                    v-model="form.email"
                    label="Email"
                    type="email"
                    readonly
                    :error-messages="form.errors.email"
                    variant="outlined"
                    class="contact-field"
                />

                <v-select
                    v-model="form.reason"
                    :items="REASONS"
                    item-title="label"
                    item-value="value"
                    label="Contact Reason"
                    :rules="[rules.required]"
                    :error-messages="form.errors.reason"
                    variant="outlined"
                    class="contact-field"
                />

                <v-textarea
                    v-model="form.message"
                    label="Message"
                    :rules="[rules.required]"
                    :error-messages="form.errors.message"
                    variant="outlined"
                    rows="5"
                    auto-grow
                    class="contact-field"
                />

                <div class="contact-form-actions">
                    <v-btn
                        type="submit"
                        :loading="form.processing"
                        class="contact-form-submit"
                        elevation="0"
                    >
                        Send Message
                    </v-btn>
                </div>
            </v-form>
        </template>

        <div v-else class="contact-form-sent">
            <i class="mdi mdi-check-circle-outline contact-form-sent-icon" aria-hidden="true" />
            <p class="contact-form-sent-title">Message Sent</p>
            <p class="contact-form-sent-body">
                {{ page.flash.success }} We'll get back to you as soon as we can.
            </p>
        </div>
    </Panel>
</template>

<style scoped>
.contact-form {
    color: #c8cdd8;
}

.contact-form-header {
    margin-bottom: 1.75rem;
}

.contact-form-eyebrow {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: #ffc107;
    margin-bottom: 0.4rem;
}

.contact-form-title {
    font-family: 'Barlow', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    color: #e6e9f0;
    margin: 0;
}

.contact-field {
    margin-bottom: 0.25rem;
}

:deep(.contact-field .v-field) {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

:deep(.contact-field .v-field__outline) {
    color: rgba(255, 255, 255, 0.12) !important;
}

:deep(.contact-field.v-input--focused .v-field__outline) {
    color: #ffc107 !important;
}

:deep(.contact-field .v-label) {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: #778 !important;
}

:deep(.contact-field .v-field__input) {
    color: #c8cdd8 !important;
    font-family: 'Barlow', sans-serif;
}

.contact-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
}

.contact-form-submit {
    background: #ffc107 !important;
    color: #14161c !important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 0 1.5rem !important;
}

.contact-form-submit:hover {
    background: #ffcd38 !important;
}

.contact-form-sent {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    color: #c8cdd8;
}

.contact-form-sent-icon {
    font-size: 2.5rem;
    color: #6fbf73;
    margin-bottom: 1rem;
}

.contact-form-sent-title {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e6e9f0;
    margin: 0 0 0.75rem;
}

.contact-form-sent-body {
    max-width: 360px;
    font-size: 0.9rem;
    color: #9099ab;
    margin: 0;
}
</style>
