{{--
    Confirm Dialog Component
    Props:
      $id          – unique identifier
      $title       – dialog heading (default: 'Are you sure?')
      $message     – body text
      $confirmText – confirm button label (default: 'Confirm')
      $cancelText  – cancel button label (default: 'Cancel')
      $variant     – danger|primary (default: danger)
      $action      – form action URL (optional – for DELETE forms)

    Usage:
      <x-buttons.danger x-on:click="$dispatch('open-modal', 'del-user-42')">Delete</x-buttons.danger>

      <x-feedback.confirm-dialog
          id="del-user-42"
          title="Delete User"
          message="This action cannot be undone. The user will lose access immediately."
          action="{{ route('admin.users.destroy', 42) }}"
confirm-text="Yes, Delete"
/>
--}}
@props([
'id' => 'confirm',
'title' => 'Are you sure?',
'message' => 'This action cannot be undone.',
'confirmText' => 'Confirm',
'cancelText' => 'Cancel',
'variant' => 'danger',
'action' => null,
'method' => 'DELETE',
'requirePassword' => false,
])

<x-feedback.modal :id="$id" :title="$title" size="sm">
    <div class="space-y-4">
        <p class="text-sm text-muted-foreground">
            {{ $message }}
        </p>

        @if($action)
        <form method="POST" action="{{ $action }}" class="space-y-4">
            @csrf

            @if(! in_array(strtoupper($method), ['GET', 'POST']))
            @method($method)
            @endif

            @if($requirePassword)
            <x-forms.input
                name="password"
                type="password"
                :label="__('form.label.password')"
                :placeholder="__('Enter your current password')"
                required
                autocomplete="current-password"
                data-rule-required="true"
                data-rule-current_password="true"
                :data-msg-required="__('validation.required', ['attribute' => __('form.label.password')])"
                :data-msg-current_password="__('auth.password')" />
            @endif

            <div class="flex items-center justify-end gap-3">
                <x-buttons.secondary
                    type="button"
                    @click="$dispatch('close-modal', '{{ $id }}')">
                    {{ $cancelText }}
                </x-buttons.secondary>

                @php
                $buttonComponent = 'buttons.' . $variant;
                @endphp

                <x-dynamic-component
                    :component="$buttonComponent"
                    type="submit">
                    {{ $confirmText }}
                </x-dynamic-component>
            </div>
        </form>
        @else
        <x-slot name="footer">
            <div class="flex items-center justify-end gap-3">
                <x-buttons.secondary
                    type="button"
                    @click="$dispatch('close-modal', '{{ $id }}')">
                    {{ $cancelText }}
                </x-buttons.secondary>

                @php
                $buttonComponent = 'buttons.' . $variant;
                @endphp

                <x-dynamic-component
                    :component="$buttonComponent"
                    type="button"
                    @click="$dispatch('confirm-action', '{{ $id }}')">
                    {{ $confirmText }}
                </x-dynamic-component>
            </div>
        </x-slot>
        @endif
    </div>
</x-feedback.modal>