<script lang="ts">
	import type { Doc } from '@sgse-app/backend/convex/_generated/dataModel';
	import {
		formatarData,
		formatarTimelineEtapa,
		prazoRestante,
		timelineStatus
	} from '$lib/utils/chamados';

	type Ticket = Doc<'tickets'>;
	type TimelineEntry = NonNullable<Ticket['timeline']>[number];

	interface Props {
		timeline?: Array<TimelineEntry>;
	}

	const props = $props<Props>();
	const timeline = $derived<Array<TimelineEntry>>(props.timeline ?? []);

	const badgeClasses: Record<string, string> = {
		success: 'bg-success/20 text-success border-success/40',
		warning: 'bg-warning/20 text-warning border-warning/40',
		error: 'bg-error/20 text-error border-error/40',
		info: 'bg-info/20 text-info border-info/40'
	};

	function getBadgeClass(entry: TimelineEntry) {
		const status = timelineStatus(entry);
		return badgeClasses[status] ?? badgeClasses.info;
	}

	function getStatusLabel(entry: TimelineEntry) {
		if (entry.status === 'concluido') return 'Concluído';
		if (entry.status === 'em_andamento') return 'Em andamento';
		if (entry.status === 'vencido') return 'Vencido';
		return 'Pendente';
	}

	function getPrazoDescricao(entry: TimelineEntry) {
		if (entry.status === 'concluido' && entry.concluidoEm) {
			return `Concluído em ${formatarData(entry.concluidoEm)}`;
		}
		if (!entry.prazo) return 'Sem prazo definido';
		return `${formatarData(entry.prazo)} • ${prazoRestante(entry.prazo) ?? ''}`;
	}
</script>

<div class="space-y-4">
	{#if timeline.length === 0}
		<div class="alert alert-info">
			<span>Nenhuma etapa registrada ainda.</span>
		</div>
	{:else}
		{#each timeline as entry (entry.etapa + entry.prazo)}
			<div class="flex gap-3">
				<div class="relative flex flex-col items-center">
					<div class={`badge border ${getBadgeClass(entry)}`}>
						{formatarTimelineEtapa(entry.etapa)}
					</div>
					{#if entry !== timeline[timeline.length - 1]}
						<div class="bg-base-200/80 mt-2 h-full w-px flex-1"></div>
					{/if}
				</div>
				<div class="border-base-200 bg-base-100/80 flex-1 rounded-2xl border p-4 shadow-sm">
					<div class="flex flex-wrap items-center gap-2">
						<span class="text-base-content text-sm font-semibold">
							{getStatusLabel(entry)}
						</span>
						{#if entry.status !== 'concluido' && entry.prazo}
							<span class="badge badge-sm badge-outline">
								{prazoRestante(entry.prazo)}
							</span>
						{/if}
					</div>
					{#if entry.observacao}
						<p class="text-base-content/70 mt-2 text-sm">{entry.observacao}</p>
					{/if}
					<p class="text-base-content/50 mt-3 text-xs tracking-wide uppercase">
						{getPrazoDescricao(entry)}
					</p>
				</div>
			</div>
		{/each}
	{/if}
</div>
