import AdaptableCard from '@/components/shared/AdaptableCard'
import Container from '@/components/shared/Container'
import { Badge, Button, Checkbox, Dialog, Menu, toast } from '@/components/ui'
import { useConfig } from '@/components/ui/ConfigProvider'
import Notification from '@/components/ui/Notification'
import {
  GetPermissionListResultDto,
  PermissionGrantInfoDto,
  PermissionGroupDto,
  PermissionWithGroupName,
  PermissionWithStyle,
  ProviderInfoDto,
  UpdatePermissionDto,
} from '@/proxy/admin/models'
import { getPermissions, updatePermissions } from '@/services/identity.service'
import { useStoreActions, useStoreState } from '@/store'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { ChangeEvent, useEffect, useMemo, useState } from 'react'

function UsersPermission({
  open,
  onDialogClose,
  name,
  id,
}: {
  open: boolean
  onDialogClose: () => void
  name: string
  id: string
}) {
  const providerName = 'U'
  const { translate } = useLocalization()
  const { getConfig } = useStoreActions((a) => a.abpConfig)

  const [isLoading, setIsLoading] = useState(false)
  const [permissionList, setPermissionList] = useState<GetPermissionListResultDto>()
  const [selectedGroup, setSelectedGroup] = useState<PermissionGroupDto | undefined>()
  const [selectedGroupPermissions, setSelectedGroupPermissions] = useState<PermissionWithStyle[]>(
    [],
  )

  const mode = useStoreState((state) => state.theme.mode)

  const { direction } = useConfig()
  const className = `m${direction[0]}-`

  const fetchDataPermissions = async () => {
    if (!id) {
      return
    }

    const response = await getPermissions(providerName, id)
    setPermissionList(response.data)
  }

  const changeGroup = (groupName?: string) => {
    const group = permissionList?.groups.find((a) => a.name === groupName)

    if (!group) {
      setSelectedGroup(undefined)
      setSelectedGroupPermissions([])
      return
    }

    setSelectedGroup(group)

    const selectedGroupPerm = group.permissions.map(
      (permission) =>
        ({
          ...permission,
          class: className + findMargin(group.permissions, permission) * 4,
        }) as PermissionWithStyle,
    )

    setSelectedGroupPermissions(selectedGroupPerm)
  }

  const onDialogOk = async () => {
    try {
      setIsLoading(true)

      if (permissionList?.groups && id) {
        const listPermissions = await getPermissions(providerName, id)
        const unChangedPermissions = getPermissionsWithGroupName(listPermissions.data?.groups)
        const changedPermissions = getPermissionsWithGroupName(permissionList.groups)

        const updatePermList = changedPermissions
          .filter(
            (per) =>
              (unChangedPermissions.find((unChanged) => unChanged.name === per.name) || {})
                .isGranted !== per.isGranted,
          )
          .map(({ name, isGranted }) => ({ name, isGranted }))

        // 🔴 EN KRİTİK SATIR
        await updatePermissions(providerName, id, {
          permissions: updatePermList,
        })

        // ✅ permission kaydı bittikten sonra config çek
        await getConfig(false)

        toast.push(<Notification title={'Permission updated'} type="success" />, {
          placement: 'top-end',
        })
      }

      onDialogClose()
    } catch (err) {
      console.error(err)
    } finally {
      setIsLoading(false)
    }
  }

  function getPermissionsWithGroupName(groups: PermissionGroupDto[]): PermissionWithGroupName[] {
    return groups.reduce(
      (acc, val) => [
        ...acc,
        ...val.permissions.map<PermissionWithGroupName>((p) => ({
          ...p,
          groupName: val.name || '',
        })),
      ],
      [] as PermissionWithGroupName[],
    )
  }

  function findMargin(
    permissions: PermissionGrantInfoDto[],
    permission: PermissionGrantInfoDto,
    level = 0,
  ): number {
    const parentPermission = permissions.find((per) => per.name === permission.parentName)
    if (parentPermission) {
      return findMargin(permissions, parentPermission, level + 1)
    } else {
      return level
    }
  }

  const isAllSelected = useMemo(
    () =>
      permissionList?.groups.every((group) =>
        group.permissions.every((permission) => permission.isGranted),
      ),
    [permissionList],
  )

  const isAllSelectedForGroup = useMemo(
    () => selectedGroupPermissions.every((permission) => permission.isGranted),
    [selectedGroupPermissions],
  )

  const onSelectAll = (value: boolean, e: ChangeEvent<HTMLInputElement>) => {
    if (!permissionList) {
      return
    }

    const currentGroupName = selectedGroup?.name
    setSelectedGroup(undefined)
    setSelectedGroupPermissions([])

    if (e.target.name === 'group') {
      permissionList?.groups
        .find((group) => group.name === selectedGroup?.name)
        ?.permissions.forEach((permission) => {
          permission.isGranted = value
        })
    } else {
      permissionList?.groups.forEach((group) => {
        group.permissions.forEach((permission) => {
          permission.isGranted = value
        })
      })
    }

    setPermissionList({ ...permissionList })

    changeGroup(currentGroupName)
  }

  function onClickCheckbox(clickedPermission: PermissionGrantInfoDto) {
    if (!permissionList) {
      return
    }

    const groupPerm = selectedGroupPermissions.map((per) => {
      if (clickedPermission.name === per.name) {
        return { ...per, isGranted: !per.isGranted }
      } else if (clickedPermission.name === per.parentName && clickedPermission.isGranted) {
        return { ...per, isGranted: false }
      } else if (clickedPermission.parentName === per.name && !clickedPermission.isGranted) {
        return { ...per, isGranted: true }
      }
      return per
    })

    const permGroup = permissionList?.groups.find((a) => a.name === selectedGroup?.name)
    if (permGroup) {
      permGroup.permissions = groupPerm
    }

    setPermissionList({ ...permissionList })
    setSelectedGroupPermissions(groupPerm)
  }

  useEffect(() => {
    fetchDataPermissions()
  }, [id])

  const isGrantedByOtherProviderName = (grantedProviders: ProviderInfoDto[]): boolean => {
    if (grantedProviders.length) {
      return grantedProviders.findIndex((p) => p.providerName !== providerName) > -1
    }
    return false
  }

  return permissionList ? (
    <Dialog
      width="60%"
      isOpen={open}
      onAfterOpen={() => changeGroup(permissionList?.groups[0].name)}
      onClose={onDialogClose}
      onRequestClose={onDialogClose}
    >
      <h5 className="mb-4">
        {translate('::Permission')} - {name}
      </h5>
      <hr className="mt-1 mb-2"></hr>

      <div className="flex flex-col md:flex-row gap-4">
        <div style={{ width: '30%' }}>
          <Checkbox name="all" checked={isAllSelected} onChange={onSelectAll}>
            {translate('AbpPermissionManagement::SelectAllInAllTabs')}
          </Checkbox>
        </div>
        <div style={{ width: '70%' }}>
          <Checkbox name="group" checked={isAllSelectedForGroup} onChange={onSelectAll}>
            {translate('AbpPermissionManagement::SelectAllInThisTab')}
          </Checkbox>
        </div>
      </div>

      <div className="flex flex-col md:flex-row gap-4">
        <div style={{ width: '30%' }} className="max-h-[450px] overflow-y-auto">
          <hr className="mt-2 mb-2"></hr>
          <Menu variant={mode} defaultActiveKeys={[selectedGroup?.displayName ?? '']}>
            {permissionList?.groups.map((group) => (
              <Menu.MenuItem
                key={group.name}
                className="break-all whitespace-normal"
                eventKey={group.name}
                onSelect={() => {
                  changeGroup(group.name)
                }}
              >
                {translate('::' + group.displayName)} (
                {group.permissions.filter((a) => a.isGranted).length})
              </Menu.MenuItem>
            ))}
          </Menu>
        </div>
        <div style={{ width: '70%' }} className="max-h-[450px] overflow-y-auto">
          <hr className="mt-2 mb-2"></hr>
          <div className="card-body">
            {selectedGroupPermissions.map((permission) => (
              <div key={permission.name}>
                <Checkbox
                  name={permission.name}
                  className={permission.class}
                  disabled={isGrantedByOtherProviderName(permission.grantedProviders)}
                  //disabled={permission.grantedProviders.length > 0 ? true : false}
                  checked={permission.isGranted}
                  onChange={() => onClickCheckbox(permission)}
                >
                  {translate('::' + permission.displayName)}
                  {permission.grantedProviders.map((provider) => (
                    <Badge
                      key={provider.providerKey}
                      className="m-2"
                      content={`${provider.providerName}${
                        provider.providerName !== providerName ? `: ${provider.providerKey}` : ''
                      }`}
                    />
                  ))}
                </Checkbox>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div className="text-right mt-6">
        <Button className="ltr:mr-2 rtl:ml-2" variant="plain" onClick={onDialogClose}>
          Cancel
        </Button>
        <Button variant="solid" loading={isLoading} onClick={onDialogOk}>
          {isLoading ? translate('::SavingWithThreeDot') : translate('::Save')}
        </Button>
      </div>
    </Dialog>
  ) : (
    <></>
  )
}

export default UsersPermission