import { useState } from 'react';
import type { FormEvent } from 'react';
import { Button } from '@/components/site/button';
import {
    Field,
    FormSuccess,
    SelectInput,
    TextInput,
} from '@/components/site/form-field';
import { common, serviceOptions } from '@/content/common';
import { useContent } from '@/hooks/use-locale';

/**
 * Compact consultation request form.
 *
 * TODO: submissions are not sent anywhere yet; wire this to a Laravel
 * endpoint before going live.
 */
export default function ConsultationForm({ idPrefix }: { idPrefix: string }) {
    const t = useContent(common);
    const [submitted, setSubmitted] = useState(false);

    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        setSubmitted(true);
    };

    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 className="flex flex-col gap-3" onSubmit={handleSubmit}>
                    <Field id={`${idPrefix}-name`} label={t.form.name} required>
                        <TextInput
                            id={`${idPrefix}-name`}
                            name="name"
                            placeholder={t.form.namePlaceholder}
                            required
                        />
                    </Field>
                    <Field
                        id={`${idPrefix}-email`}
                        label={t.form.email}
                        required
                    >
                        <TextInput
                            id={`${idPrefix}-email`}
                            name="email"
                            type="email"
                            placeholder={t.form.emailPlaceholder}
                            required
                        />
                    </Field>
                    <Field
                        id={`${idPrefix}-phone`}
                        label={t.form.phone}
                        required
                    >
                        <TextInput
                            id={`${idPrefix}-phone`}
                            name="phone"
                            type="tel"
                            placeholder="+62 811 xxxx xxxx"
                            required
                        />
                    </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="send"
                        className="mt-2"
                    >
                        {t.form.submit}
                    </Button>
                    <p className="text-on-surface-variant text-center text-[11px]">
                        {t.form.nda}
                    </p>
                </form>
            )}
        </div>
    );
}