import { useState } from "react";

import {
    createStudent,
    emptyFormValues,
    studentDraftSchema,
    toFieldErrors,
    type StudentField,
    type StudentFormErrors,
    type StudentFormValues,
} from "../lib/students";
import StudentFields, { buttonGhostClass, buttonPrimaryClass } from "./StudentFields";

/** CREATE-only island for /add. On success it hands the user back to the list. */
export default function CreateStudentForm() {
    const [values, setValues] = useState<StudentFormValues>(emptyFormValues);
    const [errors, setErrors] = useState<StudentFormErrors>({});
    const [saving, setSaving] = useState(false);

    function handleChange(field: StudentField, value: string) {
        setValues((current) => ({ ...current, [field]: value }));
        // Clear the message as soon as the field is touched again.
        setErrors((current) => (field in current ? { ...current, [field]: undefined } : current));
    }

    function handleSubmit(event: React.SubmitEvent<HTMLFormElement>) {
        event.preventDefault();
        if (saving) return;

        const parsed = studentDraftSchema.safeParse(values);
        if (!parsed.success) {
            setErrors(toFieldErrors(parsed.error));
            return;
        }

        setSaving(true);
        setErrors({});
        createStudent(parsed.data);
        window.location.assign("/");
    }

    return (
        <form className="flex flex-col gap-6" onSubmit={handleSubmit} noValidate>
            <header className="flex flex-col gap-1">
                <h1 className="text-2xl font-semibold tracking-tight">Add a student</h1>
                <p className="text-sm text-white/50">
                    Saved to local storage, then you go straight back to the list.
                </p>
            </header>

            <div className="rounded-xl border border-white/10 bg-white/5 p-5">
                <StudentFields
                    values={values}
                    errors={errors}
                    onChange={handleChange}
                    disabled={saving}
                />
            </div>

            <div className="flex flex-wrap items-center gap-3">
                <button className={buttonPrimaryClass} type="submit" disabled={saving}>
                    {saving ? "Saving…" : "Create student"}
                </button>
                <a className={buttonGhostClass} href="/">
                    cancel
                </a>
            </div>
        </form>
    );
}