{#
    File Dropzone Component

    Parameters:
    - id: Unique ID for the dropzone (required)
    - name: Form field name (required)
    - label: Label text (default: 'File')
    - accept_label: Text showing accepted formats (default: 'PNG, JPG, PDF up to 5MB')
    - max_size: Max file size in bytes (default: 5MB)
    - allowed_types: Array of MIME types (default: images + pdf)
    - existing_url: URL of existing file (optional)
    - existing_name: Name of existing file (optional)
    - is_image: Whether existing file is an image (optional)
#}

{% set id = id|default('file-dropzone') %}
{% set label = label|default('File') %}
{% set accept_label = accept_label|default('PNG, JPG, PDF up to 5MB') %}
{% set max_size = max_size|default(5 * 1024 * 1024) %}
{% set allowed_types = allowed_types|default(['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'application/pdf']) %}

<div class="mt-4">
    <label class="block text-sm font-medium text-gray-700 mb-2">{{ label }}</label>
    <div id="{{ id }}"
         class="relative border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-kitsco-accent hover:bg-kitsco-accent/5 transition-all cursor-pointer"
         data-controller="file-dropzone"
         data-file-dropzone-max-size-value="{{ max_size }}"
         data-file-dropzone-allowed-types-value="{{ allowed_types|json_encode }}">

        {# Drop zone prompt #}
        <div data-file-dropzone-target="prompt" class="{{ existing_url is defined and existing_url ? 'hidden' : '' }}">
            <i class="bi bi-cloud-arrow-up text-3xl text-gray-400 block mb-2"></i>
            <p class="text-sm text-gray-600 mb-1">Drag & drop your file here</p>
            <p class="text-xs text-gray-400">or <span class="text-kitsco-accent font-medium">browse</span> to upload</p>
            <p class="text-xs text-gray-400 mt-2">{{ accept_label }}</p>
        </div>

        {# Loading indicator #}
        <div data-file-dropzone-target="loading" class="hidden">
            <i class="bi bi-arrow-repeat text-3xl text-kitsco-accent animate-spin block mb-2"></i>
            <p class="text-sm text-gray-500">Processing file...</p>
        </div>

        {# Preview container #}
        <div data-file-dropzone-target="preview" class="flex items-center justify-center gap-4 {{ existing_url is defined and existing_url ? '' : 'hidden' }}">
            <img src="{{ existing_url|default('') }}" alt="Preview"
                 class="h-20 w-20 object-cover rounded-lg border border-gray-200 {{ existing_url is defined and existing_url and (is_image is defined and is_image) ? '' : 'hidden' }}"
                 data-file-dropzone-target="image">
            <div data-file-dropzone-target="fileIcon"
                 class="h-20 w-20 flex items-center justify-center bg-gray-100 rounded-lg border border-gray-200 {{ existing_url is defined and existing_url and (is_image is not defined or not is_image) ? '' : 'hidden' }}">
                <i class="bi bi-file-earmark-pdf text-3xl text-red-500"></i>
            </div>
            <div class="text-left">
                <p class="text-sm font-medium text-gray-700" data-file-dropzone-target="filename">{{ existing_name|default('Current file') }}</p>
                <p class="text-xs text-gray-400" data-file-dropzone-target="filesize"></p>
                <div class="flex items-center gap-2 mt-1">
                    {% if existing_url is defined and existing_url %}
                    <a href="{{ existing_url }}" target="_blank" data-file-dropzone-target="viewLink" class="text-xs text-kitsco-accent hover:underline">
                        <i class="bi bi-eye"></i> View
                    </a>
                    <span class="text-gray-300">|</span>
                    {% endif %}
                    <button type="button" data-file-dropzone-target="removeBtn" class="text-xs text-red-500 hover:text-red-700">
                        <i class="bi bi-trash"></i> Remove
                    </button>
                </div>
            </div>
        </div>

        {# Error message #}
        <div data-file-dropzone-target="error" class="hidden text-red-500 text-sm mt-2">
            <i class="bi bi-exclamation-circle"></i>
            <span data-file-dropzone-target="errorText"></span>
        </div>

        {# Hidden file input #}
        <input type="file"
               id="{{ id }}_input"
               name="{{ name }}"
               class="sr-only absolute"
               data-file-dropzone-target="input">
    </div>
</div>