---
layout: default
title: MMPSearch - Envie seu projeto
permalink: /envie_seu_projeto/
---

<meta charset="utf-8" />

<main class="main-content">
  <div class="publication">
    <div class="container">
      <br />
      
      <!-- 1. MENU DE ABAS (Padrão) -->
      <div class="tabs is-centered is-boxed is-medium mb-6">
        {% include sidebar.html %}
      </div>

      <!-- 2. CABEÇALHO -->
      <div class="columns is-centered">
        <div class="column is-8 has-text-centered">
            <h1 class="title is-3 has-text-grey-dark mb-3">
                <span class="icon has-text-info mr-2"><i class="fa-solid fa-cloud-arrow-up"></i></span>
                Enviar Projeto
            </h1>
            <p class="subtitle is-6 has-text-grey">
                Contribua com a comunidade! Envie seus arquivos <code>.mmp</code> ou <code>.mmpz</code> para que outros possam estudar e remixar.
            </p>
            <div style="width: 60px; height: 4px; background-color: #3273dc; margin: 1rem auto; border-radius: 2px;"></div>
        </div>
      </div>

      <!-- 3. FORMULÁRIO DE UPLOAD -->
      <div class="columns is-centered">
        <div class="column is-8">

            <div class="box p-5" style="background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px;">
                <form id="upload-project-form">

                    <!-- ÁREA DE ARQUIVO (DROPZONE) -->
                    <div class="field mb-5">
                        <label class="label has-text-grey-dark">Arquivo do Projeto (LMMS)</label>
                        <div class="file-upload-wrapper" id="drop-zone">
                            <input class="file-upload-input" type="file" name="project_file" id="project_file" accept=".mmp, .mmpz" required>
                            <div class="drag-text has-text-centered">
                                <span class="icon is-large has-text-info mb-2"><i class="fa-solid fa-file-audio fa-3x"></i></span>
                                <h3 class="title is-5 has-text-grey-dark mb-1">Arraste e solte o arquivo aqui</h3>
                                <p class="is-size-7 has-text-grey">ou clique para selecionar (.mmp, .mmpz)</p>
                                <p id="file-name-display" class="tag is-info is-light mt-3 is-hidden"></p>
                            </div>
                        </div>
                    </div>

                    <!-- INFORMAÇÕES BÁSICAS -->
                    <div class="columns">
                        <div class="column is-6">
                            <div class="field">
                                <label class="label has-text-grey-dark">Nome do Projeto</label>
                                <div class="control has-icons-left">
                                    <input class="input" type="text" placeholder="Ex: Manda a maladeza" required>
                                    <span class="icon is-small is-left">
                                        <i class="fa-solid fa-music"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="column is-6">
                            <div class="field">
                                <label class="label has-text-grey-dark">Qual o seu vulgo?</label>
                                <div class="control has-icons-left">
                                    <input class="input" type="text" placeholder="Seu nome ou nick" required>
                                    <span class="icon is-small is-left">
                                        <i class="fa-solid fa-user"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="columns">
                        <div class="column is-4">
                            <div class="field">
                                <label class="label has-text-grey-dark">BPM</label>
                                <div class="control has-icons-left">
                                    <input class="input" type="number" placeholder="128" min="1" max="999">
                                    <span class="icon is-small is-left">
                                        <i class="fa-solid fa-gauge-high"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="column is-8">
                            <div class="field">
                                <label class="label has-text-grey-dark">Tags (Opcional)</label>
                                <div class="control has-icons-left">
                                    <input class="input" type="text" placeholder="Ex: rap, hip hop, boom bap, remix">
                                    <span class="icon is-small is-left">
                                        <i class="fa-solid fa-tags"></i>
                                    </span>
                                </div>
                                <p class="help">Separe por vírgulas.</p>
                            </div>
                        </div>
                    </div>

                    <div class="field">
                        <label class="label has-text-grey-dark">Descrição</label>
                        <div class="control">
                            <textarea class="textarea" placeholder="Conte um pouco sobre como você criou esse projeto, plugins usados, etc." rows="3"></textarea>
                        </div>
                    </div>

                    <!-- PREVIEW DE ÁUDIO (OPCIONAL) -->
                    <div class="field mb-5">
                        <label class="label has-text-grey-dark">Preview de Áudio (Opcional)</label>
                        <div class="file has-name is-fullwidth">
                          <label class="file-label">
                            <input class="file-input" type="file" name="audio_preview" accept=".wav, .mp3, .ogg">
                            <span class="file-cta">
                              <span class="file-icon">
                                <i class="fa-solid fa-upload"></i>
                              </span>
                              <span class="file-label">
                                Escolher arquivo de áudio...
                              </span>
                            </span>
                            <span class="file-name has-text-grey-light">
                              Nenhum arquivo selecionado
                            </span>
                          </label>
                        </div>
                        <p class="help">Envie um .mp3 ou .wav para que as pessoas possam ouvir antes de baixar.</p>
                    </div>

                    <!-- BOTÃO DE ENVIO -->
                    <div class="field mt-5">
                        <div class="control">
                            <button type="submit" class="button is-info is-fullwidth is-medium shadow-sm" id="submit-btn">
                                <span class="icon"><i class="fa-solid fa-paper-plane"></i></span>
                                <span>Enviar Projeto</span>
                            </button>
                        </div>
                    </div>

                </form>
            </div>

        </div>
      </div>

    </div>

  </div>
