import { createFileRoute } from '@tanstack/solid-router'
// **** Components ****
import { PageContainer } from '@/components/layout/page-container'
import { PageHeader } from '@/components/layout/page-header'
import { Button } from '@/components/ui/button'
import {
  IconCircleDashedPlus,
  IconEye,
  IconLink,
  IconUsersGroup
} from '@tabler/icons-solidjs'
import {
  AppCard,
  AppCardContainer,
  AppCardHeader,
  CardContent
} from '@/components/ui/app-card'
import { Link } from '@tanstack/solid-router'
import {
  Tooltip,
  TooltipTrigger,
  TooltipContent
} from '@/components/ui/tooltip'
import { Badge } from '@/components/ui/badge'
import { Switch, For, Match, Suspense, Show } from 'solid-js'
import {
  Avatar,
  AvatarImage,
  AvatarFallback
} from '@/components/ui/avatar'
// **** Utils ****
import { roleCollection } from '@/domain/role/role.collection'
import { gtpCollection } from '@/domain/gtp/gtp.collection'
import { groupCollection } from '@/domain/group/group.collection'
import { teamCollection } from '@/domain/team/team.collection'
import { userRequiredGuard } from '@/lib/auth.guard'
import { createSignal, createEffect, onCleanup } from 'solid-js'
import { Query } from '@tanstack/solid-db'
import { or, eq } from '@tanstack/solid-db'
import { cn } from '@/lib/utils'
import { buttonVariants } from '@/components/ui/button'
// **** Hooks ****
import { useLiveQuery } from '@tanstack/solid-db'
// **** Types ****
import type { Role } from '@/domain/role/role.schema'
import type { Group } from '@/domain/group/group.schema'
import type { GTP } from '@/domain/gtp/gtp.schema'

export const Route = createFileRoute('/_app/$slug/(shared)/roles/')({
  remountDeps: (ctx) => [ctx.loaderDeps],
  component: RouteComponent,
  beforeLoad: async () => {
    return await userRequiredGuard()
  },
  loader: async ({ context }) => {
    const { session } = context
    // await roleCollection.preload()
    // await gtpCollection.preload()
    // await groupCollection.preload()
    // await teamCollection.preload()

    return {
      orgId: session.activeOrganizationId
    }
  }
})

function RouteComponent() {
  const params = Route.useParams()
  const rData = Route.useLoaderData()
  const [createRoleDialogOpen, setCreateRoleDialogOpen] = createSignal(false)

  const roleQb = new Query()
    .from({ role: roleCollection })
  const { data: roles, isReady: isRolesReady } = useLiveQuery(() => ({
    query: roleQb
  }))

  const groupQb = new Query()
    .from({ group: groupCollection })
  const { data: groups, isReady: isGroupsReady } = useLiveQuery(() => ({
    query: groupQb
  }))

  const gtpQb = new Query()
    .from({ gtp: gtpCollection })
    .innerJoin({ role: roleCollection }, ({ gtp, role }) =>
      eq(gtp.group_role_id, role.id)
    )
    .innerJoin({ team: teamCollection }, ({ gtp, team }) =>
      eq(gtp.team_id, team.id)
    )
    .where(({ role, team }) =>
      or(
        eq(role.org_id, rData().orgId),
        eq(team.organization_id, rData().orgId)
      )
    )
    .select(({ gtp, role, team }) => ({
      ...gtp,
      roleName: role.name,
      teamName: team.name,
    }))
  const { data: gtps, isReady: isGtpsReady } = useLiveQuery(() => ({
    query: gtpQb
  }))


  createEffect(() => {
    onCleanup(() => roleCollection.cleanup())
    onCleanup(() => groupCollection.cleanup())
    onCleanup(() => gtpCollection.cleanup())
    onCleanup(() => teamCollection.cleanup())
  })

  return (
    <Suspense
      fallback={<span>Loading</span>}
    >
      <PageContainer>
        <PageHeader
          title="Roles"
          subtitle="Manage your organization roles"
          actions={
            <Button
              onClick={() => setCreateRoleDialogOpen(true)}
            >
              <IconCircleDashedPlus
                class="-ms-1 opacity-60"
                size={16}
                aria-hiden="true"
              />
              Add role
            </Button>
          }
        />
        <section class="grid grid-cols-4 gap-4">
          <Show
            when={
              isGtpsReady() && isRolesReady() && isGroupsReady()
            }
          >
            <For each={roles}>
              {r => (
                <RoleCard
                  tenantSlug={params().slug}
                  role={getEnrichedRole(groups, gtps, r)}
                />
              )}

            </For>
          </Show>
        </section>
      </PageContainer>
    </Suspense>
  )
}

