import React, { Fragment, useEffect, useMemo, useState } from 'react';
import {
    ActionIcon,
    Box,
    Container,
    Flex,
    Grid,
    Text,
    TextInput,
    Tooltip
} from '@mantine/core';
import { useDispatch, useSelector } from "react-redux";
import { fetchAllTags } from "../Settings/store/tagSlice";
import MyTaskList from "./MyTaskList";
import { fetchTasksByUser, setLoggedInUserId } from "../Settings/store/myTaskSlice";
import { fetchQuickTasksByUser } from "../Settings/store/quickTaskSlice";
import { IconRefresh, IconSearch, IconX } from "@tabler/icons-react";
import { updateIsLoading } from "../Settings/store/taskSlice";
import { translate } from '../../utils/i18n';
import QuickTaskChatBot from "./QuickTaskChatBot";

const MyTask = () => {

    const dispatch = useDispatch();
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const userId = useMemo(() => loggedInUser ? loggedInUser.loggedUserId : loggedUserId, [loggedInUser, loggedUserId]);
    const [searchInputValue, setSearchInputValue] = useState('');

    useEffect(() => {
        setTimeout(() => {
            if (userId) {
                dispatch(fetchTasksByUser({ id: userId }))
                dispatch(fetchQuickTasksByUser({ id: userId }))
                dispatch(fetchAllTags())
                dispatch(setLoggedInUserId(userId))
            }
        }, 500);
    }, [dispatch, userId]);

    const handleRefresh = () => {
        dispatch(updateIsLoading(true))
    }

    const searchHandler = (e) => {
        const searchValue = e.target.value;
        setSearchInputValue(searchValue);
        dispatch(fetchTasksByUser({ id: userId, data: { search: searchValue } }))
    }

    const handleClearSearch = () => {
        setSearchInputValue('');
        dispatch(fetchTasksByUser({ id: userId, data: { search: '' } }))
    };

    return (
        <Fragment>

            <div className='dashboard'>
                <Container size="full">

                    <div className="settings-page-card rounded-xl mt-5">
                        <Grid columns={12} className="pb-3">
                            <Grid.Col span={12}>
                                <Box bg={"white"} p={20} m={5} radius="xl" className="rounded-xl">
                                    <Flex className='mt-2 mb-4' align="center" justify="space-between">
                                        {/* Title pill */}
                                        <Flex
                                            align="center"
                                            gap={6}
                                            className="px-3 py-1.5 rounded-full"
                                            style={{ backgroundColor: '#EBF1F4' }}
                                        >
                                            <Text fw={600} size="sm" c="#39758D">
                                                {translate('My Tasks')}
                                            </Text>
                                        </Flex>

                                        {/* Search, Refresh & Quick Task Helper */}
                                        <Flex align="center" gap={8}>
                                            <TextInput
                                                value={searchInputValue}
                                                rightSectionPointerEvents="auto"
                                                rightSection={
                                                    searchInputValue ? (
                                                        <IconX
                                                            size={18}
                                                            stroke={1.5}
                                                            className="cursor-pointer text-gray-400"
                                                            onClick={handleClearSearch}
                                                        />
                                                    ) : (
                                                        <IconSearch size={18} stroke={1.5} className="text-gray-400" />
                                                    )
                                                }
                                                onChange={(e) => { searchHandler(e) }}
                                                placeholder={translate('Search...')}
                                                size="sm"
                                                radius="xl"
                                                styles={{
                                                    input: {
                                                        border: '1px solid #D1D5DB',
                                                        minWidth: '220px',
                                                        '&:focus': {
                                                            borderColor: '#39758D',
                                                        }
                                                    }
                                                }}
                                            />
                                            <Tooltip label={translate('Refresh')} position="top" withArrow>
                                                <ActionIcon
                                                    onClick={() => handleRefresh()}
                                                    variant="subtle"
                                                    color="gray"
                                                    radius="xl"
                                                    size="lg"
                                                    aria-label="Refresh"
                                                    className="hover:bg-[#EBF1F4] transition-colors"
                                                >
                                                    <IconRefresh size={20} stroke={1.5} color="#6B7280" />
                                                </ActionIcon>
                                            </Tooltip>
                                        </Flex>
                                    </Flex>
                                    <div className="w-full bg-white">
                                        <MyTaskList />
                                    </div>
                                </Box>
                            </Grid.Col>
                        </Grid>
                    </div>
                </Container>
            </div>

            {/* Floating Quick Task Helper — draggable, default top-right */}
            <QuickTaskChatBot userId={userId} />

        </Fragment>

    );
}

export default MyTask;