</main>

<!-- MODAL DE SUCESSO -->
<div id="success-modal" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head has-background-success-light">
      <p class="modal-card-title has-text-success-dark">Sucesso!</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body has-text-centered p-5">
      <span class="icon is-large has-text-success mb-3">
          <i class="fa-solid fa-circle-check fa-4x"></i>
      </span>
      <h3 class="title is-4">Projeto Enviado!</h3>
      <p>Obrigado por contribuir. Seu projeto está sendo processado e em breve aparecerá na lista.</p>
    </section>
    <footer class="modal-card-foot is-justify-content-center has-background-white">
      <a href="{{ '/projetos/' | relative_url }}" class="button is-success">Ver Projetos</a>
      <button class="button" id="close-success-modal">Enviar Outro</button>
    </footer>
  </div>
</div>

<style>
    /* Estilo do Dropzone */
    .file-upload-wrapper {
        position: relative;
        width: 100%;
        height: 200px;
        border: 2px dashed #3273dc;
        border-radius: 8px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        cursor: pointer;
    }
    .file-upload-wrapper:hover, .file-upload-wrapper.dragover {
        background-color: #eef6fc;
        border-color: #205081;
    }
    .file-upload-input {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
    }
    .drag-text {
        pointer-events: none; /* Deixa o clique passar para o input */
    }
    
    /* Inputs customizados */
    .input:focus, .textarea:focus {
        border-color: #3273dc;
        box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    // 1. Lógica do Dropzone (Visual)
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('project_file');
    const fileNameDisplay = document.getElementById('file-name-display');
    const dragTextTitle = dropZone.querySelector('.title');

    // Efeito visual ao arrastar
    ['dragenter', 'dragover'].forEach(eventName => {
        dropZone.addEventListener(eventName, (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
    });
    ['dragleave', 'drop'].forEach(eventName => {
        dropZone.addEventListener(eventName, (e) => {
            dropZone.classList.remove('dragover');
        });
    });

    // Mostrar nome do arquivo selecionado
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            const name = fileInput.files[0].name;
            fileNameDisplay.textContent = name;
            fileNameDisplay.classList.remove('is-hidden');
            dragTextTitle.textContent = "Arquivo Selecionado!";
            dropZone.style.borderColor = "#4caf50";
            dropZone.style.backgroundColor = "#f0fff4";
        }
    });

    // 2. Lógica do Input de Áudio (padrão Bulma)
    const audioInput = document.querySelector('.file-input');
    const audioName = document.querySelector('.file-name');
    if(audioInput) {
        audioInput.addEventListener('change', () => {
            if (audioInput.files.length > 0) {
                audioName.textContent = audioInput.files[0].name;
            }
        });
    }

    // 3. Simulação de Envio (Modal)
    const form = document.getElementById('upload-project-form');
    const modal = document.getElementById('success-modal');
    const submitBtn = document.getElementById('submit-btn');
    const closeBtns = document.querySelectorAll('.delete, #close-success-modal, .modal-background');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        submitBtn.classList.add('is-loading');
        
        const formData = new FormData(form);

        try {
            // APONTA PARA O SEU SERVIDOR PYTHON
            // Se estiver rodando localmente, geralmente é localhost:5000
            // Se for no servidor de produção, coloque o IP ou domínio correto
            const response = await fetch('https://alice.ufsj.edu.br:33002/api/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();

            if (response.ok) {
                // Sucesso!
                submitBtn.classList.remove('is-loading');
                
                // Atualiza a mensagem do modal se quiser
                const modalTitle = modal.querySelector('.title');
                modalTitle.textContent = "Projeto Processado!";
                
                modal.classList.add('is-active');
                document.documentElement.classList.add('is-clipped');
                
                form.reset(); 
                document.getElementById('file-name-display').classList.add('is-hidden');
                document.querySelector('.drag-text .title').textContent = "Arraste e solte o arquivo aqui";
                document.getElementById('drop-zone').style.borderColor = "#3273dc";
                document.getElementById('drop-zone').style.backgroundColor = "#fff";
            } else {
                alert('Erro: ' + (result.error || 'Falha desconhecida'));
                submitBtn.classList.remove('is-loading');
            }
        } catch (error) {
            console.error('Erro:', error);
            alert('Erro de conexão com o servidor de processamento.');
            submitBtn.classList.remove('is-loading');
        }
    });

    // Fechar Modal
    closeBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            modal.classList.remove('is-active');
            document.documentElement.classList.remove('is-clipped');
        });
    });
});
</script>