"use client";

import { ExternalLink, Slack } from "lucide-react";
import { useCallback, useEffect, useState } from "react";

import { TerminalSpinner } from "@/components/terminal-spinner";
import {
	fetchSlackInstallations,
	fetchStaticSlackWorkspace,
	fetchSystemStatus,
	uninstallSlackWorkspace,
	type SlackInstallation,
	type SlackStaticWorkspace,
	type SystemStatus,
} from "@/lib/server";
import { formatRelativeTime } from "@/lib/utils";
import { DestructiveInlineButton } from "./inline-confirm";
import { SettingsSection } from "./section";

export function SlackWorkspaces() {
	const [installs, setInstalls] = useState<SlackInstallation[] | null>(null);
	const [staticWorkspace, setStaticWorkspace] =
		useState<SlackStaticWorkspace | null>(null);
	const [slackMode, setSlackMode] = useState<SystemStatus["slack_mode"] | null>(
		null,
	);
	const [error, setError] = useState<string | null>(null);
	const [deletingId, setDeletingId] = useState<string | null>(null);

	const load = useCallback(async () => {
		try {
			const [list, status, staticWs] = await Promise.all([
				fetchSlackInstallations(),
				fetchSystemStatus(),
				// Returns null when the server isn't in static-token mode
				// — this branch is the common case in OAuth-mode setups.
				fetchStaticSlackWorkspace(),
			]);
			setInstalls(list);
			setSlackMode(status.slack_mode);
			setStaticWorkspace(staticWs);
			setError(null);
		} catch (err) {
			setError(err instanceof Error ? err.message : "Failed to load");
		}
	}, []);

	useEffect(() => {
		load();
	}, [load]);

	const handleUninstall = async (teamId: string) => {
		setDeletingId(teamId);
		try {
			await uninstallSlackWorkspace(teamId);
			await load();
		} catch (err) {
			setError(err instanceof Error ? err.message : "Uninstall failed");
		} finally {
			setDeletingId(null);
		}
	};

	const canInstall = slackMode === "multi-workspace";

	return (
		<SettingsSection
			icon={Slack}
			title="Slack workspaces"
			description={
				canInstall
					? "Workspaces that have granted this server a bot token. Uninstall to revoke."
					: "Multi-workspace OAuth isn't configured. Set SLACK_CLIENT_ID + SLACK_CLIENT_SECRET + SLACK_INSTALL_TOKEN to let teams install from the browser."
			}
			action={
				canInstall ? (
					<InstallButton />
				) : slackMode === "single-workspace" ? (
					<span className="text-xs text-white/40 px-3 py-1.5 border border-white/10 rounded-md">
						Static bot token mode
					</span>
				) : null
			}
		>
			{/* error is terminal — the banner above already renders it.
			    When installs is null without an error, we're still fetching. */}
			{error ? (
				<div className="px-5 py-4 text-red-400 text-xs">{error}</div>
			) : installs === null ? (
				<div className="px-5 py-4">
					<TerminalSpinner label="listing workspaces" />
				</div>
			) : installs.length === 0 && !staticWorkspace ? (
				<div className="px-5 py-6 text-center text-white/35 text-sm">
					No workspaces yet.
				</div>
			) : (
				<ul className="divide-y divide-white/5">
					{/* Static-token workspace — read-only pseudo-row. The
					    "uninstall" path here is "drop the env var", not a
					    button click, so we render a passive pill instead. */}
					{staticWorkspace && (
						<li
							key={`static:${staticWorkspace.team_id}`}
							className="px-5 py-3 flex items-center justify-between gap-4"
						>
							<div className="min-w-0">
								<div className="text-sm font-medium truncate">
									{staticWorkspace.team_name || staticWorkspace.team_id}
								</div>
								<div className="text-white/35 text-xs font-mono truncate">
									{staticWorkspace.team_id}
									{staticWorkspace.bot_user_id
										? ` · bot ${staticWorkspace.bot_user_id}`
										: ""}
									{" · via SLACK_BOT_TOKEN env"}
								</div>
							</div>
							<span className="text-[10px] uppercase tracking-wider text-white/40 font-mono px-2 py-1 border border-white/10 rounded">
								env
							</span>
						</li>
					)}
					{installs.map((i) => (
						<li
							key={i.team_id}
							className="px-5 py-3 flex items-center justify-between gap-4"
						>
							<div className="min-w-0">
								<div className="text-sm font-medium truncate">
									{i.team_name || i.team_id}
								</div>
								<div className="text-white/35 text-xs font-mono truncate">
									{i.team_id} · {i.scopes.split(",").length} scopes · installed{" "}
									{formatRelativeTime(i.installed_at)}
								</div>
							</div>
							<DestructiveInlineButton
								label="Uninstall"
								armedLabel="Yes, uninstall"
								busy={deletingId === i.team_id}
								onConfirm={() => handleUninstall(i.team_id)}
							/>
						</li>
					))}
				</ul>
			)}
		</SettingsSection>
	);
}

function InstallButton() {
	// The install endpoint requires ?install_token=X. We don't know the
	// token (server-side secret), so we link the operator to a page
	// they can paste the token into — or, more typically, they hit
	// /api/channels/slack/oauth/start?install_token=… themselves from
	// the terminal that sourced the env. The button here is a
	// documentation affordance, not a direct deep link.
	return (
		<a
			href="/api/channels/slack/oauth/start"
			target="_blank"
			rel="noopener noreferrer"
			className="inline-flex items-center gap-1.5 px-3 py-1.5 border border-brand/30 text-brand hover:bg-brand/5 rounded-md text-xs font-medium transition-colors"
		>
			<ExternalLink size={13} />
			Install workspace
		</a>
	);
}
