import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";

import {
	Button,
	Layout,
	Main,
	SessionSidebar,
	type SessionSidebarGroup,
	type SessionSidebarGroupId,
	type SessionSidebarProps,
	type SessionSidebarRepo,
	Sidebar,
	type SidebarRow,
	ThemeProvider,
	toast,
	Toaster,
	TooltipProvider,
	useLayoutLeft,
	useLayoutRight,
	useLocalStorage,
	useMedia,
} from "@ace/ui";
import { IconHash, IconPlus } from "@ace/ui/icons";
import type { Hello, HostRequest, Listing, Project } from "@ace/host/protocol";

import { chosen, deployed, remember } from "./address";
import { Channel, ChannelDetails, type ChannelDraft } from "./channel";
import { Dashboard } from "./dashboard";
import { Github, GithubSidebar } from "./github";
import { useGithubRefresh } from "./github-cache";
import { GithubLinks, type GithubTarget } from "./github-link";
import { desktop, titlebar } from "./desktop";
import { host } from "./host";
import { Rename } from "./layout/rename";
import { Navigation, type Page, WindowControls } from "./navigation";
import { EmptyProjects, OpenProject } from "./open-project";
import { projectId, projects } from "./projects";
import { Settings } from "./settings";
import { UpdateNotice } from "./updates";

/**
 * On a phone the channel list is a drawer over the channel: open while no channel is chosen, and
 * out of the way once one is.
 */
function Drawers({ page, channel }: { page: string; channel?: string }) {
	const left = useLayoutLeft();
	const { setOpen: setRightOpen } = useLayoutRight();
	const phone = useMedia("(width < 40rem)");
	const { setOpen } = left;
	useEffect(() => {
		if (phone) setOpen(page === "channels" && !channel);
	}, [phone, page, channel, setOpen]);
	useEffect(() => {
		if (page !== "channels" || !channel) setRightOpen(false);
	}, [page, channel, setRightOpen]);
	return null;
}

function ChannelsSidebar(props: SessionSidebarProps) {
	const left = useLayoutLeft();
	const right = useLayoutRight();
	const phone = useMedia("(width < 40rem)");
	return (
		<SessionSidebar
			{...props}
			onInfo={(item) => {
				props.onSelect?.(item);
				if (phone) left.setOpen(false);
				right.setOpen(true);
			}}
		/>
	);
}

function Disconnected() {
	if (desktop) return <>Disconnected from Ace Helper. Open Settings → This Mac to start it.</>;
	if (!deployed) return <>Disconnected from your host. Reconnecting…</>;
	return (
		<>
			Can't reach {chosen}. Check that Tailscale is on.{" "}
			<button
				type="button"
				className="underline underline-offset-2"
				onClick={() => {
					remember(undefined);
					location.reload();
				}}
			>
				Change host
			</button>
		</>
	);
}

function row(channel: Listing, user: string): SidebarRow {
	return {
		uid: channel.id,
		kind: "session",
		name: channel.name,
		summary: channel.summary,
		createdAt: Math.floor(channel.created / 1000),
		lifecycle: channel.state === "archived" ? "archived" : "live",
		private: false,
		mine: channel.owner === user,
		member: true,
		capabilities: {
			rename: channel.owner === user && channel.state !== "offline",
			archive: true,
		},
		connection: channel.state === "running"
			? "connected"
			: channel.state === "offline"
			? "offline"
			: "idle",
		agent: "idle",
		unreadCount: 0,
		mentionCount: 0,
		lastActivityAt: Math.floor(channel.created / 1000),
		online: [],
	};
}

