// components/pages/private/TaskFormPage/index.jsx
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import {
    Page,
    Block,
    Form,
    Input,
    Textarea,
    Select,
    Calendar,
    Button,
    Spinner
} from '@cap-rel/smartcommon';
import { useApi, useStates, useNavigation, useForm } from '@cap-rel/smartcommon';

export const TaskFormPage = () => {
    const { id } = useParams();
    const isEdit = !!id;

    const api = useApi();
    const nav = useNavigation();

    const st = useStates({
        initialStates: {
            loading: isEdit,
            submitting: false,
            defaultValues: null
        }
    });

    useEffect(() => {
        if (isEdit) {
            loadTask();
        }
    }, [id]);

    const loadTask = async () => {
        try {
            const data = await api.private.get(`tasks/${id}`).json();
            st.set('defaultValues', {
                label: data.label,
                description: data.description || '',
                priority: data.priority || 0,
                date_start: data.date_start || '',
                date_end: data.date_end || ''
            });
        } catch (err) {
            alert('Erreur: ' + err.message);
            nav.navigate('/');
        } finally {
            st.set('loading', false);
        }
    };

    const handleSubmit = async (values) => {
        st.set('submitting', true);

        try {
            if (isEdit) {
                await api.private.put(`tasks/${id}`, { json: values });
            } else {
                await api.private.post('tasks', { json: values });
            }
            nav.navigate('/');
        } catch (err) {
            alert('Erreur: ' + err.message);
        } finally {
            st.set('submitting', false);
        }
    };

    if (st.get('loading')) {
        return <Page><Spinner /></Page>;
    }

    return (
        <Page title={isEdit ? 'Modifier la tâche' : 'Nouvelle tâche'}>
            <Block>
                <Form onSubmit={handleSubmit} defaultValues={st.get('defaultValues')}>
                    <Input
                        name="label"
                        label="Titre"
                        required
                    />

                    <Textarea
                        name="description"
                        label="Description"
                        rows={4}
                    />

                    <Select
                        name="priority"
                        label="Priorité"
                        options={[
                            { value: 0, label: 'Basse' },
                            { value: 1, label: 'Normale' },
                            { value: 2, label: 'Haute' },
                            { value: 3, label: 'Urgente' }
                        ]}
                    />

                    <Calendar
                        name="date_start"
                        label="Date de début"
                    />

                    <Calendar
                        name="date_end"
                        label="Date de fin"
                    />

                    <div className="flex gap-2 mt-4">
                        <Button
                            type="button"
                            variant="outline"
                            onClick={() => nav.navigate(-1)}
                        >
                            Annuler
                        </Button>
                        <Button
                            type="submit"
                            loading={st.get('submitting')}
                        >
                            {isEdit ? 'Enregistrer' : 'Créer'}
                        </Button>
                    </div>
                </Form>
            </Block>
        </Page>
    );
};