<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="partyForm">
                    <div class="form-group">
                        <label class="form-label">پارٹی کا نام</label>
                        <input type="text" class="form-control" name="name" required placeholder="نام لکھیں...">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">پارٹی کی قسم</label>
                        <select class="form-control" name="type" required>
                            <option value="زمیندار">زمیندار</option>
                            <option value="خریدار">خریدار</option>
                            <option value="ڈرائیور">ڈرائیور</option>
                            <option value="بروکر">بروکر</option>
                            <option value="ملازم">ملازم</option>
                            <option value="سرمایہ کار / انویسٹر">سرمایہ کار / انویسٹر</option>
                            <option value="دیگر">دیگر (Other)</option>
                        </select>
                    </div>

                    <div class="form-grid-2">
                        <div class="form-group">
                            <label class="form-label">فون نمبر</label>
                            <input type="tel" class="form-control" name="phone" placeholder="0300-0000000">
                        </div>
                        <div class="form-group">
                            <label class="form-label">شہر / پتہ</label>
                            <input type="text" class="form-control" name="city" placeholder="شہر کا نام">
                        </div>
                    </div>

                    <div class="form-grid-2">
                        <div class="form-group">
                            <label class="form-label">سابقہ بقایا</label>
                            <input type="number" class="form-control" name="balance" value="0">
                        </div>
                        <div class="form-group">
                            <label class="form-label">قسم (Naam/Jama)</label>
                            <div class="toggle-group">
                                <button type="button" class="toggle-btn active" data-value="نام">نام (Dr)</button>
                                <button type="button" class="toggle-btn" data-value="جمع">جمع (Cr)</button>
                            </div>
                            <input type="hidden" name="balanceType" value="نام">
                        </div>
                    </div>

                    <div class="form-actions d-flex gap-2" style="margin-top: var(--sp-6);">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-save"></i> محفوظ کریں
                        </button>
                        <button type="reset" class="btn btn-outline w-100">
                            <i class="fas fa-redo"></i> صاف کریں
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- List Column -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">پارٹیوں کی فہرست</h3>
                <div class="search-box" style="width: 250px;">
                    <input type="text" id="partySearch" class="form-control btn-sm" placeholder="تلاش کریں (نام/شہر)">
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0" id="partyTable">
                        <thead>
                            <tr>
                                <th>نام</th>
                                <th>قسم</th>
                                <th>شہر</th>
                                <th>بقایا</th>
                                <th>ایکشن</th>
                            </tr>
                        </thead>
                        <tbody id="partyTableBody">
                            <!-- Populated via initSetupParty -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function initSetupParty() {
    const $form = $('#partyForm');
    const $tableBody = $('#partyTableBody');
    const $submitBtn = $form.find('button[type="submit"]');
    const $formTitle = $('.card-title').first();
    let editingId = null;
    
    // Type Mapping for Backend
    const typeMap = {
        'زمیندار': { type: 'party', sub_type: 'zamidar' },
        'خریدار': { type: 'party', sub_type: 'khareedar' },
        'ڈرائیور': { type: 'party', sub_type: 'driver' },
        'بروکر':   { type: 'party', sub_type: 'broker' },
        'ملازم':   { type: 'party', sub_type: 'employee' },
        'سرمایہ کار / انویسٹر': { type: 'party', sub_type: 'investor' },
        'دیگر':    { type: 'party', sub_type: 'other' }
    };

    const balanceTypeMap = {
        'نام': 'Dr',
        'جمع': 'Cr'
    };

    // Toggle Button Logic
    $('.toggle-btn').off('click').on('click', function() {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
        $(this).closest('.form-group').find('input[type="hidden"]').val($(this).data('value'));
    });

    // Render Table
    async function fetchAndRenderParties(search = '') {
        try {
            $tableBody.html('<tr><td colspan="5" class="text-center">لوڈنگ ہو رہی ہے...</td></tr>');
            const res = await API.get('/accounts', { type: 'party' });
            MandiData.parties = res.data;
            renderTable(search);
        } catch (err) {
            $tableBody.html('<tr><td colspan="5" class="text-center text-danger">ڈیٹا لوڈ کرنے میں غلطی آئی۔</td></tr>');
        }
    }

    function renderTable(search = '') {
        let html = '';
        const filtered = MandiData.parties.filter(p => 
            p.name.includes(search) || (p.city && p.city.includes(search))
        );

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

        filtered.forEach(p => {
            // Reverse Map for Display
            const displayType = Object.keys(typeMap).find(key => typeMap[key].sub_type === p.sub_type) || p.sub_type;

            html += `
                <tr class="${editingId == p.id ? 'table-active' : ''}">
                    <td class="fw-bold fs-5">${p.name}</td>
                    <td><span class="badge ${p.sub_type === 'zamidar' ? 'badge-info' : 'badge-accent'}">${displayType}</span></td>
                    <td>${p.city || '-'}</td>
                    <td class="${p.balance_type === 'Dr' ? 'text-danger' : 'text-success'} fw-bold">
                        ${Utils.formatNumber(p.opening_balance)} (${p.balance_type === 'Dr' ? 'نام' : 'جمع'})
                    </td>
                    <td>
                        <button class="btn btn-outline btn-sm me-1" onclick="editParty(${p.id})" title="تبدیل کریں">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="deleteParty(${p.id}, '${p.name}')" title="حذف کریں">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </td>
                </tr>
            `;
        });
        $tableBody.html(html);
    }

    window.editParty = function(id) {
        console.log(`[UI] Edit Party Clicked: ID=${id}`);
        const party = MandiData.parties.find(p => p.id == id);
        if (!party) {
            console.error(`[UI] Party not found in MandiData for ID=${id}`, MandiData.parties);
            return;
        }
        console.log(`[UI] Found Party:`, party);

        editingId = id;
        
        // Populate inputs
        $form.find('input[name="name"]').val(party.name).focus();
        $form.find('input[name="phone"]').val(party.phone || '');
        $form.find('input[name="city"]').val(party.city || '');
        
        // Set type dropdown
        const displayType = Object.keys(typeMap).find(key => typeMap[key].sub_type === party.sub_type);
        if (displayType) $form.find('select[name="type"]').val(displayType);
        
        // Opening balance locked
        $form.find('input[name="balance"]').val(party.opening_balance).prop('disabled', true);
        
        // Set toggle
        const balValue = party.balance_type === 'Dr' ? 'نام' : 'جمع';
        $(`.toggle-btn[data-value="${balValue}"]`).click();

        $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');
        
        if ($('#cancelPartyEditBtn').length === 0) {
            $submitBtn.closest('.form-actions').after('<button type="button" id="cancelPartyEditBtn" class="btn btn-outline w-100 mt-2" onclick="cancelPartyEdit()">کینسل (Cancel)</button>');
        }
        
        renderTable($('#partySearch').val());
    };

    window.cancelPartyEdit = function() {
        editingId = null;
        $form[0].reset();
        $form.find('input[name="balance"]').prop('disabled', false);
        $('.toggle-btn[data-value="نام"]').click();
        
        $formTitle.text('نئی پارٹی کا اندراج');
        $submitBtn.html('<i class="fas fa-save"></i> محفوظ کریں').removeClass('btn-accent').addClass('btn-primary');
        $('#cancelPartyEditBtn').remove();
        renderTable($('#partySearch').val());
    };

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

    // Initial Load
    fetchAndRenderParties();

    // Search Logic
    $('#partySearch').on('input', function() {
        renderTable($(this).val());
    });

    // Form Submit
    $form.on('submit', async function(e) {
        e.preventDefault();
        
        const rawData = Utils.getFormData($form);
        const mapped = typeMap[rawData.type];
        
        const payload = {
            name: rawData.name,
            type: mapped.type,
            sub_type: mapped.sub_type,
            phone: rawData.phone,
            city: rawData.city
        };

        if (!editingId) {
            payload.opening_balance = parseFloat(rawData.balance) || 0;
            payload.balance_type = balanceTypeMap[rawData.balanceType] || 'Dr';
        }

        $submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> محفوظ ہو رہا ہے...');

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

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

    // Setup Enter Nav
    Utils.setupEnterNavigation('#partyForm');
}
</script>
