app/frontend/src/components/features/dishes/CreateDishForm.tsx

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { createDish } from "@/utils/api/dishApi";
import PageTitle from "@/components/ui/PageTitle";
import Alert from "@/components/ui/Alert";
import Button from "@/components/ui/Button";
import { ChevronLeftIcon } from "@heroicons/react/16/solid";
import Hr from "@/components/ui/Hr";
import Input from "@/components/ui/Input";

const CreateDishForm = () => {
    const router = useRouter()
    const [name, setName] = useState<string>("");
    const [error, setError] = useState<string>("");
    const [loading, setLoading] = useState(false);

    const validateForm = () => {
        if (!name.trim()) {
            setError("Dish name cannot be empty.");
            return false;
        }

        return true;
    };

    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()

        // Validate client-side input
        if (!validateForm()) return;

        setError("");
        setLoading(true);

        try {
            const result = await createDish(name);
            if (result) {
                router.push('/dishes')
            }
        } catch (error: unknown) {
            setError(error instanceof Error ? error.message : "An unexpected error occurred.");
        } finally {
            setLoading(false);
        }
    }

    return (
        <div className="px-5">
            <div className="flex mb-3">
                <PageTitle>Create Dish</PageTitle>
            </div>

            <form className="space-y-4" onSubmit={ submitForm }>
                { error && (
                    <Alert type="error">{ error }</Alert>
                ) }

                <Input
                    label="Dish Name"
                    type="text"
                    id="name"
                    name="name"
                    value={ name }
                    onChange={ (e) => setName(e.target.value) }
                    placeholder="Enter dish name"
                    className="mb-4"
                />

                <Button
                    type="submit"
                    appearance="solid"
                    variant="primary"
                    disabled={ loading }
                    className={ loading ? "bg-gray-400" : '' }
                >
                    { loading ? "Saving..." : "Save Changes" }
                </Button>
            </form>

            <Hr />

            <Button
                appearance="outline"
                href="/dishes"
                className="mt-4 pl-0 mr-0"
                icon={ <ChevronLeftIcon/> }
            >
                Back to dishes
            </Button>
        </div>
    );


};

export default CreateDishForm;