feat: persist premium ui and versioning

frontend/src/App.tsx

@@ -1,16 +1,29 @@
 import React, { useState, useEffect } from 'react';
+import { APP_VERSION } from './constants';
 
 const API = '/api';
 
+interface Domain {
+  domain: string;
+  id?: number;
+  status?: string;
+}
+
 export default function App() {
   const [hasKey, setHasKey] = useState<boolean | null>(null);
   const [apiKeyInput, setApiKeyInput] = useState('');
   const [saving, setSaving] = useState(false);
-  const [subdomains, setSubdomains] = useState<any[]>([]);
+  const [domains, setDomains] = useState<Domain[]>([]);
   const [loadingDomains, setLoadingDomains] = useState(false);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
 
+  // Form states
+  const [selectedDomain, setSelectedDomain] = useState('');
+  const [newSubdomain, setNewSubdomain] = useState('');
+  const [newValue, setNewValue] = useState('');
+  const [creating, setCreating] = useState(false);
+
   useEffect(() => {
     fetch(`${API}/config`)
       .then(r => r.json())
@@ -22,119 +35,249 @@ export default function App() {
     if (!apiKeyInput.trim()) return;
     setSaving(true);
     setError('');
+    setSuccess('');
     try {
       const r = await fetch(`${API}/config/hostinger-key`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ api_key: apiKeyInput })
       });
-      if (r.ok) { setHasKey(true); setApiKeyInput(''); setSuccess('Chave salva com sucesso.'); }
-      else { const d = await r.json(); setError(d.error || 'Erro ao salvar.'); }
+      if (r.ok) { 
+        setHasKey(true); 
+        setApiKeyInput(''); 
+        setSuccess('Chave API salva e configurada com sucesso.'); 
+      } else { 
+        const d = await r.json(); 
+        setError(d.error || 'Erro ao salvar chave.'); 
+      }
     } finally { setSaving(false); }
   }
 