export function App() {
	const channels = useSyncExternalStore(host.subscribe, () => host.channels);
	const opened = useSyncExternalStore(host.subscribe, () => host.projects);
	const status = useSyncExternalStore(host.subscribe, () => host.status);
	const [hello, setHello] = useState<Hello>({ user: "", host: "" });
	const [page, setPage] = useLocalStorage<Page>("ace:page", "dashboard");
	const [project, setProject] = useLocalStorage<string | undefined>("ace:project-id", undefined);
	const [selected, setSelected] = useLocalStorage<Record<string, string>>(
		"ace:project-channels",
		{},
	);
	const [adding, setAdding] = useState(false);
	const [settings, setSettings] = useState<boolean | "updates">(false);
	const [draft, setDraft] = useState<ChannelDraft>();
	const [renaming, setRenaming] = useState<{ id: string; name: string }>();
	const [github, setGithub] = useLocalStorage<
		Record<string, Partial<Record<"issues" | "prs", GithubTarget>>>
	>(`ace:github-targets:${host.url}`, {});
	const [left, setLeft] = useLocalStorage("panel:left", true);
	const [width, setWidth] = useLocalStorage("panel:left:width", 200);
	const [collapsed, setCollapsed] = useState<Record<SessionSidebarGroupId, boolean>>({
		pinned: false,
		mine: false,
		team: false,
		archived: true,
	});
	const picking = useRef(false);
	const creating = useRef(false);
	useEffect(() => {
		const open = () => setSettings("updates");
		window.addEventListener("ace:updates", open);
		if (location.hash === "#updates") {
			history.replaceState(null, "", location.pathname + location.search);
			open();
		}
		return () => window.removeEventListener("ace:updates", open);
	}, []);

	useEffect(() => {
		if (status !== "open") return;
		host.request<Hello>({ op: "hello" }).then(setHello, () => {});
	}, [status]);

	const available = useMemo(() => projects(opened, channels, hello.host), [
		opened,
		channels,
		hello.host,
	]);
	useGithubRefresh(available);
	const current = available.find((value) => value.id === project) || available[0];
	const visible = channels.filter((channel) =>
		channel.host === current?.host && channel.project === current.path
	);
	const channel = current ? visible.find((value) => value.id === selected[current.id]) : undefined;
	const connected = status === "open" && !!hello.host;
	const local = current?.host === hello.host;
	const repos: SessionSidebarRepo[] = available.map((value) => ({
		id: value.id,
		name: value.host === hello.host ? value.name : `${value.name} · ${value.host}`,
		org: "",
	}));
	const groups: SessionSidebarGroup[] = [
		{
			id: "mine",
			label: "Channels",
			rows: visible.filter((value) => value.state !== "archived" && value.owner === hello.user).map(
				(value) => row(value, hello.user),
			),
			collapsed: collapsed.mine,
		},
		{
			id: "team",
			label: "Team",
			rows: visible.filter((value) => value.state !== "archived" && value.owner !== hello.user).map(
				(value) => row(value, hello.user),
			),
			collapsed: collapsed.team,
		},
		{
			id: "archived",
			label: "Archived",
			rows: visible.filter((value) => value.state === "archived").map((value) =>
				row(value, hello.user)
			),
			collapsed: collapsed.archived,
		},
	];

	function select(value: Pick<Listing, "id" | "host" | "project">) {
		const id = projectId(value.host, value.project);
		setProject(id);
		setSelected((previous) => ({ ...previous, [id]: value.id }));
		setPage("channels");
	}

	async function open(path: string) {
		const value = await host.request<Project>({ op: "project-open", path });
		setProject(projectId(hello.host, value.path));
	}

	async function choose() {
		if (!connected || picking.current) return;
		if (!desktop) return setAdding(true);
		picking.current = true;
		try {
			const path = await desktop.project();
			if (path) await open(path);
		} catch (error) {
			toast.error("Could not open project", { description: (error as Error).message });
		} finally {
			picking.current = false;
		}
	}

	async function create(text?: string, onCreated?: () => void): Promise<void> {
		if (!current || !local || !connected || creating.current) return;
		creating.current = true;
		try {
			const value = await host.request<Pick<Listing, "id" | "project">>({
				op: "create",
				project: current.path,
			});
			if (text) {
				try {
					await host.channel(value.id, { op: "ask", author: hello.user, text });
				} catch (error) {
					setDraft({ channel: value.id, text });
					toast.error("Could not invoke agent", {
						description: (error as Error).message,
						action: { label: "Settings", onClick: () => setSettings(true) },
					});
				}
			}
			onCreated?.();
			select({ ...value, host: hello.host });
		} catch (error) {
			toast.error("Could not start channel", {
				description: (error as Error).message,
				action: { label: "Settings", onClick: () => setSettings(true) },
			});
		} finally {
			creating.current = false;
		}
	}

	async function change(request: HostRequest) {
		try {
			await host.request(request);
		} catch (error) {
			toast.error("Could not update channel", { description: (error as Error).message });
		}
	}

	async function rename(name: string) {
		if (!renaming) return;
		await host.channel(renaming.id, { op: "rename", author: hello.user, name: name.trim() });
		setRenaming(undefined);
	}

	function setTarget(kind: "issues" | "prs", target?: GithubTarget) {
		if (!current) return;
		setGithub((value) => ({
			...value,
			[current.id]: { ...value[current.id], [kind]: target },
		}));
	}

	function openGithub(target: GithubTarget) {
		setTarget(target.kind, target);
		setPage(target.kind);
	}

	return (
		<ThemeProvider storageKey="ace-theme">
			<TooltipProvider>
				{current && <GithubLinks onOpen={openGithub} />}
				<Layout
					appearance={desktop ? "native" : "web"}
					defaultNavOpen={false}
					leftOpen={left}
					onLeftChange={setLeft}
					leftWidth={width}
					onLeftWidthChange={setWidth}
					loading={status === "connecting"}
					onDoubleClick={titlebar}
					nav={
						<Navigation
							page={page}
							user={hello.user}
							onPage={setPage}
							onSettings={() => setSettings(true)}
						/>
					}
				>
					<Drawers page={page} channel={channel?.id} />
					<WindowControls
						onOpen={() => void choose()}
						onSettings={() => setSettings(true)}
						onPage={setPage}
						connected={connected}
					/>
					{page !== "dashboard" && current && (
						<Sidebar
							side="left"
							className="-my-2 h-[calc(100%+1rem)]"
							innerClassName="h-full min-h-0"
						>
							{page === "channels"
								? (
									<ChannelsSidebar
										className="min-h-0 w-full min-w-0 flex-1 bg-transparent"
										projectName={current.name}
										repos={repos}
										selectedRepoId={current.id}
										groups={groups}
										selectedUid={channel?.id}
										loading={status === "connecting" && !channels.length}
										onRepoChange={(repo) => setProject(repo.id)}
										onAddRepo={connected ? () => void choose() : undefined}
										onSelect={(item) => {
											const value = visible.find((value) => value.id === item.uid);
											if (value) select(value);
										}}
										onNewSession={local && connected ? () => void create() : undefined}
										onRename={connected
											? (item) => setRenaming({ id: item.uid, name: item.name })
											: undefined}
										onToggleGroup={(id) =>
											setCollapsed((value) => ({ ...value, [id]: !value[id] }))}
										onArchive={local && connected
											? (item) =>
												void change({
													op: "archive",
													channel: item.uid,
													archived: item.lifecycle !== "archived",
												})
											: undefined}
										onDelete={local && connected
											? (item) => void change({ op: "delete", channel: item.uid })
											: undefined}
										empty={
											<p className="px-4 py-6 text-xs text-muted-foreground">
												No channels in this project yet.
											</p>
										}
									/>
								)
								: (
									<GithubSidebar
										kind={page}
										project={current}
										repos={repos}
										connected={connected}
										onProject={setProject}
										onOpen={() => void choose()}
										onTarget={(target) => setTarget(page, target)}
									/>
								)}
						</Sidebar>
					)}
					<Main
						className={(page === "channels" && channel) || page === "issues" || page === "prs"
							? "overflow-hidden bg-background"
							: "overflow-y-auto bg-background"}
					>
						{deployed && status === "connecting" && !channels.length && (
							<p role="status" className="border-b px-4 py-2 text-xs text-muted-foreground">
								Connecting to{" "}
								{chosen}… If your browser asks to reach devices on your local network, allow it.
							</p>
						)}
						{status === "closed" && (
							<p role="status" className="border-b px-4 py-2 text-xs text-muted-foreground">
								<Disconnected />
							</p>
						)}
						{!current && !connected
							? null
							: !current
							? <EmptyProjects onOpen={() => void choose()} disabled={!connected} />
							: page === "dashboard"
							? (
								<Dashboard
									key={current.id}
									project={current}
									repos={repos}
									channels={visible}
									local={local}
									connected={connected}
									onProject={setProject}
									onOpen={() => void choose()}
									onChannel={select}
									onCreate={create}
								/>
							)
							: page === "issues" || page === "prs"
							? (
								<Github
									key={`${current.id}:${page}`}
									kind={page}
									project={current}
									target={github[current.id]?.[page]}
									onTarget={(target) => setTarget(page, target)}
								/>
							)
							: channel
							? (
								<Channel
									key={channel.id}
									channel={channel}
									user={hello.user}
									remote={!local}
									draft={draft}
									onDraftLoaded={() => setDraft(undefined)}
									onSettings={() => setSettings(true)}
								/>
							)
							: (
								<div className="flex min-h-full flex-col items-center justify-center gap-4 px-5 py-10 text-center">
									<IconHash className="size-6 text-muted-foreground" aria-hidden />
									<h1 className="text-base font-medium">Choose a channel in {current.name}</h1>
									{local && (
										<Button
											disabled={!connected}
											onClick={() => void create()}
										>
											<IconPlus aria-hidden />New channel
										</Button>
									)}
								</div>
							)}
					</Main>
					{page === "channels" && channel && <ChannelDetails channel={channel} />}
				</Layout>
				{adding && <OpenProject onOpen={open} onClose={() => setAdding(false)} />}
				{renaming && (
					<Rename
						open
						name={renaming.name}
						title="Rename channel"
						label="Channel name"
						description="Use lowercase letters, numbers, and hyphens, up to 63 characters."
						maxLength={63}
						pattern="[a-z0-9][a-z0-9\-]{0,62}"
						required
						onSave={rename}
						onCancel={() => setRenaming(undefined)}
					/>
				)}
				{settings && (
					<Settings
						key={String(settings)}
						initialSection={settings === "updates" ? "updates" : undefined}
						onClose={() => setSettings(false)}
					/>
				)}
				{desktop && <UpdateNotice onOpen={() => window.dispatchEvent(new Event("ace:updates"))} />}
				<Toaster />
			</TooltipProvider>
		</ThemeProvider>
	);
}