From 55003b456142281d2606ccac0d8864e79d647fa4 Mon Sep 17 00:00:00 2001
From: Erik <erik@octtoengenharia.com>
Date: Sat, 29 Nov 2025 15:31:50 -0300
Subject: [PATCH] feat: Add partner badge toggle in admin settings

---
 frontend/src/app/admin/configuracoes/page.tsx | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)

diff --git a/frontend/src/app/admin/configuracoes/page.tsx b/frontend/src/app/admin/configuracoes/page.tsx
index 0faf0a2..0f7c993 100644
--- a/frontend/src/app/admin/configuracoes/page.tsx
+++ b/frontend/src/app/admin/configuracoes/page.tsx
@@ -20,11 +20,14 @@ export default function ConfiguracoesPage() {
   const [activeTab, setActiveTab] = useState<'personalizacao' | 'backup'>('personalizacao');
   const [primaryColor, setPrimaryColor] = useState('#FF6B35');
   const [customColor, setCustomColor] = useState('#FF6B35');
+  const [showPartnerBadge, setShowPartnerBadge] = useState(false);
+  const [partnerName, setPartnerName] = useState('Coca-Cola');
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
     fetchConfig();
+    fetchSettings();
   }, []);
 
   const fetchConfig = async () => {
@@ -44,6 +47,37 @@ export default function ConfiguracoesPage() {
     }
   };
 
+  const fetchSettings = async () => {
+    try {
+      const response = await fetch('/api/settings');
+      if (response.ok) {
+        const data = await response.json();
+        setShowPartnerBadge(data.showPartnerBadge || false);
+        setPartnerName(data.partnerName || 'Coca-Cola');
+      }
+    } catch (error) {
+      console.error('Erro ao carregar settings:', error);
+    }
+  };
+
+  const handleSaveSettings = async () => {
+    try {
+      const response = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ showPartnerBadge, partnerName })
+      });
+
+      if (!response.ok) throw new Error('Erro ao salvar');
+
+      success('Configurações do badge salvas!');
+      // Dispatch event para atualizar o PartnerBadge em tempo real
+      window.dispatchEvent(new Event('settings:refresh'));
+    } catch (error) {
+      showError('Erro ao salvar configurações do badge');
+    }
+  };
+
   const handleSave = async () => {
     setSaving(true);
     try {
@@ -287,6 +321,79 @@ export default function ConfiguracoesPage() {
               </p>
             </div>
           </div>
+
+          {/* Partner Badge Settings */}
+          <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
+            <div className="flex items-start gap-4 mb-6">
+              <div className="w-12 h-12 bg-linear-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg shadow-green-500/30">
+                <i className="ri-verified-badge-fill text-2xl text-white"></i>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-bold text-secondary dark:text-white mb-1">Badge de Parceiro</h2>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">
+                  Exiba um selo de parceiro oficial no seu site. Aparecerá na página inicial e no rodapé.
+                </p>
+              </div>
+            </div>
+
+            {/* Toggle Switch */}
+            <div className="flex items-center justify-between p-4 bg-gray-50 dark:bg-white/5 rounded-xl mb-6">
+              <div className="flex items-center gap-3">
+                <i className="ri-eye-line text-gray-500 dark:text-gray-400 text-xl"></i>
+                <div>
+                  <p className="font-medium text-gray-900 dark:text-white">Exibir Badge de Parceiro</p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">Mostrar o selo na hero e no rodapé do site</p>
+                </div>
+              </div>
+              <label className="relative inline-flex items-center cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={showPartnerBadge}
+                  onChange={(e) => setShowPartnerBadge(e.target.checked)}
+                  className="sr-only peer"
+                />
+                <div className="w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary/20 dark:peer-focus:ring-primary/30 rounded-full peer dark:bg-white/10 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
+              </label>
+            </div>
+
+            {/* Partner Name Input */}
+            {showPartnerBadge && (
+              <div className="mb-6">
+                <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-2">
+                  Nome do Parceiro
+                </label>
+                <input
+                  type="text"
+                  value={partnerName}
+                  onChange={(e) => setPartnerName(e.target.value)}
+                  placeholder="Ex: Coca-Cola"
+                  className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all"
+                />
+              </div>
+            )}
+
+            {/* Preview */}
+            {showPartnerBadge && (
+              <div className="p-4 bg-gray-50 dark:bg-white/5 rounded-xl mb-6">
+                <p className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">Prévia do Badge:</p>
+                <div className="inline-flex items-center gap-3 px-5 py-3 rounded-full bg-white dark:bg-white/10 border border-gray-200 dark:border-white/20 shadow-sm">
+                  <i className="ri-verified-badge-fill text-primary text-xl"></i>
+                  <span className="text-sm font-bold text-gray-700 dark:text-gray-200">
+                    PRESTADOR DE SERVIÇO OFICIAL <span className="text-primary">{partnerName}</span>
+                  </span>
+                </div>
+              </div>
+            )}
+
+            {/* Save Button */}
+            <button
+              onClick={handleSaveSettings}
+              className="w-full px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-colors shadow-lg shadow-primary/20 flex items-center justify-center gap-2"
+            >
+              <i className="ri-save-line"></i>
+              Salvar Configurações do Badge
+            </button>
+          </div>
         </div>
       )}