import React, { useEffect, useRef, useState, useMemo } from 'react';
import {
    Button,
    TextInput,
    Tooltip,
    ActionIcon,
    Popover,
    Flex,
    Select
} from '@mantine/core';
import { IconCheck, IconClipboardPlus, IconX } from '@tabler/icons-react';

const T = {
    border:   '#E2E8F0',
    text:     '#1A202C',
    muted:    '#64748B',
    teal:     '#39758D',
    radius:   '12px',
    radiusSm: '6px',
};
import { useDispatch, useSelector } from "react-redux";
import {
    createTask,
    removeSuccessMessage,
} from "../../Settings/store/taskSlice";
import { notifications } from "@mantine/notifications";
import { useForm } from "@mantine/form";
import { translate } from '../../../utils/i18n';

const ProjectAddTaskSnippet = ({ projectId, openOnHotkey, disabled = false }) => {
    const dispatch = useDispatch();
    const { loggedUserId } = useSelector((state) => state.auth.user);
    const { loggedInUser } = useSelector((state) => state.auth.session);
    const { taskListSections } = useSelector((state) => state.settings.task);

    const [openedAddTaskPopover, setOpenedAddTaskPopover] = useState(false);

    useEffect(() => {
        if (openOnHotkey) setOpenedAddTaskPopover(true);
    }, [openOnHotkey]);

    // Prepare sections for Select dropdown
    const sectionOptions = useMemo(() => {
        return taskListSections ?
            Object.entries(taskListSections).map(([key, value]) => ({
                value: value.id.toString(),
                label: value.name,
            })) : [];
    }, [taskListSections]);

    const form = useForm({
        mode: 'uncontrolled',
        initialValues: {
            name: '',
            section: '',
        },
        validate: {
            name: (value) => (value.trim().length < 1 ? 'Name is required' : null),
            section: (value) => (!value ? 'Section is required' : null),
        }
    });

    const inputRef = useRef(null);
    // Mantine Select is driven by local state (not useForm's uncontrolled pipeline) because
    // getInputProps returns { defaultValue, onChange } which Select doesn't fully track — the
    // value is mirrored into the form via setFieldValue so form.validate + handleTaskCreation still work.
    const [selectedSection, setSelectedSection] = useState('');

    useEffect(() => {
        if (openedAddTaskPopover) {
            // Set default section if available and form doesn't have one
            if (sectionOptions.length > 0 && !form.getValues().section) {
                form.setFieldValue('section', sectionOptions[0].value);
                setSelectedSection(sectionOptions[0].value);
            }
            setTimeout(() => {
                inputRef.current?.focus();
            }, 100);
        } else {
            // Reset when closing
            form.reset();
            setSelectedSection('');
        }
    }, [openedAddTaskPopover, sectionOptions]);

    const handleTaskCreation = (values) => {
        const newTaskData = {
            name: values.name,
            project_id: projectId,
            task_section_id: parseInt(values.section),
            created_by: loggedInUser ? loggedInUser.loggedUserId : loggedUserId,
            type: 'task',
            status: 'ACTIVE',
            is_visible: false,
        };

        if (newTaskData.name !== '' && newTaskData.name !== 'Type task name here') {
            dispatch(createTask(newTaskData)).then((response) => {
                if (response.payload.status === 200) {
                    setOpenedAddTaskPopover(false);
                    form.reset();
                    notifications.show({
                        color: 'green',
                        title: response.payload.message || translate('Task created successfully'),
                        icon: <IconCheck size={16} />,
                        autoClose: 5000,
                    });
                    const timer = setTimeout(() => {
                        dispatch(removeSuccessMessage());
                    }, 5000);

                    return () => clearTimeout(timer);
                }
            });
        }
    };

    return (
        <Popover
            width={320}
            position="bottom-end"
            offset={{ mainAxis: 7, crossAxis: 10 }}
            shadow={false}
            opened={openedAddTaskPopover}
            onChange={setOpenedAddTaskPopover}
            closeOnClickOutside={false}
        >
            <Popover.Target>
                <Tooltip label={translate('Add Task')} position="top" withArrow>
                    <ActionIcon
                        onClick={() => !disabled && setOpenedAddTaskPopover(!openedAddTaskPopover)}
                        variant="filled"
                        size={37}
                        radius="xl"
                        color="#ED7D31"
                        aria-label="Add Task"
                        disabled={disabled}
                        className={`mt-[2px] ${disabled ? 'opacity-50 !cursor-not-allowed' : 'cursor-pointer'}`}
                    >
                        <IconClipboardPlus className="hover:scale-110" size={24} stroke={1.5} />
                    </ActionIcon>
                </Tooltip>
            </Popover.Target>

            <Popover.Dropdown style={{
                padding: 0,
                border: `1px solid ${T.border}`,
                borderRadius: T.radius,
                boxShadow: '0 8px 32px rgba(0,0,0,.12)',
                overflow: 'hidden',
            }}>
                <div style={{ padding: '10px 14px 8px', borderBottom: `1px solid ${T.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px' }}>
                    <span style={{ fontSize: '12px', fontWeight: 700, color: T.text, display: 'flex', alignItems: 'center', gap: '6px' }}>
                        <div style={{ width: 8, height: 8, borderRadius: '50%', backgroundColor: T.teal, flexShrink: 0 }} />
                        {translate('Add Task')}
                    </span>
                    <ActionIcon
                        variant="subtle"
                        color="gray"
                        size="sm"
                        aria-label={translate('Close')}
                        onClick={() => setOpenedAddTaskPopover(false)}
                    >
                        <IconX size={16} stroke={1.5} />
                    </ActionIcon>
                </div>

                <div style={{ padding: '12px 14px 14px' }}>
                    <form onReset={form.onReset} onSubmit={form.onSubmit((values) => handleTaskCreation(values))}>
                        <div className="flex flex-col gap-3">
                            <TextInput
                                placeholder={translate('Type task name here')}
                                key={form.key('name')}
                                {...form.getInputProps('name')}
                                ref={inputRef}
                                data-autofocus
                                styles={{
                                    input: {
                                        fontSize: '12px',
                                        borderRadius: T.radiusSm,
                                        border: `1px solid ${T.border}`,
                                        color: T.text,
                                    },
                                    error: { fontSize: '11px' },
                                }}
                            />

                            <Select
                                data={sectionOptions}
                                placeholder={translate('Select section')}
                                value={selectedSection}
                                onChange={(v) => {
                                    const val = v || '';
                                    setSelectedSection(val);
                                    form.setFieldValue('section', val);
                                }}
                                error={form.errors.section}
                                allowDeselect={false}
                                searchable={false}
                                maxDropdownHeight={180}
                                comboboxProps={{ withinPortal: true }}
                                styles={{
                                    input: {
                                        fontSize: '12px',
                                        borderRadius: T.radiusSm,
                                        border: `1px solid ${T.border}`,
                                        color: T.text,
                                    },
                                    error: { fontSize: '11px' },
                                }}
                            />

                            <Flex gap="sm" className="mt-1">
                                <Button
                                    type="submit"
                                    size="xs"
                                    style={{
                                        backgroundColor: T.teal,
                                        color: '#fff',
                                        borderRadius: T.radiusSm,
                                        fontSize: '12px',
                                        fontWeight: 600,
                                    }}
                                >
                                    {translate('Add')}
                                </Button>
                                <Button
                                    type="reset"
                                    size="xs"
                                    variant="subtle"
                                    color="gray"
                                    style={{ fontSize: '12px', borderRadius: T.radiusSm }}
                                    onClick={() => { setTimeout(() => { inputRef.current?.focus(); }, 50); }}
                                >
                                    {translate('Clear')}
                                </Button>
                            </Flex>
                        </div>
                    </form>
                </div>
            </Popover.Dropdown>
        </Popover>
    );
};

export default ProjectAddTaskSnippet;