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 { serviceOptions } from '@/data/site';

/**
 * 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 [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">
                    Jadwalkan Konsultasi IT
                </span>
                <span className="text-on-surface-variant text-xs">
                    Konfirmasi langsung oleh Lead Architect PAJ dalam 2 jam
                    kerja.
                </span>
            </div>

            {submitted ? (
                <FormSuccess
                    title="Permintaan Terkirim!"
                    message="Tim Lead Consultant PT Probindo Artika Jaya akan segera menghubungi kontak Anda untuk konfirmasi jadwal sesi konsultasi."
                />
            ) : (
                <form className="flex flex-col gap-3" onSubmit={handleSubmit}>
                    <Field
                        id={`${idPrefix}-name`}
                        label="Nama Lengkap & Perusahaan"
                        required
                    >
                        <TextInput
                            id={`${idPrefix}-name`}
                            name="name"
                            placeholder="Nama Anda (PT ...)"
                            required
                        />
                    </Field>
                    <Field
                        id={`${idPrefix}-email`}
                        label="Email Perusahaan / Kantor"
                        required
                    >
                        <TextInput
                            id={`${idPrefix}-email`}
                            name="email"
                            type="email"
                            placeholder="nama@perusahaan.co.id"
                            required
                        />
                    </Field>
                    <Field
                        id={`${idPrefix}-phone`}
                        label="No. WhatsApp / Telepon"
                        required
                    >
                        <TextInput
                            id={`${idPrefix}-phone`}
                            name="phone"
                            type="tel"
                            placeholder="+62 811 xxxx xxxx"
                            required
                        />
                    </Field>
                    <Field
                        id={`${idPrefix}-service`}
                        label="Layanan Yang Dibutuhkan"
                    >
                        <SelectInput
                            id={`${idPrefix}-service`}
                            name="service"
                            options={serviceOptions}
                        />
                    </Field>
                    <Button
                        type="submit"
                        size="block"
                        icon="send"
                        className="mt-2"
                    >
                        Kirim Permintaan Konsultasi
                    </Button>
                    <p className="text-on-surface-variant text-center text-[11px]">
                        Non-Disclosure Agreement (NDA) dapat ditandatangani
                        sebelum audit teknis.
                    </p>
                </form>
            )}
        </div>
    );
}