<script lang="ts">
	import { Clock, User, FileText } from 'lucide-svelte';

	interface HistoricoItem {
		acao: string;
		usuarioId: string;
		usuarioNome?: string;
		timestamp: number;
		observacoes?: string;
		dadosAnteriores?: string;
		dadosNovos?: string;
	}

	interface Props {
		historico: HistoricoItem[];
	}

	let { historico }: Props = $props();

	function getAcaoLabel(acao: string) {
		switch (acao) {
			case 'criacao':
				return 'Criação';
			case 'edicao':
				return 'Edição';
			case 'exclusao':
				return 'Exclusão';
			case 'movimentacao':
				return 'Movimentação';
			default:
				return acao;
		}
	}

	function getAcaoColor(acao: string) {
		switch (acao) {
			case 'criacao':
				return 'text-success';
			case 'edicao':
				return 'text-info';
			case 'exclusao':
				return 'text-error';
			case 'movimentacao':
				return 'text-warning';
			default:
				return 'text-base-content';
		}
	}
</script>

<div class="space-y-4">
	{#each historico as item, index}
		<div class="flex gap-4">
			<!-- Linha vertical -->
			{#if index < historico.length - 1}
				<div class="flex flex-col items-center">
					<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
						<Clock class="h-6 w-6 text-primary" />
					</div>
					<div class="w-0.5 h-full bg-base-300 my-2"></div>
				</div>
			{:else}
				<div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
					<Clock class="h-6 w-6 text-primary" />
				</div>
			{/if}

			<!-- Conteúdo -->
			<div class="flex-1 pb-4">
				<div class="card bg-base-100 shadow">
					<div class="card-body p-4">
						<div class="flex items-center justify-between mb-2">
							<div class="flex items-center gap-2">
								<User class="h-4 w-4 text-base-content/60" />
								<span class="font-medium">{item.usuarioNome || 'Usuário'}</span>
							</div>
							<span class="badge {getAcaoColor(item.acao)} badge-outline">
								{getAcaoLabel(item.acao)}
							</span>
						</div>
						<p class="text-sm text-base-content/60 mb-2">
							{new Date(item.timestamp).toLocaleString('pt-BR')}
						</p>
						{#if item.observacoes}
							<div class="flex items-start gap-2 mt-2">
								<FileText class="h-4 w-4 text-base-content/60 mt-0.5" />
								<p class="text-sm text-base-content/70">{item.observacoes}</p>
							</div>
						{/if}
					</div>
				</div>
			</div>
		</div>
	{/each}
</div>


