import { createFileRoute } from '@tanstack/solid-router'
// **** Components ****
import { PageHeader } from '@/components/layout/page-header'
import { PageContainer } from '@/components/layout/page-container'
import {
  IconCircleDashedPlus,
  IconEye
} from '@tabler/icons-solidjs'
import { Button } from '@/components/ui/button'
import { Link } from '@tanstack/solid-router'
import {
  Avatar,
  AvatarFallback,
  AvatarImage
} from '@/components/ui/avatar'
import {
  AppCard,
  AppCardContainer,
  AppCardHeader,
  CardContent
} from '@/components/ui/app-card'
import { Switch, Match, For, Show, Suspense } from 'solid-js'
// **** Utils ****
import { userRequiredGuard } from '@/lib/auth.guard'
import { Query } from '@tanstack/solid-db'
import { teamCollection } from '@/domain/team/team.collection'
import { teamMemberCollection } from '@/domain/team/team.collection'
import { userCollection } from '@/domain/user/user.collection'
import { eq } from '@tanstack/solid-db'
import { createSignal, createEffect, onCleanup } from 'solid-js'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'
import { getInitials } from '@/lib/utils'
// **** Hooks ****
import { useLiveQuery } from '@tanstack/solid-db'
// **** Types ****

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

    return {
      orgId: session.activeOrganizationId
    }
  }
})

function RouteComponent() {
  const rData = Route.useLoaderData()
  const params = Route.useParams()

  const [
    createTeamDialogOpen,
    setCreateTeamDialogOpen
  ] = createSignal(false)

  const teamQb = new Query()
    .from({ team: teamCollection })
    .select(({ team }) => ({
      id: team.id,
      name: team.name
    }))
  const {
    data: teams,
    isReady: isTeamsReady,
  } = useLiveQuery(() => ({
    query: teamQb
  }))

  const teamMemberQb = new Query()
    .from({ teamMember: teamMemberCollection })
    .innerJoin({ team: teamCollection }, ({ teamMember, team }) =>
      eq(teamMember.team_id, team.id)
    )
    .innerJoin({ user: userCollection }, ({ teamMember, user }) =>
      eq(teamMember.user_id, user.id)
    )
    .where(({ team }) => eq(team.organization_id, rData().orgId))
    .select(({ teamMember, user, team }) => ({
      id: user.id,
      name: user.name,
      teamId: teamMember.team_id,
      image: user.image,
      teamName: team.name,
    }))
  const {
    data: teamMembers,
    isReady: isTeamMembersReady
  } = useLiveQuery(() => ({
    query: teamMemberQb
  }))

  createEffect(() => {
    onCleanup(() => teamCollection.cleanup())
    onCleanup(() => teamMemberCollection.cleanup())
    onCleanup(() => userCollection.cleanup())
  })

  return (
    <Suspense
      fallback={
        <span>Loading</span>
      }
    >
      <PageContainer>
        <PageHeader
          title="Workspaces"
          subtitle="Manage your workspaces"
          actions={
            <Button
              onClick={() => setCreateTeamDialogOpen(true)}
            >
              <IconCircleDashedPlus
                class="-ms-1 opacity-60"
                size={16}
                aria-hiden="true"
              />
              Create new workspace
            </Button>
          }
        />
        <section class="grid grid-cols-4 gap-4">
          <Show
            when={
              isTeamsReady() && isTeamMembersReady()
            }
          >
            <For each={teams}>
              {t => (
                <TeamCard
                  members={teamMembers}
                  slug={params().slug}
                  team={t}
                />
              )}
            </For>
          </Show>
        </section>
      </PageContainer>
    </Suspense>
  )
}

type QueryTeamMember = {
  id: string
  name: string
  image: string | undefined
  teamId: string
  teamName: string
}

function getTeamMembers(teamId: string, members: Array<QueryTeamMember>) {
  return members.filter(m => m.teamId === teamId)
}

type TeamCardProps = {
  team: {
    id: string
    name: string
  },
  slug: string,
  members: Array<QueryTeamMember>
}

function TeamCard(props: TeamCardProps) {
  return (
    <AppCard>
      <AppCardContainer>
        <CardContent class="space-y-3 min-h-[160px]">
          <Avatar class="mx-auto size-20">
            <AvatarImage src="" />
            <AvatarFallback
              class="brand-gradient text-xl font-bold"
            >
              {props.team.name.charAt(0)}
            </AvatarFallback>
          </Avatar>
          <div class="flex flex-col items-center space-y-2">
            <span class="mx-auto font-bold text-xl">
              {props.team.name}
            </span>
            <Switch fallback={
              <span class="text-muted-foreground">
                No members in this workspace
              </span>
            }>
              <Match
                when={
                  getTeamMembers(props.team.id, props.members).length > 0
                }
              >
                <div
                  class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
                >
                  <For
                    each={
                      props.members.
                        filter(tm => tm.teamId === props.team.id)
                        .slice(0, 3)
                    }
                  >
                    {m => (
                      <Avatar class="size-8">
                        <AvatarImage src={m.image} alt={m.name} />
                        <AvatarFallback>{getInitials(m.name)}</AvatarFallback>
                      </Avatar>
                    )}
                  </For>
                  <Show when={
                    getTeamMembers(props.team.id, props.members)
                      .length >= 3
                  }>

                    <Avatar class="size-8">
                      <AvatarImage
                        src=""
                        alt="extra members"
                      />
                      <AvatarFallback
                        class="text-xs"
                      >
                        {`+${getTeamMembers(props.team.id, props.members).length - 3}`}
                      </AvatarFallback>
                    </Avatar>
                  </Show>
                </div>
              </Match>
            </Switch>
          </div>
        </CardContent>
      </AppCardContainer>
      <AppCardHeader class="grid grid-cols-2 gap-3">
        <Link
          class={cn(buttonVariants({ variant: 'ghost', size: 'sm' }))}
          to="/$slug/workspaces/$workspaceId"
          params={{
            slug: props.slug,
            workspaceId: props.team.id
          }}
        >
          <IconEye
            class="-ms-1 opacity-60"
            size={16}
            aria-hiden="true"
          />
          View
        </Link>
        <Button variant="ghost" size="sm">
          <IconCircleDashedPlus
            class="-ms-1 opacity-60"
            size={16}
            aria-hiden="true"
          />
          Add users to workspace
        </Button>
      </AppCardHeader>
    </AppCard>
  )
}