import FormGroup from "@admin/ui/forms/FormGroup";
import Switch from "@admin/ui/forms/Switch";
import FileUploadInput from "@admin/ui/forms/FileUploadInput";
import Modal from "@admin/ui/Modal";
import { useEffect } from "react";
import { useFormResponse } from '@/hooks/useFormResponse';
import { useForm } from "@inertiajs/react";

export default function EditTechnicalPlatform({ isOpen, onClose, initialData }) {
    const { data, setData, put, processing, errors } = useForm({
        name: '',
        description: '',
        image: '',
        display_order: 0,
        status: true,
    });

    const handleSuccess = (filename) => {
        setData('image', filename);
    };

    const handleError = (error) => {
        console.error("Upload error:", error);
    };

    useEffect(() => {
        if (initialData) {
            setData({
                name: initialData?.name || '',
                description: initialData?.description || '',
                image: initialData?.image || '',
                display_order: initialData?.display_order || 0,
                status: initialData?.status === 1 || initialData?.status === true,
            });
        }
    }, [initialData, setData]);

    const handleSave = (event) => {
        event.preventDefault();
        const formResponse = useFormResponse(() => {
            onClose?.();
        });
        put(`/admin/api/update_technical_platform/${initialData.id}`, {
            preserveScroll: true,
            onSuccess: formResponse.onSuccess,
            onError: formResponse.onError,
        });
    };

    return (
        <Modal
            isOpen={isOpen}
            onClose={onClose}
            title="Edit Technical Platform Item"
            size="large"
            primaryButtonText="Save Changes"
            onPrimaryAction={handleSave}
            processing={processing}
        >
            <form onSubmit={handleSave}>
                <FormGroup
                    label="Name"
                    value={data.name}
                    onChange={(e) => setData('name', e.target.value)}
                    invalidFeedback={errors.name}
                    required
                />

                <FormGroup
                    id="description"
                    label="Description"
                    as="textarea"
                    value={data.description}
                    onChange={(e) => setData('description', e.target.value)}
                    rows="4"
                    invalidFeedback={errors.description}
                />

                <FormGroup
                    id="display_order"
                    label="Display Order"
                    type="number"
                    value={data.display_order}
                    onChange={(e) => setData('display_order', parseInt(e.target.value) || 0)}
                    invalidFeedback={errors.display_order}
                />

                <br />
                <FileUploadInput
                    label="Upload Image"
                    buttonText="Choose Image"
                    inputId="techPlatformImageUploadEdit"
                    uploadUrl="/admin/api/technical_platform/upload_image"
                    onSuccess={handleSuccess}
                    onError={handleError}
                    previewUrl={data.image ? `/storage/${data.image}` : null}
                    helpText="Recommended: 720×800px (9:10 portrait aspect ratio) — matches the card slot used on the public page."
                />

                <Switch
                    id="statusSwitchEdit"
                    label="Active"
                    checked={data.status}
                    onChange={({ target: { checked } }) =>
                        setData(prevData => ({ ...prevData, status: checked }))
                    }
                />
                <br />
            </form>
        </Modal>
    );
}