// components/pages/private/TasksPage/index.jsx
import { useEffect } from 'react';
import {
    Page,
    Block,
    List,
    ListItem,
    Button,
    Spinner,
    Tag
} from '@cap-rel/smartcommon';
import { useApi, useStates, useNavigation } from '@cap-rel/smartcommon';
import { FiPlus, FiCheck, FiClock } from 'react-icons/fi';

export const TasksPage = () => {
    const api = useApi();
    const navigate = useNavigation();

    const st = useStates({
        initialStates: {
            tasks: [],
            loading: true,
            error: null,
            filter: 'all'  // all, todo, done
        }
    });

    useEffect(() => {
        loadTasks();
    }, [st.get('filter')]);

    const loadTasks = async () => {
        st.set('loading', true);

        try {
            const params = {};
            if (st.get('filter') === 'todo') params.status = 1;
            if (st.get('filter') === 'done') params.status = 2;

            const data = await api.private.get('tasks', {
                searchParams: params
            }).json();

            st.set('tasks', data.tasks);
        } catch (err) {
            st.set('error', err.message);
        } finally {
            st.set('loading', false);
        }
    };

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

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

    const getStatusColor = (status) => {
        switch (status) {
            case 'done': return 'green';
            case 'todo': return 'blue';
            default: return 'gray';
        }
    };

    if (st.get('loading') && st.get('tasks').length === 0) {
        return <Page title="Tâches"><Spinner /></Page>;
    }

    return (
        <Page title="Mes tâches" onRefresh={loadTasks}>
            {/* Filtres */}
            <Block>
                <div className="flex gap-2">
                    {['all', 'todo', 'done'].map(f => (
                        <Button
                            key={f}
                            variant={st.get('filter') === f ? 'primary' : 'outline'}
                            size="sm"
                            onClick={() => st.set('filter', f)}
                        >
                            {f === 'all' ? 'Toutes' : f === 'todo' ? 'À faire' : 'Terminées'}
                        </Button>
                    ))}
                </div>
            </Block>

            {/* Liste */}
            <Block>
                {st.get('tasks').length === 0 ? (
                    <p className="text-center text-gray-500 py-8">
                        Aucune tâche
                    </p>
                ) : (
                    <List>
                        {st.get('tasks').map(task => (
                            <ListItem
                                key={task.id}
                                title={task.label}
                                subtitle={task.date_start || 'Pas de date'}
                                onClick={() => navigate(`/tasks/${task.id}`)}
                                icon={task.status === 'done' ? FiCheck : FiClock}
                                chevron
                                actions={
                                    <Tag color={getStatusColor(task.status)}>
                                        {task.status}
                                    </Tag>
                                }
                            />
                        ))}
                    </List>
                )}
            </Block>

            {/* Bouton ajout */}
            <div className="fixed bottom-20 right-4">
                <Button
                    variant="primary"
                    onClick={() => navigate('/tasks/new')}
                    className="rounded-full w-14 h-14"
                >
                    <FiPlus size={24} />
                </Button>
            </div>
        </Page>
    );
};