"use client"

import { RefreshCcw } from "lucide-react"
import type {
  RegistryRepositoriesSyncRegistryRepositoryData,
  RegistryRepositoryReadMinimal,
  tracecat__registry__repositories__schemas__RegistrySyncResponse,
} from "@/client"
import { Spinner } from "@/components/loading/spinner"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { toast } from "@/components/ui/use-toast"

interface SyncRepositoryDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  selectedRepo: RegistryRepositoryReadMinimal | null
  setSelectedRepo: (repo: RegistryRepositoryReadMinimal | null) => void
  syncRepo: (
    params: RegistryRepositoriesSyncRegistryRepositoryData
  ) => Promise<tracecat__registry__repositories__schemas__RegistrySyncResponse>
  syncRepoIsPending: boolean
}

export function SyncRepositoryDialog({
  open,
  onOpenChange,
  selectedRepo,
  setSelectedRepo,
  syncRepo,
  syncRepoIsPending,
}: SyncRepositoryDialogProps) {
  const handleSync = async () => {
    if (!selectedRepo) {
      console.error("No repository selected")
      return
    }

    try {
      toast({
        title: "Syncing repository",
        description: (
          <span className="flex flex-col space-y-2">
            <span className="flex items-center space-x-2">
              <Spinner className="size-3" />
              <span>
                Syncing repository{" "}
                <b className="inline-block">{selectedRepo.origin}</b>
              </span>
            </span>
          </span>
        ),
      })
      await syncRepo({ repositoryId: selectedRepo.id })
      toast({
        title: "Successfully synced repository",
        description: (
          <span className="flex flex-col space-y-2">
            <span>
              Successfully reloaded actions from{" "}
              <b className="inline-block">{selectedRepo.origin}</b>
            </span>
          </span>
        ),
      })
    } catch (error) {
      console.error("Error syncing repository", error)
    } finally {
      setSelectedRepo(null)
    }
  }

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-2xl">
        <AlertDialogHeader>
          <AlertDialogTitle>Sync repository</AlertDialogTitle>
          <AlertDialogDescription>
            <span className="flex flex-col space-y-3">
              <span>
                You are about to pull the latest version of the repository.
              </span>
              <span className="max-w-full rounded-md border px-3 py-2 font-mono text-sm font-semibold tracking-tight text-foreground break-all whitespace-normal">
                {selectedRepo?.origin}
              </span>
              {selectedRepo?.commit_sha && (
                <span className="flex flex-wrap items-start gap-2 text-sm text-muted-foreground">
                  <span>Current SHA:</span>
                  <span className="rounded bg-secondary px-2 py-1 font-mono text-xs text-secondary-foreground break-all whitespace-normal">
                    {selectedRepo.commit_sha}
                  </span>
                </span>
              )}
              {selectedRepo?.last_synced_at && (
                <span className="text-sm text-muted-foreground">
                  <span>Last synced: </span>
                  <span>
                    {new Date(selectedRepo.last_synced_at).toLocaleString()}
                  </span>
                </span>
              )}
              <span>
                Are you sure you want to proceed? This will reload all existing
                actions with the latest versions from the remote repository.
              </span>
            </span>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={handleSync} disabled={syncRepoIsPending}>
            <div className="flex items-center space-x-2">
              <RefreshCcw
                className={`size-4 ${syncRepoIsPending ? "animate-spin" : ""}`}
              />
              <span>{syncRepoIsPending ? "Syncing..." : "Sync"}</span>
            </div>
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
