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

import {
	aceAvatar,
	Button,
	ChatComposer,
	serialize,
	Timeline,
	toast,
	useLayoutLeft,
} from "@ace/ui";
import { IconSidebar } from "@ace/ui/icons";
import type { Listing, ModelRef } from "@ace/host/protocol";

import { host } from "./host";
import { toEvents } from "./timeline";
import { useTranscript } from "./transcript";

const MODES = [
	{ id: "chat", name: "Chat", placeholder: "Mention @ace to ask the agent" },
	{ id: "ace", name: "Ace", placeholder: "Ask the agent", mention: "ace" },
];
const MENTIONS = [{ name: "ace", avatar: aceAvatar }];
const ACE = /(^|\s)@ace\b/i;

const key = (model: ModelRef) => `${model.provider}/${model.modelId}`;

type Props = { channel: Listing; user: string; remote: boolean };

/** One channel's chat: the original timeline and composer over the channel's transcript. */
export function Conversation({ channel, user, remote }: Props) {
	const left = useLayoutLeft();
	const transcript = useTranscript(channel.id);
	// Runs use the credentials of the host that runs the channel, so offer that host's models.
	const [models, setModels] = useState<ModelRef[]>([]);
	const status = useSyncExternalStore(host.subscribe, () => host.status);
	const settingsVersion = useSyncExternalStore(host.subscribe, () => host.settingsVersion);
	useEffect(() => {
		if (status !== "open") return;
		let active = true;
		host.request<ModelRef[]>({ op: "models", host: channel.host }).then(
			(models) => {
				if (active) setModels(models);
			},
			() => {
				if (active) setModels([]);
			},
		);
		return () => {
			active = false;
		};
	}, [channel.host, status, settingsVersion]);
	const [mode, setMode] = useState("ace");
	const chat = transcript.info?.chats.find((value) => value.id === 1);
	const [picked, setPicked] = useState<string>();
	const model = picked || (chat?.model ? key(chat.model) : key(channel.model));
	const events = useMemo(() => toEvents(transcript.items, channel.id, transcript.busy), [
		transcript.items,
		channel.id,
		transcript.busy,
	]);
	const archived = channel.state === "archived";

	async function send(text: string, mode: string) {
		const invoke = mode === "ace" || ACE.test(text);
		const body = text.trim();
		if (!body) return;
		try {
			if (!invoke) {
				return void (await host.channel(channel.id, { op: "say", author: user, text: body }));
			}
			const [provider, ...rest] = model.split("/");
			const selected = { provider: provider!, modelId: rest.join("/") };
			await host.channel(channel.id, { op: "ask", author: user, text: body, model: selected });
		} catch (error) {
			toast.error("Could not send", { description: (error as Error).message });
		}
	}

	return (
		<>
			<header className="flex h-8 shrink-0 items-center gap-2 border-b pr-3 text-xs electrobun-webkit-app-region-drag">
				<Button
					variant="ghost"
					size="icon-sm"
					className="h-8 w-8 shrink-0 rounded-none electrobun-webkit-app-region-no-drag"
					aria-label="Toggle channels sidebar"
					aria-expanded={left.open}
					onClick={() => left.setOpen((value) => !value)}
				>
					<IconSidebar className="size-4" />
				</Button>
				<span className="min-w-0 truncate font-medium" title={channel.project}>
					#{channel.name}
				</span>
				{remote && <span className="truncate text-muted-foreground">{channel.host}</span>}
				{chat?.lane && (
					<span className="ml-auto truncate text-muted-foreground">lane {chat.lane}</span>
				)}
			</header>
			<div className="relative min-h-0 flex-1">
				<Timeline
					className="h-full min-h-0 contain-paint scroll-fade [--fade:3rem]"
					events={events}
					toolbar={false}
					working={transcript.busy || undefined}
					currentUser={{ login: user }}
					intro={{ name: channel.name, createdAt: Math.floor(channel.created / 1000) }}
				/>
				{transcript.draft && (
					<div className="utils:max-width pointer-events-none absolute inset-x-0 bottom-0 px-6 pb-2 text-sm whitespace-pre-wrap text-muted-foreground">
						{transcript.draft}
					</div>
				)}
			</div>
			<div className="utils:max-width relative z-20 shrink-0 px-3 pb-3">
				<ChatComposer
					scope={`/channels/${channel.id}`}
					canAttach={false}
					modes={MODES}
					mode={mode}
					onModeChange={setMode}
					mentions={MENTIONS}
					models={models.map((value) => ({
						id: key(value),
						name: value.modelId,
						vendor: value.provider,
					}))}
					model={model}
					onModelChange={setPicked}
					busy={transcript.busy}
					canStop={transcript.busy}
					onStop={() => void host.channel(channel.id, { op: "stop" })}
					canSend={!archived}
					onSend={({ doc, mode }) => void send(serialize(doc), mode)}
				/>
			</div>
		</>
	);
}