import {
	Badge,
	Button,
	Field,
	InlineNotice,
	Panel,
	Select,
	TextInput,
} from "@ekklesia/ui";
import { type ReactElement, useState } from "react";
import type { SignageApi } from "../api.js";
import { useAction, useResource, useTick } from "../hooks.js";
import type { ChannelGroupView, ViewerHealthView } from "../types.js";
import {
	FailureNote,
	formatSince,
	OnlineBadge,
	renderLoadable,
} from "./shared.js";

const AUDIENCE_KEY = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/u;

function DisplayRow({
	canManage,
	groups,
	nowMs,
	onChannelChange,
	onNameChange,
	viewer,
}: {
	readonly canManage: boolean;
	readonly groups: readonly ChannelGroupView[];
	readonly nowMs: number;
	readonly onChannelChange: (channelId: string) => void;
	readonly onNameChange: (name: string) => void;
	readonly viewer: ViewerHealthView;
}): ReactElement {
	return (
		<div
			className="signage-display-row"
			data-testid={`signage-display-${viewer.id}`}
		>
			<div className="signage-display-row__identity">
				{canManage ? (
					<TextInput
						aria-label={`Name for ${viewer.name}`}
						defaultValue={viewer.name}
						onBlur={(event) =>
							event.target.value !== viewer.name &&
							onNameChange(event.target.value)
						}
					/>
				) : (
					<strong>{viewer.name}</strong>
				)}
				<OnlineBadge online={viewer.online} />
			</div>
			<div className="signage-display-row__assignment">
				{canManage ? (
					<Field label="Audience channel">
						{(control) => (
							<Select
								{...control}
								aria-label={`Channel for ${viewer.name}`}
								onChange={(event) => onChannelChange(event.target.value)}
								value={viewer.channelId ?? ""}
							>
								{groups.map((group) => (
									<optgroup key={group.id} label={group.name}>
										{group.channels.map((channel) => (
											<option key={channel.id} value={channel.id}>
												{channel.name}
											</option>
										))}
									</optgroup>
								))}
							</Select>
						)}
					</Field>
				) : undefined}
			</div>
			<div className="signage-display-row__health">
				<span>{`Seen ${formatSince(viewer.lastSeenAtMs, nowMs)}`}</span>
				<Badge tone={viewer.offlineReady ? "success" : "neutral"}>
					{viewer.offlineReady
						? `${viewer.cachedAssetCount} cached`
						: "Not offline ready"}
				</Badge>
				{viewer.lastError === null ? undefined : (
					<span
						className="signage-display-row__error"
						title={viewer.lastError.detail ?? undefined}
					>
						{viewer.lastError.code}
					</span>
				)}
			</div>
		</div>
	);
}

/**
 * Channel groups, audience channels, and displays, presented in the same hierarchy they use at run
 * time: one group clock, one audience variant per channel, then the screens assigned to it.
 */
