<script lang="ts">
	import { goto } from '$app/navigation';
	import ImageBox from '$lib/components/image-box.svelte';
	import Logo from '$lib/components/logo.svelte';
	import { Button } from '$lib/components/ui/button';
	import * as Card from '$lib/components/ui/card';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
	import * as Tooltip from '$lib/components/ui/tooltip';
	import { m } from '$lib/paraglide/messages';
	import userStore from '$lib/stores/user-store';
	import type { AccessibleOidcClient, OidcClientMetaData } from '$lib/types/oidc.type';
	import { cachedOidcClientLogo } from '$lib/utils/cached-image-util';
	import { encodeClientIdParam } from '$lib/utils/client-id-util';
	import {
		LucideBan,
		LucideEllipsisVertical,
		LucideExternalLink,
		LucideLogIn,
		LucidePencil
	} from '@lucide/svelte';
	import { formatDistanceToNow } from 'date-fns';
	import { mode } from 'mode-watcher';

	let {
		client,
		onRevoke
	}: {
		client: AccessibleOidcClient;
		onRevoke: (client: OidcClientMetaData) => Promise<void>;
	} = $props();

	const isLightMode = $derived(mode.current === 'light');
</script>

<Card.Root
	class="border-muted group relative h-[160px] p-5 hover:shadow-md sm:max-w-[50vw] md:max-w-[450px]"
	role="article"
	aria-label={client.name}
>
	<Card.Content class="p-0">
		<div class="flex gap-3">
			<div class="aspect-square h-[56px]">
				{#if client.hasLogo}
					<ImageBox
						class="size-14"
						src={cachedOidcClientLogo.getUrl(client.id, isLightMode)}
						alt={m.name_logo({ name: client.name })}
					/>
				{:else}
					<div class="bg-muted flex size-14 items-center justify-center rounded-2xl p-3">
						<Logo class="size-full" alt={m.name_logo({ name: client.name })} animate={false} />
					</div>
				{/if}
			</div>
			<div class="flex w-full justify-between gap-3">
				<div class="h-20">
					<div class="mb-1 flex items-start gap-2">
						<h3
							class="text-foreground line-clamp-2 leading-tight font-semibold wrap-break-word break-all text-ellipsis"
						>
							{client.name}
						</h3>
					</div>
					{#if client.launchURL}
						<p
							class="text-muted-foreground line-clamp-1 text-xs wrap-break-word break-all text-ellipsis"
						>
							{new URL(client.launchURL).hostname}
						</p>
					{/if}
					{#if client.description}
						<p
							class="text-muted-foreground line-clamp-3 wrap-break-word text-ellipsis text-xs mt-1"
						>
							{client.description}
						</p>
					{/if}
				</div>
				{#if $userStore?.isAdmin || client.lastUsedAt}
					<div>
						<DropdownMenu.Root>
							<DropdownMenu.Trigger>
								<LucideEllipsisVertical class="size-4" />
								<span class="sr-only">{m.toggle_menu()}</span>
							</DropdownMenu.Trigger>
							<DropdownMenu.Content align="end">
								{#if $userStore?.isAdmin}
									<DropdownMenu.Item
										onclick={() =>
											goto(`/settings/admin/oidc-clients/${encodeClientIdParam(client.id)}`)}
										><LucidePencil class="mr-2 size-4" /> {m.edit()}</DropdownMenu.Item
									>
								{/if}
								{#if client.lastUsedAt}
									<DropdownMenu.Item
										class="text-red-500 focus:!text-red-700"
										onclick={() => onRevoke(client)}
										><LucideBan class="mr-2 size-4" />{m.revoke()}</DropdownMenu.Item
									>
								{/if}
							</DropdownMenu.Content>
						</DropdownMenu.Root>
					</div>
				{/if}
			</div>
		</div>

		<div class="mt-2 flex items-end justify-between">
			{#if client.lastUsedAt}
				<Tooltip.Provider>
					<Tooltip.Root>
						<Tooltip.Trigger>
							<p class="text-muted-foreground flex items-center text-xs text-start">
								<LucideLogIn class="mr-2 size-3" />
								{formatDistanceToNow(client.lastUsedAt, { addSuffix: true })}
							</p>
						</Tooltip.Trigger>
						<Tooltip.Content
							>{m.last_signed_in_ago({
								time: formatDistanceToNow(client.lastUsedAt)
							})}</Tooltip.Content
						>
					</Tooltip.Root></Tooltip.Provider
				>
			{:else}
				<div></div>
			{/if}
			{#if client.launchURL}
				<Button
					href={client.launchURL}
					target="_blank"
					size="sm"
					class="h-8 text-xs"
					rel="noopener noreferrer"
				>
					{m.launch()}
					<LucideExternalLink data-icon="inline-end" />
				</Button>
			{/if}
		</div>
	</Card.Content>
</Card.Root>
