import { useState, useMemo, useEffect } from 'react'
import Avatar from '@/components/ui/Avatar'
import Button from '@/components/ui/Button'
import Dialog from '@/components/ui/Dialog'
import Input from '@/components/ui/Input'
import Dropdown from '@/components/ui/Dropdown'
import AutoComplete from '@/components/shared/AutoComplete'
import sleep from '@/utils/sleep'
import {
    LuShare2,
    LuX,
    LuChevronDown,
    LuLink,
    LuLoader,
    LuUserRound,
} from 'react-icons/lu'
import { translatePermissionRole } from '@/app/(protected-pages)/apps/projects/scrumboard/utils'

type ShareProjectDialogProps = {
    data: ProjectMeta
    setData: (callback: (data: ProjectMeta) => ProjectMeta) => void
    permissionRoleMap: Record<string, string>
}

type MemberOption = {
    value: string
    label: string
    email: string
    img: string
    status: string
}

type Member = {
    id: string
    name: string
    email: string
    img: string
    permissionRole: string
    status: string
}

type ProjectMeta = {
    id: string
    title: string
    description: string
    participantMembers: Member[]
    allMembers: Member[]
}

const ShareProjectDialog = ({
    data,
    setData,
    permissionRoleMap,
}: ShareProjectDialogProps) => {
    const [dialogOpen, setDialogOpen] = useState(false)

    const [inputValue, setInputValue] = useState('')

    const [selectedMember, setSelectedMember] = useState<MemberOption | null>(
        null,
    )

    const [isLoading, setIsLoading] = useState(false)

    const [invitedPersonPermissionRole, setInvitedPersonPermissionRole] =
        useState('viewer')

    const [selectedPermision, setSelectedPermision] = useState('Can view')

    const [copied, setCopied] = useState(false)

    const handleClose = () => {
        setDialogOpen(false)
        setInputValue('')
        setSelectedMember(null)
    }

    const allMembersOption = useMemo(() => {
        return data.allMembers
            .filter(
                (member) =>
                    !data.participantMembers.some(
                        (participant) => participant.id === member.id,
                    ),
            )
            .map((member) => {
                return {
                    value: member.id,
                    label: member.name,
                    email: member.email,
                    img: member.img,
                    status: member.status,
                }
            })
    }, [data.allMembers, data.participantMembers])

    const permissionRoleOptions = useMemo(() => {
        return Object.entries(permissionRoleMap).map(([key, value]) => {
            return { value: key, label: value }
        })
    }, [permissionRoleMap])

    useEffect(() => {
        if (copied) {
            const copyFeedbackInterval = setTimeout(
                () => setCopied(false),
                2000,
            )

            return () => {
                clearTimeout(copyFeedbackInterval)
            }
        }
    }, [copied])

    const handleOptionSelect = (option: MemberOption) => {
        setSelectedMember(option)
    }

    const handleInvite = async () => {
        setIsLoading(true)
        await sleep(1000)
        setData((prev) => {
            if (selectedMember) {
                return {
                    ...prev,
                    participantMembers: [
                        ...prev.participantMembers,
                        ...[
                            {
                                id: selectedMember.value,
                                name: selectedMember.label,
                                email: selectedMember.email,
                                img: selectedMember.img,
                                permissionRole: invitedPersonPermissionRole,
                                status: 'pending',
                            },
                        ],
                    ],
                }
            }

            if (inputValue && !selectedMember) {
                return {
                    ...prev,
                    participantMembers: [
                        ...prev.participantMembers,
                        ...[
                            {
                                id: new Date().getTime().toString(),
                                name: inputValue,
                                email: inputValue,
                                img: '',
                                permissionRole: invitedPersonPermissionRole,
                                status: 'pending',
                            },
                        ],
                    ],
                }
            }

            return prev
        })
        setIsLoading(false)
        setInputValue('')
        setSelectedMember(null)
    }

    const handleRoleChange = (role: string, id: string) => {
        setData((prev) => {
            return {
                ...prev,
                participantMembers: prev.participantMembers.map((member) => {
                    if (member.id === id) {
                        return {
                            ...member,
                            permissionRole: role,
                        }
                    }
                    return member
                }),
            }
        })
    }
    const translateEventKey = (eventKey: string): string => {
        const translations: Record<string, string> = {
            'Can view': 'می‌تواند مشاهده کند',
            'Can edit': 'می‌تواند ویرایش کند',
            'Can delete': 'می‌تواند حذف کند',
            'Can invite': 'می‌تواند دعوت کند',
        }
        return translations[eventKey] || eventKey
    }
    return (
        <>
            <Button icon={<LuShare2 />} onClick={() => setDialogOpen(true)}>
                اشتراک‌گذاری
            </Button>
            <Dialog
                isOpen={dialogOpen}
                onClose={() => setDialogOpen(false)}
                closable={false}
            >
                <div className="flex justify-between">
                    <div>
                        <h5 className="font-medium">اشتراک‌گذاری این پروژه</h5>
                        <p>
                            اعضای تیم را برای همکاری در این پروژه دعوت کنید.
                        </p>
                    </div>
                    <div>
                        <button
                            className="close-button button-press-feedback hover:bg-gray-100 hover:dark:bg-gray-700 rounded-lg"
                            type="button"
                            onClick={handleClose}
                        >
                            <LuX />
                        </button>
                    </div>
                </div>
                <div className="mt-6">
                    <div className="flex items-center gap-2">
                        <AutoComplete<MemberOption>
                            data={allMembersOption}
                            optionKey={(option) => option.email}
                            renderOption={(option) => (
                                <div className="flex items-center gap-2 p-1 cursor-pointer">
                                    <Avatar
                                        src={option.img}
                                        shape="circle"
                                        size={25}
                                    />
                                    <span className="font-medium">
                                        {option.label}
                                    </span>
                                </div>
                            )}
                            value={inputValue}
                            placeholder="نام یا ایمیل را وارد کنید"
                            onInputChange={setInputValue}
                            onOptionSelected={handleOptionSelect}
                            autoComplete="off"
                            suffix={
                                <Dropdown
                                    placement="bottom-end"
                                    menuClass="min-w-[150px]"
                                    renderTitle={
                                        <Button
                                            className="px-0"
                                            variant="link"
                                            size="sm"
                                            iconAlignment="end"
                                            icon={<LuChevronDown />}
                                        >
                                            {
                                                translatePermissionRole(permissionRoleMap[
                                                    invitedPersonPermissionRole
                                                ])

                                            }
                                        </Button>
                                    }
                                >
                                    {permissionRoleOptions.map((option) => (
                                        <Dropdown.Item
                                            key={option.value}
                                            disabled={option.value === 'owner'}
                                            onClick={() =>
                                                setInvitedPersonPermissionRole(
                                                    option.value,
                                                )
                                            }
                                        >
                                            {translatePermissionRole(option.label)}
                                        </Dropdown.Item>
                                    ))}
                                </Dropdown>
                            }
                        />
                        <Button
                            variant="solid"
                            onClick={handleInvite}
                            loading={isLoading}
                        >
                            دعوت
                        </Button>
                    </div>
                </div>
                <div className="mt-6">
                    <h6>شرکت‌کنندگان</h6>
                    <div className="mt-1">
                        {data.participantMembers.map((participant) => (
                            <div
                                key={participant.id}
                                className="flex items-center justify-between gap-2 py-2"
                            >
                                <div className="flex items-center gap-2">
                                    <Avatar
                                        src={participant.img}
                                        icon={
                                            <LuUserRound className="heading-text" />
                                        }
                                        shape="circle"
                                        size={32}
                                    />
                                    <div>
                                        <div className="font-medium heading-text">
                                            {participant.name}
                                        </div>
                                        <div className="text-xs">
                                            {participant.email}
                                        </div>
                                    </div>
                                </div>
                                {participant.status === 'pending' ? (
                                    <Button
                                        variant="ghost"
                                        disabled
                                        size="sm"
                                        icon={<LuLoader />}
                                    >
                                        در انتظار
                                    </Button>
                                ) : (
                                    <Dropdown
                                        renderTitle={
                                            <Button
                                                variant="ghost"
                                                size="sm"
                                                iconAlignment="end"
                                                icon={<LuChevronDown />}
                                                disabled={
                                                    participant.permissionRole ===
                                                    'owner'
                                                }
                                            >
                                                {
                                                    translatePermissionRole(
                                                        permissionRoleMap[
                                                        participant
                                                            .permissionRole
                                                        ]
                                                    )
                                                }
                                            </Button>
                                        }
                                        placement="bottom-end"
                                        menuClass="min-w-[150px]"
                                        disabled={
                                            participant.permissionRole ===
                                            'owner'
                                        }
                                    >
                                        {permissionRoleOptions.map((option) => (
                                            <Dropdown.Item
                                                key={option.value}
                                                onClick={() =>
                                                    handleRoleChange(
                                                        option.value,
                                                        participant.id,
                                                    )
                                                }
                                                disabled={
                                                    option.value === 'owner'
                                                }
                                            >
                                                {translatePermissionRole(option.label)}
                                            </Dropdown.Item>
                                        ))}
                                    </Dropdown>
                                )}
                            </div>
                        ))}
                    </div>
                </div>
                <div className="mt-6">
                    <h6>دسترسی پیش‌فرض </h6>
                    <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2 py-2 mt-1">
                            <Avatar
                                icon={<LuLink className="heading-text" />}
                                shape="circle"
                                size={32}
                            />
                            <div>
                                <div className="font-medium heading-text">
                                    هر کسی که لینک را داشته باشد
                                </div>
                                <div className="text-xs">
                                    هر کسی در اینترنت که لینک را داشته باشد
                                </div>
                            </div>
                        </div>
                        <Dropdown
                            placement="bottom-end"
                            renderTitle={
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    iconAlignment="end"
                                    icon={<LuChevronDown />}
                                >
                                    {translateEventKey(selectedPermision)}
                                </Button>
                            }
                            onSelect={(eventKey) =>
                                setSelectedPermision(eventKey)
                            }
                        >
                            <Dropdown.Item eventKey="Can view">
                                می‌تواند مشاهده کند
                            </Dropdown.Item>
                            <Dropdown.Item eventKey="Can edit">
                                می‌تواند ویرایش کند
                            </Dropdown.Item>
                            <Dropdown.Item eventKey="Can delete">
                                می‌تواند حذف کند
                            </Dropdown.Item>
                            <Dropdown.Item eventKey="Can invite">
                                می‌تواند دعوت کند
                            </Dropdown.Item>
                        </Dropdown>
                    </div>
                </div>
                <div className="mt-6">
                    <Input
                        readOnly
                        value="https://eyris.themenate.net/apps/projects/scrumboard"
                        className="bg-gray-100"
                        suffix={
                            <Button
                                variant="link"
                                size="sm"
                                className="px-0"
                                onClick={() => setCopied(true)}
                            >
                                {copied ? 'کپی شد' : 'کپی'}
                            </Button>
                        }
                    />
                </div>
            </Dialog>
        </>
    )
}

export default ShareProjectDialog