<div class="setup-container">
    <div class="form-grid-2">
        <!-- Form Column -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">نئی جنس کا اندراج</h3>
            </div>
            <div class="card-body">
                <form id="itemForm">
                    <div class="form-group">
                        <label class="form-label">جنس (Item) کا نام</label>
                        <input type="text" class="form-control" name="name" required placeholder="مثلاً: گندم، مکئی، چاول...">
                    </div>
                    
                    <div class="form-actions" style="margin-top: var(--sp-6);">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-plus-circle"></i> جنس شامل کریں
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- List Column -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">اجناس کی فہرست</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>جنس کا نام</th>
                                <th>ایکشن</th>
                            </tr>
                        </thead>
                        <tbody id="itemTableBody">
                            <!-- Populated via initSetupItem -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function initSetupItem() {
    const $form = $('#itemForm');
    const $tableBody = $('#itemTableBody');
    const $submitBtn = $form.find('button[type="submit"]');
    const $formTitle = $('.card-title').first();
    let editingId = null;

    async function fetchAndRenderItems() {
        try {
            $tableBody.html('<tr><td colspan="3" class="text-center">لوڈنگ ہو رہی ہے...</td></tr>');
            const res = await API.get('/items');
            MandiData.items = res.data;
            renderItems();
        } catch (err) {
            $tableBody.html('<tr><td colspan="3" class="text-center text-danger">ڈیٹا لوڈ کرنے میں غلطی آئی۔</td></tr>');
        }
    }

    function renderItems() {
        let html = '';
        if (MandiData.items.length === 0) {
            $tableBody.html('<tr><td colspan="3" class="text-center">کوئی ریکارڈ نہیں ملا۔</td></tr>');
            return;
        }

        MandiData.items.forEach((it, index) => {
            html += `
                <tr class="${editingId == it.id ? 'table-active' : ''}">
                    <td>${index + 1}</td>
                    <td class="fw-bold fs-5">${it.name}</td>
                    <td>
                        <button class="btn btn-outline btn-sm me-1" onclick="editItem(${it.id})" title="ایڈٹ کریں"><i class="fas fa-edit"></i></button>
                        <button class="btn btn-danger btn-sm" onclick="deleteItem(${it.id}, '${it.name}')" title="حذف کریں"><i class="fas fa-trash-alt"></i></button>
                    </td>
                </tr>
            `;
        });
        $tableBody.html(html);
    }

    window.editItem = function(id) {
        console.log(`[UI] Edit Item Clicked: ID=${id}`);
        const item = MandiData.items.find(it => it.id == id);
        if (!item) {
            console.error(`[UI] Item not found in MandiData for ID=${id}`, MandiData.items);
            return;
        }
        console.log(`[UI] Found Item:`, item);

        editingId = id;
        $form.find('input[name="name"]').val(item.name).focus();
        
        $formTitle.html('<i class="fas fa-edit text-accent"></i> جنس کی تبدیلی (Edit)');
        $submitBtn.html('<i class="fas fa-save"></i> تبدیلی محفوظ کریں').removeClass('btn-primary').addClass('btn-accent');
        
        // Add cancel button if not exists
        if ($('#cancelEditBtn').length === 0) {
            $submitBtn.after('<button type="button" id="cancelEditBtn" class="btn btn-outline w-100 mt-2" onclick="cancelEdit()">کینسل (Cancel)</button>');
        }
        
        renderItems(); // Refresh list to show active row
    };

    window.cancelEdit = function() {
        editingId = null;
        $form[0].reset();
        $formTitle.html('نئی جنس کا اندراج');
        $submitBtn.html('<i class="fas fa-plus-circle"></i> جنس شامل کریں').removeClass('btn-accent').addClass('btn-primary');
        $('#cancelEditBtn').remove();
        renderItems();
    };

    window.deleteItem = async function(id, name) {
        if (!confirm(`کیا آپ واقعی "${name}" کو حذف کرنا چاہتے ہیں؟`)) return;
        try {
            const res = await API.delete('/items', id);
            if (res.success) {
                Toast.success("✅ " + res.message);
                if (editingId == id) cancelEdit();
                fetchAndRenderItems();
            }
        } catch (err) { }
    };

    // Initial Load
    fetchAndRenderItems();

    // Form Submit
    $form.on('submit', async function(e) {
        e.preventDefault();
        
        const payload = {
            name: $form.find('input[name="name"]').val().trim(),
            unit: 'KG' // Default
        };

        if (!payload.name) return;

        $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> پروسیسنگ...');

        try {
            let res;
            if (editingId) {
                res = await API.put('/items/' + editingId, payload);
            } else {
                res = await API.post('/items', payload);
            }

            if (res.success) {
                Toast.success("✅ " + res.message);
                cancelEdit();
                fetchAndRenderItems();
            }
        } catch (err) {
        } finally {
            if (!editingId) {
                $submitBtn.prop('disabled', false).html('<i class="fas fa-plus-circle"></i> جنس شامل کریں');
            } else {
                $submitBtn.prop('disabled', false).html('<i class="fas fa-save"></i> تبدیلی محفوظ کریں');
            }
        }
    });

    Utils.setupEnterNavigation('#itemForm');
}
</script>
