"use client"

import Image from "next/image"
import { useRouter } from "next/navigation"
import TracecatIcon from "public/icon.png"
import { useEffect, useMemo } from "react"
import { useScopeCheck } from "@/components/auth/scope-guard"
import { CenteredSpinner } from "@/components/loading/spinner"
import { Button } from "@/components/ui/button"
import { useEntitlements } from "@/hooks"
import { useWorkspaceId } from "@/providers/workspace-id"

function NoAccessibleSections() {
  const router = useRouter()

  return (
    <main className="container flex size-full max-w-[400px] flex-col items-center justify-center space-y-4">
      <Image src={TracecatIcon} alt="Tracecat" className="mb-4 size-16" />
      <h1 className="text-2xl font-semibold tracking-tight">
        No accessible pages
      </h1>
      <span className="text-center text-muted-foreground">
        You can access this workspace, but you don&apos;t have read permissions
        for any workspace section.
      </span>
      <Button variant="outline" onClick={() => router.replace("/workspaces")}>
        Back to workspaces
      </Button>
    </main>
  )
}

export default function WorkspacePage() {
  const router = useRouter()
  const workspaceId = useWorkspaceId()
  const canViewWorkflows = useScopeCheck("workflow:read")
  const canViewCases = useScopeCheck("case:read")
  const canViewAgents = useScopeCheck("agent:read")
  const canViewTables = useScopeCheck("table:read")
  const canViewVariables = useScopeCheck("variable:read")
  const canViewSecrets = useScopeCheck("secret:read")
  const canViewIntegrations = useScopeCheck("integration:read")
  const canViewServiceAccounts = useScopeCheck("workspace:service_account:read")
  const canViewMembers = useScopeCheck("workspace:member:read")
  const canViewInbox = useScopeCheck("inbox:read")
  const canReadWorkspace = useScopeCheck("workspace:read")

  const { hasEntitlement, isLoading: entitlementsLoading } = useEntitlements()
  const agentAddonsEnabled = hasEntitlement("agent_addons")

  const isLoading =
    entitlementsLoading ||
    [
      canViewWorkflows,
      canViewCases,
      canViewAgents,
      canViewTables,
      canViewVariables,
      canViewSecrets,
      canViewIntegrations,
      canViewServiceAccounts,
      canViewMembers,
      canViewInbox,
      canReadWorkspace,
    ].some((value) => value === undefined)

  const landingPath = useMemo(() => {
    if (isLoading) {
      return undefined
    }
    const basePath = `/workspaces/${workspaceId}`
    if (canViewWorkflows === true) {
      return `${basePath}/workflows`
    }
    if (canViewCases === true) {
      return `${basePath}/cases`
    }
    if (agentAddonsEnabled && canViewAgents === true) {
      return `${basePath}/agents`
    }
    if (canViewTables === true) {
      return `${basePath}/tables`
    }
    if (canViewVariables === true) {
      return `${basePath}/variables`
    }
    if (canViewSecrets === true) {
      return `${basePath}/credentials`
    }
    if (canViewIntegrations === true) {
      return `${basePath}/integrations`
    }
    if (canViewServiceAccounts === true && canReadWorkspace === true) {
      return `${basePath}/service-accounts`
    }
    if (canViewMembers === true) {
      return `${basePath}/members`
    }
    if (canViewInbox === true) {
      return `${basePath}/inbox`
    }
    return null
  }, [
    agentAddonsEnabled,
    canViewAgents,
    canViewCases,
    canViewInbox,
    canViewIntegrations,
    canViewMembers,
    canViewSecrets,
    canReadWorkspace,
    canViewTables,
    canViewVariables,
    canViewWorkflows,
    canViewServiceAccounts,
    isLoading,
    workspaceId,
  ])

  useEffect(() => {
    if (!landingPath) {
      return
    }
    router.replace(landingPath)
  }, [landingPath, router])

  if (landingPath === undefined || landingPath !== null) {
    return <CenteredSpinner />
  }

  return <NoAccessibleSections />
}
