@extends('layouts.app')

@section('title', $label->exists ? 'Ubah Label' : 'Buat Label Baru')

@section('content')
    @php
        $isEdit = $label->exists;
        $action = $isEdit ? route('labels.update', $label) : route('labels.store');
        $renderer = app(\App\Support\BarcodeRenderer::class);
        $previewSvg = '';
        if ($label->barcode_value) {
            try {
                $previewSvg = $renderer->inlineSvg($label->barcode_value, $label->barcode_type ?: 'code128', 181, 42);
            } catch (\Throwable $e) {
                $previewSvg = '<span class="label__error">Barcode tidak valid</span>';
            }
        }
    @endphp

    <div class="page-head">
        <div>
            <h1>{{ $isEdit ? 'Ubah Label' : 'Buat Label Baru' }}</h1>
            <p>Isi <strong>Kode Seri</strong> atau <strong>Barcode lengkap</strong>. Sistem akan otomatis generate barcode.</p>
        </div>
        <div class="page-head__actions">
            <a class="btn" href="{{ route('labels.index') }}">Kembali</a>
        </div>
    </div>

    <div class="preview-wrap">
        <div class="card" style="flex:1 1 520px">
            <form method="post" action="{{ $action }}">
                @csrf
                @if ($isEdit)
                    @method('PUT')
                @endif

                <div class="grid grid--2">
                    <label class="field">
                        <span class="field__label">Pecahan (isi per kemasan)</span>
                        <input type="number" name="pecahan" id="f-pecahan" min="0"
                               value="{{ old('pecahan', $label->pecahan) }}" placeholder="Contoh: 1000">
                        <span class="field__hint">Opsional. Akan ditampilkan sebagai "Isi: 1,000" di label.</span>
                        @error('pecahan')<span class="field__error">{{ $message }}</span>@enderror
                    </label>

                    <label class="field">
                        <span class="field__label">Tipe Barcode *</span>
                        <select name="barcode_type" id="f-type" required>
                            @foreach (config('barcode.types') as $value => $text)
                                <option value="{{ $value }}"
                                    @selected(old('barcode_type', $label->barcode_type ?: config('barcode.default_type')) === $value)>
                                    {{ $text }}
                                </option>
                            @endforeach
                        </select>
                        @error('barcode_type')<span class="field__error">{{ $message }}</span>@enderror
                    </label>
                </div>

                <div class="grid grid--1" style="margin-top:14px">
                    <label class="field">
                        <span class="field__label">Custom Text di Bawah Barcode</span>
                        <input type="text" name="custom_code_text" id="f-custom-code"
                               value="{{ old('custom_code_text', $label->custom_code_text) }}" maxlength="200"
                               placeholder="Opsional. Contoh: DD atau PREFIX atau SUFFIX">
                        <span class="field__hint">
                            Kosongkan untuk otomatis (sama dengan kode seri). Isi untuk tambah prefix/suffix custom. 
                            Contoh: <code>DD 5G001TH26</code> atau <code>5G001TH26 BATCH-A</code>
                        </span>
                        @error('custom_code_text')<span class="field__error">{{ $message }}</span>@enderror
                    </label>
                </div>

                <div class="grid grid--1" style="margin-top:14px">
                    <label class="field">
                        <span class="field__label">KET (Keterangan Label) *</span>
                        <input type="text" name="notes" id="f-notes"
                               value="{{ old('notes', $label->notes) }}" required maxlength="120"
                               placeholder="Contoh: Djembatan Dua * DBS">
                        <span class="field__hint">
                            Teks besar yang ditampilkan di bawah barcode. Contoh: <code>Djembatan Dua * DBS</code>
                        </span>
                        @error('notes')<span class="field__error">{{ $message }}</span>@enderror
                    </label>
                </div>

                <div class="grid grid--2" style="margin-top:14px">
                    <label class="field">
                        <span class="field__label">
                            Kode Seri * 
                            <span style="font-weight:400; color:#6b7280">
                                (<label style="cursor:pointer; display:inline">
                                    <input type="checkbox" id="bulk-mode-toggle" style="width:auto; margin:0 4px" 
                                           onchange="toggleBulkMode()"> Bulk Input
                                </label>)
                            </span>
                        </span>
                        
                        <input type="text" name="item_code" id="f-item-single"
                               value="{{ old('item_code', $label->item_code) }}" required maxlength="120"
                               placeholder="Contoh: 5G170TH255.01 atau DDDBS5G064TH255.01" style="{{ old('item_codes') ? 'display:none' : '' }}">
                        
                        <textarea name="item_codes" id="f-item-bulk" rows="5"
                                  placeholder="Masukkan banyak kode sekaligus (dipisah spasi atau baris baru):&#10;&#10;5G010TH26 5G011TH26 5G012TH26&#10;atau barcode lengkap:&#10;DDDBS5G010TH26 DDDBS5G011TH26"
                                  style="font-family:monospace; {{ old('item_codes') ? '' : 'display:none' }}">{{ old('item_codes') }}</textarea>
                        
                        <span class="field__hint" id="bulk-hint" style="{{ old('item_codes') ? '' : 'display:none' }}">
                            <strong>Bulk mode:</strong> Sistem akan membuat label terpisah untuk setiap kode. 
                            Pisahkan dengan spasi atau baris baru.<br>
                            <strong>Auto-prefix:</strong> Baris pertama dengan prefix (DM5G003TH26), baris berikutnya hanya angka (5G004TH26) 
                            → otomatis jadi DM5G004TH26, DM5G005TH26, dst.
                        </span>
                        
                        @error('item_code')<span class="field__error">{{ $message }}</span>@enderror
                        @error('item_codes')<span class="field__error">{{ $message }}</span>@enderror
                    </label>

                    <label class="field">
                        <span class="field__label">Jumlah Cetak (qty) *</span>
                        <input type="number" name="qty" min="1" max="10000"
                               value="{{ old('qty', $label->qty ?: 1) }}" required>
                        @error('qty')<span class="field__error">{{ $message }}</span>@enderror
                    </label>
                </div>

                <div class="toolbar" style="margin-top:18px; margin-bottom:0">
                    <button class="btn btn--primary" type="submit">{{ $isEdit ? 'Simpan Perubahan' : 'Simpan Label' }}</button>
                    @if ($isEdit)
                        <a class="btn" target="_blank" href="{{ route('labels.print', ['ids' => [$label->id]]) }}">Cetak</a>
                    @endif
                </div>
            </form>
        </div>

        <div class="card" style="flex:0 0 auto">
            <h2 class="card__title">Pratinjau Label</h2>
            <div class="preview-frame">
                <div id="preview-holder">
                    @if ($previewSvg)
                        <x-label-card :label="$label" :svg="$previewSvg" bordered />
                    @else
                        <div class="label label--bordered">
                            <div class="label__code">Isi form untuk melihat pratinjau</div>
                        </div>
                    @endif
                </div>
            </div>
            <p class="helptext" style="margin-bottom:0">
                Pratinjau memakai ukuran default {{ config('barcode.label.width') }} &times;
                {{ config('barcode.label.height') }} mm. Ukuran final bisa diatur di halaman cetak.
            </p>
        </div>
    </div>

    @if ($isEdit)
        <form class="card" method="post" action="{{ route('labels.destroy', $label) }}"
              onsubmit="return confirm('Hapus label ini?')">
            @csrf
            @method('DELETE')
            <h2 class="card__title">Hapus Label</h2>
            <p class="helptext">Data yang dihapus tidak bisa dikembalikan.</p>
            <button class="btn btn--danger" type="submit">Hapus label ini</button>
        </form>
    @endif

    @push('head')
        <script>
            console.log('Form script loaded');
            
            document.addEventListener('DOMContentLoaded', function () {
                console.log('DOM Content Loaded');
                
                var itemInput = document.getElementById('f-item-single');
                var notesInput = document.getElementById('f-notes');

                if (!itemInput) {
                    console.error('Item input not found!');
                    return;
                }

                console.log('All form elements found');

                function upper(el) {
                    el.addEventListener('blur', function () {
                        el.value = el.value.toUpperCase();
                    });
                }
                
                // Function to clean pasted text (remove extra spaces)
                function cleanPastedText(text) {
                    // Split by whitespace and filter empty
                    var parts = text.trim().split(/\s+/);
                    
                    // If multiple parts (like "DEXA MEDICA 5G003TH26")
                    // Take only the last part (the code)
                    if (parts.length > 1) {
                        // Ambil bagian terakhir yang biasanya kode seri
                        return parts[parts.length - 1];
                    }
                    
                    // If single part, return as is
                    return text.trim();
                }
                
                // Function to auto-add prefix to codes
                function autoAddPrefix(lines) {
                    if (lines.length === 0) return lines;
                    
                    // Check first line for prefix pattern
                    var firstLine = lines[0].trim();
                    if (!firstLine) return lines;
                    
                    // Extract prefix from first line (letters before numbers)
                    // Pattern: PREFIX5G003TH26 -> PREFIX = "DM" or "DEXA" etc
                    var match = firstLine.match(/^([A-Z]+)(\d.*)$/i);
                    
                    if (!match) return lines; // No prefix found
                    
                    var prefix = match[1]; // e.g., "DM"
                    var restOfFirst = match[2]; // e.g., "5G003TH26"
                    
                    console.log('Detected prefix:', prefix);
                    
                    // Process all lines
                    var result = [firstLine]; // Keep first line as is
                    
                    for (var i = 1; i < lines.length; i++) {
                        var line = lines[i].trim();
                        if (!line) continue;
                        
                        // Check if line already has prefix
                        if (line.match(/^[A-Z]+\d/i)) {
                            // Already has prefix, keep as is
                            result.push(line);
                        } else if (line.match(/^\d/)) {
                            // Starts with number, add prefix
                            result.push(prefix + line);
                            console.log('Added prefix to:', line, '->', prefix + line);
                        } else {
                            // Other format, keep as is
                            result.push(line);
                        }
                    }
                    
                    return result;
                }

                upper(itemInput);
                
                // Add paste event listener to clean spaces
                itemInput.addEventListener('paste', function(e) {
                    e.preventDefault();
                    var pastedText = (e.clipboardData || window.clipboardData).getData('text');
                    var cleaned = cleanPastedText(pastedText);
                    itemInput.value = cleaned.toUpperCase();
                    updateLivePreview();
                });

                [itemInput, notesInput].forEach(function (el) {
                    if (el) el.addEventListener('input', function() {
                        updateLivePreview();
                    });
                });
                
                // Listen to custom code text
                var customCodeInput = document.getElementById('f-custom-code');
                if (customCodeInput) {
                    customCodeInput.addEventListener('input', updateLivePreview);
                }
                
                // Also listen to bulk input
                var bulkInput = document.getElementById('f-item-bulk');
                if (bulkInput) {
                    bulkInput.addEventListener('input', updateLivePreview);
                    upper(bulkInput);
                    
                    // Add blur event to auto-add prefix when user finish typing
                    bulkInput.addEventListener('blur', function() {
                        var lines = bulkInput.value.split(/\r?\n/);
                        var cleaned = [];
                        
                        for (var i = 0; i < lines.length; i++) {
                            var line = lines[i].trim();
                            if (line) {
                                cleaned.push(line);
                            }
                        }
                        
                        if (cleaned.length > 0) {
                            // Auto-add prefix based on first line
                            cleaned = autoAddPrefix(cleaned);
                            bulkInput.value = cleaned.join('\n').toUpperCase();
                        }
                    });
                    
                    // Add paste event listener for bulk to clean spaces
                    bulkInput.addEventListener('paste', function(e) {
                        e.preventDefault();
                        var pastedText = (e.clipboardData || window.clipboardData).getData('text');
                        
                        // Split by newlines
                        var lines = pastedText.split(/\r?\n/);
                        var cleaned = [];
                        
                        for (var i = 0; i < lines.length; i++) {
                            var line = lines[i].trim();
                            if (line) {
                                // Clean each line
                                cleaned.push(cleanPastedText(line));
                            }
                        }
                        
                        // Auto-add prefix based on first line
                        cleaned = autoAddPrefix(cleaned);
                        
                        bulkInput.value = cleaned.join('\n').toUpperCase();
                        updateLivePreview();
                    });
                }
                
                var typeSelect = document.getElementById('f-type');
                if (typeSelect) typeSelect.addEventListener('change', updateLivePreview);

                // Initial preview if editing
                if (itemInput.value.trim() !== '') {
                    console.log('Triggering initial preview');
                    updateLivePreview();
                }
            });
            
            let previewTimeout;
            function updateLivePreview() {
                console.log('updateLivePreview called');
                clearTimeout(previewTimeout);
                
                // Debounce 500ms
                previewTimeout = setTimeout(function() {
                    var singleInput = document.getElementById('f-item-single');
                    var bulkInput = document.getElementById('f-item-bulk');
                    var notesInput = document.getElementById('f-notes');
                    var pecahanInput = document.getElementById('f-pecahan');
                    var customCodeInput = document.getElementById('f-custom-code');
                    var typeSelect = document.getElementById('f-type');
                    var previewHolder = document.getElementById('preview-holder');
                    
                    if (!previewHolder) {
                        console.error('Preview holder not found');
                        return;
                    }
                    
                    var itemCode = '';
                    
                    // Check which mode is active
                    if (singleInput && singleInput.style.display !== 'none' && singleInput.value.trim() !== '') {
                        itemCode = singleInput.value.trim();
                    } else if (bulkInput && bulkInput.style.display !== 'none' && bulkInput.value.trim() !== '') {
                        // For bulk, use first code for preview
                        var codes = bulkInput.value.trim().split(/[\s,\n]+/);
                        itemCode = codes[0] || '';
                    }
                    
                    var notes = notesInput ? notesInput.value.trim() : '';
                    var pecahan = pecahanInput ? pecahanInput.value : '';
                    var customCodeText = customCodeInput ? customCodeInput.value.trim() : '';
                    var barcodeType = typeSelect ? typeSelect.value : 'code128';
                    
                    console.log('Preview data:', {
                        itemCode: itemCode,
                        notes: notes,
                        pecahan: pecahan,
                        customCodeText: customCodeText,
                        barcodeType: barcodeType
                    });
                    
                    // Skip if item code empty
                    if (!itemCode) {
                        console.log('Missing item code, skipping preview');
                        previewHolder.innerHTML = 
                            '<div class="label label--bordered"><div class="label__code" style="padding:20px">Isi Kode Seri untuk melihat pratinjau</div></div>';
                        return;
                    }
                    
                    // Show loading
                    previewHolder.innerHTML = 
                        '<div class="label label--bordered"><div class="label__code" style="padding:20px; color:#6b7280">Memuat pratinjau...</div></div>';
                    
                    // Build preview URL
                    var params = new URLSearchParams({
                        item_code: itemCode,
                        notes: notes,
                        pecahan: pecahan,
                        custom_code_text: customCodeText,
                        barcode_type: barcodeType,
                        preview: '1'
                    });
                    
                    var previewUrl = '{{ route("labels.preview") }}?' + params.toString();
                    console.log('Fetching preview from:', previewUrl);
                    
                    fetch(previewUrl)
                        .then(response => {
                            console.log('Response status:', response.status);
                            if (!response.ok) {
                                throw new Error('HTTP ' + response.status);
                            }
                            return response.text();
                        })
                        .then(html => {
                            console.log('Preview HTML received (length):', html.length);
                            previewHolder.innerHTML = html;
                        })
                        .catch(error => {
                            console.error('Preview error:', error);
                            previewHolder.innerHTML = 
                                '<div class="label label--bordered"><div class="label__error" style="color:#dc2626; padding:20px">Gagal memuat pratinjau: ' + error.message + '</div></div>';
                        });
                }, 500);
            }
            
            function toggleBulkMode() {
                console.log('toggleBulkMode called');
                var checkbox = document.getElementById('bulk-mode-toggle');
                var singleInput = document.getElementById('f-item-single');
                var bulkInput = document.getElementById('f-item-bulk');
                var bulkHint = document.getElementById('bulk-hint');
                
                if (!checkbox || !singleInput || !bulkInput || !bulkHint) {
                    console.error('Bulk mode elements not found');
                    return;
                }
                
                if (checkbox.checked) {
                    // Switch to bulk mode
                    console.log('Switching to bulk mode');
                    singleInput.style.display = 'none';
                    singleInput.required = false;
                    singleInput.value = '';
                    
                    bulkInput.style.display = 'block';
                    bulkInput.required = true;
                    bulkHint.style.display = 'block';
                } else {
                    // Switch to single mode
                    console.log('Switching to single mode');
                    bulkInput.style.display = 'none';
                    bulkInput.required = false;
                    bulkInput.value = '';
                    bulkHint.style.display = 'none';
                    
                    singleInput.style.display = 'block';
                    singleInput.required = true;
                }
                
                // Trigger preview update
                updateLivePreview();
            }
            
            // Check on load if bulk mode should be enabled
            document.addEventListener('DOMContentLoaded', function() {
                var bulkInput = document.getElementById('f-item-bulk');
                var checkbox = document.getElementById('bulk-mode-toggle');
                if (bulkInput && checkbox && bulkInput.value.trim() !== '') {
                    console.log('Auto-enabling bulk mode on load');
                    checkbox.checked = true;
                    toggleBulkMode();
                }
            });
        </script>
    @endpush
@endsection