{% extends 'payments/base.html' %}
{% load static %}

{% block title %}Create Payment - Payment Admin{% endblock %}

{% block page_title %}Create New Payment{% endblock %}
{% block page_subtitle %}Create a new payment request{% endblock %}

{% block content %}
<div x-data="paymentFormComponent">
    <div class="max-w-2xl mx-auto">
        <!-- Form Card -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Payment Details</h3>
            </div>
            
            <form @submit.prevent="submitForm()" class="p-6 space-y-6">
                {% csrf_token %}
                
                <!-- Error Display -->
                <div x-show="errorMessage" 
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 transform -translate-y-2"
                     x-transition:enter-end="opacity-100 transform translate-y-0"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 transform translate-y-0"
                     x-transition:leave-end="opacity-0 transform -translate-y-2"
                     class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md p-4">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <span class="material-icons-outlined text-red-400">error</span>
                        </div>
                        <div class="ml-3">
                            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                                Payment Creation Failed
                            </h3>
                            <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                                <p x-text="errorMessage"></p>
                            </div>
                            <div class="mt-3">
                                <button @click="clearError()" 
                                        class="text-sm font-medium text-red-800 dark:text-red-200 hover:text-red-600 dark:hover:text-red-100">
                                    Dismiss
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Amount -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Amount (USD)
                    </label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <span class="text-gray-500 text-sm">$</span>
                        </div>
                        <input type="number" 
                               x-model="form.amount_usd"
                               @input="onAmountOrCurrencyChange()"
                               step="0.01" 
                               min="0.01"
                               class="block w-full pl-7 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                               placeholder="0.00"
                               required>
                    </div>
                    <p class="mt-1 text-sm text-gray-500">Minimum amount: $0.01</p>
                    
                    <!-- Currency Conversion Result -->
                    <div x-show="conversionResult" class="mt-2 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
                        <div class="flex items-center text-sm">
                            <span class="material-icons-outlined text-blue-600 dark:text-blue-400 mr-2">currency_exchange</span>
                            <span class="text-blue-800 dark:text-blue-200">
                                $<span x-text="form.amount_usd"></span> USD = 
                                <span x-text="conversionResult?.amount"></span> 
                                <span x-text="conversionResult?.currency"></span>
                            </span>
                        </div>
                        <div class="text-xs text-blue-600 dark:text-blue-400 mt-1">
                            Rate: 1 USD = <span x-text="conversionResult?.rate"></span> <span x-text="conversionResult?.currency"></span>
                        </div>
                    </div>
                </div>

                <!-- User Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        User
                    </label>
                    <select x-model="form.user" 
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                            required>
                        <option value="">Select user...</option>
                        <template x-for="user in users" :key="user.id">
                            <option :value="user.id" x-text="`${user.username} (${user.email})`"></option>
                        </template>
                    </select>
                </div>

                <!-- Provider Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Payment Provider
                    </label>
                    <select x-model="form.provider" 
                            @change="onProviderChange()"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                            required>
                        <template x-for="provider in providers" :key="provider.value">
                            <option :value="provider.value" x-text="provider.display_name"></option>
                        </template>
                    </select>
                </div>

                <!-- Currency Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Currency
                        <span x-show="loadingCurrencies" class="text-sm text-gray-500">(Loading...)</span>
                    </label>
                    <select x-model="form.currency_code" 
                            @change="onAmountOrCurrencyChange()"
                            :disabled="loadingCurrencies || currencies.length === 0"
                            class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white disabled:opacity-50"
                            required>
                        <option value="">Select currency...</option>
                        <template x-for="currency in currencies" :key="`${currency.provider_currency_code || currency.code}-${currency.network?.code || Math.random()}`">
                            <option :value="currency.provider_currency_code || currency.code" x-text="`${currency.currency?.code || currency.code} - ${currency.currency?.name || currency.name}${currency.currency?.currency_type === 'crypto' ? ' (Crypto)' : ''}${currency.network?.name ? ' [' + currency.network.name + ']' : ''}`">
                            </option>
                        </template>
                    </select>
                    <div x-show="currencies.length === 0 && !loadingCurrencies && form.provider" 
                         class="mt-1 text-sm text-red-600">
                        No currencies available for selected provider
                    </div>
                    
                    <!-- Currency Info -->
                    <div x-show="form.currency_code && getCurrencyInfo(form.currency_code)" 
                         class="mt-2 p-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md">
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            <div class="flex items-center justify-between">
                                <span class="font-medium">Currency Details:</span>
                                <span x-text="getCurrencyInfo(form.currency_code)?.type === 'crypto' ? '🪙 Crypto' : '💵 Fiat'"></span>
                            </div>
                            <div x-show="getCurrencyInfo(form.currency_code)?.network_name" class="mt-1">
                                <span class="text-gray-500">Network:</span> 
                                <span x-text="getCurrencyInfo(form.currency_code)?.network_name"></span>
                            </div>
                            <div x-show="getCurrencyInfo(form.currency_code)?.provider_min_amount_usd || getCurrencyInfo(form.currency_code)?.provider_max_amount_usd" class="mt-1">
                                <span class="text-gray-500">Limits:</span>
                                <span x-show="getCurrencyInfo(form.currency_code)?.provider_min_amount_usd">
                                    Min: $<span x-text="getCurrencyInfo(form.currency_code)?.provider_min_amount_usd"></span>
                                </span>
                                <span x-show="getCurrencyInfo(form.currency_code)?.provider_max_amount_usd">
                                    Max: $<span x-text="getCurrencyInfo(form.currency_code)?.provider_max_amount_usd"></span>
                                </span>
                            </div>
                            <div x-show="getCurrencyInfo(form.currency_code)?.provider_fee_percentage > 0 || getCurrencyInfo(form.currency_code)?.provider_fixed_fee_usd > 0" class="mt-1">
                                <span class="text-gray-500">Fees:</span>
                                <span x-show="getCurrencyInfo(form.currency_code)?.provider_fee_percentage > 0">
                                    <span x-text="(getCurrencyInfo(form.currency_code)?.provider_fee_percentage * 100).toFixed(2)"></span>%
                                </span>
                                <span x-show="getCurrencyInfo(form.currency_code)?.provider_fixed_fee_usd > 0">
                                    + $<span x-text="getCurrencyInfo(form.currency_code)?.provider_fixed_fee_usd"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Description -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Description
                    </label>
                    <textarea x-model="form.description"
                              placeholder="Payment description..."
                              rows="3"
                              class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"></textarea>
                </div>

                <!-- Callback URL (Optional) -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Callback URL (Optional)
                    </label>
                    <input type="url" 
                           x-model="form.callback_url"
                           class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="https://your-site.com/webhook">
                    <p class="mt-1 text-sm text-gray-500">URL to receive payment status updates</p>
                </div>

                <!-- Cancel URL (Optional) -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        Cancel URL (Optional)
                    </label>
                    <input type="url" 
                           x-model="form.cancel_url"
                           class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                           placeholder="https://your-site.com/cancel">
                    <p class="mt-1 text-sm text-gray-500">URL to redirect user if payment is cancelled</p>
                </div>

                <!-- Actions -->
                <div class="flex justify-between pt-6">
                    <a href="{% url 'cfg_payments_admin:payment-list' %}" 
                       class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
                        Cancel
                    </a>
                    <button type="submit" 
                            :disabled="loading || !form.amount_usd || !form.currency_code || !form.provider || !form.user"
                            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed">
                        <span x-show="!loading">Create Payment</span>
                        <span x-show="loading">Creating...</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ block.super }}

<!-- Load payment form script -->
<script src="{% static 'payments/js/payment-form.js' %}"></script>
{% endblock %}