function getEnrichedRole(
  groups: Group[],
  gtps: GTP[],
  role: Role
) {
  // Set containing groupIds using this role
  const groupRoleIds = new Set<string>()
  const groupsUsingRole: Group[] = []

  for (const x of gtps) {
    if (x.group_role_id === role.id) {
      groupRoleIds.add(x.group_id)
    }
  }

  for (const g of groups) {
    if (groupRoleIds.has(g.id)) {
      groupsUsingRole.push(g)
    }
  }


  return {
    ...role,
    groupCount: groupRoleIds.size,
    groups: groupsUsingRole
  }
}

type RoleCardProps = {
  tenantSlug: string
  type?: string
  role: ReturnType<typeof getEnrichedRole>
}

function RoleCard(props: RoleCardProps) {
  let internalId = props.role.id

  switch (props.type) {
    case "admin":
      internalId = 'admin'
      break
    case "owner":
      internalId = 'owner'
      break
    default:
      internalId = props.role.id
  }

  return (
    <AppCard class="flex flex-col">
      <AppCardContainer class="flex-grow">
        <CardContent class="h-full relative flex flex-col space-y-3">
          <Avatar class="mx-auto size-20">
            <AvatarImage src="" />
            <AvatarFallback class="brand-gradient text-xl font-bold">{props.role.name.charAt(0)}</AvatarFallback>
          </Avatar>
          <div class="flex flex-col items-center justify-between h-full space-y-3">
            <div class="text-center">
              <span class="mx-auto font-bold text-xl">
                {props.role.name}
              </span>
              <p class="text-muted-foreground text-sm text-center">
                {props.role.description}
              </p>
            </div>

            <Tooltip>
              <TooltipTrigger>
                <Badge variant="default" class="gap-1.5 font-semibold">
                  <IconUsersGroup class="text-orange-500" />
                  {`${props.role.groupCount} group(s)`}
                </Badge>
              </TooltipTrigger>
              <TooltipContent class="w-96 py-3 text-left">
                <div class="flex gap-3">
                  <IconUsersGroup
                    class="mt-0.5 shrink-0 opacity-60"
                    size={16}
                    aria-hidden="true"
                  />
                  <div class="space-y-1">
                    <Switch fallback={
                      <p class="text-[13px] font-medium">
                        This role is not in use by any groups
                      </p>
                    }>
                      <Match when={props.role.groupCount > 0}>
                        <p class="text-[13px] font-medium">
                          The following groups make use of this role:
                        </p>
                        <div class="text-xs flex flex-col space-y-2">
                          <For each={props.role.groups}>
                            {group => (
                              <div class="flex items-center justify-between space-x-2">
                                <div class="flex items-center space-x-2">
                                  <span
                                    class="size-1.5 rounded-full bg-orange-500"
                                    aria-hidden="true"
                                  ></span>
                                  <span class="font-semibold">{group.name}</span>
                                </div>
                                <Link
                                  to="/$slug/groups/$groupId"
                                  params={{
                                    groupId: group.id,
                                    slug: props.tenantSlug
                                  }}
                                >
                                  <IconLink
                                    class="mt-0.5 shrink-0 opacity-60"
                                    aria-hidden="true"
                                    size={16}
                                  />
                                </Link>
                              </div>
                            )}
                          </For>
                        </div>
                      </Match>
                    </Switch>
                  </div>
                </div>
              </TooltipContent>
            </Tooltip>
          </div>
        </CardContent>
      </AppCardContainer>
      <AppCardHeader class="grid grid-cols-1 gap-3">
        <Link
          class={cn(
            buttonVariants({ variant: 'link', size: 'sm' }),
            'rounded-lg'
          )}
          to="/$slug/roles/$roleId"
          params={{
            slug: props.tenantSlug,
            roleId: internalId
          }}
        >
          <IconEye
            class="-ms-1 opacity-60"
            size={16}
            aria-hiden="true"
          />
          View
        </Link>
      </AppCardHeader>
    </AppCard>
  )
}