<script lang="ts">
	import { slide } from 'svelte/transition';
	import AssignServiceCard from './AssignServiceCard.svelte';
	import type { SvelteSet } from 'svelte/reactivity';

	type EnrichedService = {
		id: string;
		date: string;
		status: string;
		notes: string | null;
		teamMembers: { pk: string }[];
		accountAddressId: string;
		accountName: string;
		addressName: string | null;
		address: string | null;
	};

	type ColumnType = 'unassigned' | 'readyToAssign' | 'assigned';

	interface Props {
		groupKey: string;
		services: EnrichedService[];
		column: ColumnType;
		isExpanded: boolean;
		updatingServices: Set<string>;
		openTeamMemberDropdown: string | null;
		editingDateServiceId?: string | null;
		selectedServices?: SvelteSet<string>;
		// Callbacks
		onToggle: () => void;
		getTeamMemberNames: (teamMembers: { pk: string }[]) => string[];
		getNonDispatchTeamMemberNames: (teamMembers: { pk: string }[]) => string[];
		getAvailableTeamMembers: (service: EnrichedService) => { pk: string; name: string }[];
		getStagedTeamMemberDetails: (serviceId: string) => { pk: string; name: string }[];
		hasStagedMembers: (serviceId: string) => boolean;
		onAddDispatch: (service: EnrichedService) => void;
		onRemoveDispatch: (service: EnrichedService) => void;
		onSubmitStaged: (service: EnrichedService) => void;
		onRemoveNonDispatch: (service: EnrichedService) => void;
		onStageTeamMember: (serviceId: string, memberPk: string) => void;
		onUnstageTeamMember: (serviceId: string, memberPk: string) => void;
		onToggleDropdown: (serviceId: string | null) => void;
		onToggleSelection?: (serviceId: string) => void;
		// Unassigned column specific
		onUpdateDate?: (service: EnrichedService, newDate: string) => void;
		onDeleteService?: (service: EnrichedService) => void;
		onStartEditDate?: (serviceId: string) => void;
		onCancelEditDate?: () => void;
	}

	let {
		groupKey,
		services,
		column,
		isExpanded,
		updatingServices,
		openTeamMemberDropdown,
		editingDateServiceId = null,
		selectedServices,
		onToggle,
		getTeamMemberNames,
		getNonDispatchTeamMemberNames,
		getAvailableTeamMembers,
		getStagedTeamMemberDetails,
		hasStagedMembers,
		onAddDispatch,
		onRemoveDispatch,
		onSubmitStaged,
		onRemoveNonDispatch,
		onStageTeamMember,
		onUnstageTeamMember,
		onToggleDropdown,
		onToggleSelection,
		onUpdateDate,
		onDeleteService,
		onStartEditDate,
		onCancelEditDate
	}: Props = $props();

	function getBadgeClass(): string {
		switch (column) {
			case 'unassigned':
				return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-400';
			case 'readyToAssign':
				return 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-400';
			case 'assigned':
				return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400';
		}
	}

	// Count selected services in this group
	let selectedCount = $derived(
		selectedServices ? services.filter((s) => selectedServices.has(s.id)).length : 0
	);
</script>

<div class="rounded-lg border border-theme bg-theme-card">
	<button
		onclick={onToggle}
		class="flex w-full items-center justify-between interactive px-3 py-2 text-left"
	>
		<span class="flex items-center gap-2">
			<svg
				class="h-4 w-4 text-theme-muted transition-transform {isExpanded ? 'rotate-90' : ''}"
				style="fill: none"
				viewBox="0 0 24 24"
				stroke="currentColor"
			>
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
			</svg>
			<span class="text-sm font-medium text-theme">{groupKey}</span>
		</span>
		<span class="flex items-center gap-1.5">
			{#if selectedCount > 0}
				<span
					class="rounded-full bg-primary-100 px-2 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-400"
				>
					{selectedCount}
				</span>
			{/if}
			<span class="rounded-full px-2 py-0.5 text-xs font-semibold {getBadgeClass()}">
				{services.length}
			</span>
		</span>
	</button>
	{#if isExpanded}
		<div class="space-y-2 border-t border-theme p-2" transition:slide={{ duration: 150 }}>
			{#each services as service (service.id)}
				{@const availableMembers =
					column === 'readyToAssign' ? getAvailableTeamMembers(service) : []}
				{@const stagedMembers =
					column === 'readyToAssign' ? getStagedTeamMemberDetails(service.id) : []}
				{@const hasStaged = column === 'readyToAssign' ? hasStagedMembers(service.id) : false}
				{@const isSelected = selectedServices?.has(service.id) ?? false}
				<AssignServiceCard
					{service}
					{column}
					isUpdating={updatingServices.has(service.id)}
					teamMemberNames={column === 'unassigned' ? getTeamMemberNames(service.teamMembers) : []}
					isEditingDate={column === 'unassigned' && editingDateServiceId === service.id}
					{availableMembers}
					{stagedMembers}
					{hasStaged}
					isDropdownOpen={openTeamMemberDropdown === service.id}
					nonDispatchTeamMemberNames={column === 'assigned'
						? getNonDispatchTeamMemberNames(service.teamMembers)
						: []}
					{isSelected}
					showCheckbox={!!selectedServices}
					onAddDispatch={() => onAddDispatch(service)}
					onRemoveDispatch={() => onRemoveDispatch(service)}
					onSubmitStaged={() => onSubmitStaged(service)}
					onRemoveNonDispatch={() => onRemoveNonDispatch(service)}
					onStageTeamMember={(pk) => onStageTeamMember(service.id, pk)}
					onUnstageTeamMember={(pk) => onUnstageTeamMember(service.id, pk)}
					onToggleDropdown={() =>
						onToggleDropdown(openTeamMemberDropdown === service.id ? null : service.id)}
					onToggleSelection={() => onToggleSelection?.(service.id)}
					onUpdateDate={(newDate) => onUpdateDate?.(service, newDate)}
					onDelete={() => onDeleteService?.(service)}
					onStartEditDate={() => onStartEditDate?.(service.id)}
					{onCancelEditDate}
				/>
			{/each}
		</div>
	{/if}
</div>
