import { useRef, useState } from "react";

import {
	Button,
	ChatComposer,
	type ChatComposerHandle,
	ProjectPicker,
	serialize,
	type SessionSidebarRepo,
} from "@ace/ui";
import { IconChevronDown, IconHash, IconPlus } from "@ace/ui/icons";
import type { Listing } from "@ace/host/protocol";

import type { AppProject } from "./projects";

const MODES = [{ id: "ace", name: "Ace", placeholder: "Start a new channel" }];

export function Dashboard(
	{ project, repos, channels, local, connected, onProject, onOpen, onChannel, onCreate }: {
		project: AppProject;
		repos: SessionSidebarRepo[];
		channels: Listing[];
		local: boolean;
		connected: boolean;
		onProject: (id: string) => void;
		onOpen: () => void;
		onChannel: (channel: Listing) => void;
		onCreate: (text?: string, onCreated?: () => void) => Promise<void>;
	},
) {
	const composer = useRef<ChatComposerHandle>(null);
	const [busy, setBusy] = useState(false);
	const active = channels.filter((channel) => channel.state !== "archived")
		.sort((a, b) => b.created - a.created);
	const hour = new Date().getHours();
	const greeting = hour < 12 ? "Good morning" : hour < 18 ? "Good afternoon" : "Good evening";

	async function start(text?: string) {
		if (busy) return;
		setBusy(true);
		try {
			await onCreate(text, () => {
				const input = composer.current;
				const doc = input?.get();
				if (input && doc && serialize(doc) === text) input.clear();
			});
		} finally {
			setBusy(false);
		}
	}

	return (
		<div className="mx-auto min-h-full w-full max-w-[72rem] px-4 pb-12">
			<section className="mx-auto flex max-w-[39rem] flex-col items-center gap-4 pt-10 text-center md:pt-16">
				<ProjectPicker
					repos={repos}
					selectedRepoId={project.id}
					onRepoChange={(repo) => onProject(repo.id)}
					onAddRepo={connected ? onOpen : undefined}
					trigger={
						<button
							type="button"
							aria-label={`Select project, currently ${project.name}`}
							className="group inline-flex max-w-full select-none items-center gap-1.5 rounded-md bg-muted/50 px-2 py-1 text-xs font-medium text-muted-foreground outline-none transition-[background-color,color,box-shadow] hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30"
						/>
					}
				>
					<span className="truncate">{project.name}</span>
					<IconChevronDown className="size-3 shrink-0" aria-hidden />
				</ProjectPicker>
				<h1 className="text-balance text-display-xs leading-[1.2] font-medium tracking-tight sm:text-display-sm lg:text-display">
					{greeting}
				</h1>
				<p className="max-w-[34rem] text-pretty text-sm leading-[1.55] text-foreground/65">
					{local
						? `What would you like to work on in ${project.name}?`
						: `Catch up on ${project.name}’s channels on ${project.host}.`}
				</p>
			</section>
			{local && (
				<div className="mx-auto mt-9 max-w-[39rem]">
					<ChatComposer
						ref={composer}
						scope={`/projects/${project.id}/dashboard`}
						modes={MODES}
						mode="ace"
						mic={false}
						tools={false}
						canAttach={false}
						canStop={false}
						busy={busy}
						submitBusy={busy}
						canSend={connected && !busy}
						clearOnSend={false}
						onSend={({ doc }) => void start(serialize(doc))}
					/>
				</div>
			)}
			<section className="mx-auto mt-10 max-w-[39rem]">
				<div className="mb-3 flex items-center justify-between gap-3">
					<h2 className="text-sm font-medium">{active.length ? "Pick back up" : "Channels"}</h2>
					{local && (
						<Button
							size="sm"
							variant="ghost"
							disabled={!connected || busy}
							onClick={() => void start()}
						>
							<IconPlus className="size-3.5" aria-hidden />
							New channel
						</Button>
					)}
				</div>
				{active.length
					? (
						<div className="flex flex-col gap-1">
							{active.map((channel) => (
								<button
									key={channel.id}
									onClick={() => onChannel(channel)}
									className="flex min-w-0 items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm outline-none hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring/30"
								>
									<IconHash className="size-4 shrink-0 text-muted-foreground" aria-hidden />
									<span className="min-w-0 flex-1">
										<span className="block truncate">{channel.name}</span>
										{channel.summary && (
											<span className="mt-1 line-clamp-2 text-xs leading-5 break-words text-muted-foreground">
												{channel.summary}
											</span>
										)}
									</span>
									{channel.state === "offline" && (
										<span className="text-xs text-muted-foreground">Offline</span>
									)}
								</button>
							))}
						</div>
					)
					: (
						<p className="text-sm text-muted-foreground">
							Your channels in this project will appear here.
						</p>
					)}
			</section>
		</div>
	);
}