frappe.pages['ebay-pricing'].on_page_load = function(wrapper) {
    var page = frappe.ui.make_app_page({
        parent: wrapper,
        title: __('eBay Pricing'),
        single_column: true
    });

    let $container = $(`
        <div style="padding: 1rem;">
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label>Search Model</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="ebay-search-input"
                                placeholder="Dell Latitude 5410..." autocomplete="off">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" id="ebay-search-btn">
                                    <i class="fa fa-search"></i> Search
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-right">
                    <div class="form-group">
                        <label>Batch Size</label>
                        <select class="form-control" id="ebay-batch-size" style="display:inline-block; width:auto;">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="all">All</option>
                        </select>
                        <button class="btn btn-warning" id="ebay-batch-btn">
                            <i class="fa fa-play"></i> Price Batch
                        </button>
                    </div>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <h4>Apply Pricing to Inventory</h4>
                    <div class="form-group">
                        <select class="form-control" id="ebay-apply-item" style="width: 100%;">
                            <option value="">Select Item to apply pricing...</option>
                        </select>
                    </div>
                    <button class="btn btn-success" id="ebay-apply-btn">
                        <i class="fa fa-check"></i> Apply Pricing
                    </button>
                    <button class="btn btn-info" id="ebay-apply-all-btn" style="margin-left: 0.5rem;">
                        <i class="fa fa-check-double"></i> Apply All
                    </button>
                </div>
                <div class="col-md-6 text-right">
                    <div class="well" style="display: inline-block; text-align: left;">
                        <h5>Pricing Status</h5>
                        <div id="pricing-stats">
                            <p class="text-muted">Click Apply All to see stats</p>
                        </div>
                    </div>
                </div>
            </div>
            <hr>
            <div id="ebay-results-area">
                <div class="text-muted text-center" style="padding: 4rem;">
                    <i class="fa fa-search" style="font-size: 3rem; opacity: 0.3;"></i>
                    <p>Search for a model or run batch pricing</p>
                </div>
            </div>
        </div>`).appendTo(page.main);

    // Load item dropdown
    load_item_dropdown();

    // Event handlers
    $container.find('#ebay-search-btn').on('click', function() {
        let query = $container.find('#ebay-search-input').val().trim();
        if (!query) {
            frappe.msgprint(__('Enter a model to search'));
            return;
        }
        search_ebay(query);
    });

    $container.find('#ebay-search-input').on('keypress', function(e) {
        if (e.which === 13) {
            $container.find('#ebay-search-btn').trigger('click');
        }
    });

    $container.find('#ebay-batch-btn').on('click', function() {
        let size = $container.find('#ebay-batch-size').val();
        run_batch(size);
    });

    $container.find('#ebay-apply-btn').on('click', function() {
        let item = $container.find('#ebay-apply-item').val();
        if (!item) {
            frappe.msgprint(__('Select an Item first'));
            return;
        }
        apply_pricing(item);
    });

    $container.find('#ebay-apply-all-btn').on('click', function() {
        apply_pricing_all();
    });

    function load_item_dropdown() {
        frappe.call({
            method: 'frappe.client.get_list',
            args: {
                doctype: 'Item',
                filters: {
                    'disabled': 0,
                    'item_group': ['in', ['Laptop', 'Desktop', 'Tablet', 'Phone', 'Workstation']]
                },
                fields: ['name', 'item_name'],
                limit: 1000
            },
            callback: function(r) {
                if (r.message) {
                    let $select = $container.find('#ebay-apply-item');
                    r.message.forEach(item => {
                        $select.append(`<option value="${item.name}">${item.item_name || item.name}</option>`);
                    });
                }
            }
        });
    }

    function search_ebay(query) {
        frappe.call({
            method: 'westech_r2.westech_r2.api.ebay_pricing.search_model',
            args: { query: query },
            freeze: true,
            freeze_message: __('Searching eBay sold listings...'),
            callback: function(r) {
                if (r.message && r.message.results) {
                    render_results(r.message);
                } else {
                    let msg = (r.message && r.message.message) || __('No results found');
                    frappe.msgprint(msg);
                }
            }
        });
    }

    function run_batch(size) {
        frappe.call({
            method: 'westech_r2.westech_r2.api.ebay_pricing.run_batch',
            args: { batch_size: size },
            freeze: true,
            freeze_message: __('Running batch pricing...'),
            callback: function(r) {
                if (r.message) {
                    frappe.msgprint(__('Batch complete: {0} priced, {1} failed, {2} skipped',
                        [r.message.priced, r.message.failed, r.message.skipped]));
                    load_recent_pricing();
                }
            }
        });
    }

    function apply_pricing(item_code) {
        frappe.call({
            method: 'westech_r2.westech_r2.api.ebay_pricing.batch_apply_pricing',
            args: { item_code: item_code },
            freeze: true,
            freeze_message: __('Applying pricing to Serial Nos...'),
            callback: function(r) {
                if (r.message) {
                    render_pricing_stats(r.message);
                    frappe.msgprint(__('Pricing applied: {0} priced, {1} commodity, {2} needs grading',
                        [r.message.priced, r.message.commodity, r.message.needs_grading]));
                }
            }
        });
    }

    function apply_pricing_all() {
        frappe.call({
            method: 'westech_r2.westech_r2.api.ebay_pricing.batch_apply_pricing',
            args: { batch_size: 1000 },
            freeze: true,
            freeze_message: __('Applying pricing to all Serial Nos...'),
            callback: function(r) {
                if (r.message) {
                    render_pricing_stats(r.message);
                    frappe.msgprint(__('Batch pricing applied: {0} priced, {1} commodity, {2} needs grading, {3} errors',
                        [r.message.priced, r.message.commodity, r.message.needs_grading, r.message.errors]));
                }
            }
        });
    }

    function render_pricing_stats(stats) {
        let html = `
            <table class="table table-condensed" style="margin-bottom: 0;">
                <tr><td>Priced</td><td><span class="badge badge-success">${stats.priced || 0}</span></td></tr>
                <tr><td>Commodity</td><td><span class="badge badge-warning">${stats.commodity || 0}</span></td></tr>
                <tr><td>Needs Grading</td><td><span class="badge badge-info">${stats.needs_grading || 0}</span></td></tr>
                <tr><td>Needs Price Point</td><td><span class="badge badge-primary">${stats.needs_price_point || 0}</span></td></tr>
                <tr><td>Errors</td><td><span class="badge badge-danger">${stats.errors || 0}</span></td></tr>
            </table>
        `;
        $container.find('#pricing-stats').html(html);
    }

    function render_results(data) {
        let $area = $container.find('#ebay-results-area').empty();
        if (!data.results || !data.results.length) {
            $area.html(`<div class="text-muted text-center" style="padding: 2rem;">No results</div>`);
            return;
        }

        let html = `<table class="table table-bordered">
            <thead><tr>
                <th>Title</th>
                <th>Price</th>
                <th>Condition</th>
                <th>Sold</th>
                <th>Shipping</th>
            </tr></thead>
            <tbody>`;
        data.results.forEach(item => {
            html += `<tr>
                <td>${frappe.utils.escape_html(item.title || '')}</td>
                <td>$${(item.price || 0).toFixed(2)}</td>
                <td>${frappe.utils.escape_html(item.condition || '')}</td>
                <td>${item.sold || ''}</td>
                <td>${item.shipping || ''}</td>
            </tr>`;
        });
        html += `</tbody></table>`;

        if (data.pricing) {
            html += `<div class="well">
                <h4>Pricing Summary</h4>
                <div class="row">
                    <div class="col-md-3"><strong>Low:</strong> $${data.pricing.price_low}</div>
                    <div class="col-md-3"><strong>High:</strong> $${data.pricing.price_high}</div>
                    <div class="col-md-3"><strong>Average:</strong> $${data.pricing.price_average}</div>
                    <div class="col-md-3"><strong>Median:</strong> $${data.pricing.price_auction}</div>
                </div>
                <div class="row" style="margin-top: 1rem;">
                    <div class="col-md-6"><strong>Source:</strong> ${data.pricing.source}</div>
                    <div class="col-md-6"><strong>Samples:</strong> ${data.pricing.sample_count}</div>
                </div>
            </div>`;
        }

        $area.html(html);
    }

    function load_recent_pricing() {
        frappe.call({
            method: 'westech_r2.westech_r2.api.ebay_pricing.get_recent_pricing',
            args: { limit: 50 },
            callback: function(r) {
                if (r.message) {
                    render_pricing_grid(r.message);
                }
            }
        });
    }

    function render_pricing_grid(items) {
        let $area = $container.find('#ebay-results-area');
        if (!items || !items.length) {
            $area.html(`<div class="text-muted text-center" style="padding: 2rem;">No pricing data yet</div>`);
            return;
        }

        let html = `<h4>Recent Pricing Results</h4>
        <table class="table table-bordered table-hover">
            <thead><tr>
                <th>Manufacturer</th>
                <th>Model</th>
                <th>Status</th>
                <th>Age</th>
                <th>Low</th>
                <th>High</th>
                <th>Avg</th>
                <th>Samples</th>
                <th>Source</th>
                <th>Last Priced</th>
            </tr></thead>
            <tbody>`;

        items.forEach(row => {
            let status_class = 'badge-needs';
            if (row.pricing_status === 'Priced') status_class = 'badge-fresh';
            else if (row.pricing_status === 'Manual Override') status_class = 'badge-fresh';
            else if (row.pricing_status === 'Expired') status_class = 'badge-expired';
            else if (row.pricing_status === 'Error') status_class = 'badge-error';

            let age = row.days_since_pricing || 0;
            let age_badge = age < 90 ? 'badge-fresh' : (age < 120 ? 'badge-aging' : 'badge-expired');

            html += `<tr>
                <td>${frappe.utils.escape_html(row.manufacturer || '')}</td>
                <td>${frappe.utils.escape_html(row.model || '')}</td>
                <td><span class="badge ${status_class}">${row.pricing_status}</span></td>
                <td><span class="badge ${age_badge}">${age} days</span></td>
                <td>$${row.price_low || ''}</td>
                <td>$${row.price_high || ''}</td>
                <td>$${row.price_average || ''}</td>
                <td>${row.sample_count || ''}</td>
                <td>${row.source || ''}</td>
                <td>${frappe.datetime.str_to_user(row.scraped_at) || ''}</td>
            </tr>`;
        });

        html += `</tbody></table>`;
        $area.html(html);
    }

    load_recent_pricing();
};
