{% extends 'admin/layout.html.twig' %}
{% block title %}Receive Stock - KitscoApp{% endblock %}
{% block page_title %}Receive Stock{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{{ path('admin_inventory_index') }}" class="text-gray-400 hover:text-gray-600 transition-colors text-sm">
        <i class="bi bi-arrow-left"></i> Back to Inventory
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 max-w-3xl">
    <div class="px-6 py-4 border-b border-gray-100">
        <h3 class="font-semibold text-gray-800 text-sm"><i class="bi bi-box-arrow-in-down mr-2"></i>Stock Receipt Details</h3>
        <p class="text-xs text-gray-400 mt-1">Landed cost per unit is auto-calculated: (Purchase + Shipping + Customs + Other) / Quantity</p>
    </div>
    <div class="p-6">
        {{ form_start(form) }}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                {% set product_options = [] %}
                {% for choice in form.product.vars.choices %}
                    {% set product_options = product_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endfor %}
                {% include 'components/_select_dropdown.html.twig' with {
                    id: form.product.vars.id,
                    name: form.product.vars.full_name,
                    value: form.product.vars.value,
                    label: 'Product',
                    options: product_options,
                    placeholder: 'Select product...',
                    searchable: true,
                    searchPlaceholder: 'Search products...',
                    required: true
                } %}
                {% do form.product.setRendered %}
            </div>
            <div>
                <div class="flex items-center justify-between mb-1">
                    <label class="block text-sm font-medium text-gray-700">Supplier</label>
                    <button type="button" id="add-supplier-btn" class="text-xs text-kitsco-accent hover:text-kitsco-dark transition-colors flex items-center gap-1">
                        <i class="bi bi-plus-circle"></i> New Supplier
                    </button>
                </div>
                {% set supplier_options = [] %}
                {% for choice in form.supplier.vars.choices %}
                    {% set supplier_options = supplier_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endfor %}
                <div id="supplier-dropdown-container">
                    {% include 'components/_select_dropdown.html.twig' with {
                        id: form.supplier.vars.id,
                        name: form.supplier.vars.full_name,
                        value: form.supplier.vars.value,
                        label: false,
                        options: supplier_options,
                        placeholder: 'Select supplier (optional)...',
                        searchable: true,
                        searchPlaceholder: 'Search suppliers...',
                        required: false
                    } %}
                </div>
                {% do form.supplier.setRendered %}
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div>{{ form_row(form.quantity) }}</div>
            <div>{{ form_row(form.purchaseDate) }}</div>
        </div>

        <div class="mt-6 p-4 bg-gray-50 rounded-lg">
            <h4 class="text-sm font-medium text-gray-700 mb-3"><i class="bi bi-calculator mr-1"></i> Cost Breakdown</h4>
            <p class="text-xs text-gray-400 mb-4">Select currency for each cost. Exchange rate required for non-TZS currencies.</p>

            {# Build currency options excluding TZS #}
            {% set currency_options = [] %}
            {% for choice in form.purchaseCostCurrency.vars.choices %}
                {% if choice.label != 'TZS' %}
                    {% set currency_options = currency_options|merge([{value: choice.value, label: choice.label}]) %}
                {% endif %}
            {% endfor %}

            {# Purchase Cost #}
            <div class="mb-4" x-data="costLine('purchase', '{{ form.purchaseCost.vars.id }}', '{{ form.purchaseCostExchangeRate.vars.id }}', '{{ form.purchaseCostCurrency.vars.id }}')">
                <label class="block text-sm font-medium text-gray-700 mb-1">Purchase Cost (Total)</label>
                <p class="text-xs text-gray-400 mb-2">Total for all purchased units</p>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                    <div>
                        {% include 'components/_select_dropdown.html.twig' with {
                            id: form.purchaseCostCurrency.vars.id,
                            name: form.purchaseCostCurrency.vars.full_name,
                            value: form.purchaseCostCurrency.vars.value,
                            options: currency_options,
                            placeholder: 'TZS',
                            required: false,
                            extra_attrs: {'@change': 'onCurrencyChange($event.target.value)'}
                        } %}
                        {% do form.purchaseCostCurrency.setRendered %}
                    </div>
                    <div>
                        {{ form_widget(form.purchaseCost, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20', placeholder: 'Amount', '@input': 'calculate()'}}) }}
                    </div>
                    <div x-show="showRate" x-transition>
                        {{ form_widget(form.purchaseCostExchangeRate, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20', placeholder: 'Rate to TZS', '@input': 'calculate()'}}) }}
                    </div>
                    <div x-show="showRate" x-transition class="flex items-center text-sm text-gray-600">
                        = <span class="font-medium ml-1" x-text="tzsFormatted"></span>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {# Shipping Cost #}
                <div x-data="costLine('shipping', '{{ form.shippingCost.vars.id }}', '{{ form.shippingCostExchangeRate.vars.id }}', '{{ form.shippingCostCurrency.vars.id }}')">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Shipping/Transport</label>
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            {% include 'components/_select_dropdown.html.twig' with {
                                id: form.shippingCostCurrency.vars.id,
                                name: form.shippingCostCurrency.vars.full_name,
                                value: form.shippingCostCurrency.vars.value,
                                options: currency_options,
                                placeholder: 'TZS',
                                required: false,
                                extra_attrs: {'@change': 'onCurrencyChange($event.target.value)'}
                            } %}
                            {% do form.shippingCostCurrency.setRendered %}
                        </div>
                        <div>
                            {{ form_widget(form.shippingCost, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20', placeholder: 'Amount', '@input': 'calculate()'}}) }}
                        </div>
                        <div x-show="showRate" x-transition>
                            {{ form_widget(form.shippingCostExchangeRate, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20', placeholder: 'Rate', '@input': 'calculate()'}}) }}
                        </div>
                        <div x-show="showRate" x-transition class="flex items-center text-sm text-gray-600">
                            = <span class="font-medium ml-1" x-text="tzsFormatted"></span>
                        </div>
                    </div>
                </div>

                {# Customs Cost #}
                <div x-data="costLine('customs', '{{ form.customsCost.vars.id }}', '{{ form.customsCostExchangeRate.vars.id }}', '{{ form.customsCostCurrency.vars.id }}')">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Customs/Import Taxes</label>
                    <div class="grid grid-cols-2 gap-2">
                        <div>
                            {% include 'components/_select_dropdown.html.twig' with {
                                id: form.customsCostCurrency.vars.id,
                                name: form.customsCostCurrency.vars.full_name,
                                value: form.customsCostCurrency.vars.value,
                                options: currency_options,
                                placeholder: 'TZS',
                                required: false,
                                extra_attrs: {'@change': 'onCurrencyChange($event.target.value)'}
                            } %}
                            {% do form.customsCostCurrency.setRendered %}
                        </div>
                        <div>
                            {{ form_widget(form.customsCost, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20', placeholder: 'Amount', '@input': 'calculate()'}}) }}
                        </div>
                        <div x-show="showRate" x-transition>
                            {{ form_widget(form.customsCostExchangeRate, {attr: {class: 'w-full text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20', placeholder: 'Rate', '@input': 'calculate()'}}) }}
                        </div>
                        <div x-show="showRate" x-transition class="flex items-center text-sm text-gray-600">
                            = <span class="font-medium ml-1" x-text="tzsFormatted"></span>
                        </div>
                    </div>
                </div>
            </div>

            {# Other Costs - Collapsible with multiple items #}
            <div class="mt-4" x-data="otherCostsManager()">
                <div class="border border-gray-200 rounded-lg">
                    <button type="button" @click="expanded = !expanded"
                            class="w-full flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-150 transition-colors text-left rounded-t-lg" :class="{ 'rounded-b-lg': !expanded }">
                        <span class="flex items-center gap-2 text-sm font-medium text-gray-700">
                            <i class="bi bi-plus-slash-minus"></i>
                            Other Costs
                            <span class="text-xs font-normal text-gray-500" x-show="items.length > 0">
                                (<span x-text="items.length"></span> item<span x-show="items.length !== 1">s</span>)
                            </span>
                        </span>
                        <span class="flex items-center gap-3">
                            <span class="text-sm font-semibold text-gray-800" x-text="'TZS ' + formatNumber(getTotal())"></span>
                            <i class="bi transition-transform" :class="expanded ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                        </span>
                    </button>

                    <div x-show="expanded" x-collapse>
                        <div class="p-4 bg-white space-y-3">
                            {# Existing cost items #}
                            <template x-for="(item, index) in items" :key="index">
                                <div class="p-3 bg-gray-50 rounded-lg space-y-2">
                                    <div class="flex items-center gap-2">
                                        <input type="text" x-model="item.description"
                                               placeholder="Description (e.g., Insurance)"
                                               class="flex-1 text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20">
                                        <button type="button" @click="removeItem(index)"
                                                class="p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                                        <div x-data="{ open: false }" class="relative">
                                            <button type="button" @click="open = !open" @click.away="open = false"
                                                    class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm rounded-lg border border-gray-300 bg-white focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20 transition-colors">
                                                <span x-text="item.currencyCode || 'TZS'" :class="item.currencyCode ? 'text-gray-700' : 'text-gray-400'"></span>
                                                <i class="bi bi-chevron-down text-xs text-gray-400 transition-transform" :class="open && 'rotate-180'"></i>
                                            </button>
                                            <div x-show="open" x-transition:enter="transition ease-out duration-100"
                                                 x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                                                 x-transition:leave="transition ease-in duration-75"
                                                 x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
                                                 class="absolute z-50 mt-1 w-full bg-white rounded-lg shadow-lg border border-gray-200 py-1 max-h-48 overflow-auto">
                                                <div @click="item.currencyCode = ''; open = false"
                                                     class="px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 transition-colors flex items-center justify-between"
                                                     :class="!item.currencyCode && 'bg-gray-50'">
                                                    <span>TZS</span>
                                                    <i class="bi bi-check-lg text-kitsco-accent" x-show="!item.currencyCode"></i>
                                                </div>
                                                {% for currency in currencies %}
                                                {% if currency.code != 'TZS' %}
                                                <div @click="item.currencyCode = '{{ currency.code }}'; open = false"
                                                     class="px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 transition-colors flex items-center justify-between"
                                                     :class="item.currencyCode === '{{ currency.code }}' && 'bg-gray-50'">
                                                    <span>{{ currency.code }}</span>
                                                    <i class="bi bi-check-lg text-kitsco-accent" x-show="item.currencyCode === '{{ currency.code }}'"></i>
                                                </div>
                                                {% endif %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                        <input type="text" inputmode="decimal"
                                               :value="formatInputNumber(item.amount)"
                                               @input="item.amount = parseInputNumber($event.target.value); $event.target.value = formatInputNumber(item.amount)"
                                               @blur="$event.target.value = formatInputNumber(item.amount)"
                                               placeholder="Amount"
                                               class="text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20">
                                        <input type="text" inputmode="decimal"
                                               :value="formatInputNumber(item.exchangeRate)"
                                               @input="item.exchangeRate = parseInputNumber($event.target.value); $event.target.value = formatInputNumber(item.exchangeRate)"
                                               @blur="$event.target.value = formatInputNumber(item.exchangeRate)"
                                               placeholder="Rate"
                                               x-show="item.currencyCode && item.currencyCode !== 'TZS'"
                                               class="text-sm rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20">
                                        <div x-show="item.currencyCode && item.currencyCode !== 'TZS'" class="flex items-center text-sm text-gray-600">
                                            = <span class="font-medium ml-1" x-text="formatTzs(item)"></span>
                                        </div>
                                    </div>
                                </div>
                            </template>

                            {# Empty state #}
                            <div x-show="items.length === 0" class="text-center py-4 text-gray-400 text-sm">
                                <i class="bi bi-inbox text-2xl"></i>
                                <p class="mt-1">No other costs added</p>
                            </div>

                            {# Add button #}
                            <button type="button" @click="addItem()"
                                    class="w-full flex items-center justify-center gap-2 py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:border-kitsco-accent hover:text-kitsco-accent transition-colors text-sm">
                                <i class="bi bi-plus-circle"></i> Add Other Cost
                            </button>
                        </div>
                    </div>
                </div>

                {# Hidden input to submit JSON data #}
                <input type="hidden" name="other_costs_json" :value="JSON.stringify(items)">
            </div>
        </div>

        <div class="mt-4">{{ form_row(form.notes) }}</div>

        {# Documents Upload #}
        <div class="mt-4" x-data="documentUploader()" @beforeunload.window="warnIfUploading($event)">
            <label class="block text-sm font-medium text-gray-700 mb-1">
                <i class="bi bi-paperclip mr-1"></i> Documents
            </label>
            <p class="text-xs text-gray-400 mb-2">Upload invoices, packing lists, customs docs, etc. (max 5 files, 5MB each)</p>

            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-kitsco-accent transition-colors"
                 :class="{ 'border-kitsco-accent bg-kitsco-accent/5': isDragging }"
                 @dragover.prevent="isDragging = true"
                 @dragleave.prevent="isDragging = false"
                 @drop.prevent="handleDrop($event)">

                <input type="file"
                       multiple
                       accept=".pdf,.jpg,.jpeg,.png,.webp"
                       class="hidden"
                       @change="handleFiles($event.target.files); $event.target.value = ''"
                       x-ref="fileInput">
                {% do form.documentFiles.setRendered %}

                {# Hidden inputs for uploaded file IDs #}
                <template x-for="upload in uploads.filter(u => u.status === 'complete')" :key="upload.id">
                    <input type="hidden" name="uploaded_file_ids[]" :value="upload.id">
                </template>

                <div x-show="uploads.length === 0 && rejectedFiles.length === 0" class="py-4">
                    <i class="bi bi-cloud-arrow-up text-3xl text-gray-400"></i>
                    <p class="text-sm text-gray-500 mt-2">Drag & drop files here or</p>
                    <button type="button" @click="$refs.fileInput.click()" class="mt-2 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors">
                        Browse Files
                    </button>
                </div>

                {# File list #}
                <div x-show="uploads.length > 0 || rejectedFiles.length > 0" class="space-y-2 text-left">
                    {# Rejected files - shown briefly with red indicator #}
                    <template x-for="(rejected, index) in rejectedFiles" :key="'rejected-' + index">
                        <div class="flex items-center gap-3 p-2 bg-red-50 rounded-lg border border-red-200 animate-pulse">
                            <i class="bi bi-x-circle-fill text-xl text-red-500"></i>
                            <div class="flex-1 min-w-0">
                                <p class="text-sm font-medium text-red-700 truncate" x-text="rejected.name"></p>
                                <p class="text-xs text-red-500" x-text="rejected.reason"></p>
                            </div>
                        </div>
                    </template>

                    {# Uploading/uploaded files #}
                    <template x-for="(upload, index) in uploads" :key="upload.tempId">
                        <div class="p-2 bg-white rounded-lg border transition-colors"
                             :class="{
                                 'border-gray-200': upload.status === 'complete',
                                 'border-blue-200 bg-blue-50/30': upload.status === 'uploading',
                                 'border-red-200 bg-red-50/30': upload.status === 'error'
                             }">
                            <div class="flex items-center gap-3">
                                {# Icon based on status #}
                                <template x-if="upload.status === 'uploading'">
                                    <i class="bi bi-arrow-repeat text-xl text-blue-500 animate-spin"></i>
                                </template>
                                <template x-if="upload.status === 'complete'">
                                    <i class="bi text-xl" :class="getFileIcon(upload.mimeType)"></i>
                                </template>
                                <template x-if="upload.status === 'error'">
                                    <i class="bi bi-exclamation-triangle text-xl text-red-500"></i>
                                </template>

                                <div class="flex-1 min-w-0">
                                    <p class="text-sm font-medium truncate"
                                       :class="upload.status === 'error' ? 'text-red-700' : 'text-gray-700'"
                                       x-text="upload.name"></p>
                                    <p class="text-xs"
                                       :class="upload.status === 'error' ? 'text-red-500' : 'text-gray-400'">
                                        <template x-if="upload.status === 'uploading'">
                                            <span x-text="upload.progress + '% uploading...'"></span>
                                        </template>
                                        <template x-if="upload.status === 'complete'">
                                            <span x-text="formatFileSize(upload.size)"></span>
                                        </template>
                                        <template x-if="upload.status === 'error'">
                                            <span x-text="upload.error"></span>
                                        </template>
                                    </p>
                                </div>

                                {# Actions based on status #}
                                <template x-if="upload.status === 'error'">
                                    <button type="button" @click="retryUpload(index)"
                                            class="p-1 text-blue-500 hover:text-blue-700 hover:bg-blue-50 rounded transition-colors"
                                            title="Retry">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                </template>
                                <button type="button" @click="removeUpload(index)"
                                        class="p-1 text-red-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
                                        :disabled="upload.status === 'uploading'"
                                        :class="upload.status === 'uploading' && 'opacity-50 cursor-not-allowed'">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>

                            {# Progress bar #}
                            <div x-show="upload.status === 'uploading'" class="mt-2">
                                <div class="h-1.5 bg-gray-200 rounded-full overflow-hidden">
                                    <div class="h-full bg-blue-500 transition-all duration-200 rounded-full"
                                         :style="'width: ' + upload.progress + '%'"></div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <button type="button" @click="$refs.fileInput.click()"
                            x-show="uploads.length < maxFiles"
                            class="w-full py-2 text-sm text-gray-500 hover:text-kitsco-accent border border-dashed border-gray-300 rounded-lg hover:border-kitsco-accent transition-colors">
                        <i class="bi bi-plus"></i> Add more files
                    </button>
                </div>
            </div>

            <p x-show="error" x-text="error" class="text-sm text-red-500 mt-2"></p>
        </div>

        <div class="flex justify-end gap-3 pt-6">
            <a href="{{ path('admin_inventory_index') }}" class="inline-flex items-center py-2.5 px-5 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors text-sm">Cancel</a>
            <button type="submit" class="inline-flex items-center gap-2 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2.5 px-5 rounded-lg transition-colors text-sm">
                <i class="bi bi-check-lg"></i> Receive
            </button>
        </div>
        {{ form_end(form) }}
    </div>
</div>

{# New Supplier Modal #}
<div id="new-supplier-modal" class="fixed inset-0 z-[100] hidden">
    <div class="fixed inset-0 bg-black/50" data-close-modal></div>
    <div class="fixed inset-0 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-md relative">
            <div class="flex items-center justify-between px-5 py-4 border-b border-gray-100">
                <h3 class="font-semibold text-gray-800">New Supplier</h3>
                <button type="button" data-close-modal class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors">
                    <i class="bi bi-x-lg text-gray-500"></i>
                </button>
            </div>
            <div class="p-5">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Supplier Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="new-supplier-name" class="w-full rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20" placeholder="Company name" required>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
                            <input type="text" id="new-supplier-contact" class="w-full rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20" placeholder="Contact name">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                            <input type="text" id="new-supplier-phone" class="w-full rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20" placeholder="+255 7XX XXX XXX">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                        <input type="email" id="new-supplier-email" class="w-full rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20" placeholder="supplier@example.com">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                        <input type="text" id="new-supplier-address" class="w-full rounded-lg border-gray-300 focus:border-kitsco-accent focus:ring focus:ring-kitsco-accent/20" placeholder="Street address, City">
                    </div>
                </div>
                <div id="new-supplier-error" class="hidden mt-4 px-4 py-3 rounded-lg bg-red-50 text-red-800 border border-red-200 text-sm"></div>
                <div class="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                    <button type="button" data-close-modal class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 transition-colors">
                        Cancel
                    </button>
                    <button type="button" id="save-supplier-btn" class="px-4 py-2 bg-kitsco-accent text-white rounded-lg hover:bg-kitsco-dark transition-colors flex items-center gap-2">
                        <i class="bi bi-check-lg"></i> Create Supplier
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function parseNumber(value) {
    // Remove commas and other formatting before parsing
    if (!value) return 0;
    return parseFloat(String(value).replace(/,/g, '')) || 0;
}

function formatMoney(value) {
    // Only show decimals if they exist
    const hasDecimals = value % 1 !== 0;
    return value.toLocaleString('en-US', {
        minimumFractionDigits: hasDecimals ? 2 : 0,
        maximumFractionDigits: 2
    });
}

function costLine(name, amountId, rateId, currencyId) {
    return {
        showRate: false,
        tzsValue: 0,
        tzsFormatted: 'TZS 0.00',

        init() {
            // Check initial state
            const currencyInput = document.getElementById(currencyId);
            if (currencyInput && currencyInput.value) {
                this.showRate = true;
                this.calculate();
            }
        },

        onCurrencyChange(value) {
            this.showRate = value !== '';
            this.calculate();
        },

        calculate() {
            const amount = parseNumber(document.getElementById(amountId)?.value);
            const rate = parseNumber(document.getElementById(rateId)?.value) || 1;

            if (this.showRate && rate > 0) {
                this.tzsValue = amount * rate;
            } else {
                this.tzsValue = amount;
            }

            this.tzsFormatted = 'TZS ' + formatMoney(this.tzsValue);
        }
    };
}

function documentUploader() {
    return {
        uploads: [],          // {tempId, id, name, size, mimeType, status, progress, error, file, xhr}
        rejectedFiles: [],
        isDragging: false,
        error: '',
        maxFiles: 5,
        maxSize: 5 * 1024 * 1024, // 5MB
        maxConcurrent: 2,
        allowedTypes: ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'],
        uploadUrl: '{{ url("admin_upload_temp") }}',
        deleteUrl: '{{ url("admin_upload_temp_delete", {id: "__ID__"}) }}',

        handleFiles(fileList) {
            this.error = '';
            this.rejectedFiles = [];
            const newFiles = Array.from(fileList);
            const rejected = [];

            // Check total file limit
            const availableSlots = this.maxFiles - this.uploads.length;
            if (newFiles.length > availableSlots) {
                this.error = `Maximum ${this.maxFiles} files allowed. You can add ${availableSlots > 0 ? availableSlots : 0} more.`;
                if (availableSlots <= 0) return;
            }

            // Check for duplicates by name+size
            const validFiles = [];
            for (const file of newFiles.slice(0, availableSlots)) {
                const isDuplicate = this.uploads.some(u => u.name === file.name && u.size === file.size);
                if (isDuplicate) {
                    rejected.push({ file, reason: 'duplicate' });
                    this.rejectedFiles.push({ name: file.name, reason: 'duplicate', type: file.type });
                    continue;
                }

                if (!this.allowedTypes.includes(file.type)) {
                    rejected.push({ file, reason: 'invalid type' });
                    this.rejectedFiles.push({ name: file.name, reason: 'invalid type', type: file.type });
                    continue;
                }

                if (file.size > this.maxSize) {
                    rejected.push({ file, reason: 'too large (max 5MB)' });
                    this.rejectedFiles.push({ name: file.name, reason: 'too large', type: file.type });
                    continue;
                }

                validFiles.push(file);
            }

            // Build error message for rejected files
            if (rejected.length > 0) {
                const messages = rejected.map(r => `${r.file.name} (${r.reason})`);
                this.error = `${rejected.length} file${rejected.length > 1 ? 's' : ''} rejected: ${messages.join(', ')}`;
                setTimeout(() => { this.rejectedFiles = []; }, 3000);
            }

            // Queue valid files for upload
            for (const file of validFiles) {
                const upload = {
                    tempId: 'temp-' + Date.now() + '-' + Math.random().toString(36).substr(2, 9),
                    id: null,
                    name: file.name,
                    size: file.size,
                    mimeType: file.type,
                    status: 'pending',
                    progress: 0,
                    error: null,
                    file: file,
                    xhr: null
                };
                this.uploads.push(upload);
            }

            // Start uploads (respecting concurrency limit)
            this.processQueue();
        },

        processQueue() {
            const uploading = this.uploads.filter(u => u.status === 'uploading').length;
            const pending = this.uploads.filter(u => u.status === 'pending');

            const toStart = Math.min(this.maxConcurrent - uploading, pending.length);
            for (let i = 0; i < toStart; i++) {
                this.startUpload(pending[i]);
            }
        },

        startUpload(upload) {
            upload.status = 'uploading';
            upload.progress = 0;
            upload.error = null;

            const formData = new FormData();
            formData.append('file', upload.file);

            const xhr = new XMLHttpRequest();
            upload.xhr = xhr;

            xhr.upload.onprogress = (e) => {
                if (e.lengthComputable) {
                    upload.progress = Math.round((e.loaded / e.total) * 100);
                }
            };

            xhr.onload = () => {
                if (xhr.status === 201) {
                    const response = JSON.parse(xhr.responseText);
                    upload.id = response.id;
                    upload.status = 'complete';
                    upload.progress = 100;
                    upload.file = null; // Free memory
                    upload.xhr = null;
                } else if (xhr.status === 401 || xhr.status === 403) {
                    upload.status = 'error';
                    upload.error = 'Session expired. Please refresh.';
                } else {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        upload.status = 'error';
                        upload.error = response.error || `Upload failed (${xhr.status})`;
                    } catch {
                        upload.status = 'error';
                        upload.error = `Upload failed (${xhr.status}): ${xhr.responseText.substring(0, 100)}`;
                    }
                }
                this.processQueue();
            };

            xhr.onerror = () => {
                upload.status = 'error';
                upload.error = 'Network error';
                upload.xhr = null;
                this.processQueue();
            };

            xhr.onabort = () => {
                upload.status = 'error';
                upload.error = 'Cancelled';
                upload.xhr = null;
            };

            xhr.open('POST', this.uploadUrl);
            xhr.send(formData);
        },

        retryUpload(index) {
            const upload = this.uploads[index];
            if (upload && upload.file && upload.status === 'error') {
                upload.status = 'pending';
                this.processQueue();
            }
        },

        removeUpload(index) {
            const upload = this.uploads[index];
            if (!upload) return;

            // Abort if still uploading
            if (upload.xhr) {
                upload.xhr.abort();
            }

            // Delete from server if already uploaded
            if (upload.id) {
                const deleteUrl = this.deleteUrl.replace('__ID__', upload.id);
                fetch(deleteUrl, { method: 'DELETE' }).catch(() => {});
            }

            this.uploads.splice(index, 1);
        },

        handleDrop(event) {
            this.isDragging = false;
            this.handleFiles(event.dataTransfer.files);
        },

        warnIfUploading(event) {
            const uploading = this.uploads.some(u => u.status === 'uploading');
            if (uploading) {
                event.preventDefault();
                event.returnValue = 'Files are still uploading. Are you sure you want to leave?';
                return event.returnValue;
            }
        },

        getFileIcon(type) {
            if (type === 'application/pdf') return 'bi-file-earmark-pdf text-red-500';
            if (type && type.startsWith('image/')) return 'bi-file-earmark-image text-blue-500';
            return 'bi-file-earmark text-gray-500';
        },

        formatFileSize(bytes) {
            if (!bytes) return '0 B';
            if (bytes < 1024) return bytes + ' B';
            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
            return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
        },

        get isUploading() {
            return this.uploads.some(u => u.status === 'uploading');
        },

        get hasErrors() {
            return this.uploads.some(u => u.status === 'error');
        }
    };
}

function otherCostsManager() {
    return {
        expanded: false,
        items: [],

        addItem() {
            this.items.push({ description: '', amount: '', currencyCode: '', exchangeRate: '' });
            this.expanded = true;
        },

        formatInputNumber(value) {
            if (!value && value !== 0) return '';
            const num = parseNumber(value);
            if (num === 0 && value === '') return '';
            return formatMoney(num);
        },

        parseInputNumber(value) {
            return parseNumber(value);
        },

        removeItem(index) {
            this.items.splice(index, 1);
        },

        getTotal() {
            return this.items.reduce((sum, item) => {
                let amount = parseNumber(item.amount);
                if (item.currencyCode && item.currencyCode !== 'TZS' && item.exchangeRate) {
                    amount = amount * parseNumber(item.exchangeRate);
                }
                return sum + amount;
            }, 0).toFixed(2);
        },

        formatNumber(num) {
            return formatMoney(parseFloat(num) || 0);
        },

        formatTzs(item) {
            const amount = parseNumber(item.amount);
            const rate = parseNumber(item.exchangeRate) || 1;
            const tzs = amount * rate;
            return 'TZS ' + formatMoney(tzs);
        }
    };
}

// New Supplier Modal
document.addEventListener('DOMContentLoaded', function() {
    const supplierModal = document.getElementById('new-supplier-modal');
    const addSupplierBtn = document.getElementById('add-supplier-btn');
    const saveSupplierBtn = document.getElementById('save-supplier-btn');
    const supplierError = document.getElementById('new-supplier-error');

    function openSupplierModal() {
        supplierModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        document.getElementById('new-supplier-name').focus();
    }

    function closeSupplierModal() {
        supplierModal.classList.add('hidden');
        document.body.style.overflow = '';
        document.getElementById('new-supplier-name').value = '';
        document.getElementById('new-supplier-contact').value = '';
        document.getElementById('new-supplier-phone').value = '';
        document.getElementById('new-supplier-email').value = '';
        document.getElementById('new-supplier-address').value = '';
        supplierError.classList.add('hidden');
    }

    addSupplierBtn.addEventListener('click', openSupplierModal);

    supplierModal.querySelectorAll('[data-close-modal]').forEach(el => {
        el.addEventListener('click', closeSupplierModal);
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !supplierModal.classList.contains('hidden')) {
            closeSupplierModal();
        }
    });

    saveSupplierBtn.addEventListener('click', async function() {
        const name = document.getElementById('new-supplier-name').value.trim();
        if (!name) {
            supplierError.textContent = 'Please enter a supplier name.';
            supplierError.classList.remove('hidden');
            document.getElementById('new-supplier-name').focus();
            return;
        }

        saveSupplierBtn.disabled = true;
        saveSupplierBtn.innerHTML = '<i class="bi bi-arrow-repeat animate-spin"></i> Creating...';

        try {
            const response = await fetch('{{ path("admin_supplier_api_create") }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    name: name,
                    contactPerson: document.getElementById('new-supplier-contact').value.trim() || null,
                    email: document.getElementById('new-supplier-email').value.trim() || null,
                    phone: document.getElementById('new-supplier-phone').value.trim() || null,
                    address: document.getElementById('new-supplier-address').value.trim() || null,
                }),
            });

            if (!response.ok) {
                const data = await response.json();
                throw new Error(data.error || 'Failed to create supplier');
            }

            const supplier = await response.json();

            // Add new supplier to dropdown
            const dropdownContainer = document.getElementById('supplier-dropdown-container');
            const dropdown = dropdownContainer.querySelector('[data-controller="select-dropdown"]');
            const input = dropdown.querySelector('[data-select-dropdown-target="input"]');
            const label = dropdown.querySelector('[data-select-dropdown-target="label"]');
            const optionsContainer = dropdown.querySelector('.overflow-auto');

            // Create new option
            const newOption = document.createElement('div');
            newOption.setAttribute('data-value', supplier.id);
            newOption.setAttribute('data-label', supplier.name);
            newOption.setAttribute('data-action', 'click->select-dropdown#select mouseenter->select-dropdown#highlightOption');
            newOption.setAttribute('data-select-dropdown-target', 'option');
            newOption.className = 'relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-50 transition-colors';
            newOption.innerHTML = `
                <span class="block truncate">${supplier.name}</span>
                <span class="checkmark invisible absolute inset-y-0 right-0 flex items-center pr-3 text-kitsco-accent">
                    <i class="bi bi-check-lg"></i>
                </span>
            `;

            // Insert at the beginning
            const noResults = optionsContainer.querySelector('[data-no-results]');
            optionsContainer.insertBefore(newOption, noResults);

            // Select the new supplier
            input.value = supplier.id;
            label.textContent = supplier.name;
            label.classList.remove('text-gray-400');
            label.classList.add('text-gray-700');

            closeSupplierModal();

        } catch (error) {
            supplierError.textContent = error.message;
            supplierError.classList.remove('hidden');
        } finally {
            saveSupplierBtn.disabled = false;
            saveSupplierBtn.innerHTML = '<i class="bi bi-check-lg"></i> Create Supplier';
        }
    });
});
</script>
{% endblock %}