<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center">
            <a href="{{ route('imports.index') }}" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 me-4">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                {{ __('Import Data') }}
            </h2>
        </div>
    </x-slot>

    <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
            <form action="{{ route('imports.preview') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="space-y-6">
                    <div>
                        <x-input-label for="type" :value="__('Import Type')" />
                        <select id="type" name="type"
                                class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required>
                            <option value="transactions">Transactions</option>
                            <option value="accounts">Accounts</option>
                            <option value="categories">Categories</option>
                        </select>
                    </div>

                    <div>
                        <x-input-label for="source" :value="__('Source Format')" />
                        <select id="source" name="source"
                                class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required>
                            <option value="csv">CSV File</option>
                            <option value="mymoney">MyMoney Export</option>
                            <option value="bank">Bank Statement (CSV)</option>
                        </select>
                    </div>

                    <div>
                        <x-input-label for="file" :value="__('File')" />
                        <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed rounded-lg hover:border-indigo-400 transition cursor-pointer"
                             onclick="document.getElementById('file').click()">
                            <div class="space-y-1 text-center">
                                <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-3"></i>
                                <div class="flex text-sm text-gray-600 dark:text-gray-400">
                                    <label for="file" class="relative cursor-pointer rounded-md font-medium text-indigo-600 hover:text-indigo-500">
                                        <span>Upload a file</span>
                                        <input id="file" name="file" type="file" class="sr-only" accept=".csv,.xlsx" required>
                                    </label>
                                    <p class="pl-1">or drag and drop</p>
                                </div>
                                <p class="text-xs text-gray-500">CSV or XLSX up to 10MB</p>
                            </div>
                        </div>
                        <p id="file-name" class="mt-2 text-sm text-indigo-600 hidden"></p>
                        <x-input-error class="mt-2" :messages="$errors->get('file')" />
                    </div>

                    <div>
                        <x-input-label for="account_id" :value="__('Default Account (for transactions)')" />
                        <select id="account_id" name="account_id"
                                class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                required>
                            <option value="">Select account...</option>
                            @foreach($accounts ?? [] as $account)
                                <option value="{{ $account->id }}">{{ $account->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <x-input-label for="delimiter" :value="__('Delimiter')" />
                            <select id="delimiter" name="delimiter"
                                    class="mt-1 block w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                    required>
                                <option value=",">Comma (,)</option>
                                <option value=";">Semicolon (;)</option>
                                <option value="tab">Tab</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <label class="flex items-center">
                                <input type="checkbox" name="has_header" value="1" checked
                                       class="rounded border-gray-300 text-indigo-600">
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">File has header row</span>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mt-8 flex items-center justify-end space-x-4">
                    <a href="{{ route('imports.index') }}" class="text-gray-600 dark:text-gray-400">Cancel</a>
                    <x-primary-button>
                        <i class="fas fa-eye me-2"></i>Preview Import
                    </x-primary-button>
                </div>
            </form>
        </div>

        <!-- Instructions -->
        <div class="mt-6 bg-indigo-50 dark:bg-indigo-900/20 rounded-xl p-6">
            <h3 class="font-semibold text-indigo-900 dark:text-indigo-300 mb-3">
                <i class="fas fa-info-circle me-2"></i>CSV Format Guide
            </h3>
            <p class="text-sm text-indigo-800 dark:text-indigo-400 mb-3">
                Your CSV file should include the following columns:
            </p>
            <div class="bg-white dark:bg-gray-800 rounded-lg p-3 font-mono text-xs overflow-x-auto">
                date,description,amount,type,category,account
            </div>
            <ul class="mt-3 text-sm text-indigo-800 dark:text-indigo-400 list-disc list-inside space-y-1">
                <li><strong>date:</strong> Transaction date (YYYY-MM-DD format)</li>
                <li><strong>description:</strong> Transaction description</li>
                <li><strong>amount:</strong> Transaction amount (positive number)</li>
                <li><strong>type:</strong> "income" or "expense"</li>
                <li><strong>category:</strong> Category name</li>
                <li><strong>account:</strong> Account name (optional)</li>
            </ul>
        </div>
    </div>

    @push('scripts')
    <script>
        document.getElementById('file').addEventListener('change', function(e) {
            const fileName = e.target.files[0]?.name;
            const fileNameEl = document.getElementById('file-name');
            if (fileName) {
                fileNameEl.textContent = 'Selected: ' + fileName;
                fileNameEl.classList.remove('hidden');
            }
        });
    </script>
    @endpush
</x-app-layout>
