<?php
$title = $title ?? 'Pesquisar Peças Yamaha';
?>

<div class="page-header" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
    <div>
        <h1>🔍 Pesquisar Peças Yamaha</h1>
        <p class="muted">Pesquise peças por código, nome, modelo ou ano</p>
    </div>
    <a href="/gestor-y" class="btn btn-secondary">Voltar</a>
</div>

<div id="alert-container"></div>

<div class="card" style="margin-bottom: 1.5rem;">
    <form id="pesquisa-form" onsubmit="pesquisar(event)">
        <div style="display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 1rem; align-items: end;">
            <div class="form-group" style="margin-bottom: 0;">
                <label>Termo de Pesquisa *</label>
                <input type="text" id="termo" placeholder="Código, nome da peça..." required>
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label>Modelo</label>
                <input type="text" id="modelo" placeholder="Ex: YBR125">
            </div>
            <div class="form-group" style="margin-bottom: 0;">
                <label>Ano</label>
                <input type="text" id="ano" placeholder="Ex: 2023">
            </div>
            <button type="submit" class="btn" id="btn-pesquisar">Pesquisar</button>
        </div>
    </form>
</div>

<div id="resultados-container" style="display: none;">
    <div class="card">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3>Resultados da Pesquisa</h3>
            <button class="btn btn-secondary" onclick="importarSelecionadas()" id="btn-importar" style="display: none;">
                Importar Selecionadas
            </button>
        </div>
        <div id="resultados-lista"></div>
    </div>
</div>

<script>
let resultadosAtuais = [];

function setAlert(message, type = 'success') {
    const container = document.getElementById('alert-container');
    container.innerHTML = `<div class="alert alert-${type}">${message}</div>`;
    setTimeout(() => container.innerHTML = '', 5000);
}

async function pesquisar(event) {
    event.preventDefault();
    
    const termo = document.getElementById('termo').value.trim();
    const modelo = document.getElementById('modelo').value.trim();
    const ano = document.getElementById('ano').value.trim();
    
    if (!termo) {
        setAlert('Informe um termo de pesquisa', 'error');
        return;
    }
    
    const btn = document.getElementById('btn-pesquisar');
    btn.disabled = true;
    btn.textContent = 'Pesquisando...';
    
    try {
        const params = new URLSearchParams({ termo });
        if (modelo) params.append('modelo', modelo);
        if (ano) params.append('ano', ano);
        
        const response = await fetch(`/api/gestor-y/pesquisar?${params}`);
        const data = await response.json();
        
        if (response.ok) {
            resultadosAtuais = data.data || [];
            exibirResultados(resultadosAtuais);
            setAlert(`Encontradas ${resultadosAtuais.length} peça(s)`, 'success');
        } else {
            setAlert(data.error?.message || 'Erro ao pesquisar', 'error');
        }
    } catch (error) {
        console.error('Erro:', error);
        setAlert('Erro ao realizar pesquisa', 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = 'Pesquisar';
    }
}

function exibirResultados(pecas) {
    const container = document.getElementById('resultados-container');
    const lista = document.getElementById('resultados-lista');
    
    if (pecas.length === 0) {
        lista.innerHTML = '<p class="muted">Nenhuma peça encontrada.</p>';
        container.style.display = 'block';
        return;
    }
    
    lista.innerHTML = `
        <table class="table">
            <thead>
                <tr>
                    <th style="width: 50px;"><input type="checkbox" id="select-all" onchange="toggleAll(this)"></th>
                    <th>Código</th>
                    <th>Nome</th>
                    <th>Preço</th>
                    <th>Status</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                ${pecas.map((peca, idx) => `
                    <tr>
                        <td><input type="checkbox" class="peca-checkbox" value="${idx}" onchange="updateImportButton()"></td>
                        <td><strong>${peca.codigo_yamaha || '-'}</strong></td>
                        <td>${peca.nome || '-'}</td>
                        <td>${peca.preco_yamaha ? 'R$ ' + parseFloat(peca.preco_yamaha).toFixed(2) : '-'}</td>
                        <td><span class="badge">${peca.status || 'disponivel'}</span></td>
                        <td>
                            <button class="btn btn-secondary" onclick="verDetalhes('${peca.codigo_yamaha}')">Detalhes</button>
                            <button class="btn" onclick="importarPeca(${idx})">Importar</button>
                        </td>
                    </tr>
                `).join('')}
            </tbody>
        </table>
    `;
    
    container.style.display = 'block';
    updateImportButton();
}

function toggleAll(checkbox) {
    document.querySelectorAll('.peca-checkbox').forEach(cb => {
        cb.checked = checkbox.checked;
    });
    updateImportButton();
}

function updateImportButton() {
    const checked = document.querySelectorAll('.peca-checkbox:checked').length;
    const btn = document.getElementById('btn-importar');
    btn.style.display = checked > 0 ? 'block' : 'none';
}

async function importarPeca(idx) {
    const peca = resultadosAtuais[idx];
    if (!peca || !peca.codigo_yamaha) {
        setAlert('Peça inválida', 'error');
        return;
    }
    
    if (!confirm(`Deseja importar a peça "${peca.nome}"?`)) return;
    
    try {
        // Primeiro, salvar a peça no banco
        const response = await fetch('/api/gestor-y/importar', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                peca_id: peca.id || null,
                codigo_yamaha: peca.codigo_yamaha,
                nome: peca.nome,
                preco_yamaha: peca.preco_yamaha
            })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            setAlert('Peça importada com sucesso!', 'success');
            // Redirecionar para produto ou atualizar lista
        } else {
            setAlert(data.error?.message || 'Erro ao importar', 'error');
        }
    } catch (error) {
        console.error('Erro:', error);
        setAlert('Erro ao importar peça', 'error');
    }
}

async function importarSelecionadas() {
    const checked = Array.from(document.querySelectorAll('.peca-checkbox:checked'))
        .map(cb => resultadosAtuais[parseInt(cb.value)]);
    
    if (checked.length === 0) {
        setAlert('Selecione pelo menos uma peça', 'error');
        return;
    }
    
    if (!confirm(`Deseja importar ${checked.length} peça(s)?`)) return;
    
    // Implementar importação em lote
    setAlert('Importação em lote em desenvolvimento', 'error');
}

async function verDetalhes(codigo) {
    // Abrir modal ou página de detalhes
    window.location.href = `/gestor-y/peca/${codigo}`;
}
</script>

<style>
.badge {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    background: #10b981;
    color: white;
}
</style>

