// components/pages/private/TaskDetailPage/index.jsx
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import {
    Page,
    Block,
    Button,
    Spinner,
    Tag,
    Popup
} from '@cap-rel/smartcommon';
import { useApi, useStates, useNavigation } from '@cap-rel/smartcommon';
import { FiEdit, FiTrash2, FiCheck } from 'react-icons/fi';

export const TaskDetailPage = () => {
    const { id } = useParams();
    const api = useApi();
    const navigate = useNavigation();

    const st = useStates({
        initialStates: {
            task: null,
            loading: true,
            error: null,
            showDeletePopup: false
        }
    });

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

    const loadTask = async () => {
        try {
            const data = await api.private.get(`tasks/${id}`).json();
            st.set('task', data);
        } catch (err) {
            st.set('error', err.message);
        } finally {
            st.set('loading', false);
        }
    };

    const toggleComplete = async () => {
        const task = st.get('task');
        const newStatus = task.status === 'done' ? 1 : 2;

        try {
            await api.private.put(`tasks/${id}`, {
                json: { status: newStatus }
            });
            loadTask();
        } catch (err) {
            alert('Erreur: ' + err.message);
        }
    };

    const handleDelete = async () => {
        try {
            await api.private.delete(`tasks/${id}`);
            navigate('/');
        } catch (err) {
            alert('Erreur: ' + err.message);
        }
    };

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

    if (st.get('error')) {
        return (
            <Page>
                <Block>Erreur: {st.get('error')}</Block>
            </Page>
        );
    }

    const task = st.get('task');

    return (
        <Page title={task.label}>
            {/* Statut */}
            <Block>
                <div className="flex justify-between items-center">
                    <Tag color={task.status === 'done' ? 'green' : 'blue'}>
                        {task.status === 'done' ? 'Terminée' : 'À faire'}
                    </Tag>
                    <span className="text-gray-500">Ref: {task.ref}</span>
                </div>
            </Block>

            {/* Description */}
            {task.description && (
                <Block title="Description">
                    <p>{task.description}</p>
                </Block>
            )}

            {/* Dates */}
            <Block title="Dates">
                <div className="space-y-2">
                    {task.date_start && (
                        <p>Début: {task.date_start}</p>
                    )}
                    {task.date_end && (
                        <p>Fin: {task.date_end}</p>
                    )}
                </div>
            </Block>

            {/* Actions */}
            <Block>
                <div className="flex gap-2">
                    <Button
                        variant={task.status === 'done' ? 'outline' : 'primary'}
                        onClick={toggleComplete}
                    >
                        <FiCheck className="mr-2" />
                        {task.status === 'done' ? 'Réouvrir' : 'Terminer'}
                    </Button>

                    <Button
                        variant="outline"
                        onClick={() => navigate(`/tasks/${id}/edit`)}
                    >
                        <FiEdit className="mr-2" />
                        Modifier
                    </Button>

                    <Button
                        variant="danger"
                        onClick={() => st.set('showDeletePopup', true)}
                    >
                        <FiTrash2 />
                    </Button>
                </div>
            </Block>

            {/* Popup suppression */}
            <Popup
                isOpen={st.get('showDeletePopup')}
                onClose={() => st.set('showDeletePopup', false)}
                title="Confirmer la suppression"
            >
                <p>Supprimer cette tâche ?</p>
                <div className="flex gap-2 mt-4">
                    <Button onClick={() => st.set('showDeletePopup', false)}>
                        Annuler
                    </Button>
                    <Button variant="danger" onClick={handleDelete}>
                        Supprimer
                    </Button>
                </div>
            </Popup>
        </Page>
    );
};