feat(pre-matricula): add mass messaging modal and remove from general messages

manager/components/Messages.tsx

@@ -244,7 +244,6 @@ const Messages: React.FC<MessagesProps> = ({ data, updateData }) => {
     }
 
     let targetStudents = [];
-    let isPreMatricula = false;
 
     if (targetType === 'todos') {
       targetStudents = data.students || [];
@@ -254,38 +253,14 @@ const Messages: React.FC<MessagesProps> = ({ data, updateData }) => {
     } else if (targetType === 'aluno') {
       if (!targetId) return showAlert('Aviso', 'Selecione um aluno.', 'warning');
       targetStudents = (data.students || []).filter(s => s.id === targetId);
-    } else if (targetType === 'prematricula_todos') {
-      targetStudents = dbPreMatriculas;
-      isPreMatricula = true;
-    } else if (targetType === 'prematricula_turma') {
-      if (!targetId) return showAlert('Aviso', 'Selecione uma turma.', 'warning');
-      targetStudents = dbPreMatriculas.filter(p => p.turmaId === targetId);
-      isPreMatricula = true;
-    } else if (targetType === 'prematricula_aluno') {
-      if (!targetId) return showAlert('Aviso', 'Selecione uma pré-matrícula.', 'warning');
-      targetStudents = dbPreMatriculas.filter(p => p.id === targetId);
-      isPreMatricula = true;
     }
 
-    let payloadAlunos = [];
+    const validStudents = targetStudents.filter(a => a.phone || a.guardianPhone);
+    if (validStudents.length === 0) {
+      return showAlert('Erro', 'Nenhum aluno com telefone cadastrado foi selecionado.', 'error');
+    }
 
-    if (isPreMatricula) {
+    let payloadAlunos = validStudents.flatMap(a => {
-      const validPre = targetStudents.filter(p => p.telefone);
-      if (validPre.length === 0) {
-        return showAlert('Erro', 'Nenhuma pré-matrícula com telefone válido foi selecionada.', 'error');
-      }
-      payloadAlunos = validPre.map(p => ({
-        nome: p.nome.split(' ')[0],
-        telefone: p.telefone,
-        matricula: 'Pré-Matrícula'
-      }));
-    } else {
-      const validStudents = targetStudents.filter(a => a.phone || a.guardianPhone);
-      if (validStudents.length === 0) {
-        return showAlert('Erro', 'Nenhum aluno com telefone cadastrado foi selecionado.', 'error');
-      }
-
-      payloadAlunos = validStudents.flatMap(a => {
         const entries = [];
         
         // Entrada para o Aluno
@@ -307,8 +282,7 @@ const Messages: React.FC<MessagesProps> = ({ data, updateData }) => {
         }
 
         return entries;
-      });
+    });
-    }
 
     setIsSendingMass(true);
     try {
@@ -405,23 +379,18 @@ const Messages: React.FC<MessagesProps> = ({ data, updateData }) => {
                 <option value="todos">Todos os Alunos Ativos</option>
                 <option value="turma">Alunos (Por Turma)</option>
                 <option value="aluno">Alunos (Individual)</option>
-                <option value="prematricula_todos">Pré-Matrículas (Todos)</option>
-                <option value="prematricula_turma">Pré-Matrículas (Por Turma)</option>
-                <option value="prematricula_aluno">Pré-Matrículas (Individual)</option>
               </select>
 
-              {targetType !== 'todos' && targetType !== 'prematricula_todos' && (
+              {targetType !== 'todos' && (
                 <select 
                   className="w-full px-3 py-2.5 border border-emerald-200 rounded-xl text-sm bg-white font-bold"
                   value={targetId}
                   onChange={(e) => setTargetId(e.target.value)}
                 >
                   <option value="">-- Selecione --</option>
-                  {(targetType === 'turma' || targetType === 'prematricula_turma')
+                  {targetType === 'turma'
                     ? dbClasses?.map(c => <option key={c.id} value={c.id}>{c.name}</option>)
-                    : targetType === 'prematricula_aluno'
+                    : data.students?.map(s => <option key={s.id} value={s.id}>{s.name}</option>)
-                      ? dbPreMatriculas?.map(p => <option key={p.id} value={p.id}>{p.nome} ({p.telefone})</option>)
-                      : data.students?.map(s => <option key={s.id} value={s.id}>{s.name}</option>)
                   }
                 </select>
               )}

manager/components/PreMatricula.tsx

@@ -3,8 +3,10 @@ import { SchoolData, PreMatriculaCampo, PreMatriculaConfig, PreMatriculaInscrica
 import {
   Plus, Trash2, Save, Eye, EyeOff, Download, GripVertical, Link2,
   ClipboardPen, Copy, Check, ChevronDown, ChevronRight, Users, RefreshCw,
-  FileText, X, Settings2, ArrowLeft, ExternalLink, AlertCircle, UserCheck, Edit, Upload
+  FileText, X, Settings2, ArrowLeft, ExternalLink, AlertCircle, UserCheck, Edit, Upload,
+  MessageSquare, Paperclip, Smile
 } from 'lucide-react';
+import { useDialog } from '../DialogContext';
 
 interface Props {
   data: SchoolData;
@@ -37,6 +39,7 @@ const getFriendlyLabel = (key: string, value: any): string => {
 const DAY_NAMES = ['Domingo', 'Segunda-feira', 'Terça-feira', 'Quarta-feira', 'Quinta-feira', 'Sexta-feira', 'Sábado'];
 
 const PreMatricula: React.FC<Props> = ({ data, onConvert }) => {
+  const { showAlert } = useDialog();
   const [config, setConfig] = useState<PreMatriculaConfig | null>(null);
   const [campos, setCampos] = useState<PreMatriculaCampo[]>([]);
   const [todosCampos, setTodosCampos] = useState<PreMatriculaCampo[]>([]);
@@ -51,6 +54,78 @@ const PreMatricula: React.FC<Props> = ({ data, onConvert }) => {
   const [showNewField, setShowNewField] = useState(false);
   const [newField, setNewField] = useState({ label: '', tipo: 'text', placeholder: '', obrigatorio: false, opcoes: '' });
 
+  const [showMassModal, setShowMassModal] = useState(false);
+  const [targetType, setTargetType] = useState('todos');
+  const [targetId, setTargetId] = useState('');
+  const [messageText, setMessageText] = useState('');
+  const [isSendingMass, setIsSendingMass] = useState(false);
+  const [massDelay, setMassDelay] = useState('60');
+  const [massAttachment, setMassAttachment] = useState<File | null>(null);
+  const [showMassEmojis, setShowMassEmojis] = useState(false);
+  const commonEmojis = ['😀', '😂', '🥰', '😎', '🎉', '👍', '🙏', '❤️', '🔥', '🚀', '✅', '❌', '⚠️', '💡', '🎓', '🏫', '📚', '📖', '✏️', '📝', '🎒', '💻', '🧠', '🤓', '🥇'];
+
+  const normalizeLineBreaks = (text: string) => text.replace(/\r\n/g, '\n');
+
+  const handleMassSend = async () => {
+    if (!messageText.trim()) {
+      return showAlert('Aviso', 'Digite uma mensagem para enviar.', 'warning');
+    }
+
+    let targetStudents = [];
+
+    if (targetType === 'todos') {
+      targetStudents = inscricoes;
+    } else if (targetType === 'turma') {
+      if (!targetId) return showAlert('Aviso', 'Selecione uma turma.', 'warning');
+      targetStudents = inscricoes.filter(p => p.turmaId === targetId);
+    } else if (targetType === 'aluno') {
+      if (!targetId) return showAlert('Aviso', 'Selecione uma pré-matrícula.', 'warning');
+      targetStudents = inscricoes.filter(p => p.id === targetId);
+    }
+
+    const validPre = targetStudents.filter(p => p.telefone);
+    if (validPre.length === 0) {
+      return showAlert('Erro', 'Nenhuma pré-matrícula com telefone válido foi selecionada.', 'error');
+    }
+
+    const payloadAlunos = validPre.map(p => ({
+      nome: p.nome.split(' ')[0],
+      telefone: p.telefone,
+      matricula: 'Pré-Matrícula'
+    }));
+
+    setIsSendingMass(true);
+    try {
+      const formData = new FormData();
+      formData.append('alunos', JSON.stringify(payloadAlunos));
+      formData.append('mensagem', normalizeLineBreaks(messageText));
+      formData.append('delay', String(parseInt(massDelay) || 60));
+      if (massAttachment) {
+        formData.append('attachment', massAttachment);
+      }
+
+      const resp = await fetch('/api/enviar-massa', {
+        method: 'POST',
+        body: formData
+      });
+      const resData = await resp.json();
+      
+      if (resp.ok) {
+        setMessageText('');
+        setTargetId('');
+        setMassAttachment(null);
+        setShowMassModal(false);
+        showAlert('Sucesso', 'Disparo iniciado no servidor!', 'success');
+      } else {
+        showAlert('Erro', resData.error || 'Erro ao iniciar disparo.', 'error');
+      }
+    } catch (e) {
+      showAlert('Erro', 'Erro de conexão.', 'error');
+    } finally {
+      setIsSendingMass(false);
+    }
+  };
+
   const loadData = useCallback(async () => {
     setIsLoading(true);
     try {
@@ -772,11 +847,18 @@ const PreMatricula: React.FC<Props> = ({ data, onConvert }) => {
                 <RefreshCw size={16} />
               </button>
             </div>
-            <button onClick={() => exportCSV(selectedTurma)}
+            <div className="flex items-center gap-3">
-              className="flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl font-bold text-sm hover:bg-emerald-700 transition-all active:scale-95"
+              <button onClick={() => setShowMassModal(true)}
-            >
+                className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl font-bold text-sm hover:bg-indigo-700 transition-all active:scale-95"
-              <Download size={16} /> Exportar CSV
+              >
-            </button>
+                <MessageSquare size={16} /> Disparo em Massa
+              </button>
+              <button onClick={() => exportCSV(selectedTurma)}
+                className="flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded-xl font-bold text-sm hover:bg-emerald-700 transition-all active:scale-95"
+              >
+                <Download size={16} /> Exportar CSV
+              </button>
+            </div>
           </div>
 
           {filteredInscricoes.length === 0 ? (
@@ -889,6 +971,162 @@ const PreMatricula: React.FC<Props> = ({ data, onConvert }) => {
           )}
         </div>
       )}
+
+      {showMassModal && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-transparent animate-fade-in">
+          <div className="fixed inset-0 bg-slate-900/35 backdrop-blur-none" onClick={() => !isSendingMass && setShowMassModal(false)} />
+          <div className="relative bg-white w-full max-w-lg p-6 rounded-3xl shadow-2xl border border-slate-100 animate-in zoom-in-95 duration-200">
+            <button onClick={() => !isSendingMass && setShowMassModal(false)} disabled={isSendingMass} className="absolute right-4 top-4 p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-full transition-colors disabled:opacity-50">
+              <X size={18} />
+            </button>
+            
+            <h3 className="text-base font-black text-slate-800 uppercase tracking-wider mb-5 flex items-center gap-2">
+              <MessageSquare size={20} className="text-indigo-600" /> Disparo em Massa
+            </h3>
+            
+            <div className="space-y-4">
+              <select 
+                className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-white font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                value={targetType}
+                onChange={(e) => { setTargetType(e.target.value); setTargetId(''); }}
+              >
+                <option value="todos">Todas as Pré-Matrículas</option>
+                <option value="turma">Por Turma</option>
+                <option value="aluno">Individual</option>
+              </select>
+
+              {targetType !== 'todos' && (
+                <select 
+                  className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-white font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  value={targetId}
+                  onChange={(e) => setTargetId(e.target.value)}
+                >
+                  <option value="">-- Selecione --</option>
+                  {targetType === 'turma'
+                    ? turmas?.map(c => <option key={c.id} value={c.id}>{c.nome}</option>)
+                    : inscricoes?.map(p => <option key={p.id} value={p.id}>{p.nome} ({p.telefone})</option>)
+                  }
+                </select>
+              )}
+
+              <div>
+                <label className="block text-[10px] font-bold text-slate-500 uppercase mb-2 ml-1">Mensagem Personalizada</label>
+                <div className="flex flex-wrap gap-1 mb-2 relative">
+                  {['{nome}', '{matricula}'].map(v => (
+                    <button 
+                      key={v}
+                      onClick={() => {
+                        const textarea = document.getElementById('mass-editor') as HTMLTextAreaElement;
+                        if (!textarea) return;
+                        const start = textarea.selectionStart;
+                        const end = textarea.selectionEnd;
+                        const newText = messageText.substring(0, start) + v + messageText.substring(end);
+                        setMessageText(newText);
+                        setTimeout(() => { textarea.focus(); textarea.setSelectionRange(start + v.length, start + v.length); }, 10);
+                      }}
+                      className="text-[9px] bg-indigo-50 text-indigo-700 px-2 py-1 rounded-md border border-indigo-100 hover:bg-indigo-600 hover:text-white transition-all shadow-sm font-bold"
+                    >
+                      {v}
+                    </button>
+                  ))}
+                  
+                  <button
+                    onClick={() => setShowMassEmojis(!showMassEmojis)}
+                    className="flex items-center justify-center text-[9px] bg-indigo-50 text-indigo-700 px-2 py-1 rounded-md border border-indigo-100 hover:bg-indigo-600 hover:text-white transition-all shadow-sm ml-auto font-bold"
+                    title="Inserir Emoji"
+                  >
+                    <Smile size={12} />
+                  </button>
+
+                  {showMassEmojis && (
+                    <div className="absolute right-0 top-8 z-10 bg-white border border-slate-200 rounded-xl shadow-xl p-2 grid grid-cols-5 gap-1 w-48 animate-in fade-in zoom-in duration-200">
+                      {commonEmojis.map(emoji => (
+                        <button
+                          key={emoji}
+                          onClick={() => {
+                            const textarea = document.getElementById('mass-editor') as HTMLTextAreaElement;
+                            if (!textarea) return;
+                            const start = textarea.selectionStart;
+                            const end = textarea.selectionEnd;
+                            const newText = messageText.substring(0, start) + emoji + messageText.substring(end);
+                            setMessageText(newText);
+                            setShowMassEmojis(false);
+                            setTimeout(() => { textarea.focus(); textarea.setSelectionRange(start + emoji.length, start + emoji.length); }, 10);
+                          }}
+                          className="hover:bg-slate-50 text-lg rounded flex items-center justify-center p-1 transition-colors"
+                        >
+                          {emoji}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                <textarea 
+                  id="mass-editor"
+                  rows={4}
+                  className="w-full px-4 py-3 border border-slate-200 rounded-xl text-sm bg-white focus:ring-2 focus:ring-indigo-500 focus:outline-none font-medium shadow-sm resize-none text-slate-700"
+                  placeholder="Escreva sua mensagem..."
+                  value={messageText}
+                  onChange={(e) => setMessageText(e.target.value)}
+                />
+                
+                <div className="mt-2 flex items-center justify-between">
+                  <div className="flex-1">
+                    {massAttachment ? (
+                      <div className="flex items-center gap-2 bg-indigo-50 text-indigo-700 text-[10px] font-bold px-2 py-1.5 rounded-lg border border-indigo-100 w-fit">
+                        <span className="truncate max-w-[150px]">{massAttachment.name}</span>
+                        <button onClick={() => setMassAttachment(null)} className="text-indigo-500 hover:text-red-500" title="Remover anexo"><X size={12} /></button>
+                      </div>
+                    ) : (
+                      <div className="text-[9px] text-slate-400 font-medium">Nenhum anexo</div>
+                    )}
+                  </div>
+                  
+                  <label className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-50 text-slate-600 rounded-lg border border-slate-200 text-[10px] font-black uppercase cursor-pointer hover:bg-slate-100 transition-all shadow-sm">
+                    <Paperclip size={12} />
+                    <span>Anexar Arquivo</span>
+                    <input 
+                      type="file" 
+                      className="hidden" 
+                      accept="image/*,application/pdf"
+                      onChange={(e) => {
+                        if (e.target.files && e.target.files[0]) {
+                          setMassAttachment(e.target.files[0]);
+                        }
+                      }}
+                    />
+                  </label>
+                </div>
+              </div>
+
+              <div className="bg-slate-50 p-3 rounded-xl border border-slate-100 mb-2">
+                <label className="block text-[9px] font-black text-slate-500 uppercase tracking-widest mb-1.5 ml-1">Intervalo Mínimo (Segundos)</label>
+                <div className="flex items-center gap-2">
+                  <input 
+                    type="number" 
+                    min="10" max="600"
+                    value={massDelay}
+                    onChange={(e) => setMassDelay(e.target.value)}
+                    className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm font-bold text-center text-slate-700 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  />
+                  <div className="text-[10px] text-slate-500 font-bold whitespace-nowrap">seg/msg</div>
+                </div>
+                <p className="text-[8px] text-slate-400 mt-1 font-medium leading-tight">Recomendado: 60s ou mais para evitar banimento.</p>
+              </div>
+
+              <button 
+                onClick={handleMassSend}
+                disabled={isSendingMass}
+                className={`w-full flex items-center justify-center gap-2 py-3.5 px-4 rounded-xl font-black text-sm text-white transition-all shadow-lg active:scale-95 ${
+                  isSendingMass ? 'bg-slate-400' : 'bg-indigo-600 hover:bg-indigo-700'
+                }`}
+              >
+                {isSendingMass ? 'Iniciando...' : 'Iniciar Disparo'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };