import { Head } from '@inertiajs/react';
import { useRef, type FormEvent } from 'react';
import PublicLayout from '@/pages/layouts/public-layout';
import { usePage } from '@inertiajs/react';

export default function TrackingIndex() {
    const { security } = usePage().props;
    const locked = useRef(false);
    const buttonRef = useRef<HTMLButtonElement>(null);

    const onSubmit = (event: FormEvent<HTMLFormElement>) => {
        const form = event.currentTarget;
        const tokenInput = form.elements.namedItem('token') as HTMLInputElement | null;
        const raw = tokenInput?.value?.trim() ?? '';

        if (! /^[A-Za-z0-9_-]+$/.test(raw)) {
            event.preventDefault();

            return;
        }

        if (security.single_submit) {
            if (locked.current) {
                event.preventDefault();

                return;
            }

            locked.current = true;

            if (buttonRef.current) {
                buttonRef.current.disabled = true;
                buttonRef.current.textContent = 'Memproses…';
            }
        }

        if (tokenInput) {
            tokenInput.value = raw;
        }
    };

    return (
        <PublicLayout>
            <Head title="Lacak Kiriman">
                <meta
                    head-key="description"
                    name="description"
                    content="Lacak status kiriman Setia Trans Budi dengan nomor tracking."
                />
            </Head>

            <section className="border-b border-stb-line bg-stb-paper">
                <div className="stb-container stb-section">
                    <h1 className="stb-rise stb-type-page">Lacak Kiriman</h1>
                    <p className="stb-rise stb-rise-delay-1 stb-type-lead mt-[var(--stb-space-3)] max-w-xl text-stb-muted">
                        Masukkan nomor tracking untuk melihat status dan riwayat perjalanan kiriman
                        Anda.
                    </p>
                </div>
            </section>

            <section className="stb-container stb-section">
                <form
                    action="/lacak"
                    method="get"
                    className="stb-rise stb-form-row"
                    onSubmit={onSubmit}
                >
                    <label className="sr-only" htmlFor="token">
                        Nomor tracking
                    </label>
                    <input
                        id="token"
                        name="token"
                        type="text"
                        autoComplete="off"
                        required
                        maxLength={32}
                        pattern="[A-Za-z0-9_-]+"
                        title="Hanya huruf, angka, _ atau -"
                        placeholder="Masukkan nomor tracking"
                        className="stb-input"
                    />
                    <button ref={buttonRef} type="submit" className="stb-control stb-btn-primary">
                        Hasil tracking
                    </button>
                </form>
            </section>
        </PublicLayout>
    );
}
