import { Form } from '@inertiajs/react';
import { useState } from 'react';
import { Button } from '@/components/site/button';
import {
    Field,
    FieldError,
    FormSuccess,
    Honeypot,
    SelectInput,
    TextInput,
} from '@/components/site/form-field';
import { common, serviceOptions } from '@/content/common';
import { useContent } from '@/hooks/use-locale';
import { store } from '@/routes/consultations';

type ConsultationFormProps = {
    idPrefix: string;
    /** Which page the request came from, shown in the admin inbox. */
    source: 'home' | 'services';
};

/** Compact consultation request form, saved to the admin inbox. */
export default function ConsultationForm({
    idPrefix,
    source,
}: ConsultationFormProps) {
    const t = useContent(common);
    const [submitted, setSubmitted] = useState(false);

    return (
        <div className="border-outline-variant/60 bg-surface-container-high flex flex-col gap-4 rounded-2xl border p-6 shadow-xl lg:p-7">
            <div className="flex flex-col">
                <span className="font-display text-on-surface text-base font-bold">
                    {t.form.title}
                </span>
                <span className="text-on-surface-variant text-xs">
                    {t.form.subtitle}
                </span>
            </div>

            {submitted ? (
                <FormSuccess
                    title={t.form.successTitle}
                    message={t.form.successMessage}
                />
            ) : (
                <Form
                    {...store.form()}
                    options={{ preserveScroll: true }}
                    onSuccess={() => setSubmitted(true)}
                    className="relative flex flex-col gap-3"
                >
                    {({ processing, errors }) => (
                        <>
                            <input type="hidden" name="source" value={source} />
                            <Honeypot />
                            <Field
                                id={`${idPrefix}-name`}
                                label={t.form.name}
                                required
                            >
                                <TextInput
                                    id={`${idPrefix}-name`}
                                    name="name"
                                    placeholder={t.form.namePlaceholder}
                                    required
                                />
                                <FieldError message={errors.name} />
                            </Field>
                            <Field
                                id={`${idPrefix}-email`}
                                label={t.form.email}
                                required
                            >
                                <TextInput
                                    id={`${idPrefix}-email`}
                                    name="email"
                                    type="email"
                                    placeholder={t.form.emailPlaceholder}
                                    required
                                />
                                <FieldError message={errors.email} />
                            </Field>
                            <Field
                                id={`${idPrefix}-phone`}
                                label={t.form.phone}
                                required
                            >
                                <TextInput
                                    id={`${idPrefix}-phone`}
                                    name="phone"
                                    type="tel"
                                    placeholder="+62 811 xxxx xxxx"
                                    required
                                />
                                <FieldError message={errors.phone} />
                            </Field>
                            <Field
                                id={`${idPrefix}-service`}
                                label={t.form.service}
                            >
                                <SelectInput
                                    id={`${idPrefix}-service`}
                                    name="service"
                                    options={serviceOptions(t)}
                                />
                            </Field>
                            <Button
                                type="submit"
                                size="block"
                                icon={processing ? 'progress_activity' : 'send'}
                                disabled={processing}
                                className="mt-2"
                            >
                                {t.form.submit}
                            </Button>
                            <p className="text-on-surface-variant text-center text-[11px]">
                                {t.form.nda}
                            </p>
                        </>
                    )}
                </Form>
            )}
        </div>
    );
}