<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="flex items-center justify-between px-6 py-4 border-b border-base-300">
        <h2 id="modal-title" class="text-xl font-bold flex items-center gap-2 text-error">
          <AlertCircle class="w-5 h-5" strokeWidth={2} />
          {title}
        </h2>
        <button
          type="button"
          class="btn btn-ghost btn-sm btn-circle"
          onclick={handleClose}
          aria-label="Fechar"
        >
          <X class="w-5 h-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 rounded-lg p-4 mb-4">
            <p class="text-sm text-base-content/70 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}

