const { useState, useEffect, useMemo } = React;

// --- CONFIGURAÇÃO PADRÃO DA SENHA ---
const ADMIN_PASSWORD = "admin123";

// --- CONFIGURAÇÃO PADRÃO DO SUPABASE ---
const SUPABASE_URL = "https://gkmvismksxnnbkghesnu.supabase.co";
const SUPABASE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImdrbXZpc21rc3hubmJrZ2hlc251Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzkyNzgzMTksImV4cCI6MjA5NDg1NDMxOX0.n3s-ZjZAvKLrDYp3ygunxVLQb17N7r1lWUvAXY5pkcQ";

// --- DADOS MOCKADOS DE DEMONSTRAÇÃO ---
// Serão exibidos apenas se não houver registros reais no localStorage e o Supabase não estiver configurado
const MOCK_EVENTS = [
  { id: "mock_1", created_at: new Date(Date.now() - 3 * 60000).toISOString(), session_id: "sess_mock_a", event_type: "page_view", event_name: "landing_page", device: "mobile", utm_source: "facebook", utm_medium: "cpc", utm_campaign: "campanha_futebol", duration_seconds: 45 },
  { id: "mock_2", created_at: new Date(Date.now() - 2 * 60000).toISOString(), session_id: "sess_mock_a", event_type: "click", event_name: "hero_cta", device: "mobile", utm_source: "facebook", utm_medium: "cpc", utm_campaign: "campanha_futebol" },
  { id: "mock_3", created_at: new Date(Date.now() - 5 * 60000).toISOString(), session_id: "sess_mock_b", event_type: "page_view", event_name: "landing_page", device: "desktop", utm_source: "google", utm_medium: "search", utm_campaign: "branding_mobtv", duration_seconds: 120 },
  { id: "mock_4", created_at: new Date(Date.now() - 8 * 60000).toISOString(), session_id: "sess_mock_c", event_type: "page_view", event_name: "landing_page", device: "mobile", utm_source: "instagram", utm_medium: "stories", utm_campaign: "promocao_full", duration_seconds: 15 },
  { id: "mock_5", created_at: new Date(Date.now() - 8 * 60000).toISOString(), session_id: "sess_mock_c", event_type: "click", event_name: "plan_full_3_screens", device: "mobile", utm_source: "instagram", utm_medium: "stories", utm_campaign: "promocao_full" },
  { id: "mock_6", created_at: new Date(Date.now() - 15 * 60000).toISOString(), session_id: "sess_mock_d", event_type: "page_view", event_name: "landing_page", device: "mobile", utm_source: null, utm_medium: null, utm_campaign: null, duration_seconds: 240 },
  { id: "mock_7", created_at: new Date(Date.now() - 15 * 60000).toISOString(), session_id: "sess_mock_d", event_type: "click", event_name: "footer_whatsapp", device: "mobile", utm_source: null, utm_medium: null, utm_campaign: null },
  { id: "mock_8", created_at: new Date(Date.now() - 20 * 60000).toISOString(), session_id: "sess_mock_e", event_type: "page_view", event_name: "landing_page", device: "desktop", utm_source: "google", utm_medium: "cpc", utm_campaign: "pesquisa_competidores", duration_seconds: 80 },
  { id: "mock_9", created_at: new Date(Date.now() - 35 * 60000).toISOString(), session_id: "sess_mock_f", event_type: "page_view", event_name: "landing_page", device: "mobile", utm_source: "facebook", utm_medium: "cpc", utm_campaign: "campanha_futebol", duration_seconds: 10 },
  { id: "mock_10", created_at: new Date(Date.now() - 50 * 60000).toISOString(), session_id: "sess_mock_g", event_type: "page_view", event_name: "landing_page", device: "tablet", utm_source: "parcerias", utm_medium: "influencer", utm_campaign: "video_analise", duration_seconds: 190 },
  { id: "mock_11", created_at: new Date(Date.now() - 50 * 60000).toISOString(), session_id: "sess_mock_g", event_type: "click", event_name: "plan_family_1_screen", device: "tablet", utm_source: "parcerias", utm_medium: "influencer", utm_campaign: "video_analise" }
];