-  async function fetchSubdomains() {
+  async function fetchDomains() {
     setLoadingDomains(true);
     setError('');
+    setSuccess('');
     try {
       const r = await fetch(`${API}/subdomains`);
       const d = await r.json();
-      if (r.ok) setSubdomains(Array.isArray(d) ? d : d.data || []);
-      else setError(d.error || 'Erro ao buscar domínios.');
+      if (r.ok) {
+        setDomains(Array.isArray(d) ? d : d.data || []);
+      } else {
+        setError(d.error || 'Erro ao buscar domínios na Hostinger.');
+      }
     } finally { setLoadingDomains(false); }
   }
 
+  async function createSubdomain(e: React.FormEvent) {
+    e.preventDefault();
+    if (!selectedDomain || !newSubdomain || !newValue) {
+      setError('Preencha todos os campos do subdomínio.');
+      return;
+    }
+    setCreating(true);
+    setError('');
+    setSuccess('');
+    try {
+      const r = await fetch(`${API}/subdomains`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          domain: selectedDomain,
+          subdomain: newSubdomain,
+          value: newValue
+        })
+      });
+      const d = await r.json();
+      if (r.ok) {
+        setSuccess(`Sucesso! ${newSubdomain}.${selectedDomain} foi criado/atualizado.`);
+        setNewSubdomain('');
+        setNewValue('');
+      } else {
+        setError(d.error || 'Erro ao criar subdomínio.');
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally { setCreating(false); }
+  }
+
   return (
-    <div className="min-h-screen bg-gray-950 text-white p-6">
-      <div className="max-w-2xl mx-auto space-y-6">
+    <div className="min-h-screen bg-[#05080a] text-gray-100 p-4 md:p-10 font-sans selection:bg-orange-500/30">
+      <div className="max-w-4xl mx-auto space-y-8">
 
-        {/* Header */}
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-xl bg-orange-500 flex items-center justify-center font-black text-lg">C</div>
+        {/* HEADER */}
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 border-b border-gray-800/50 pb-8">
+          <div className="flex items-center gap-4">
+            <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-lg shadow-orange-500/20">
+              <span className="font-black text-2xl text-white">C</span>
+            </div>
             <div>
-            <h1 className="font-black text-xl tracking-tight uppercase">Gerenciador de Subdomínios</h1>
-            <p className="text-gray-400 text-sm">clube67.com — Hostinger DNS</p>
+              <h1 className="font-black text-2xl uppercase tracking-tighter text-white">Gerenciador de DNS</h1>
+              <p className="text-gray-500 text-sm font-medium">Clube67 — Automação Hostinger</p>
             </div>
           </div>
           
-        {/* Card API Key */}
-        <div className="bg-gray-900 border border-gray-800 rounded-2xl p-6 space-y-4">
-          <div className="flex items-center justify-between">
-            <h2 className="font-bold text-sm uppercase tracking-widest text-gray-400">Hostinger API Key</h2>
-            {hasKey === true && (
-              <span className="text-xs font-bold bg-green-900/50 text-green-400 border border-green-800 px-3 py-1 rounded-full">
-                ● CONFIGURADA
-              </span>
-            )}
-            {hasKey === false && (
-              <span className="text-xs font-bold bg-red-900/50 text-red-400 border border-red-800 px-3 py-1 rounded-full">
-                ● NÃO CONFIGURADA
-              </span>
+          {hasKey && (
+            <div className="flex items-center gap-2 bg-gray-900/50 border border-gray-800 px-4 py-2 rounded-2xl">
+              <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+              <span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">API Hostinger Ativa</span>
+            </div>
           )}
         </div>
 
-          <p className="text-gray-400 text-sm">
-            Insira a API Key da Hostinger para gerenciar registros DNS e criar subdomínios automaticamente.
-          </p>
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
           
-          <div className="flex gap-2">
+          {/* COLUNA ESQUERDA: CONFIG & LISTA */}
+          <div className="lg:col-span-5 space-y-8">
+            
+            {/* CONFIG CARD */}
+            {!hasKey && (
+              <div className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 backdrop-blur-sm">
+                <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-4">Configuração Necessária</h2>
+                <div className="space-y-4">
                   <input
                     type="password"
-              placeholder="Bearer token da Hostinger..."
+                    placeholder="Token de API Hostinger..."
                     value={apiKeyInput}
                     onChange={e => setApiKeyInput(e.target.value)}
-              onKeyDown={e => e.key === 'Enter' && saveKey()}
-              className="flex-1 bg-gray-800 border border-gray-700 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-orange-500 placeholder-gray-600"
+                    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/50 transition-all placeholder:text-gray-700"
                   />
                   <button
                     onClick={saveKey}
                     disabled={saving || !apiKeyInput.trim()}
-              className="bg-orange-500 hover:bg-orange-600 disabled:opacity-40 disabled:cursor-not-allowed text-white font-bold px-5 py-3 rounded-xl text-sm transition-colors"
+                    className="w-full bg-white text-black font-black py-4 rounded-2xl text-xs uppercase tracking-widest hover:bg-orange-500 hover:text-white transition-all disabled:opacity-20"
                   >
-              {saving ? '...' : 'SALVAR'}
+                    {saving ? 'Configurando...' : 'Ativar Sistema'}
                   </button>
                 </div>
-
-          {success && <p className="text-green-400 text-sm font-medium">{success}</p>}
-          {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
               </div>
+            )}
 
-        {/* Card Domínios */}
+            {/* LISTA DE DOMÍNIOS */}
             {hasKey && (
-          <div className="bg-gray-900 border border-gray-800 rounded-2xl p-6 space-y-4">
-            <div className="flex items-center justify-between">
-              <h2 className="font-bold text-sm uppercase tracking-widest text-gray-400">Domínios / DNS</h2>
+              <div className="bg-gray-900/40 border border-gray-800 rounded-3xl p-6 backdrop-blur-sm flex flex-col min-h-[400px]">
+                <div className="flex items-center justify-between mb-6">
+                  <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500">Meus Domínios</h2>
                   <button 
-                onClick={fetchSubdomains}
+                    onClick={fetchDomains}
                     disabled={loadingDomains}
-                className="bg-gray-800 hover:bg-gray-700 border border-gray-700 text-white font-bold px-4 py-2 rounded-xl text-xs transition-colors disabled:opacity-40"
+                    className="text-[10px] font-bold text-orange-500 hover:text-orange-400 transition-colors uppercase tracking-widest"
                   >
-                {loadingDomains ? 'BUSCANDO...' : 'BUSCAR DA HOSTINGER'}
+                    {loadingDomains ? 'Atualizando...' : 'Sincronizar'}
                   </button>
                 </div>
 
-            {subdomains.length === 0 && !loadingDomains && (
-              <p className="text-gray-600 text-sm text-center py-6">Clique em "Buscar da Hostinger" para listar os domínios.</p>
+                <div className="flex-1 space-y-2 overflow-y-auto max-h-[500px] pr-2 custom-scrollbar">
+                  {domains.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed border-gray-800/50 rounded-3xl">
+                      <p className="text-gray-600 text-xs text-center px-10">Clique em sincronizar para listar seus domínios da Hostinger.</p>
+                    </div>
+                  ) : (
+                    domains.map((d, i) => (
+                      <button
+                        key={i}
+                        onClick={() => setSelectedDomain(d.domain)}
+                        className={`w-full flex items-center justify-between p-4 rounded-2xl transition-all border ${
+                          selectedDomain === d.domain 
+                            ? 'bg-orange-500/10 border-orange-500/50 text-white' 
+                            : 'bg-gray-950/50 border-gray-800/50 text-gray-400 hover:border-gray-700'
+                        }`}
+                      >
+                        <span className="text-sm font-bold truncate">{d.domain}</span>
+                        <div className={`w-1.5 h-1.5 rounded-full ${selectedDomain === d.domain ? 'bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.6)]' : 'bg-gray-800'}`} />
+                      </button>
+                    ))
                   )}
+                </div>
+              </div>
+            )}
+          </div>
 
-            {subdomains.length > 0 && (
+          {/* COLUNA DIREITA: FORMULÁRIO DE CRIAÇÃO */}
+          <div className="lg:col-span-7">
+            <div className="bg-gray-900/40 border border-gray-800 rounded-3xl p-8 backdrop-blur-sm h-full relative overflow-hidden">
+              <div className="absolute top-0 right-0 p-8 opacity-5">
+                <span className="text-8xl font-black">DNS</span>
+              </div>
+
+              <h2 className="text-xs font-black uppercase tracking-[0.2em] text-gray-500 mb-8">Novo Subdomínio</h2>
+
+              <form onSubmit={createSubdomain} className="space-y-8">
                 <div className="space-y-2">
-                {subdomains.map((d: any, i: number) => (
-                  <div key={i} className="flex items-center justify-between bg-gray-800 rounded-xl px-4 py-3">
-                    <span className="font-mono text-sm text-white">{d.domain || d.name || JSON.stringify(d)}</span>
-                    <span className="text-xs text-gray-500">{d.type || ''}</span>
+                  <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Domínio Selecionado</label>
+                  <div className="bg-gray-950 border border-gray-800 rounded-2xl px-5 py-4 text-sm font-bold text-gray-300">
+                    {selectedDomain || 'Selecione um domínio na lista ao lado'}
                   </div>
-                ))}
                 </div>
-            )}
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Subdomínio (Nome)</label>
+                    <input
+                      placeholder="ex: app, bot, api"
+                      value={newSubdomain}
+                      onChange={e => setNewSubdomain(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/50 transition-all placeholder:text-gray-800"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <label className="text-[10px] font-black uppercase tracking-widest text-gray-600 ml-1">Destino (IPv4)</label>
+                    <input
+                      placeholder="0.0.0.0"
+                      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/50 transition-all placeholder:text-gray-800"
+                    />
+                  </div>
+                </div>
+
+                <div className="pt-4">
+                  <button
+                    type="submit"
+                    disabled={creating || !selectedDomain || !newSubdomain || !newValue}
+                    className="w-full bg-orange-500 text-white font-black py-5 rounded-2xl text-sm uppercase tracking-widest hover:bg-orange-600 shadow-lg shadow-orange-500/20 transition-all disabled:opacity-20 disabled:grayscale"
+                  >
+                    {creating ? 'Processando na Hostinger...' : 'Criar Registro DNS'}
+                  </button>
+                </div>
+
+                {error && (
+                  <div className="bg-red-500/10 border border-red-500/20 text-red-400 p-4 rounded-2xl text-xs font-bold animate-shake">
+                    🚨 {error}
                   </div>
                 )}
 
-        {/* Rodapé */}
-        <p className="text-center text-gray-700 text-xs">
+                {success && (
+                  <div className="bg-green-500/10 border border-green-500/20 text-green-400 p-4 rounded-2xl text-xs font-bold">
+                    ✅ {success}
+                  </div>
+                )}
+              </form>
+            </div>
+          </div>
+        </div>
+
+        {/* FOOTER */}
+        <div className="flex items-center justify-center gap-4 pt-4">
+          <div className="h-px bg-gray-800 flex-1" />
+          <p className="text-[10px] font-bold text-gray-600 uppercase tracking-[0.2em] whitespace-nowrap">
+            <span className="bg-gray-900 border border-gray-800 px-2 py-1 rounded-md text-gray-400 mr-2">{APP_VERSION}</span>
             subdominio.clube67.com — acesso restrito VPN
           </p>
+          <div className="h-px bg-gray-800 flex-1" />
         </div>
       </div>
+
+      <style>{`
+        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 10px; }
+        @keyframes shake {
+          0%, 100% { transform: translateX(0); }
+          25% { transform: translateX(-4px); }
+          75% { transform: translateX(4px); }
+        }
+        .animate-shake { animation: shake 0.2s ease-in-out 0s 2; }
+      `}</style>
+    </div>
   );
 }