import {
  useMutation,
  useQueryClient,
  useSuspenseQuery,
} from "@tanstack/react-query"
import { createFileRoute, Navigate, useNavigate } from "@tanstack/react-router"
import { Workflow } from "lucide-react"
import { Suspense } from "react"

import { FlowsService } from "@/client"
import { flowKeys, flowsQueryOptions } from "@/components/Flow/queries"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"

export const Route = createFileRoute("/_canvas/flows/")({
  component: () => (
    <Suspense fallback={<Loading />}>
      <FlowsIndex />
    </Suspense>
  ),
  head: () => ({ meta: [{ title: "Flows - Fluksio" }] }),
})

function Loading() {
  return (
    <div className="flex h-full items-center justify-center">
      <Skeleton className="h-32 w-64 rounded-lg" />
    </div>
  )
}

function FlowsIndex() {
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const { data: flows } = useSuspenseQuery(flowsQueryOptions())

  const create = useMutation({
    mutationFn: () =>
      FlowsService.saveFlow({
        name: "my_first_flow",
        requestBody: { name: "my_first_flow", nodes: [], inputs: [] },
      }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: flowKeys.all })
      navigate({
        to: "/flows/$flowName",
        params: { flowName: "my_first_flow" },
      })
    },
  })

  // With flows around, open the first one rather than showing an empty page.
  if (flows.data.length > 0) {
    return (
      <Navigate
        to="/flows/$flowName"
        params={{ flowName: flows.data[0].name }}
        replace
      />
    )
  }

  return (
    <div className="flex h-full flex-col items-center justify-center gap-4 px-4 text-center">
      <span className="flex size-16 items-center justify-center rounded-full bg-muted text-muted-foreground">
        <Workflow className="size-7" />
      </span>
      <div className="grid gap-1">
        <h1 className="font-display text-lg font-medium">No flows yet</h1>
        <p className="max-w-sm text-sm text-muted-foreground">
          A flow is a handful of nodes passing messages to each other. Start
          with one and add nodes as you go.
        </p>
      </div>
      <Button
        onClick={() => create.mutate()}
        disabled={create.isPending}
        data-testid="create-first-flow"
      >
        {create.isPending ? "Creating…" : "Create a flow"}
      </Button>
    </div>
  )
}