"use client";

function shortenPath(p: string): string {
	return p
		.replace(/^\/Users\/[^/]+/, "~")
		.replace(/^\/home\/[^/]+/, "~")
		.replace(/^[A-Za-z]:[/\\]Users[/\\][^/\\]+/, "~");
}

export function EmptyState({
	workspaceExists,
	expectedPath,
}: {
	workspaceExists: boolean;
	/** The resolved workspace path to display (e.g. from the tree API). */
	expectedPath?: string | null;
}) {
	return (
		<div className="flex flex-col items-center justify-center h-full gap-6 px-8">
			{/* Icon */}
			<div
				className="w-20 h-20 rounded-2xl flex items-center justify-center"
				style={{
					background: "var(--color-surface)",
					border: "1px solid var(--color-border)",
					boxShadow: "var(--shadow-sm)",
				}}
			>
				<svg
					width="40"
					height="40"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="1.5"
					strokeLinecap="round"
					strokeLinejoin="round"
					style={{
						color: "var(--color-text-muted)",
						opacity: 0.5,
					}}
				>
					<rect width="7" height="7" x="3" y="3" rx="1" />
					<rect
						width="7"
						height="7"
						x="14"
						y="3"
						rx="1"
					/>
					<rect
						width="7"
						height="7"
						x="14"
						y="14"
						rx="1"
					/>
					<rect
						width="7"
						height="7"
						x="3"
						y="14"
						rx="1"
					/>
				</svg>
			</div>

			{/* Text */}
			<div className="text-center max-w-md">
				<h2
					className="font-instrument text-2xl tracking-tight mb-2"
					style={{ color: "var(--color-text)" }}
				>
					{workspaceExists
						? "Workspace is empty"
						: "No workspace found"}
				</h2>
				<p
					className="text-sm leading-relaxed"
					style={{ color: "var(--color-text-muted)" }}
				>
				{workspaceExists ? (
					<>
						The workspace exists but has no
						knowledge tree yet. Ask the CRM agent to
						create objects and documents to populate
						it.
					</>
				) : (
					<>
						The workspace directory was not
						found. Run the ironclaw bootstrap flow or start a
						conversation and the agent will set it up
						automatically in the managed profile.
					</>
				)}
				</p>
			</div>

			{/* Hint */}
			<div
				className="flex items-center gap-2 px-4 py-3 rounded-xl text-sm"
				style={{
					background: "var(--color-surface)",
					border: "1px solid var(--color-border)",
					color: "var(--color-text-muted)",
					boxShadow: "var(--shadow-sm)",
				}}
			>
				<svg
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
					style={{
						color: "var(--color-accent)",
						flexShrink: 0,
					}}
				>
					<circle cx="12" cy="12" r="10" />
					<path d="M12 16v-4" />
					<path d="M12 8h.01" />
				</svg>
				<span>
					Expected location:{" "}
					<code
						className="px-1.5 py-0.5 rounded-md text-xs"
						style={{
							background: "var(--color-surface-hover)",
							border: "1px solid var(--color-border)",
						}}
					>
						{expectedPath
							? shortenPath(expectedPath)
							: "~/.openclaw/workspace"}
					</code>
				</span>
			</div>

			{/* Back link */}
			<a
				href="/"
				className="flex items-center gap-2 text-sm mt-2"
				style={{ color: "var(--color-accent)" }}
			>
				<svg
					width="16"
					height="16"
					viewBox="0 0 24 24"
					fill="none"
					stroke="currentColor"
					strokeWidth="2"
					strokeLinecap="round"
					strokeLinejoin="round"
				>
					<path d="m12 19-7-7 7-7" />
					<path d="M19 12H5" />
				</svg>
				Back to Home
			</a>
		</div>
	);
}