<script lang="ts">
	import { AlertCircle, X } from 'lucide-svelte';

	interface Props {
		open: boolean;
		title?: string;
		message: string;
		details?: string;
		onClose: () => void;
	}

	let { open = $bindable(false), title = 'Erro', message, details, onClose }: Props = $props();

	let modalRef: HTMLDialogElement;

	function handleClose() {
		open = false;
		onClose();
	}

	$effect(() => {
		if (open && modalRef) {
			modalRef.showModal();
		} else if (!open && modalRef) {
			modalRef.close();
		}
	});
</script>

{#if open}
	<dialog
		bind:this={modalRef}
		class="modal"
		onclick={(e) => e.target === e.currentTarget && handleClose()}
	>
		<div class="modal-box max-w-2xl" onclick={(e) => e.stopPropagation()}>
			<!-- Header -->
			<div class="border-base-300 flex items-center justify-between border-b px-6 py-4">
				<h2 id="modal-title" class="text-error flex items-center gap-2 text-xl font-bold">
					<AlertCircle class="h-5 w-5" strokeWidth={2} />
					{title}
				</h2>
				<button
					type="button"
					class="btn btn-sm btn-circle"
					onclick={handleClose}
					aria-label="Fechar"
				>
					<X class="h-5 w-5" />
				</button>
			</div>

			<!-- Content -->
			<div class="px-6 py-6">
				<p class="text-base-content mb-4">{message}</p>
				{#if details}
					<div class="bg-base-200 mb-4 rounded-lg p-4">
						<p class="text-base-content/70 text-sm whitespace-pre-line">{details}</p>
					</div>
				{/if}
			</div>

			<!-- Footer -->
			<div class="modal-action px-6 pb-6">
				<button class="btn btn-primary" onclick={handleClose}> Fechar </button>
			</div>
		</div>

		<form method="dialog" class="modal-backdrop">
			<button type="button" onclick={handleClose}>fechar</button>
		</form>
	</dialog>
{/if}
