"use client"

import { $fetch } from "@lib/api"
import { useConnectorAccess } from "@/hooks/use-connector-access"
import type { ConnectionResponseSchema } from "@repo/validation/api"
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
import { GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons"
import { useCustomer } from "autumn-js/react"
import {
	Check,
	ChevronDown,
	FolderOpen,
	History,
	Loader,
	Loader2,
	Play,
	Trash2,
	Zap,
} from "lucide-react"
import { useEffect, useState } from "react"
import { toast } from "sonner"
import type { z } from "zod"
import { dmSans125ClassName, dmSansClassName } from "@/lib/fonts"
import { cn } from "@lib/utils"
import { DEFAULT_PROJECT_ID } from "@lib/constants"
import type { Project } from "@lib/types"
import { Button } from "@ui/components/button"
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from "@ui/components/dropdown-menu"
import { GranolaConnectModal } from "@/components/granola-connect-modal"
import { RemoveConnectionDialog } from "@/components/remove-connection-dialog"
import { SyncStatusBadge } from "@/components/settings/sync-status-badge"
import { SyncHistoryPanel } from "@/components/settings/sync-history-panel"
import { useConnectionHealth } from "@/hooks/use-connection-health"
import { useTriggerSync } from "@/hooks/use-trigger-sync"
import {
	formatRelativeTime,
	getConnectionSubtitle,
} from "@/components/settings/sync-utils"
import type { ImportProvider } from "@/components/settings/sync-utils"

type GDriveSyncScope = "scoped" | "full"

const GDRIVE_SCOPE_LABELS: Record<GDriveSyncScope, string> = {
	scoped: "Files & Folders",
	full: "Whole Drive",
}

type Connection = z.infer<typeof ConnectionResponseSchema>

type ConnectorProvider = "google-drive" | "notion" | "onedrive" | "granola"

const CONNECTORS: Record<
	ConnectorProvider,
	{
		title: string
		description: string
		documentLabel: string
		icon: React.ComponentType<{ className?: string }>
	}
> = {
	"google-drive": {
		title: "Google Drive",
		description: "Connect your Google docs, sheets and slides",
		documentLabel: "documents",
		icon: GoogleDrive,
	},
	notion: {
		title: "Notion",
		description: "Import your Notion pages and databases",
		documentLabel: "pages",
		icon: Notion,
	},
	onedrive: {
		title: "OneDrive",
		description: "Access your Microsoft Office documents",
		documentLabel: "documents",
		icon: OneDrive,
	},
	granola: {
		title: "Granola",
		description: "Sync AI meeting notes and transcripts",
		documentLabel: "notes",
		icon: Granola,
	},
} as const

/** Extract typed metadata from a connection, with runtime validation. */
function getConnectionMeta(connection: Connection) {
	const m = connection.metadata as Record<string, unknown> | undefined
	return {
		syncInProgress: m?.syncInProgress === true,
		lastSyncedAt:
			typeof m?.lastSyncedAt === "number" ? m.lastSyncedAt : undefined,
		documentCount: typeof m?.documentCount === "number" ? m.documentCount : 0,
	}
}

function ConnectionRow({
	connection,
	onDelete,
	isDeleting,
	projects,
	onTriggerSync,
	isSyncing,
	onReconnect,
	isReconnecting,
}: {
	connection: Connection
	onDelete: () => void
	isDeleting: boolean
	projects: Project[]
	onTriggerSync: () => void
	isSyncing: boolean
	onReconnect: () => void
	isReconnecting: boolean
}) {
	const [historyOpen, setHistoryOpen] = useState(false)
	const config = CONNECTORS[connection.provider as ConnectorProvider]
	const { needsReauth } = useConnectionHealth(connection.id)
	if (!config) return null

	const Icon = config.icon
	const meta = getConnectionMeta(connection)
	const expired = needsReauth

	const getProjectName = (tag: string): string => {
		if (tag === DEFAULT_PROJECT_ID) return "Default"
		return (
			projects.find((p) => p.containerTag === tag)?.name ??
			tag.replace(/^sm_project_/, "").replace(/_/g, " ")
		)
	}

	const projectName = connection.containerTags?.[0]
		? getProjectName(connection.containerTags[0])
		: null

	return (
		<div
			className={cn(
				"bg-[#14161A] border border-[rgba(82,89,102,0.2)] rounded-[12px] px-4 py-3",
				"shadow-[0px_1px_2px_0px_rgba(0,43,87,0.1)]",
			)}
		>
			<div className="flex flex-col gap-3">
				<div className="flex items-center gap-3">
					<Icon className="size-6 shrink-0" />
					<div className="min-w-0 flex-1 flex flex-col gap-1">
						<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
							<span
								className={cn(
									dmSans125ClassName(),
									"truncate font-medium text-[16px] text-[#FAFAFA]",
								)}
							>
								{config.title}
							</span>
							<SyncStatusBadge
								syncInProgress={meta.syncInProgress}
								lastSyncedAt={meta.lastSyncedAt}
								isExpired={expired}
							/>
						</div>
						<span
							className={cn(
								dmSans125ClassName(),
								"truncate text-[14px] text-[#737373]",
							)}
						>
							{getConnectionSubtitle(connection)}
						</span>
					</div>
					<div className="flex shrink-0 items-center gap-0.5">
						{expired ? (
							<button
								type="button"
								onClick={(e) => {
									e.stopPropagation()
									onReconnect()
								}}
								disabled={isReconnecting}
								className={cn(
									dmSans125ClassName(),
									"flex items-center gap-1.5 rounded-full bg-[#EF4444]/15 px-3 py-1.5 text-[12px] font-medium text-[#EF4444] transition-colors hover:bg-[#EF4444]/25 disabled:opacity-60 disabled:cursor-not-allowed",
								)}
								aria-label="Reconnect"
							>
								{isReconnecting ? (
									<Loader2 className="size-[14px] animate-spin" />
								) : (
									"Reconnect"
								)}
							</button>
						) : (
							<button
								type="button"
								onClick={(e) => {
									e.stopPropagation()
									onTriggerSync()
								}}
								disabled={isSyncing}
								className="text-[#737373] hover:text-[#4BA0FA] transition-colors disabled:opacity-50 disabled:cursor-not-allowed p-1.5 rounded-lg hover:bg-white/5"
								aria-label={isSyncing ? "Sync in progress" : "Sync now"}
								title={isSyncing ? "Sync in progress" : "Sync now"}
							>
								{isSyncing ? (
									<Loader2 className="size-[18px] animate-spin" />
								) : (
									<Play className="size-[18px]" />
								)}
							</button>
						)}
						<button
							type="button"
							onClick={(e) => {
								e.stopPropagation()
								setHistoryOpen((v) => !v)
							}}
							aria-label="Sync history"
							aria-expanded={historyOpen}
							title={historyOpen ? "Hide sync history" : "Sync history"}
							className={cn(
								"transition-colors disabled:opacity-50 disabled:cursor-not-allowed p-1.5 rounded-lg hover:bg-white/5 flex items-center gap-0.5",
								historyOpen
									? "text-[#FAFAFA] bg-white/5"
									: "text-[#737373] hover:text-[#FAFAFA]",
							)}
						>
							<History className="size-[18px]" />
							<ChevronDown
								className={cn(
									"size-3 transition-transform",
									historyOpen && "rotate-180",
								)}
							/>
						</button>
						<button
							type="button"
							onClick={onDelete}
							disabled={isDeleting}
							className="text-[#737373] hover:text-red-400 transition-colors disabled:opacity-50 disabled:cursor-not-allowed p-1.5 rounded-lg hover:bg-white/5"
							aria-label="Delete connection"
							title="Remove connection"
						>
							<Trash2 className="size-[18px]" />
						</button>
					</div>
				</div>
				<div className="flex items-center gap-3 pt-2.5 border-t border-[rgba(82,89,102,0.12)]">
					<div className="flex items-center gap-2 flex-1 flex-wrap">
						{projectName && (
							<div className="flex items-center gap-1">
								<FolderOpen className="size-3 text-[#4B5563]" />
								<span
									className={cn(
										dmSans125ClassName(),
										"text-[12px] text-[#737373] capitalize",
									)}
								>
									{projectName}
								</span>
							</div>
						)}
						<span
							className={cn(dmSans125ClassName(), "text-[12px] text-[#737373]")}
						>
							Last synced: {formatRelativeTime(meta.lastSyncedAt)}
						</span>
					</div>
					<div className="flex items-baseline gap-1 shrink-0">
						<span
							className={cn(
								dmSans125ClassName(),
								"text-[14px] font-semibold text-[#FAFAFA]",
							)}
						>
							{meta.documentCount}
						</span>
						<span
							className={cn(dmSans125ClassName(), "text-[12px] text-[#737373]")}
						>
							{config.documentLabel}
						</span>
					</div>
				</div>

				{historyOpen && (
					<div className="border-t border-[rgba(82,89,102,0.12)] pt-3">
						<SyncHistoryPanel
							connectionId={connection.id}
							isOpen={historyOpen}
						/>
					</div>
				)}
			</div>
		</div>
	)
}

interface ConnectContentProps {
	selectedProject: string
}

export function ConnectContent({ selectedProject }: ConnectContentProps) {
	const queryClient = useQueryClient()
	const autumn = useCustomer()
	const { connectorAccess } = useConnectorAccess()
	const [connectingProvider, setConnectingProvider] =
		useState<ConnectorProvider | null>(null)
	const [granolaModalOpen, setGranolaModalOpen] = useState(false)
	const [gdriveSyncScope, setGdriveSyncScope] =
		useState<GDriveSyncScope>("scoped")
	const [isUpgrading, setIsUpgrading] = useState(false)
	const [removeDialog, setRemoveDialog] = useState<{
		open: boolean
		connection: Connection | null
	}>({ open: false, connection: null })
	const triggerSync = useTriggerSync()

	const projects = (queryClient.getQueryData<Project[]>(["projects"]) ||
		[]) as Project[]

	const handleUpgrade = async (planId: "api_pro" | "api_max" = "api_pro") => {
		setIsUpgrading(true)
		try {
			const result = await autumn.attach({
				planId,
				successUrl: window.location.href,
			})
			if (result?.paymentUrl) {
				window.open(result.paymentUrl, "_self")
				return
			}
			autumn.refetch?.()
		} catch (error) {
			console.error("Upgrade error:", error)
			toast.error("Failed to start upgrade process")
		} finally {
			setIsUpgrading(false)
		}
	}

	const connectionsBalance = autumn.data?.balances?.connections
	const connectionsUsed = connectionsBalance?.usage ?? 0
	const connectionsLimit = connectionsBalance?.granted ?? 10
	const canAddConnection = connectionsUsed < connectionsLimit

	// Fetch connections
	const { data: connections = [], error: connectionsError } = useQuery({
		queryKey: ["connections"],
		queryFn: async () => {
			const response = await $fetch("@post/connections/list", {
				body: {
					containerTags: [],
				},
			})

			if (response.error) {
				throw new Error(response.error?.message || "Failed to load connections")
			}

			return response.data as Connection[]
		},
		staleTime: 30 * 1000,
		refetchInterval: (query) => {
			const conns = query.state.data as Connection[] | undefined
			if (conns?.some((c) => getConnectionMeta(c).syncInProgress)) {
				return 5000
			}
			return 60 * 1000
		},
		refetchIntervalInBackground: true,
	})

	// Handle connection errors
	useEffect(() => {
		if (connectionsError) {
			toast.error("Failed to load connections", {
				description:
					connectionsError instanceof Error
						? connectionsError.message
						: "Unknown error",
			})
		}
	}, [connectionsError])

	// Connect mutation
	const addConnectionMutation = useMutation({
		mutationFn: async ({
			provider,
			syncScope,
		}: {
			provider: ConnectorProvider
			syncScope?: GDriveSyncScope
		}) => {
			if (!canAddConnection && !connectorAccess) {
				throw new Error(
					"Free plan doesn't include connections. Upgrade to Pro for unlimited connections.",
				)
			}

			const response = await $fetch("@post/connections/:provider", {
				params: { provider },
				body: {
					redirectUrl: window.location.href,
					containerTags: [selectedProject],
					metadata:
						provider === "google-drive" && syncScope === "full"
							? { syncScope: "full" }
							: undefined,
				},
			})

			// biome-ignore lint/style/noNonNullAssertion: its fine
			if ("data" in response && !("error" in response.data!)) {
				return response.data
			}

			throw new Error(response.error?.message || "Failed to connect")
		},
		onSuccess: (data) => {
			if (data?.authLink) {
				window.location.href = data.authLink
			}
		},
		onError: (error) => {
			setConnectingProvider(null)
			toast.error("Failed to connect", {
				description: error instanceof Error ? error.message : "Unknown error",
			})
		},
	})

	const reconnectMutation = useMutation({
		mutationFn: async ({
			connectionId: _connectionId,
			provider,
			containerTags,
		}: {
			connectionId: string
			provider: ConnectorProvider
			containerTags: string[] | undefined
		}) => {
			const response = await $fetch("@post/connections/:provider", {
				params: { provider },
				body: {
					redirectUrl: window.location.href,
					containerTags: containerTags ?? [selectedProject],
				},
			})
			if ("data" in response && response.data && !("error" in response.data)) {
				return response.data
			}
			throw new Error(response.error?.message || "Failed to reconnect")
		},
		onSuccess: (data) => {
			if (data?.authLink) {
				window.location.href = data.authLink
				return
			}
			toast.error("Reconnect link missing — try again.")
		},
		onError: (error) => {
			toast.error("Failed to reconnect", {
				description: error instanceof Error ? error.message : "Unknown error",
			})
		},
	})

	const deleteConnectionMutation = useMutation({
		mutationFn: async ({
			connectionId,
			deleteDocuments,
		}: {
			connectionId: string
			deleteDocuments: boolean
		}) => {
			await $fetch(`@delete/connections/${connectionId}`, {
				query: { deleteDocuments },
			})
			return { deleteDocuments }
		},
		onSuccess: (_data, variables) => {
			toast.success(
				variables.deleteDocuments
					? "Connection removal has started. Documents will be permanently deleted in the next few minutes."
					: "Connection removed. Your memories have been kept.",
			)
			setRemoveDialog({ open: false, connection: null })
			queryClient.invalidateQueries({ queryKey: ["connections"] })
		},
		onError: (error) => {
			toast.error("Failed to remove connection", {
				description: error instanceof Error ? error.message : "Unknown error",
			})
		},
	})

	const handleConnect = (provider: ConnectorProvider) => {
		setConnectingProvider(provider)
		addConnectionMutation.mutate({
			provider,
			syncScope: provider === "google-drive" ? gdriveSyncScope : undefined,
		})
	}

	const hasConnections = connections.length > 0

	const isAnyConnecting =
		connectingProvider !== null || addConnectionMutation.isPending

	return (
		<div className="h-full flex flex-col pt-0 space-y-4 md:pt-4">
			{/* Top header — only when empty; once connected, the Add CTA moves into the list header below */}
			{!hasConnections && (
				<div className="flex items-center justify-between px-2">
					<p className="text-[16px] font-semibold">Add a connection</p>
					<span className="bg-[#4BA0FA] text-black text-[12px] font-bold px-1 py-[3px] rounded-[3px]">
						PRO
					</span>
				</div>
			)}

			{/* Provider rows — only on empty state. Each is a labelled, descriptive CTA. */}
			{!hasConnections && (
				<div className="space-y-3">
					{Object.entries(CONNECTORS).map(([provider, config]) => {
						const Icon = config.icon
						const isConnecting =
							connectingProvider === provider ||
							(addConnectionMutation.isPending &&
								addConnectionMutation.variables?.provider === provider)

						return (
							<div
								key={provider}
								className="bg-[#14161A] rounded-[12px] px-4 py-3 flex items-center justify-between gap-3"
							>
								<div className="flex items-center gap-3 flex-1">
									<Icon className="size-6 text-[#737373]" />
									<div className="space-y-[6px] flex-1">
										<p className="text-[16px] font-medium">{config.title}</p>
										<p className="text-[16px] text-[#737373]">
											{config.description}
										</p>
									</div>
								</div>
								<div className="flex items-center gap-2">
									{provider === "google-drive" ? (
										<div className="flex items-center rounded-md overflow-hidden">
											<button
												type="button"
												onClick={() => handleConnect("google-drive")}
												disabled={
													!connectorAccess ||
													isConnecting ||
													addConnectionMutation.isPending
												}
												className="bg-[#4BA0FA] text-black hover:bg-[#4BA0FA]/90 text-[14px] font-medium px-3 h-8 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
											>
												{isConnecting ? (
													<Loader className="size-4 animate-spin" />
												) : (
													"Connect"
												)}
											</button>
											<div className="w-px h-5 bg-black/20" />
											<DropdownMenu>
												<DropdownMenuTrigger asChild>
													<button
														type="button"
														className="bg-[#4BA0FA] text-black hover:bg-[#4BA0FA]/90 px-1.5 h-8 flex items-center transition-colors"
													>
														<ChevronDown className="size-3" />
													</button>
												</DropdownMenuTrigger>
												<DropdownMenuContent align="end" className="w-40">
													{(
														Object.entries(GDRIVE_SCOPE_LABELS) as [
															GDriveSyncScope,
															string,
														][]
													).map(([scope, label]) => (
														<DropdownMenuItem
															key={scope}
															onClick={(e) => {
																e.stopPropagation()
																setGdriveSyncScope(scope)
															}}
															className="flex items-center justify-between"
														>
															{label}
															{gdriveSyncScope === scope && (
																<Check className="size-3 text-[#4BA0FA]" />
															)}
														</DropdownMenuItem>
													))}
												</DropdownMenuContent>
											</DropdownMenu>
										</div>
									) : provider === "granola" ? (
										<>
											{!connectorAccess && (
												<span className="bg-[#0054AD] text-[#FAFAFA] text-[10px] font-bold px-1.5 py-[2px] rounded-[3px] uppercase tracking-wide">
													Pro
												</span>
											)}
											<Button
												onClick={() => {
													if (!connectorAccess) {
														handleUpgrade("api_pro")
														return
													}
													setGranolaModalOpen(true)
												}}
												disabled={isUpgrading || autumn.isLoading}
												className="bg-[#4BA0FA] text-black hover:bg-[#4BA0FA]/90 text-[14px] font-medium px-3 py-1.5 h-8"
											>
												{!connectorAccess
													? isUpgrading || autumn.isLoading
														? "Upgrading..."
														: "Upgrade"
													: "Connect"}
											</Button>
										</>
									) : (
										<Button
											onClick={() =>
												handleConnect(provider as ConnectorProvider)
											}
											disabled={
												!connectorAccess ||
												isConnecting ||
												addConnectionMutation.isPending
											}
											className="bg-[#4BA0FA] text-black hover:bg-[#4BA0FA]/90 text-[14px] font-medium px-3 py-1.5 h-8"
										>
											{isConnecting ? (
												<Loader className="size-4 animate-spin" />
											) : (
												"Connect"
											)}
										</Button>
									)}
								</div>
							</div>
						)
					})}
				</div>
			)}

			{/* Connected list - rich rows with status / project / last sync / doc count */}
			{hasConnections && (
				<div className="flex flex-col gap-3">
					<div className="flex items-center justify-between gap-2 px-1">
						<div className="flex min-w-0 flex-col gap-0.5">
							<div className="flex items-center gap-2">
								<p className="truncate text-[16px] font-semibold">
									<span className="hidden sm:inline">
										Connected to Supermemory
									</span>
									<span className="sm:hidden">Connections</span>
								</p>
								<span className="shrink-0 bg-[#4BA0FA] text-black text-[10px] font-bold px-1 py-[2px] rounded-[3px]">
									PRO
								</span>
							</div>
							{connectionsLimit > 0 && (
								<p className="text-[12px] text-[#737373]">
									{connections.length}/{connectionsLimit} connections used
								</p>
							)}
						</div>

						<DropdownMenu>
							<DropdownMenuTrigger asChild>
								<button
									type="button"
									disabled={!connectorAccess || isAnyConnecting}
									className="flex shrink-0 items-center gap-1.5 bg-[#4BA0FA] text-black hover:bg-[#4BA0FA]/90 disabled:opacity-50 disabled:cursor-not-allowed text-[13px] font-medium rounded-full h-8 px-3 transition-colors"
								>
									{isAnyConnecting ? (
										<Loader className="size-3.5 animate-spin" />
									) : (
										<>
											<span className="hidden sm:inline">
												+ Add a connection
											</span>
											<span className="sm:hidden">+ Add</span>
											<ChevronDown className="size-3" />
										</>
									)}
								</button>
							</DropdownMenuTrigger>
							<DropdownMenuContent
								align="end"
								className={cn(
									"min-w-[260px] p-1.5 rounded-xl border border-[#2E3033] shadow-[0px_1.5px_20px_0px_rgba(0,0,0,0.65)]",
									dmSansClassName(),
								)}
								style={{
									background:
										"linear-gradient(180deg, #0A0E14 0%, #05070A 100%)",
								}}
							>
								<div className="flex flex-col gap-2">
									<div className="px-3 py-1">
										<span className="text-[10px] uppercase tracking-wider text-[#737373] font-medium">
											Choose a service
										</span>
									</div>
									<div className="flex flex-col">
										<DropdownMenuItem
											onClick={() => {
												setConnectingProvider("google-drive")
												addConnectionMutation.mutate({
													provider: "google-drive",
													syncScope: "scoped",
												})
											}}
											className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
										>
											<GoogleDrive className="size-5 mt-0.5 shrink-0" />
											<div className="flex flex-col gap-0.5 min-w-0">
												<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
													Google Drive
												</span>
												<span className="text-[11px] text-[#737373] leading-tight">
													Pick specific files & folders
												</span>
											</div>
										</DropdownMenuItem>
										<DropdownMenuItem
											onClick={() => {
												setConnectingProvider("google-drive")
												addConnectionMutation.mutate({
													provider: "google-drive",
													syncScope: "full",
												})
											}}
											className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
										>
											<GoogleDrive className="size-5 mt-0.5 shrink-0" />
											<div className="flex flex-col gap-0.5 min-w-0">
												<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
													Google Drive
												</span>
												<span className="text-[11px] text-[#737373] leading-tight">
													Sync entire drive
												</span>
											</div>
										</DropdownMenuItem>
										<DropdownMenuItem
											onClick={() => {
												setConnectingProvider("notion")
												addConnectionMutation.mutate({ provider: "notion" })
											}}
											className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
										>
											<Notion className="size-5 mt-0.5 shrink-0" />
											<div className="flex flex-col gap-0.5 min-w-0">
												<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
													Notion
												</span>
												<span className="text-[11px] text-[#737373] leading-tight">
													Pages and databases
												</span>
											</div>
										</DropdownMenuItem>
										<DropdownMenuItem
											onClick={() => {
												setConnectingProvider("onedrive")
												addConnectionMutation.mutate({ provider: "onedrive" })
											}}
											className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100"
										>
											<OneDrive className="size-5 mt-0.5 shrink-0" />
											<div className="flex flex-col gap-0.5 min-w-0">
												<span className="text-[14px] font-medium text-[#FAFAFA] leading-tight">
													OneDrive
												</span>
												<span className="text-[11px] text-[#737373] leading-tight">
													Office documents
												</span>
											</div>
										</DropdownMenuItem>
										<DropdownMenuItem
											disabled={isUpgrading || autumn.isLoading}
											onClick={() => {
												if (!connectorAccess) {
													handleUpgrade("api_pro")
													return
												}
												setGranolaModalOpen(true)
											}}
											className="flex items-start gap-2.5 px-3 py-2.5 rounded-md cursor-pointer text-white opacity-60 hover:opacity-100 hover:bg-[#293952]/40 focus:bg-[#293952]/40 focus:opacity-100 data-disabled:opacity-40 data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent"
										>
											<Granola className="size-5 mt-0.5 shrink-0" />
											<div className="flex flex-col gap-0.5 min-w-0">
												<span className="flex items-center gap-1.5 text-[14px] font-medium text-[#FAFAFA] leading-tight">
													Granola
													{!connectorAccess && (
														<span className="bg-[#0054AD] text-[#FAFAFA] text-[9px] font-bold px-1 py-px rounded-[3px] uppercase tracking-wide">
															Pro
														</span>
													)}
												</span>
												<span className="text-[11px] text-[#737373] leading-tight">
													{connectorAccess
														? "Meeting notes & transcripts"
														: "Upgrade to Pro"}
												</span>
											</div>
										</DropdownMenuItem>
									</div>
								</div>
							</DropdownMenuContent>
						</DropdownMenu>
					</div>
					<div className="flex flex-col gap-3">
						{connections.map((connection) => (
							<ConnectionRow
								key={connection.id}
								connection={connection}
								projects={projects}
								onDelete={() => setRemoveDialog({ open: true, connection })}
								isDeleting={deleteConnectionMutation.isPending}
								onTriggerSync={() =>
									triggerSync.mutate({
										connectionId: connection.id,
										provider: connection.provider as ImportProvider,
										containerTags: connection.containerTags,
									})
								}
								isSyncing={
									(triggerSync.isPending &&
										triggerSync.variables?.connectionId === connection.id) ||
									getConnectionMeta(connection).syncInProgress
								}
								onReconnect={() => {
									reconnectMutation.mutate({
										connectionId: connection.id,
										provider: connection.provider as ConnectorProvider,
										containerTags: connection.containerTags,
									})
								}}
								isReconnecting={
									reconnectMutation.isPending &&
									reconnectMutation.variables?.connectionId === connection.id
								}
							/>
						))}
					</div>
				</div>
			)}

			{/* Empty state panel - only when !hasConnections */}
			{!hasConnections && (
				<div
					id="no-active-connections"
					className="bg-[#14161A] shadow-inside-out rounded-[12px] px-4 py-6 h-full mb-4 flex flex-col justify-center items-center"
				>
					<Zap className="size-6 text-[#737373] mb-3" />
					{!connectorAccess ? (
						<>
							<p className="text-[14px] text-[#737373] mb-4 text-center">
								{isUpgrading || autumn.isLoading ? (
									<span className="inline-flex items-center gap-2">
										<Loader className="size-4 animate-spin" />
										Upgrading…
									</span>
								) : (
									<>
										<button
											type="button"
											onClick={() => handleUpgrade()}
											className="underline text-[#737373] hover:text-white transition-colors cursor-pointer"
										>
											Upgrade to Pro
										</button>{" "}
										to get
										<br />
										Supermemory Connections
									</>
								)}
							</p>
							<div className="space-y-2 text-[14px]">
								<div className="flex items-center gap-2">
									<Check className="size-4 text-[#4BA0FA]" />
									<span>Unlimited memories</span>
								</div>
								<div className="flex items-center gap-2">
									<Check className="size-4 text-[#4BA0FA]" />
									<span>10 connections</span>
								</div>
								<div className="flex items-center gap-2">
									<Check className="size-4 text-[#4BA0FA]" />
									<span>Advanced search</span>
								</div>
								<div className="flex items-center gap-2">
									<Check className="size-4 text-[#4BA0FA]" />
									<span>Priority support</span>
								</div>
							</div>
						</>
					) : (
						<div
							className={cn(
								"text-[#737373] text-center max-w-[174px] font-medium",
								dmSansClassName(),
							)}
						>
							<p>No connections yet</p>
							<p className="text-[12px]">
								Choose a service above to import your knowledge
							</p>
						</div>
					)}
				</div>
			)}

			<RemoveConnectionDialog
				open={removeDialog.open}
				onOpenChange={(open) => {
					if (!open) setRemoveDialog({ open: false, connection: null })
				}}
				provider={removeDialog.connection?.provider}
				documentCount={
					(removeDialog.connection?.metadata?.documentCount as number) ?? 0
				}
				onConfirm={(deleteDocuments) => {
					if (removeDialog.connection) {
						deleteConnectionMutation.mutate({
							connectionId: removeDialog.connection.id,
							deleteDocuments,
						})
					}
				}}
				isDeleting={deleteConnectionMutation.isPending}
			/>

			<GranolaConnectModal
				open={connectorAccess && granolaModalOpen}
				onOpenChange={(open) => setGranolaModalOpen(open && connectorAccess)}
				containerTags={[selectedProject]}
			/>
		</div>
	)
}