<script lang="ts">
	import apiFetch, { type Meta, type NewsMessage } from "$lib/api";
	import { onMount } from "svelte";
	import type { PageData } from "./$types";
	import { Button, ButtonGroup } from "@sveltestrap/sveltestrap";
	import Message from "./Message.svelte";
	import Screenshot from "./Screenshot.svelte";

	export let data: PageData;

	let guildCount: number | null = null;
	let inviteUrl: string | null = null;
	let news: NewsMessage[] = [];

	onMount(async () => {
		const meta = await apiFetch<Meta>("GET", "/api/meta");
		guildCount = meta.guilds;
		inviteUrl = meta.invite_url;
		news = meta.news;
	});
</script>

<svelte:head>
	<title>Catalogger</title>
</svelte:head>

<h1>Catalogger</h1>

<p>
	Catalogger is a logging bot for Discord that integrates with <a
		href="https://pluralkit.me"
		target="_blank">PluralKit</a
	>'s message proxying.
</p>
<p>
	It adds extra information to edited and deleted messages: system ID, member
	ID, and the linked account. It also ignores messages that trigger proxies, so
	your deleted message logs will be free of duplicate messages.
	<br />It also shows system information for new members joining your server,
	and can notify you if an account linked to a banned system joins your server.
	Which invite a member used is also logged.
</p>

<p>
	In {guildCount ?? "(loading)"} servers!
</p>

{#if data.user || inviteUrl}
	<p>
		<ButtonGroup>
			{#if inviteUrl}
				<Button color="primary" href={inviteUrl}
					>Add Catalogger to your server</Button
				>
			{/if}
			{#if data.user}
				<Button color="secondary" href="/dash">Open the dashboard</Button>
			{:else}
				<Button color="secondary" href="/api/authorize">Log in</Button>
			{/if}
		</ButtonGroup>
	</p>
{/if}

<h2>News</h2>

{#each news as message (message.posted_at)}
	<Message {message} />
{:else}
	<p>No news right now.</p>
{/each}

<hr class="my-4" />

<div class="row gx-2 gy-2 row-cols-1 row-cols-lg-3">
	<Screenshot
		image="delete"
		alt="Screenshot showing a deleted message log, including PluralKit system and member."
		title="Deleted message logging"
	>
		Catalogger will ignore the deleted messages caused by proxying, while adding
		extra data to the proxied messages themselves.
	</Screenshot>
	<Screenshot
		image="configure-channels"
		alt="Screenshot showing a menu based on an embed and buttons, with fields for every type of log."
		title="Easily configurable"
	>
		You can easily configure Catalogger with its slash commands, or with the
		dashboard (you're there right now!)
	</Screenshot>
	<Screenshot
		image="ban"
		alt="Screenshot showing a ban log, with the user, reason, responsible moderator, and PluralKit system information."
		title="Ban and unban logging"
	>
		When banning a user, Catalogger will warn you if they have a linked
		PluralKit system, and notify you if another account linked to the same
		system joins.
	</Screenshot>
	<Screenshot
		image="join"
		alt="Screenshot showing a join log, including PluralKit system information, a watchlist entry, and a banned system notice."
		title="Join and leave logging"
	>
		When members join your server, Catalogger will list the invite they used,
		their PluralKit system, and whether their system has been banned before. You
		can also add users to a watchlist, and Catalogger will send a warning when
		they join.
	</Screenshot>
	<Screenshot
		image="edit"
		alt="Screenshot showing an edited message log, including PluralKit system and member."
		title="Edited message logging"
	>
		Catalogger can log edited messages too, and ignore the <code>pk;edit</code>
		messages that made the edits. Of course, this <em>also</em> shows the system
		and member that sent the message.
	</Screenshot>
	<Screenshot
		image="keyroles"
		alt="Screenshot showing a key role log, with three roles. The log message also shows the moderator that changed the roles."
		title="Log important roles"
	>
		Catalogger can log your server's most important roles separately, and will
		show who gave or removed the roles in addition to the target.
	</Screenshot>
</div>