function AdminDashboard() {
  const [isAuthenticated, setIsAuthenticated] = useState(
    sessionStorage.getItem("mobtv_admin_logged") === "true"
  );
  const [passwordInput, setPasswordInput] = useState("");
  const [loginError, setLoginError] = useState("");
  const [activeTab, setActiveTab] = useState("overview"); // 'overview' ou 'settings'
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

  // Filtros de data e estados de limpeza
  const [dateFilter, setDateFilter] = useState('7d'); // 'today', 'yesterday', '7d', '30d', 'all', 'custom'
  const [customStartDate, setCustomStartDate] = useState('');
  const [customEndDate, setCustomEndDate] = useState('');
  const [clearing, setClearing] = useState(false);
  
  // Configurações do Supabase (Permanentes)
  const supabaseUrl = SUPABASE_URL;
  const supabaseKey = SUPABASE_KEY;
  const isSupabaseConfigured = true;

  // Nova Senha Administrativa
  const [newPassword, setNewPassword] = useState("");
  const [passwordSuccess, setPasswordSuccess] = useState(false);

  // Configuração da duração do teste
  const [trialHoursInput, setTrialHoursInput] = useState("3");
  const [updatingHours, setUpdatingHours] = useState(false);
  const [trialHoursSuccess, setTrialHoursSuccess] = useState(false);

  // Autenticação
  const handleLogin = (e) => {
    e.preventDefault();
    const currentPassword = localStorage.getItem('mobtv_admin_password') || ADMIN_PASSWORD;
    if (passwordInput === currentPassword) {
      setIsAuthenticated(true);
      sessionStorage.setItem("mobtv_admin_logged", "true");
      setLoginError("");
    } else {
      setLoginError("Senha incorreta. Tente novamente.");
    }
  };

  const handleLogout = () => {
    setIsAuthenticated(false);
    sessionStorage.removeItem("mobtv_admin_logged");
  };

  // Carrega os dados do Supabase
  const loadData = async () => {
    setLoading(true);
    setErrorMsg("");
    
    try {
      const cleanUrl = supabaseUrl.replace(/\/$/, "");
      const targetUrl = `${cleanUrl}/rest/v1/tracking_events?order=created_at.desc&limit=1000`;
      const headers = {
        'apikey': supabaseKey,
        'Authorization': `Bearer ${supabaseKey}`,
        'Content-Type': 'application/json'
      };

      const response = await fetch(targetUrl, { headers });
      if (!response.ok) {
        throw new Error(`Erro na API (${response.status}): ${await response.text()}`);
      }
      const data = await response.json();
      setEvents(data || []);
    } catch (err) {
      console.error(err);
      setErrorMsg("Falha ao carregar dados do Supabase.");
      setEvents([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!isAuthenticated) return;

    loadData();

    // Polling de atualização automática a cada 10 segundos para efeito em tempo real
    const interval = setInterval(() => {
      loadData();
    }, 10000);

    return () => clearInterval(interval);
  }, [isAuthenticated, isSupabaseConfigured]);

  // Salva nova senha no localStorage
  const handleSavePassword = (e) => {
    e.preventDefault();
    if (newPassword.trim().length < 4) {
      alert("A senha de segurança deve conter pelo menos 4 caracteres.");
      return;
    }
    localStorage.setItem('mobtv_admin_password', newPassword.trim());
    setPasswordSuccess(true);
    setNewPassword("");
    setTimeout(() => {
      setPasswordSuccess(false);
    }, 2000);
  };

  // Busca a duração do teste configurada no banco
  const fetchTrialHours = async () => {
    try {
      const cleanUrl = supabaseUrl.replace(/\/$/, "");
      const response = await fetch(`${cleanUrl}/rest/v1/tracking_events?event_type=eq.config&event_name=eq.trial_hours&order=created_at.desc&limit=1`, {
        headers: {
          'apikey': supabaseKey,
          'Authorization': `Bearer ${supabaseKey}`
        }
      });
      if (response.ok) {
        const data = await response.json();
        if (data && data.length > 0) {
          setTrialHoursInput(data[0].utm_source);
        }
      }
    } catch (e) {
      console.error('Erro ao buscar horas de teste:', e);
    }
  };

  useEffect(() => {
    if (!isAuthenticated) return;
    fetchTrialHours();
  }, [isAuthenticated]);

  // Salva nova duração do teste no banco
  const handleSaveTrialHours = async (e) => {
    e.preventDefault();
    setUpdatingHours(true);
    setTrialHoursSuccess(false);

    try {
      const cleanUrl = supabaseUrl.replace(/\/$/, "");
      const response = await fetch(`${cleanUrl}/rest/v1/tracking_events`, {
        method: 'POST',
        headers: {
          'apikey': supabaseKey,
          'Authorization': `Bearer ${supabaseKey}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          session_id: 'system_config',
          event_type: 'config',
          event_name: 'trial_hours',
          utm_source: String(trialHoursInput)
        })
      });

      if (response.ok) {
        setTrialHoursSuccess(true);
        setTimeout(() => setTrialHoursSuccess(false), 2000);
      } else {
        alert("Erro ao salvar duração: " + await response.text());
      }
    } catch (err) {
      console.error(err);
      alert("Falha de conexão ao salvar duração.");
    } finally {
      setUpdatingHours(false);
    }
  };

  // Reseta senha para o padrão
  const handleResetPassword = () => {
    if (confirm("Deseja redefinir a senha administrativa de volta para a senha padrão 'admin123'?")) {
      localStorage.removeItem('mobtv_admin_password');
      setPasswordSuccess(true);
      setTimeout(() => {
        setPasswordSuccess(false);
      }, 2000);
    }
  };

  // Limpa todo o histórico de logs do Supabase com confirmação de segurança
  const handleClearDatabase = async () => {
    const confirmMsg = "⚠️ ATENÇÃO - ZONA DE PERIGO: Isso apagará permanentemente todos os registros de rastreamento do Supabase!\nEsta ação não poderá ser desfeita de forma alguma.\n\nTem certeza absoluta de que deseja limpar o banco de dados?";
    
    if (confirm(confirmMsg)) {
      if (!confirm("⚠️ CONFIRMAÇÃO FINAL: Deseja mesmo prosseguir com a exclusão de todos os dados?")) {
        return;
      }

      setClearing(true);
      try {
        const cleanUrl = supabaseUrl.trim().replace(/\/$/, "");
        // Filtro universal para o PostgREST deletar tudo
        const deleteUrl = `${cleanUrl}/rest/v1/tracking_events?id=not.is.null`;
        const headers = {
          'apikey': supabaseKey.trim(),
          'Authorization': `Bearer ${supabaseKey.trim()}`
        };

        const response = await fetch(deleteUrl, {
          method: 'DELETE',
          headers: headers
        });

        if (!response.ok) {
          throw new Error(`Erro na API (${response.status}): ${await response.text()}`);
        }

        alert("✓ Histórico de rastreamento no Supabase limpo com sucesso!");
        loadData();
      } catch (err) {
        console.error(err);
        alert("Falha ao limpar dados do Supabase: " + err.message);
      }
      setClearing(false);
    }
  };

  // --- FILTRAGEM POR DATAS (CLIENT-SIDE) ---
  const filteredEvents = useMemo(() => {
    if (dateFilter === 'all') return events;

    const now = new Date();
    const startDate = new Date();
    const endDate = new Date();

    if (dateFilter === 'today') {
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(23, 59, 59, 999);
    } else if (dateFilter === 'yesterday') {
      startDate.setDate(now.getDate() - 1);
      startDate.setHours(0, 0, 0, 0);
      endDate.setDate(now.getDate() - 1);
      endDate.setHours(23, 59, 59, 999);
    } else if (dateFilter === '7d') {
      startDate.setDate(now.getDate() - 7);
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(23, 59, 59, 999);
    } else if (dateFilter === '30d') {
      startDate.setDate(now.getDate() - 30);
      startDate.setHours(0, 0, 0, 0);
      endDate.setHours(23, 59, 59, 999);
    } else if (dateFilter === 'custom') {
      if (!customStartDate) return events;
      const startParts = customStartDate.split('-');
      const endParts = customEndDate ? customEndDate.split('-') : null;

      const start = new Date(startParts[0], startParts[1] - 1, startParts[2], 0, 0, 0, 0);
      const end = endParts
        ? new Date(endParts[0], endParts[1] - 1, endParts[2], 23, 59, 59, 999)
        : new Date();

      return events.filter(e => {
        const eDate = new Date(e.created_at);
        return eDate >= start && eDate <= end;
      });
    }

    return events.filter(e => {
      const eDate = new Date(e.created_at);
      return eDate >= startDate && eDate <= endDate;
    });
  }, [events, dateFilter, customStartDate, customEndDate]);

  // --- CÁLCULOS E MÉTRICAS ---
  const metrics = useMemo(() => {
    const pageViews = filteredEvents.filter(e => e.event_type === 'page_view');
    const clicks = filteredEvents.filter(e => e.event_type === 'click');
    const totalViews = pageViews.length;
    const totalClicks = clicks.length;

    // Visitantes únicos (distintos session_id)
    const uniqueSessions = new Set(filteredEvents.map(e => e.session_id));
    const uniqueVisitors = uniqueSessions.size;

    // Taxa de conversão (% de visualizações que geraram pelo menos um clique)
    const conversionRate = totalViews > 0 ? ((totalClicks / totalViews) * 100).toFixed(1) : '0.0';

    // Tempo médio de permanência (média de duration_seconds das page_views)
    const viewsWithDuration = pageViews.filter(e => typeof e.duration_seconds === 'number' && e.duration_seconds > 0);
    const avgDuration = viewsWithDuration.length > 0
      ? Math.round(viewsWithDuration.reduce((acc, curr) => acc + curr.duration_seconds, 0) / viewsWithDuration.length)
      : 0;

    // Formata o tempo médio em minutos/segundos
    const formatDuration = (sec) => {
      if (sec < 60) return `${sec}s`;
      const m = Math.floor(sec / 60);
      const s = sec % 60;
      return s > 0 ? `${m}m ${s}s` : `${m}min`;
    };

    return {
      totalViews,
      totalClicks,
      uniqueVisitors,
      conversionRate,
      avgDuration: formatDuration(avgDuration),
      rawAvgDuration: avgDuration
    };
  }, [filteredEvents]);

  // --- AGRUPAMENTOS ---

  // Origem de tráfego (UTM Source)
  const trafficSources = useMemo(() => {
    const sources = {};
    filteredEvents.forEach(e => {
      if (e.event_type === 'page_view') {
        const src = e.utm_source || 'Direto / Orgânico';
        if (!sources[src]) {
          sources[src] = { views: 0, clicks: 0 };
        }
        sources[src].views += 1;
      }
    });

    filteredEvents.forEach(e => {
      if (e.event_type === 'click') {
        const src = e.utm_source || 'Direto / Orgânico';
        if (sources[src]) {
          sources[src].clicks += 1;
        } else {
          sources[src] = { views: 0, clicks: 1 };
        }
      }
    });

    return Object.entries(sources)
      .map(([name, data]) => ({
        name,
        views: data.views,
        clicks: data.clicks,
        conversion: data.views > 0 ? ((data.clicks / data.views) * 100).toFixed(1) : '0.0'
      }))
      .sort((a, b) => b.views - a.views);
  }, [filteredEvents]);

  // Cliques por Botão
  const buttonClicks = useMemo(() => {
    const counts = {};
    filteredEvents.forEach(e => {
      if (e.event_type === 'click') {
        const name = e.event_name || 'Desconhecido';
        counts[name] = (counts[name] || 0) + 1;
      }
    });

    const total = Object.values(counts).reduce((acc, curr) => acc + curr, 0);

    return Object.entries(counts)
      .map(([name, count]) => ({
        name,
        count,
        percent: total > 0 ? ((count / total) * 100).toFixed(1) : '0'
      }))
      .sort((a, b) => b.count - a.count);
  }, [filteredEvents]);

  // Dispositivos
  const devicesData = useMemo(() => {
    const counts = { mobile: 0, desktop: 0, tablet: 0 };
    let total = 0;
    
    filteredEvents.forEach(e => {
      if (e.event_type === 'page_view') {
        const dev = e.device || 'mobile';
        if (counts[dev] !== undefined) {
          counts[dev] += 1;
          total += 1;
        }
      }
    });

    return {
      mobile: { count: counts.mobile, percent: total > 0 ? Math.round((counts.mobile / total) * 100) : 0 },
      desktop: { count: counts.desktop, percent: total > 0 ? Math.round((counts.desktop / total) * 100) : 0 },
      tablet: { count: counts.tablet, percent: total > 0 ? Math.round((counts.tablet / total) * 100) : 0 }
    };
  }, [filteredEvents]);

  // Formatação de data/hora amigável
  const formatTime = (isoString) => {
    if (!isoString) return '';
    const date = new Date(isoString);
    return date.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) + 
           ' - ' + date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' });
  };

  // Mapeia nomes amigáveis para botões de clique
  const getFriendlyButtonName = (name) => {
    const mapping = {
      'hero_cta': 'Botão Principal (Hero)',
      'header_cta': 'Menu Superior ("Quero testar")',
      'floating_dock_cta': 'Barra Flutuante Mobile',
      'menu_sheet_cta': 'Menu Hambúrguer ("Quero teste")',
      'plan_family_1_screen': 'Plano Family (1 Tela)',
      'plan_family_2_screens': 'Plano Family (2 Telas)',
      'plan_family_3_screens': 'Plano Family (3 Telas)',
      'plan_full_1_screen': 'Plano Full (1 Tela)',
      'plan_full_2_screens': 'Plano Full (2 Telas)',
      'plan_full_3_screens': 'Plano Full (3 Telas)',
      'final_cta': 'CTA Final ("Dê play")',
      'footer_faq': 'FAQ (Rodapé)',
      'footer_contact': 'Contato (Rodapé)',
      'footer_whatsapp': 'WhatsApp (Rodapé)',
      'footer_status': 'Status (Rodapé)'
    };
    return mapping[name] || name;
  };

  // --- TELA DE LOGIN ---
  if (!isAuthenticated) {
    return (
      <div className="login-container">
        <div className="login-card">
          <div className="login-brand">MOB<span className="dot">.</span>TV</div>
          <p className="login-subtitle">Acesso Restrito ao Painel de Rastreamento</p>
          
          <form onSubmit={handleLogin}>
            <div className="form-group">
              <label htmlFor="password">Senha Administrativa</label>
              <input
                id="password"
                type="password"
                className="input-style"
                placeholder="Insira a senha padrão"
                value={passwordInput}
                onChange={(e) => setPasswordInput(e.target.value)}
                autoFocus
              />
            </div>
            
            {loginError && <span className="login-error">{loginError}</span>}
            
            <button type="submit" className="login-btn">Entrar no Painel</button>
          </form>
        </div>
      </div>
    );
  }

  // --- TELA DO DASHBOARD ---
  return (
    <div className="dashboard-layout">
      {/* Header */}
      <header className="header">
        <div className="header-inner">
          <div>
            <a href="#" className="logo" onClick={(e) => { e.preventDefault(); loadData(); }}>
              MOB<span className="dot">.</span>TV
            </a>
            <span className="logo-badge">ADM</span>
          </div>

          <div className="header-actions">
            <button 
              className={`btn-secondary ${activeTab === 'overview' ? 'active' : ''}`}
              onClick={() => setActiveTab('overview')}
            >
              📊 Visão Geral
            </button>
            <button 
              className={`btn-secondary ${activeTab === 'settings' ? 'active' : ''}`}
              onClick={() => setActiveTab('settings')}
            >
              ⚙️ Configurações
            </button>
            <button className="btn-secondary" onClick={handleLogout} style={{ border: '1px solid rgba(239, 68, 68, 0.3)', color: '#ef4444' }}>
              Sair
            </button>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="main-content">

        {activeTab === 'overview' ? (
          <>
            {/* Linha superior de ações */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 12 }}>
              <h2 style={{ fontSize: 20, fontWeight: 700 }}>Painel de Rastreamento de Anúncios</h2>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                {loading && <span style={{ fontSize: 13, color: 'var(--fg-dim)' }}>Carregando dados...</span>}
                {errorMsg && <span style={{ fontSize: 13, color: 'var(--danger)' }}>{errorMsg}</span>}
                <button className="btn-secondary" onClick={loadData} disabled={loading}>
                  🔄 Atualizar Dados
                </button>
              </div>
            </div>

            {/* Barra de Filtros de Período */}
            <div style={{ 
              display: 'flex', 
              flexWrap: 'wrap', 
              gap: 16, 
              alignItems: 'center', 
              justifyContent: 'space-between',
              background: 'var(--bg-card)',
              backdropFilter: 'var(--glass-blur)',
              border: '1px solid var(--border-light)',
              padding: '16px 20px', 
              borderRadius: 16,
              marginBottom: 28,
              boxShadow: '0 8px 32px rgba(0, 0, 0, 0.2)'
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-dim)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
                  📅 Filtrar Período:
                </span>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {[
                    { id: 'today', label: 'Hoje' },
                    { id: 'yesterday', label: 'Ontem' },
                    { id: '7d', label: '7 Dias' },
                    { id: '30d', label: '30 Dias' },
                    { id: 'all', label: 'Todo o Período' },
                    { id: 'custom', label: 'Personalizado ⚙️' }
                  ].map(opt => (
                    <button
                      key={opt.id}
                      className={`btn-secondary ${dateFilter === opt.id ? 'active' : ''}`}
                      onClick={() => setDateFilter(opt.id)}
                      style={{ 
                        padding: '6px 12px', 
                        fontSize: 12,
                        borderRadius: 6,
                        borderColor: dateFilter === opt.id ? 'var(--accent)' : 'var(--border-light)',
                        backgroundColor: dateFilter === opt.id ? 'rgba(250, 204, 21, 0.1)' : 'transparent',
                        color: dateFilter === opt.id ? 'var(--accent)' : 'var(--fg)'
                      }}
                    >
                      {opt.label}
                    </button>
                  ))}
                </div>
              </div>

              {dateFilter === 'custom' && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <input
                    type="date"
                    value={customStartDate}
                    onChange={(e) => setCustomStartDate(e.target.value)}
                    style={{
                      padding: '6px 10px',
                      borderRadius: 6,
                      border: '1px solid var(--border-light)',
                      backgroundColor: 'var(--bg-input)',
                      color: 'var(--fg)',
                      fontSize: 12,
                      fontFamily: 'inherit'
                    }}
                  />
                  <span style={{ fontSize: 12, color: 'var(--fg-dim)' }}>até</span>
                  <input
                    type="date"
                    value={customEndDate}
                    onChange={(e) => setCustomEndDate(e.target.value)}
                    style={{
                      padding: '6px 10px',
                      borderRadius: 6,
                      border: '1px solid var(--border-light)',
                      backgroundColor: 'var(--bg-input)',
                      color: 'var(--fg)',
                      fontSize: 12,
                      fontFamily: 'inherit'
                    }}
                  />
                </div>
              )}
            </div>

            {/* Grid de Estatísticas Gerais */}
            <div className="stats-grid">
              <div className="stat-card accented">
                <div className="label-wrap">
                  <span>Visualizações Brutas</span>
                  <span>👁️</span>
                </div>
                <div className="value">{metrics.totalViews}</div>
                <div className="desc">Total de vezes que a LP foi carregada</div>
              </div>

              <div className="stat-card accented">
                <div className="label-wrap">
                  <span>Visitantes Únicos</span>
                  <span>👤</span>
                </div>
                <div className="value">{metrics.uniqueVisitors}</div>
                <div className="desc">Visitantes distintos por sessão</div>
              </div>

              <div className="stat-card accented">
                <div className="label-wrap">
                  <span>Cliques nos CTAs / WhatsApp</span>
                  <span>⚡</span>
                </div>
                <div className="value">{metrics.totalClicks}</div>
                <div className="desc">Cliques para testar ou falar com suporte</div>
              </div>

              <div className="stat-card successed">
                <div className="label-wrap">
                  <span>Taxa de Conversão</span>
                  <span>🚀</span>
                </div>
                <div className="value">
                  {metrics.conversionRate}<span className="sub">%</span>
                </div>
                <div className="desc">Proporção de cliques por visualização</div>
              </div>

              <div className="stat-card successed">
                <div className="label-wrap">
                  <span>Permanência Média</span>
                  <span>⏱️</span>
                </div>
                <div className="value">{metrics.avgDuration}</div>
                <div className="desc">Tempo ativo de leitura na página</div>
              </div>
            </div>

            {/* Painéis Secundários */}
            <div className="dashboard-grid">
              {/* Painel da Esquerda: Origem de Tráfego e Cliques por Botão */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                {/* Tabela de Origem do Tráfego (UTMs) */}
                <div className="panel">
                  <div className="panel-head">
                    <h3 className="panel-title">📣 Origem do Tráfego (Campanhas e Anúncios)</h3>
                  </div>
                  <div className="table-wrapper">
                    {trafficSources.length === 0 ? (
                      <div className="no-data">Nenhuma visita registrada.</div>
                    ) : (
                      <table className="data-table">
                        <thead>
                          <tr>
                            <th>Origem (utm_source)</th>
                            <th>Visualizações</th>
                            <th>Cliques (Leads)</th>
                            <th>Taxa Conversão</th>
                          </tr>
                        </thead>
                        <tbody>
                          {trafficSources.map((src, i) => (
                            <tr key={i}>
                              <td className="mono">
                                <span className={`badge ${src.name === 'Direto / Orgânico' ? 'direct' : 'utm'}`}>
                                  {src.name}
                                </span>
                              </td>
                              <td>{src.views}</td>
                              <td>{src.clicks}</td>
                              <td style={{ color: src.conversion > 0 ? 'var(--success)' : 'inherit', fontWeight: 600 }}>
                                {src.conversion}%
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    )}
                  </div>
                </div>

                {/* Lista de Eventos Recentes */}
                <div className="panel">
                  <div className="panel-head">
                    <h3 className="panel-title">🕒 Últimas Atividades em Tempo Real</h3>
                  </div>
                  <div className="table-wrapper">
                    {filteredEvents.length === 0 ? (
                      <div className="no-data">Nenhuma atividade registrada no período selecionado.</div>
                    ) : (
                      <table className="data-table" style={{ fontSize: 13 }}>
                        <thead>
                          <tr>
                            <th>Data e Hora</th>
                            <th>Evento</th>
                            <th>Detalhe / Botão</th>
                            <th>Dispositivo</th>
                            <th>Campanha (UTM)</th>
                          </tr>
                        </thead>
                        <tbody>
                          {filteredEvents.slice(0, 15).map((ev) => (
                            <tr key={ev.id}>
                              <td className="time-stamp">{formatTime(ev.created_at)}</td>
                              <td>
                                <span style={{ 
                                  color: ev.event_type === 'click' ? 'var(--success)' : 'var(--accent)',
                                  fontWeight: 600,
                                  fontSize: 12
                                }}>
                                  {ev.event_type === 'click' ? 'CLIQUE' : 'VISITA'}
                                </span>
                              </td>
                              <td style={{ fontWeight: ev.event_type === 'click' ? 600 : 400 }}>
                                {ev.event_type === 'click' 
                                  ? getFriendlyButtonName(ev.event_name) 
                                  : `Visualização (Permanência: ${ev.duration_seconds || 0}s)`
                                }
                              </td>
                              <td>
                                <span className={`badge ${ev.device === 'mobile' ? 'device-mob' : 'device-pc'}`}>
                                  {ev.device === 'mobile' ? 'Celular 📱' : ev.device === 'tablet' ? 'Tablet 📱' : 'Computador 💻'}
                                </span>
                              </td>
                              <td className="mono" style={{ fontSize: 11, color: ev.utm_campaign ? 'var(--fg)' : 'var(--fg-faint)' }}>
                                {ev.utm_campaign ? `${ev.utm_campaign} (${ev.utm_source})` : '—'}
                              </td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    )}
                  </div>
                </div>
              </div>

              {/* Painel da Direita: Cliques por Botão e Dispositivo */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
                {/* Popularidade dos Botões */}
                <div className="panel">
                  <div className="panel-head">
                    <h3 className="panel-title">🔥 Desempenho dos Botões (Cliques)</h3>
                  </div>
                  
                  {buttonClicks.length === 0 ? (
                    <div className="no-data">Nenhum clique registrado.</div>
                  ) : (
                    <div className="chart-container">
                      {buttonClicks.map((btn, i) => (
                        <div key={i} className="chart-row">
                          <div className="chart-row-labels">
                            <span style={{ fontWeight: 500 }}>{getFriendlyButtonName(btn.name)}</span>
                            <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{btn.count}</span>
                          </div>
                          <div className="chart-bar-bg">
                            <div className="chart-bar-fill" style={{ width: `${btn.percent}%` }}></div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                {/* Divisão por Dispositivo */}
                <div className="panel">
                  <div className="panel-head">
                    <h3 className="panel-title">📱 Dispositivos Utilizados</h3>
                  </div>
                  
                  <div className="chart-container" style={{ gap: 20 }}>
                    <div className="chart-row">
                      <div className="chart-row-labels">
                        <span>Celular (Mobile)</span>
                        <span style={{ fontWeight: 600 }}>{devicesData.mobile.percent}% ({devicesData.mobile.count} views)</span>
                      </div>
                      <div className="chart-bar-bg">
                        <div className="chart-bar-fill success" style={{ width: `${devicesData.mobile.percent}%` }}></div>
                      </div>
                    </div>

                    <div className="chart-row">
                      <div className="chart-row-labels">
                        <span>Computador (Desktop)</span>
                        <span style={{ fontWeight: 600 }}>{devicesData.desktop.percent}% ({devicesData.desktop.count} views)</span>
                      </div>
                      <div className="chart-bar-bg">
                        <div className="chart-bar-fill" style={{ width: `${devicesData.desktop.percent}%`, backgroundColor: '#3b82f6' }}></div>
                      </div>
                    </div>

                    <div className="chart-row">
                      <div className="chart-row-labels">
                        <span>Tablet</span>
                        <span style={{ fontWeight: 600 }}>{devicesData.tablet.percent}% ({devicesData.tablet.count} views)</span>
                      </div>
                      <div className="chart-bar-bg">
                        <div className="chart-bar-fill" style={{ width: `${devicesData.tablet.percent}%`, backgroundColor: '#a78bfa' }}></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        ) : (
          /* Aba de Configurações */
          <div className="panel" style={{ maxWidth: '600px', margin: '0 auto' }}>
            <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>⚙️ Configurações & Segurança</h2>
            <p style={{ color: 'var(--fg-dim)', fontSize: 14, marginBottom: 32 }}>
              Gerencie a segurança de acesso do seu painel e a limpeza dos dados de métricas.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
              {/* Form de Senha */}
              <div>
                <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 16 }}>🔒 Senha de Acesso do Painel ADM</h3>
                <form onSubmit={handleSavePassword}>
                  <div className="form-group">
                    <label htmlFor="new-password">Nova Senha Administrativa</label>
                    <input
                      id="new-password"
                      type="password"
                      className="input-style"
                      placeholder="Digite a nova senha"
                      value={newPassword}
                      onChange={(e) => setNewPassword(e.target.value)}
                      required
                    />
                  </div>

                  {passwordSuccess && (
                    <div style={{ color: 'var(--success)', fontSize: 14, marginBottom: 16, fontWeight: 500 }}>
                      ✓ Senha atualizada com sucesso!
                    </div>
                  )}

                  <div style={{ display: 'flex', gap: 12 }}>
                    <button type="submit" className="login-btn" style={{ flex: 1, marginTop: 0 }}>
                      Alterar Senha
                    </button>
                    {localStorage.getItem('mobtv_admin_password') && (
                      <button type="button" className="btn-secondary" onClick={handleResetPassword} style={{ color: 'var(--danger)', borderColor: 'rgba(239,68,68,0.3)' }}>
                        Resetar Padrão
                      </button>
                    )}
                  </div>
                </form>
              </div>

              {/* Form de Duração de Teste */}
              <div style={{ borderTop: '1px solid var(--border-light)', paddingTop: 32 }}>
                <h3 style={{ fontSize: 16, fontWeight: 600, marginBottom: 16 }}>⏱️ Duração do Teste Grátis</h3>
                <form onSubmit={handleSaveTrialHours}>
                  <div className="form-group">
                    <label htmlFor="trial-hours">Horas de Teste Grátis</label>
                    <input
                      id="trial-hours"
                      type="number"
                      min="1"
                      max="72"
                      className="input-style"
                      placeholder="Ex: 3"
                      value={trialHoursInput}
                      onChange={(e) => setTrialHoursInput(e.target.value)}
                      required
                    />
                  </div>

                  {trialHoursSuccess && (
                    <div style={{ color: 'var(--success)', fontSize: 14, marginBottom: 16, fontWeight: 500 }}>
                      ✓ Duração atualizada com sucesso!
                    </div>
                  )}

                  <button type="submit" className="login-btn" style={{ marginTop: 0 }} disabled={updatingHours}>
                    {updatingHours ? 'Salvando...' : 'Salvar Duração'}
                  </button>
                </form>
              </div>

              {/* Zona de Perigo */}
              <div style={{ borderTop: '1px solid rgba(239, 68, 68, 0.2)', paddingTop: 32 }}>
                <h3 style={{ fontSize: 16, fontWeight: 600, color: 'var(--danger)', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
                  ⚠️ Zona de Perigo
                </h3>
                <p style={{ fontSize: 13, color: 'var(--fg-dim)', marginBottom: 16 }}>
                  Apague permanentemente todos os eventos de rastreamento armazenados no banco de dados. Esta ação é definitiva e não poderá ser revertida.
                </p>
                <button 
                  type="button" 
                  className="btn-secondary" 
                  onClick={handleClearDatabase}
                  disabled={clearing}
                  style={{ 
                    color: 'var(--danger)', 
                    borderColor: 'rgba(239, 68, 68, 0.4)', 
                    backgroundColor: 'rgba(239, 68, 68, 0.05)',
                    width: '100%',
                    justifyContent: 'center'
                  }}
                >
                  {clearing ? 'Apagando dados...' : '🗑️ Limpar Banco de Dados (Zerar Histórico)'}
                </button>
              </div>
            </div>
          </div>
        )}
      </main>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('admin-root'));
root.render(<AdminDashboard />);