export function DisplaysPanel({
	api,
	canManage,
	copyText,
	displaySetupUrl,
	onGroupsChanged,
}: {
	readonly api: SignageApi;
	readonly canManage: boolean;
	readonly copyText: (value: string) => Promise<void>;
	readonly displaySetupUrl: string | undefined;
	readonly onGroupsChanged?: () => void;
}): ReactElement {
	const groups = useResource(
		() => api.get<{ groups: readonly ChannelGroupView[] }>("channel-groups"),
		[],
	);
	const viewers = useResource(
		() => api.get<{ viewers: readonly ViewerHealthView[] }>("viewers"),
		[],
	);
	const edit = useAction(() => {
		groups.reload();
		viewers.reload();
		onGroupsChanged?.();
	});
	const viewerEdit = useAction(viewers.reload);
	const [groupName, setGroupName] = useState("");
	const [copyStatus, setCopyStatus] = useState<"copied" | "failed" | "idle">(
		"idle",
	);
	const [confirmGroupId, setConfirmGroupId] = useState<string | undefined>(
		undefined,
	);
	const [channelDraft, setChannelDraft] = useState<{
		groupId: string;
		key: string;
		name: string;
	}>({
		groupId: "",
		key: "",
		name: "",
	});
	useTick(5000);
	const nowMs = Date.now();
	const readyViewers =
		viewers.state.status === "ready" ? viewers.state.value.viewers : [];

	const updateViewer = (
		viewerId: string,
		changes: Record<string, string>,
	): void => {
		viewerEdit.run(() => api.send("PATCH", `viewers/${viewerId}`, changes));
	};

	return (
		<div className="signage-columns">
			<Panel
				actions={
					displaySetupUrl === undefined ? undefined : (
						<div className="signage-pairing-actions">
							<a
								className="ek-button ek-focusable ek-button--primary"
								href={displaySetupUrl}
								rel="noopener noreferrer"
								target="_blank"
							>
								Open display setup
							</a>
							<Button
								onClick={() => {
									setCopyStatus("idle");
									void copyText(displaySetupUrl).then(
										() => setCopyStatus("copied"),
										() => setCopyStatus("failed"),
									);
								}}
							>
								Copy URL
							</Button>
						</div>
					)
				}
				description="Connect a screen in three short steps."
				title="Pair a display"
			>
				<ol
					className="signage-pairing-steps"
					aria-label="Display pairing steps"
				>
					<li>
						<span className="signage-pairing-steps__number">1</span>
						<span>
							Open display setup on the screen that will show signage.
						</span>
					</li>
					<li>
						<span className="signage-pairing-steps__number">2</span>
						<span>
							Enter its six-digit code under Display devices in the Dashboard
							sidebar.
						</span>
					</li>
					<li>
						<span className="signage-pairing-steps__number">3</span>
						<span>Name the display and choose its audience channel below.</span>
					</li>
				</ol>
				{displaySetupUrl === undefined ? (
					<InlineNotice tone="warning" title="Display setup unavailable">
						This host did not provide a display setup address.
					</InlineNotice>
				) : undefined}
				<span className="signage-copy-status" aria-live="polite">
					{copyStatus === "copied"
						? "Display setup URL copied."
						: copyStatus === "failed"
							? "Could not copy the URL. Copy it from the newly opened setup page."
							: ""}
				</span>
				{viewers.state.status === "ready" &&
				viewers.state.value.viewers.length === 0 ? (
					<div className="signage-display-empty">
						<strong>No displays paired yet</strong>
						<span>
							A newly approved screen appears below in its assigned channel.
						</span>
					</div>
				) : undefined}
			</Panel>

			<Panel
				actions={
					canManage ? (
						<div className="signage-inline-form signage-new-group">
							<Field label="New channel group">
								{(control) => (
									<TextInput
										{...control}
										onChange={(event) => setGroupName(event.target.value)}
										placeholder="Nursery hallway"
										value={groupName}
									/>
								)}
							</Field>
							<Button
								disabled={edit.pending || groupName.trim().length === 0}
								onClick={() =>
									edit.run(async () => {
										await api.send("POST", "channel-groups", {
											name: groupName.trim(),
										});
										setGroupName("");
									})
								}
								variant="primary"
							>
								Create group
							</Button>
						</div>
					) : undefined
				}
				description="A channel group shares one playback clock. Each audience channel can receive a different content variant."
				title="Channel groups and displays"
			>
				{renderLoadable(
					groups.state,
					(value) => {
						const knownChannelIds = new Set(
							value.groups.flatMap((group) =>
								group.channels.map((channel) => channel.id),
							),
						);
						const unassigned = readyViewers.filter(
							(viewer) =>
								viewer.channelId === null ||
								!knownChannelIds.has(viewer.channelId),
						);
						return (
							<div className="signage-groups" data-testid="signage-groups">
								{value.groups.map((group) => (
									<article className="signage-group" key={group.id}>
										<header className="signage-group__header">
											<div className="signage-group__identity">
												<span className="signage-hierarchy-label">
													Channel group
												</span>
												<h3>{group.name}</h3>
											</div>
											<Badge tone="info">{group.playback.transport}</Badge>
											{canManage && value.groups.length > 1 ? (
												<Button
													disabled={edit.pending}
													onClick={() => setConfirmGroupId(group.id)}
													variant="danger"
												>
													Delete group
												</Button>
											) : canManage ? (
												<Badge tone="neutral">Required group</Badge>
											) : undefined}
										</header>
										{confirmGroupId === group.id ? (
											<div className="signage-confirm" role="alert">
												<p>
													Delete {group.name}? Its playback history will be
													removed. Displays assigned here will move to the
													default channel of another group.
												</p>
												<Button
													disabled={edit.pending}
													onClick={() => setConfirmGroupId(undefined)}
												>
													Cancel
												</Button>
												<Button
													disabled={edit.pending}
													onClick={() =>
														edit.run(async () => {
															await api.send(
																"DELETE",
																`channel-groups/${group.id}`,
															);
															setConfirmGroupId(undefined);
														})
													}
													variant="danger"
												>
													Confirm delete
												</Button>
											</div>
										) : undefined}

										<section className="signage-audiences">
											<div className="signage-audiences__heading">
												<div>
													<span className="signage-hierarchy-label">
														Audience channels
													</span>
													<h4>Who this group renders for</h4>
												</div>
												<span>
													Displays inherit the channel they are assigned to.
												</span>
											</div>
											<div className="signage-channel-list">
												{group.channels.map((channel) => {
													const assigned = readyViewers.filter(
														(viewer) => viewer.channelId === channel.id,
													);
													return (
														<article
															className="signage-channel"
															key={channel.id}
														>
															<header className="signage-channel__header">
																<div>
																	<h5>{channel.name}</h5>
																	<div className="signage-channel__meta">
																		{channel.isDefault ? (
																			<Badge tone="success">
																				Default channel
																			</Badge>
																		) : undefined}
																		<span>Audience key</span>
																		<code>{channel.key}</code>
																		<Badge tone="neutral">
																			{`${assigned.length} display${assigned.length === 1 ? "" : "s"}`}
																		</Badge>
																	</div>
																</div>
																{canManage && !channel.isDefault ? (
																	<Button
																		disabled={edit.pending}
																		onClick={() =>
																			edit.run(() =>
																				api.send(
																					"DELETE",
																					`channels/${channel.id}`,
																				),
																			)
																		}
																		variant="danger"
																	>
																		Remove channel
																	</Button>
																) : undefined}
															</header>
															<div className="signage-channel__displays">
																<span className="signage-hierarchy-label">
																	Displays
																</span>
																{assigned.length === 0 ? (
																	<p className="signage-channel__empty">
																		No displays assigned.
																	</p>
																) : (
																	assigned.map((viewer) => (
																		<DisplayRow
																			canManage={canManage}
																			groups={value.groups}
																			key={viewer.id}
																			nowMs={nowMs}
																			onChannelChange={(channelId) =>
																				updateViewer(viewer.id, { channelId })
																			}
																			onNameChange={(name) =>
																				updateViewer(viewer.id, { name })
																			}
																			viewer={viewer}
																		/>
																	))
																)}
															</div>
														</article>
													);
												})}
											</div>

											{canManage ? (
												<div
													className="signage-channel-form"
													data-testid="signage-add-channel"
												>
													<div className="signage-channel-form__heading">
														<h5>Add an audience channel</h5>
														<span>
															The default channel always remains available.
														</span>
													</div>
													<Field
														hint="Shown to administrators and when assigning displays."
														label="Channel name"
													>
														{(control) => (
															<TextInput
																{...control}
																maxLength={120}
																onChange={(event) =>
																	setChannelDraft((current) => ({
																		groupId: group.id,
																		key:
																			current.groupId === group.id
																				? current.key
																				: "",
																		name: event.target.value,
																	}))
																}
																placeholder="Online audience"
																value={
																	channelDraft.groupId === group.id
																		? channelDraft.name
																		: ""
																}
															/>
														)}
													</Field>
													<Field
														hint="Advanced: lowercase ID sent to content providers, e.g. online."
														label="Audience key"
													>
														{(control) => (
															<TextInput
																{...control}
																maxLength={64}
																onChange={(event) =>
																	setChannelDraft((current) => ({
																		groupId: group.id,
																		key: event.target.value,
																		name:
																			current.groupId === group.id
																				? current.name
																				: "",
																	}))
																}
																pattern="[a-z][a-z0-9]*(?:-[a-z0-9]+)*"
																placeholder="online"
																value={
																	channelDraft.groupId === group.id
																		? channelDraft.key
																		: ""
																}
															/>
														)}
													</Field>
													<Button
														disabled={
															edit.pending ||
															channelDraft.groupId !== group.id ||
															!AUDIENCE_KEY.test(channelDraft.key.trim()) ||
															channelDraft.key.trim() === "default" ||
															channelDraft.name.trim() === ""
														}
														onClick={() =>
															edit.run(async () => {
																await api.send(
																	"POST",
																	`channel-groups/${group.id}/channels`,
																	{
																		key: channelDraft.key.trim(),
																		name: channelDraft.name.trim(),
																	},
																);
																setChannelDraft({
																	groupId: "",
																	key: "",
																	name: "",
																});
															})
														}
														variant="primary"
													>
														Add channel
													</Button>
												</div>
											) : undefined}
										</section>
									</article>
								))}

								{unassigned.length === 0 ? undefined : (
									<section className="signage-unassigned">
										<span className="signage-hierarchy-label">
											Needs assignment
										</span>
										{unassigned.map((viewer) => (
											<DisplayRow
												canManage={canManage}
												groups={value.groups}
												key={viewer.id}
												nowMs={nowMs}
												onChannelChange={(channelId) =>
													updateViewer(viewer.id, { channelId })
												}
												onNameChange={(name) =>
													updateViewer(viewer.id, { name })
												}
												viewer={viewer}
											/>
										))}
									</section>
								)}
							</div>
						);
					},
					{ label: "Loading channel groups…", onRetry: groups.reload },
				)}
				{renderLoadable(viewers.state, () => null, {
					label: "Loading displays…",
					onRetry: viewers.reload,
				})}
				<FailureNote failure={edit.failure} />
				<FailureNote failure={viewerEdit.failure} />
			</Panel>
		</div>
	);
}