<script lang="ts">
	/* eslint-disable @typescript-eslint/no-explicit-any */
	import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
	import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { Button } from '$lib/components/ui/button/index.js';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
	import * as Table from '$lib/components/ui/table/index.js';
	let {
		data,
		openEdit,
		openArchive,
		formatValue,
		recordName
	}: {
		data: any;
		openEdit: any;
		openArchive: any;
		formatValue: any;
		recordName: any;
	} = $props();
</script>

{#if data.records.length > 0}
	<div class="overflow-hidden rounded-lg border border-border">
		<Table.Root>
			<Table.Header>
				<Table.Row>
					<Table.Head>Name</Table.Head>
					<Table.Head>Primary contact</Table.Head>
					<Table.Head>Email</Table.Head>
					<Table.Head>Primary address</Table.Head>
					<Table.Head class="w-12"><span class="sr-only">Actions</span></Table.Head>
				</Table.Row>
			</Table.Header>
			<Table.Body>
				{#each data.records as record (record.id)}
					<Table.Row>
						<Table.Cell class="font-medium"
							><a
								class="inline-flex items-center gap-2 underline-offset-4 hover:text-primary hover:underline"
								href={resolve('/dashboard/clients/[id]', { id: record.id })}
								>{formatValue(record.name)}<ExternalLinkIcon class="size-3.5" /></a
							></Table.Cell
						>
						<Table.Cell>{formatValue(record.primaryContactName)}</Table.Cell>
						<Table.Cell>{formatValue(record.primaryContactEmail)}</Table.Cell>
						<Table.Cell>{formatValue(record.primaryAddressLine1)}</Table.Cell>
						<Table.Cell>
							<DropdownMenu.Root>
								<DropdownMenu.Trigger
									>{#snippet child({ props })}<Button
											variant="ghost"
											size="icon-sm"
											aria-label={`Open actions for ${recordName(record)}`}
											{...props}><EllipsisVerticalIcon /></Button
										>{/snippet}</DropdownMenu.Trigger
								>
								<DropdownMenu.Content align="end" class="w-36">
									<DropdownMenu.Item
										onclick={() => goto(resolve('/dashboard/clients/[id]', { id: record.id }))}
										>View</DropdownMenu.Item
									>
									<DropdownMenu.Item onclick={() => openEdit(record)}>Edit</DropdownMenu.Item>
									<DropdownMenu.Item variant="destructive" onclick={() => openArchive(record)}
										>Archive</DropdownMenu.Item
									>
								</DropdownMenu.Content>
							</DropdownMenu.Root>
						</Table.Cell>
					</Table.Row>
				{/each}
			</Table.Body>
		</Table.Root>
	</div>
{:else}
	<div class="rounded-lg border p-8 text-center text-sm text-muted-foreground">
		No clients have been created yet.
	</div>
{/if}
