feat: controle granular de DNS real-time da Hostinger e exclusao de subdominios

backend/server.js

@@ -90,6 +90,12 @@ app.post('/api/subdomains', async (req, res) => {
     return res.status(400).json({ error: 'Campos obrigatórios ausentes' });
   }
 
+  // Validação de nível único (Sem subdomínios aninhados)
+  const subdomainRegex = /^[a-zA-Z0-9][-a-zA-Z0-9]*$/;
+  if (!subdomainRegex.test(subdomain)) {
+    return res.status(400).json({ error: 'O subdomínio deve conter apenas letras, números e hifens, sem pontos (nível único).' });
+  }
+
   try {
     // 1. Criar na Hostinger
     const r = await fetch(`https://developers.hostinger.com/api/dns/v1/zones/${domainName}`, {
@@ -121,6 +127,147 @@ app.post('/api/subdomains', async (req, res) => {
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
+// Excluir Subdomínio (Hostinger + Banco)
+app.delete('/api/subdomains/:id', async (req, res) => {
+  if (!HOSTINGER_API_KEY) return res.status(400).json({ error: 'API key não configurada' });
+  const { id } = req.params;
+
+  try {
+    // 1. Obter informações do subdomínio no banco
+    const subResult = await query(
+      `SELECT s.*, d.name as domain_name 
+       FROM subdomains s 
+       JOIN domains d ON s.domain_id = d.id 
+       WHERE s.id = $1`,
+      [id]
+    );
+
+    if (subResult.rows.length === 0) {
+      return res.status(404).json({ error: 'Subdomínio não encontrado.' });
+    }
+
+    const { subdomain, domain_name, type } = subResult.rows[0];
+
+    // 2. Excluir na Hostinger
+    const r = await fetch(`https://developers.hostinger.com/api/dns/v1/zones/${domain_name}`, {
+      method: 'DELETE',
+      headers: { 
+        'Authorization': `Bearer ${HOSTINGER_API_KEY}`, 
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify({
+        filters: [{ name: subdomain, type: type }]
+      })
+    });
+
+    if (!r.ok) {
+      const errText = await r.text();
+      if (r.status !== 404) {
+        return res.status(r.status).json({ error: `Erro ao excluir na Hostinger: ${errText}` });
+      }
+    }
+
+    // 3. Excluir do Banco
+    await query('DELETE FROM subdomains WHERE id = $1', [id]);
+
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// --- Gerenciamento Direto de DNS Real-Time (Hostinger) ---
+
+// Listar registros DNS diretamente da Hostinger
+app.get('/api/domains/:domainName/dns-records', async (req, res) => {
+  if (!HOSTINGER_API_KEY) return res.status(400).json({ error: 'API key não configurada' });
+  const { domainName } = req.params;
+
+  try {
+    const r = await fetch(`https://developers.hostinger.com/api/dns/v1/zones/${domainName}`, {
+      headers: { 'Authorization': `Bearer ${HOSTINGER_API_KEY}`, 'Accept': 'application/json' }
+    });
+
+    if (!r.ok) {
+      const errText = await r.text();
+      return res.status(r.status).json({ error: `Erro Hostinger: ${errText}` });
+    }
+
+    const records = await r.json();
+    res.json(records);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Criar/Adicionar registro DNS diretamente na Hostinger
+app.post('/api/domains/:domainName/dns-records', async (req, res) => {
+  if (!HOSTINGER_API_KEY) return res.status(400).json({ error: 'API key não configurada' });
+  const { domainName } = req.params;
+  const { name, type, value, ttl = 300 } = req.body;
+
+  if (!name || !type || !value) {
+    return res.status(400).json({ error: 'Campos name, type e value são obrigatórios' });
+  }
+
+  try {
+    const r = await fetch(`https://developers.hostinger.com/api/dns/v1/zones/${domainName}`, {
+      method: 'PUT',
+      headers: {
+        'Authorization': `Bearer ${HOSTINGER_API_KEY}`,
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify({
+        overwrite: false,
+        zone: [{ name, type, records: [{ content: value, ttl }] }]
+      })
+    });
+
+    if (!r.ok) {
+      const errText = await r.text();
+      return res.status(r.status).json({ error: `Erro Hostinger: ${errText}` });
+    }
+
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// Deletar registro DNS diretamente na Hostinger
+app.delete('/api/domains/:domainName/dns-records', async (req, res) => {
+  if (!HOSTINGER_API_KEY) return res.status(400).json({ error: 'API key não configurada' });
+  const { domainName } = req.params;
+  const { name, type } = req.body;
+
+  if (!name || !type) {
+    return res.status(400).json({ error: 'Campos name e type são obrigatórios' });
+  }
+
+  try {
+    const r = await fetch(`https://developers.hostinger.com/api/dns/v1/zones/${domainName}`, {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Bearer ${HOSTINGER_API_KEY}`,
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+      },
+      body: JSON.stringify({
+        filters: [{ name, type }]
+      })
+    });
+
+    if (!r.ok) {
+      const errText = await r.text();
+      return res.status(r.status).json({ error: `Erro Hostinger: ${errText}` });
+    }
+
+    res.json({ ok: true });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
 });
 
 // --- Branding / Identidade Visual ---

frontend/src/App.tsx

@@ -24,6 +24,13 @@ interface Subdomain {
   favicon_url?: string;
 }
 
+interface DnsRecord {
+  name: string;
+  type: string;
+  ttl: number;
+  records: Array<{ content: string; is_disabled?: boolean }>;
+}
+
 export default function App() {
   const [hasKey, setHasKey] = useState<boolean | null>(null);
   const [apiKeyInput, setApiKeyInput] = useState('');
@@ -35,15 +42,29 @@ export default function App() {
 
   // Navigation states
   const [selectedDomain, setSelectedDomain] = useState<Domain | null>(null);
+  const [activeTab, setActiveTab] = useState<'subdomains' | 'dns'>('subdomains');
   const [subdomains, setSubdomains] = useState<Subdomain[]>([]);
   const [loadingSubdomains, setLoadingSubdomains] = useState(false);
   const [editingBranding, setEditingBranding] = useState<Subdomain | null>(null);
 
-  // Form states
+  // Real-time DNS states
+  const [dnsRecords, setDnsRecords] = useState<DnsRecord[]>([]);
+  const [loadingDns, setLoadingDns] = useState(false);
+  const [dnsSearchQuery, setDnsSearchQuery] = useState('');
+  const [dnsFilterType, setDnsFilterType] = useState<string>('ALL');
+
+  // Subdomain Form states
   const [newSubdomain, setNewSubdomain] = useState('');
   const [newValue, setNewValue] = useState('');
   const [creating, setCreating] = useState(false);
 
+  // Custom DNS Form states
+  const [dnsFormName, setDnsFormName] = useState('');
+  const [dnsFormType, setDnsFormType] = useState('A');
+  const [dnsFormValue, setDnsFormValue] = useState('');
+  const [dnsFormTtl, setDnsFormTtl] = useState(300);
+  const [addingDnsRecord, setAddingDnsRecord] = useState(false);
+
   // Branding states
   const [brandingForm, setBrandingForm] = useState({
     title: '',
@@ -61,9 +82,13 @@ export default function App() {
 
   useEffect(() => {
     if (selectedDomain) {
+      if (activeTab === 'subdomains') {
         fetchSubdomains(selectedDomain.id);
+      } else {
+        fetchDnsRecords(selectedDomain.name);
       }
-  }, [selectedDomain]);
+    }
+  }, [selectedDomain, activeTab]);
 
   async function fetchConfig() {
     try {
@@ -89,11 +114,11 @@ export default function App() {
       if (r.ok) { 
         setHasKey(true); 
         setApiKeyInput(''); 
-        setSuccess('Chave API salva e configurada.'); 
+        setSuccess('Chave API Hostinger ativada com sucesso!'); 
         fetchDomains();
       } else { 
         const d = await r.json(); 
-        setError(d.error || 'Erro ao salvar chave.'); 
+        setError(d.error || 'Erro ao validar a chave API.'); 
       }
     } finally { setSaving(false); }
   }
@@ -118,7 +143,7 @@ export default function App() {
       const d = await r.json();
       if (r.ok) {
         setDomains(d.domains);
-        setSuccess('Sincronização concluída com sucesso!');
+        setSuccess('Domínios sincronizados com sucesso da Hostinger!');
       } else {
         setError(d.error || 'Erro na sincronização.');
       }
@@ -154,7 +179,7 @@ export default function App() {
         })
       });
       if (r.ok) {
-        setSuccess(`Subdomínio ${newSubdomain}.${selectedDomain.name} criado.`);
+        setSuccess(`Subdomínio ${newSubdomain}.${selectedDomain.name} criado e publicado na Hostinger!`);
         setNewSubdomain('');
         setNewValue('');
         fetchSubdomains(selectedDomain.id);
@@ -165,6 +190,89 @@ export default function App() {
     } finally { setCreating(false); }
   }
 
+  async function deleteSubdomain(id: number, fullDomain: string) {
+    if (!confirm(`Tem certeza que deseja excluir o subdomínio ${fullDomain}? Esta ação removerá a entrada DNS na Hostinger e todas as configurações de identidade visual!`)) return;
+    setLoadingSubdomains(true);
+    setError('');
+    setSuccess('');
+    try {
+      const r = await fetch(`${API}/subdomains/${id}`, { method: 'DELETE' });
+      if (r.ok) {
+        setSuccess(`Subdomínio ${fullDomain} removido com sucesso.`);
+        if (selectedDomain) fetchSubdomains(selectedDomain.id);
+      } else {
+        const d = await r.json();
+        setError(d.error || 'Erro ao remover subdomínio.');
+      }
+    } finally { setLoadingSubdomains(false); }
+  }
+
+  // --- Real-time Hostinger DNS Operations ---
+  async function fetchDnsRecords(domainName: string) {
+    setLoadingDns(true);
+    try {
+      const r = await fetch(`${API}/domains/${domainName}/dns-records`);
+      if (r.ok) {
+        const d = await r.json();
+        setDnsRecords(d);
+      } else {
+        const d = await r.json();
+        setError(d.error || 'Erro ao buscar registros DNS em tempo real.');
+      }
+    } finally { setLoadingDns(false); }
+  }
+
+  async function addDnsRecord(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedDomain || !dnsFormName || !dnsFormValue) return;
+    setAddingDnsRecord(true);
+    setError('');
+    setSuccess('');
+    try {
+      const r = await fetch(`${API}/domains/${selectedDomain.name}/dns-records`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: dnsFormName,
+          type: dnsFormType,
+          value: dnsFormValue,
+          ttl: dnsFormTtl
+        })
+      });
+      if (r.ok) {
+        setSuccess(`Registro DNS (${dnsFormType}) adicionado com sucesso na Hostinger!`);
+        setDnsFormName('');
+        setDnsFormValue('');
+        setDnsFormTtl(300);
+        fetchDnsRecords(selectedDomain.name);
+      } else {
+        const d = await r.json();
+        setError(d.error || 'Erro ao criar registro DNS.');
+      }
+    } finally { setAddingDnsRecord(false); }
+  }
+
+  async function deleteDnsRecord(name: string, type: string) {
+    if (!confirm(`Deseja remover o registro DNS (${type}) de "${name}" diretamente na Hostinger?`)) return;
+    setLoadingDns(true);
+    setError('');
+    setSuccess('');
+    try {
+      const r = await fetch(`${API}/domains/${selectedDomain!.name}/dns-records`, {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name, type })
+      });
+      if (r.ok) {
+        setSuccess(`Registro DNS removido com sucesso da Hostinger.`);
+        fetchDnsRecords(selectedDomain!.name);
+      } else {
+        const d = await r.json();
+        setError(d.error || 'Erro ao remover registro DNS.');
+      }
+    } finally { setLoadingDns(false); }
+  }
+
   function openBranding(sub: Subdomain) {
     setEditingBranding(sub);
     setBrandingForm({
@@ -179,6 +287,8 @@ export default function App() {
 
   async function saveBranding() {
     if (!editingBranding) return;
+    setError('');
+    setSuccess('');
     try {
       const r = await fetch(`${API}/branding/${editingBranding.id}`, {
         method: 'PUT',
@@ -186,35 +296,59 @@ export default function App() {
         body: JSON.stringify(brandingForm)
       });
       if (r.ok) {
-        setSuccess('Identidade visual atualizada!');
+        setSuccess('Identidade visual atualizada com sucesso!');
         setEditingBranding(null);
         if (selectedDomain) fetchSubdomains(selectedDomain.id);
+      } else {
+        const d = await r.json();
+        setError(d.error || 'Erro ao salvar identidade visual.');
       }
     } catch (e: any) {
       setError(e.message);
     }
   }
 
+  // Helper placeholder for DNS values
+  const getDnsValuePlaceholder = () => {
+    switch (dnsFormType) {
+      case 'A': return 'ex: 158.220.109.237';
+      case 'AAAA': return 'ex: 2001:db8::1';
+      case 'CNAME': return 'ex: ghs.google.com';
+      case 'TXT': return 'ex: v=spf1 include:_spf.google.com ~all';
+      case 'MX': return 'ex: 10 mail.dominio.com';
+      default: return 'Valor / Destino';
+    }
+  };
+
+  // Filter and search logic for real-time DNS records
+  const filteredDnsRecords = dnsRecords.filter(rec => {
+    const matchesSearch = rec.name.toLowerCase().includes(dnsSearchQuery.toLowerCase()) || 
+                          rec.records.some(r => r.content.toLowerCase().includes(dnsSearchQuery.toLowerCase()));
+    const matchesType = dnsFilterType === 'ALL' || rec.type === dnsFilterType;
+    return matchesSearch && matchesType;
+  });
+
   return (
-    <div className="min-h-screen bg-[#05080a] text-gray-100 font-sans selection:bg-orange-500/30">
+    <div className="min-h-screen bg-[#05080a] text-gray-100 font-sans selection:bg-orange-500/30 pb-20">
       
       {/* BACKGROUND DECORATION */}
-      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+      <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
-        <div className="absolute -top-24 -left-24 w-96 h-96 bg-orange-600/10 rounded-full blur-3xl" />
+        <div className="absolute -top-40 -left-40 w-[30rem] h-[30rem] bg-orange-600/10 rounded-full blur-[80px]" />
-        <div className="absolute top-1/2 -right-24 w-64 h-64 bg-blue-600/5 rounded-full blur-3xl" />
+        <div className="absolute top-1/3 right-0 w-96 h-96 bg-blue-600/5 rounded-full blur-[100px]" />
+        <div className="absolute bottom-0 left-1/4 w-[25rem] h-[25rem] bg-emerald-600/5 rounded-full blur-[90px]" />
       </div>
 
-      <div className="max-w-7xl mx-auto px-6 py-10 relative">
+      <div className="max-w-7xl mx-auto px-6 py-10 relative z-10">
         
         {/* HEADER */}
-        <header className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
+        <header className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12 border-b border-gray-900 pb-8">
           <div className="flex items-center gap-5">
             <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-2xl shadow-orange-500/20 transform hover:rotate-12 transition-transform cursor-pointer">
               <span className="font-black text-3xl text-white">S</span>
             </div>
             <div>
               <h1 className="font-black text-3xl uppercase tracking-tighter text-white">Subdominio<span className="text-orange-500">.</span>Manager</h1>
-              <p className="text-gray-500 text-sm font-bold uppercase tracking-widest">Identidade Visual & DNS</p>
+              <p className="text-gray-500 text-xs font-bold uppercase tracking-widest">Controle de DNS e Identidade Visual</p>
             </div>
           </div>
 
@@ -225,7 +359,7 @@ export default function App() {
                 disabled={loadingDomains}
                 className="group flex items-center gap-3 bg-gray-900/50 hover:bg-orange-500 border border-gray-800 hover:border-orange-400 px-6 py-3 rounded-2xl transition-all"
               >
-                <div className={`w-2 h-2 rounded-full ${loadingDomains ? 'bg-orange-400 animate-spin' : 'bg-green-500 group-hover:bg-white'}`} />
+                <div className={`w-2 h-2 rounded-full ${loadingDomains ? 'bg-orange-400 animate-pulse' : 'bg-green-500 group-hover:bg-white'}`} />
                 <span className="text-xs font-black uppercase tracking-widest group-hover:text-white">Sincronizar Hostinger</span>
               </button>
             )}
@@ -238,19 +372,23 @@ export default function App() {
         {/* ALERTS */}
         {(error || success) && (
           <div className="mb-8 animate-in fade-in slide-in-from-top-4 duration-300">
-            {error && <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-5 rounded-3xl text-sm font-bold">🚨 {error}</div>}
+            {error && <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-5 rounded-3xl text-sm font-bold flex items-center gap-2"><span>🚨</span> {error}</div>}
-            {success && <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-5 rounded-3xl text-sm font-bold">✅ {success}</div>}
+            {success && <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-5 rounded-3xl text-sm font-bold flex items-center gap-2"><span>✅</span> {success}</div>}
           </div>
         )}
 
+        {/* API CONFIGURATION FALLBACK */}
         {!hasKey && hasKey !== null && (
-          <div className="max-w-xl mx-auto bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-10 backdrop-blur-xl text-center">
+          <div className="max-w-xl mx-auto bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-10 backdrop-blur-xl text-center shadow-2xl mt-12">
-            <h2 className="text-xl font-black mb-6">Configuração da API</h2>
+            <div className="w-16 h-16 rounded-full bg-orange-500/10 flex items-center justify-center mx-auto mb-6">
-            <p className="text-gray-400 text-sm mb-8">Insira sua chave de API da Hostinger para começar a gerenciar seus domínios e identidades visuais.</p>
+              <span className="text-2xl">🔑</span>
+            </div>
+            <h2 className="text-2xl font-black mb-4 text-white">Configuração da API Hostinger</h2>
+            <p className="text-gray-400 text-sm mb-8 leading-relaxed">Insira sua chave de desenvolvedor API da Hostinger para gerenciar seus domínios, rotear subdomínios de Staging/Produção e controlar marcas visuais de forma automatizada.</p>
             <div className="space-y-4">
               <input
                 type="password"
-                placeholder="Token de API Hostinger..."
+                placeholder="Insira seu Token de API da Hostinger..."
                 value={apiKeyInput}
                 onChange={e => setApiKeyInput(e.target.value)}
                 className="w-full bg-gray-950/50 border border-gray-800 rounded-2xl px-6 py-5 text-sm focus:outline-none focus:border-orange-500 transition-all text-center"
@@ -258,9 +396,9 @@ export default function App() {
               <button
                 onClick={saveKey}
                 disabled={saving || !apiKeyInput.trim()}
-                className="w-full bg-white text-black font-black py-5 rounded-2xl text-xs uppercase tracking-[0.2em] hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20"
+                className="w-full bg-white text-black font-black py-5 rounded-2xl text-xs uppercase tracking-[0.2em] hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20 shadow-xl"
               >
-                {saving ? 'Validando...' : 'Ativar Sistema'}
+                {saving ? 'Validando credenciais...' : 'Ativar Roteador Central'}
               </button>
             </div>
           </div>
@@ -272,8 +410,8 @@ export default function App() {
             {/* DOMAIN CARDS GRID */}
             <section>
               <div className="flex items-center justify-between mb-8">
-                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Selecione um Domínio</h2>
+                <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Seus Domínios Sincronizados</h2>
-                <div className="h-px bg-gray-800 flex-1 ml-6" />
+                <div className="h-px bg-gray-900 flex-1 ml-6" />
               </div>
               
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
@@ -294,14 +432,14 @@ export default function App() {
                     <div className={`w-10 h-10 rounded-xl mb-6 flex items-center justify-center font-black text-lg ${
                       selectedDomain?.id === dom.id ? 'bg-white text-orange-500' : 'bg-gray-800 text-gray-400 group-hover:text-orange-500'
                     }`}>
-                      {dom.name.charAt(0).toUpperCase()}
+                      🌐
                     </div>
                     
                     <h3 className={`font-black text-lg leading-tight mb-2 ${selectedDomain?.id === dom.id ? 'text-white' : 'text-gray-200'}`}>
                       {dom.name}
                     </h3>
                     <p className={`text-[10px] font-bold uppercase tracking-widest ${selectedDomain?.id === dom.id ? 'text-orange-100' : 'text-gray-500'}`}>
-                      ID: {dom.hostinger_id || 'LOCAL'}
+                      ID: {dom.hostinger_id || 'EXCLUSIVO'}
                     </p>
                   </button>
                 ))}
@@ -310,69 +448,119 @@ export default function App() {
 
             {/* SELECTED DOMAIN VIEW */}
             {selectedDomain && (
-              <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 animate-in fade-in slide-in-from-bottom-8 duration-500">
+              <div className="space-y-8 animate-in fade-in slide-in-from-bottom-8 duration-500">
+                
+                {/* DOMAIN INTERFACE TABS */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between border-b border-gray-900 pb-4 gap-4">
+                  <div className="flex items-center gap-3">
+                    <span className="text-2xl">⚡</span>
+                    <h2 className="text-xl font-black text-white">{selectedDomain.name}</h2>
+                  </div>
+
+                  <div className="flex bg-gray-950 p-1.5 rounded-2xl border border-gray-800">
+                    <button
+                      onClick={() => setActiveTab('subdomains')}
+                      className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${
+                        activeTab === 'subdomains' 
+                          ? 'bg-orange-500 text-white shadow-lg' 
+                          : 'text-gray-400 hover:text-white'
+                      }`}
+                    >
+                      🎨 Identidade & Subdomínios
+                    </button>
+                    <button
+                      onClick={() => setActiveTab('dns')}
+                      className={`flex items-center gap-2 px-6 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all ${
+                        activeTab === 'dns' 
+                          ? 'bg-orange-500 text-white shadow-lg' 
+                          : 'text-gray-400 hover:text-white'
+                      }`}
+                    >
+                      ☁️ DNS Real-Time (Hostinger)
+                    </button>
+                  </div>
+                </div>
+
+                {/* TAB 1: SUBDOMAINS & BRANDING */}
+                {activeTab === 'subdomains' && (
+                  <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
                     
                     {/* SUBDOMAINS LIST */}
                     <div className="lg:col-span-8 space-y-6">
                       <div className="flex items-center justify-between">
-                    <h2 className="text-xs font-black uppercase tracking-[0.3em] text-gray-500">Subdomínios de {selectedDomain.name}</h2>
+                        <h3 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500">Subdomínios Ativos no Banco</h3>
                         <span className="bg-gray-900 border border-gray-800 px-3 py-1 rounded-full text-[10px] font-bold text-gray-400">
-                      {subdomains.length} registros
+                          {subdomains.length} registros salvos
                         </span>
                       </div>
 
+                      {loadingSubdomains ? (
+                        <div className="bg-gray-900/20 border border-gray-800 rounded-3xl p-12 text-center text-gray-500">
+                          <div className="w-8 h-8 rounded-full border-2 border-t-orange-500 border-gray-800 animate-spin mx-auto mb-4" />
+                          Carregando subdomínios...
+                        </div>
+                      ) : subdomains.length === 0 ? (
+                        <div className="bg-gray-900/20 border-2 border-dashed border-gray-800 rounded-3xl p-12 text-center text-gray-500">
+                          Nenhum subdomínio configurado com identidade visual. Crie o primeiro ao lado!
+                        </div>
+                      ) : (
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                           {subdomains.map((sub) => (
-                      <div key={sub.id} className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 hover:border-gray-700 transition-all group">
+                            <div key={sub.id} className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 hover:border-gray-700 transition-all group relative overflow-hidden">
-                        <div className="flex items-start justify-between mb-4">
+                              <div className="flex items-start justify-between mb-4 relative z-10">
                                 <div className="flex items-center gap-3">
                                   {sub.logo_url ? (
-                              <img src={sub.logo_url} className="w-10 h-10 rounded-xl object-cover bg-white" alt="Logo" />
+                                    <img src={sub.logo_url} className="w-10 h-10 rounded-xl object-cover bg-white p-0.5 border border-gray-800" alt="Logo" />
                                   ) : (
-                              <div className="w-10 h-10 rounded-xl bg-gray-800 flex items-center justify-center text-xs font-black text-gray-500">
+                                    <div className="w-10 h-10 rounded-xl bg-gray-800/80 flex items-center justify-center text-xs font-black text-gray-500 border border-gray-700">
                                       {sub.subdomain.charAt(0).toUpperCase()}
                                     </div>
                                   )}
-                            <div>
+                                  <div className="max-w-[170px] truncate">
-                              <h4 className="font-black text-sm text-white">{sub.full_domain}</h4>
+                                    <h4 className="font-black text-sm text-white truncate">{sub.full_domain}</h4>
-                              <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Aponta para: {sub.value}</p>
+                                    <p className="text-[10px] font-bold text-gray-500 uppercase tracking-widest truncate">Destino: {sub.value}</p>
                                   </div>
                                 </div>
+                                <div className="flex gap-2">
                                   <button 
                                     onClick={() => openBranding(sub)}
-                            className="w-8 h-8 rounded-lg bg-gray-800 flex items-center justify-center hover:bg-orange-500 transition-colors"
+                                    title="Identidade Visual"
+                                    className="w-8 h-8 rounded-lg bg-gray-800 hover:bg-orange-500 transition-colors flex items-center justify-center text-sm"
                                   >
                                     🎨
                                   </button>
+                                  <button 
+                                    onClick={() => deleteSubdomain(sub.id, sub.full_domain)}
+                                    title="Remover Subdomínio"
+                                    className="w-8 h-8 rounded-lg bg-gray-800 hover:bg-red-500 hover:text-white transition-colors flex items-center justify-center text-sm"
+                                  >
+                                    🗑️
+                                  </button>
+                                </div>
                               </div>
                               
-                        <div className="flex gap-2">
+                              <div className="flex gap-2 mt-4 relative z-10">
                                 <div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.primary_color || '#FF6B00' }} />
                                 <div className="h-1.5 flex-1 rounded-full" style={{ backgroundColor: sub.secondary_color || '#1A1A1A' }} />
                               </div>
                             </div>
                           ))}
-                    
-                    {/* ADD NEW BOX */}
-                    <div className="border-2 border-dashed border-gray-800 rounded-3xl p-6 flex flex-col items-center justify-center text-center group hover:border-orange-500/50 transition-all">
-                      <div className="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center mb-3 group-hover:bg-orange-500 transition-colors">
-                        <span className="font-black text-gray-500 group-hover:text-white">+</span>
-                      </div>
-                      <p className="text-[10px] font-black uppercase tracking-widest text-gray-600">Novo Subdomínio</p>
-                    </div>
                         </div>
+                      )}
                     </div>
 
                     {/* CREATE FORM */}
                     <div className="lg:col-span-4">
                       <div className="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-8 sticky top-10 backdrop-blur-xl">
-                    <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-8">Criar Subdomínio</h2>
+                        <h3 className="text-lg font-black text-white mb-2">Novo Subdomínio</h3>
+                        <p className="text-gray-500 text-xs mb-6">Aponta o DNS na Hostinger e já cria o espaço no banco para marca visual.</p>
+                        
                         <form onSubmit={createSubdomain} className="space-y-6">
                           <div className="space-y-2">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio</label>
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio (Prefixo)</label>
                             <div className="flex items-center bg-gray-950 border border-gray-800 rounded-2xl pr-5 overflow-hidden focus-within:border-orange-500 transition-all">
                               <input
-                            placeholder="ex: app"
+                                placeholder="ex: staging"
                                 value={newSubdomain}
                                 onChange={e => setNewSubdomain(e.target.value)}
                                 className="flex-1 bg-transparent px-5 py-4 text-sm focus:outline-none"
@@ -381,9 +569,9 @@ export default function App() {
                             </div>
                           </div>
                           <div className="space-y-2">
-                        <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Destino (IPv4)</label>
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">IP de Destino (IPv4)</label>
                             <input
-                          placeholder="0.0.0.0"
+                              placeholder="ex: 158.220.109.237"
                               value={newValue}
                               onChange={e => setNewValue(e.target.value)}
                               className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
@@ -394,7 +582,7 @@ export default function App() {
                             disabled={creating || !newSubdomain || !newValue}
                             className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-600 shadow-xl shadow-orange-500/20 transition-all disabled:opacity-20"
                           >
-                        {creating ? 'Criando...' : 'Confirmar Registro'}
+                            {creating ? 'Criando Roteamento...' : 'Publicar e Cadastrar'}
                           </button>
                         </form>
                       </div>
@@ -402,6 +590,178 @@ export default function App() {
 
                   </div>
                 )}
+
+                {/* TAB 2: REAL-TIME HOSTINGER DNS CONTROL */}
+                {activeTab === 'dns' && (
+                  <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
+                    
+                    {/* DNS RECORDS LIST TABLE */}
+                    <div className="lg:col-span-8 space-y-6">
+                      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+                        <h3 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500">Tabela de DNS em Tempo Real</h3>
+                        
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="text"
+                            placeholder="Buscar registros..."
+                            value={dnsSearchQuery}
+                            onChange={e => setDnsSearchQuery(e.target.value)}
+                            className="bg-gray-950 border border-gray-800 rounded-xl px-4 py-2 text-xs focus:outline-none focus:border-orange-500 transition-all"
+                          />
+                        </div>
+                      </div>
+
+                      {/* PILL FILTERS */}
+                      <div className="flex flex-wrap gap-2 border-b border-gray-900 pb-4">
+                        {['ALL', 'A', 'CNAME', 'TXT', 'MX', 'NS', 'SRV'].map((type) => (
+                          <button
+                            key={type}
+                            onClick={() => setDnsFilterType(type)}
+                            className={`px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-wider transition-all ${
+                              dnsFilterType === type 
+                                ? 'bg-orange-500 text-white shadow-md' 
+                                : 'bg-gray-900/50 text-gray-500 hover:text-white border border-gray-800/80'
+                            }`}
+                          >
+                            {type}
+                          </button>
+                        ))}
+                      </div>
+
+                      {loadingDns ? (
+                        <div className="bg-gray-900/20 border border-gray-800 rounded-3xl p-12 text-center text-gray-500">
+                          <div className="w-8 h-8 rounded-full border-2 border-t-orange-500 border-gray-800 animate-spin mx-auto mb-4" />
+                          Consultando zona DNS na Hostinger...
+                        </div>
+                      ) : filteredDnsRecords.length === 0 ? (
+                        <div className="bg-gray-900/20 border border-gray-800 rounded-3xl p-12 text-center text-gray-500">
+                          Nenhum registro DNS encontrado para os filtros selecionados.
+                        </div>
+                      ) : (
+                        <div className="bg-gray-900/30 border border-gray-800 rounded-3xl overflow-hidden shadow-xl backdrop-blur-md">
+                          <div className="overflow-x-auto custom-scrollbar">
+                            <table className="w-full text-left text-xs border-collapse">
+                              <thead>
+                                <tr className="border-b border-gray-800/80 bg-gray-900/60 font-black text-gray-400 uppercase tracking-widest">
+                                  <th className="p-4 pl-6">Nome / Host</th>
+                                  <th className="p-4">Tipo</th>
+                                  <th className="p-4">Conteúdo / Destino</th>
+                                  <th className="p-4">TTL</th>
+                                  <th className="p-4 text-center pr-6">Ações</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {filteredDnsRecords.map((rec, index) => (
+                                  <tr key={index} className="border-b border-gray-800/40 hover:bg-white/5 transition-colors">
+                                    <td className="p-4 pl-6 font-bold text-white max-w-[150px] truncate" title={rec.name}>
+                                      {rec.name}
+                                    </td>
+                                    <td className="p-4">
+                                      <span className={`px-2 py-1 rounded-md text-[9px] font-black uppercase ${
+                                        rec.type === 'A' ? 'bg-orange-500/10 text-orange-400' :
+                                        rec.type === 'CNAME' ? 'bg-blue-500/10 text-blue-400' :
+                                        rec.type === 'TXT' ? 'bg-emerald-500/10 text-emerald-400' :
+                                        'bg-gray-800 text-gray-400'
+                                      }`}>
+                                        {rec.type}
+                                      </span>
+                                    </td>
+                                    <td className="p-4 text-gray-300 font-mono max-w-[250px] truncate" title={rec.records.map(r=>r.content).join(', ')}>
+                                      {rec.records.map(r => r.content).join(', ')}
+                                    </td>
+                                    <td className="p-4 text-gray-500">
+                                      {rec.ttl}s
+                                    </td>
+                                    <td className="p-4 text-center pr-6">
+                                      <button
+                                        onClick={() => deleteDnsRecord(rec.name, rec.type)}
+                                        className="w-7 h-7 bg-gray-800 hover:bg-red-500/20 hover:text-red-400 rounded-lg transition-all flex items-center justify-center mx-auto text-xs"
+                                        title="Remover Registro DNS"
+                                      >
+                                        🗑️
+                                      </button>
+                                    </td>
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* QUICK ADD DNS RECORD */}
+                    <div className="lg:col-span-4">
+                      <div className="bg-gray-900/40 border border-gray-800 rounded-[2.5rem] p-8 sticky top-10 backdrop-blur-xl">
+                        <h3 className="text-lg font-black text-white mb-2">Novo Apontamento</h3>
+                        <p className="text-gray-500 text-xs mb-6">Adiciona qualquer tipo de registro DNS em tempo real na Hostinger.</p>
+                        
+                        <form onSubmit={addDnsRecord} className="space-y-6">
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Tipo de Registro</label>
+                            <select
+                              value={dnsFormType}
+                              onChange={e => setDnsFormType(e.target.value)}
+                              className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all text-white cursor-pointer"
+                            >
+                              <option value="A">A (Roteia para IPv4)</option>
+                              <option value="AAAA">AAAA (Roteia para IPv6)</option>
+                              <option value="CNAME">CNAME (Aponta para outro domínio)</option>
+                              <option value="TXT">TXT (Texto / Verificações)</option>
+                              <option value="MX">MX (Servidor de E-mail)</option>
+                            </select>
+                          </div>
+
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Nome / Host</label>
+                            <div className="flex items-center bg-gray-950 border border-gray-800 rounded-2xl pr-5 overflow-hidden focus-within:border-orange-500 transition-all">
+                              <input
+                                placeholder="ex: staging ou @ (principal)"
+                                value={dnsFormName}
+                                onChange={e => setDnsFormName(e.target.value)}
+                                className="flex-1 bg-transparent px-5 py-4 text-sm focus:outline-none"
+                              />
+                              <span className="text-xs font-bold text-gray-600">.{selectedDomain.name}</span>
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Conteúdo / Destino</label>
+                            <input
+                              placeholder={getDnsValuePlaceholder()}
+                              value={dnsFormValue}
+                              onChange={e => setDnsFormValue(e.target.value)}
+                              className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                            />
+                          </div>
+
+                          <div className="space-y-2">
+                            <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">TTL (Segundos)</label>
+                            <input
+                              type="number"
+                              placeholder="300"
+                              value={dnsFormTtl}
+                              onChange={e => setDnsFormTtl(parseInt(e.target.value) || 300)}
+                              className="w-full bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-orange-500 transition-all"
+                            />
+                          </div>
+
+                          <button
+                            type="submit"
+                            disabled={addingDnsRecord || !dnsFormName || !dnsFormValue}
+                            className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-600 shadow-xl shadow-orange-500/20 transition-all disabled:opacity-20"
+                          >
+                            {addingDnsRecord ? 'Adicionando Registro...' : 'Salvar na Hostinger'}
+                          </button>
+                        </form>
+                      </div>
+                    </div>
+
+                  </div>
+                )}
+
+              </div>
+            )}
           </div>
         )}
 
@@ -417,7 +777,7 @@ export default function App() {
                 <button onClick={() => setEditingBranding(null)} className="text-gray-500 hover:text-white transition-colors text-2xl font-black">×</button>
               </div>
               
-              <div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 max-h-[70vh] overflow-y-auto custom-scrollbar">
+              <div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-8 max-h-[60vh] overflow-y-auto custom-scrollbar">
                 <div className="space-y-6">
                   <div className="space-y-2">
                     <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Título da Página</label>
@@ -428,7 +788,7 @@ export default function App() {
                     />
                   </div>
                   <div className="space-y-2">
-                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Descrição (Meta)</label>
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600">Descrição (Meta Tag)</label>
                     <textarea
                       rows={3}
                       value={brandingForm.description}
@@ -478,11 +838,11 @@ export default function App() {
 
                   {/* PREVIEW */}
                   <div className="p-4 bg-gray-950 border border-gray-800 rounded-3xl mt-4">
-                    <p className="text-[10px] font-black uppercase tracking-widest text-gray-700 mb-3 text-center">Preview</p>
+                    <p className="text-[10px] font-black uppercase tracking-widest text-gray-700 mb-3 text-center">Visualização Prévia</p>
-                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-2xl border border-white/5">
+                    <div className="flex items-center gap-3 p-3 bg-white/5 rounded-2xl border border-white/5 justify-center">
-                      <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: brandingForm.primary_color }} />
+                      <div className="w-8 h-8 rounded-lg shadow-md" style={{ backgroundColor: brandingForm.primary_color }} />
-                      <div className="w-8 h-8 rounded-lg" style={{ backgroundColor: brandingForm.secondary_color }} />
+                      <div className="w-8 h-8 rounded-lg shadow-md" style={{ backgroundColor: brandingForm.secondary_color }} />
-                      <span className="text-[10px] font-bold text-gray-400">Paleta de Cores</span>
+                      <span className="text-[10px] font-bold text-gray-400">Paleta Ativa</span>
                     </div>
                   </div>
                 </div>
@@ -509,7 +869,7 @@ export default function App() {
       </div>
 
       <style>{`
-        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar { width: 4px; height: 4px; }
         .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
         .custom-scrollbar::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 10px; }
       `}</style>