const { useState: useStateMD, useEffect: useEffectMD } = React;

function MediaAdminDashboard({ onNav }) {
  const [profile, setProfile] = useStateMD(null);
  const [loading, setLoading] = useStateMD(true);
  const [stats, setStats] = useStateMD({ influencersNew: 0, brandsNew: 0, messagesUnread: 0, totalActive: 0 });
  const [recents, setRecents] = useStateMD({ influencers: [], brands: [], messages: [] });

  useEffectMD(() => {
    let mounted = true;
    let channel = null;

    const fetchDashboardData = async () => {
      try {
        const [
          { count: infN }, { count: brN }, { count: msgN },
          { data: recInf }, { data: recBr }, { data: recMsg }
        ] = await Promise.all([
          window.sb.from('influencer_applications').select('*', { count: 'exact', head: true }).eq('status', 'Nou'),
          window.sb.from('brand_applications').select('*', { count: 'exact', head: true }).eq('status', 'Nou'),
          window.sb.from('contact_messages').select('*', { count: 'exact', head: true }).eq('status', 'Necitit'),
          window.sb.from('influencer_applications').select('id, full_name, email, status, created_at, tiktok_handle, tiktok_followers').order('created_at', { ascending: false }).limit(5),
          window.sb.from('brand_applications').select('id, company, contact_name, email, status, created_at').order('created_at', { ascending: false }).limit(5),
          window.sb.from('contact_messages').select('id, name, email, subject, status, created_at').order('created_at', { ascending: false }).limit(5),
        ]);

        if (!mounted) return;
        setStats({
          influencersNew: infN || 0, brandsNew: brN || 0,
          messagesUnread: msgN || 0, totalActive: (infN || 0) + (brN || 0) + (msgN || 0)
        });
        setRecents({ influencers: recInf || [], brands: recBr || [], messages: recMsg || [] });
      } catch (err) {
        console.error('[4U Media Admin] Dashboard refresh error:', err);
      }
    };

    (async () => {
      try {
        let tries = 0;
        while (!window.sb && tries < 100) { await new Promise(r => setTimeout(r, 50)); tries++; }
        if (!window.sb) { onNav('media-login'); return; }

        const { data: { session } } = await window.sb.auth.getSession();
        if (!session) { onNav('media-login'); return; }

        const { data: prof, error } = await window.sb
          .from('staff_profiles')
          .select('id, full_name, email, role, is_active')
          .eq('id', session.user.id).maybeSingle();
        if (error || !prof || !prof.is_active) {
          await window.sb.auth.signOut(); onNav('media-login'); return;
        }
        if (!mounted) return;
        setProfile(prof);

        // Fetch initial
        await fetchDashboardData();
        if (!mounted) return;
        setLoading(false);

        // Subscribe la Realtime — orice schimbare în cele 3 tabele declanșează refetch
        channel = window.sb.channel('media-admin-dashboard-realtime')
          .on('postgres_changes', { event: '*', schema: 'public', table: 'influencer_applications' }, fetchDashboardData)
          .on('postgres_changes', { event: '*', schema: 'public', table: 'brand_applications' }, fetchDashboardData)
          .on('postgres_changes', { event: '*', schema: 'public', table: 'contact_messages' }, fetchDashboardData)
          .subscribe();
      } catch (err) {
        console.error('[4U Media Admin] Dashboard error:', err);
        onNav('media-login');
      }
    })();

    // Cleanup: dezabonează canalul când userul navighează altundeva
    return () => {
      mounted = false;
      if (channel) window.sb.removeChannel(channel);
    };
  }, []);

  if (loading) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <span style={{ width: 32, height: 32, borderRadius: 999, border: '3px solid rgba(82,242,15,.2)', borderTopColor: 'var(--accent-1)', animation: 'md-spin 0.8s linear infinite' }} />
          <span style={{ color: 'var(--txt-3)', fontSize: 13 }}>Se încarcă...</span>
        </div>
        <style>{`@keyframes md-spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    );
  }

  return (
    <MediaAdminLayout onNav={onNav} currentPage="media-admin" profile={profile}>
      <h1 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', margin: '0 0 8px' }}>
        Salut, <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>{profile.full_name.split(' ')[0]}</span>.
      </h1>
      <p style={{ color: 'var(--txt-2)', fontSize: 15, marginBottom: 40 }}>Overview general — situație actuală.</p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 48 }}>
        <StatCard label="Influenceri noi" count={stats.influencersNew} accent="#52F20F" />
        <StatCard label="Branduri noi" count={stats.brandsNew} accent="#FFD700" />
        <StatCard label="Mesaje necitite" count={stats.messagesUnread} accent="#3FA9F5" />
        <StatCard label="Total de procesat" count={stats.totalActive} accent="#FF6B9D" />
      </div>

      <h2 style={{ fontSize: 18, marginBottom: 16, color: 'var(--txt-0)' }}>Activitate recentă</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20 }}>
        <RecentList title="🎬 Influenceri recenți" items={recents.influencers} onNav={onNav} navTarget="media-admin-influencers" type="influencer" />
        <RecentList title="🏢 Branduri recente" items={recents.brands} onNav={onNav} navTarget="media-admin-brands" type="brand" />
        <RecentList title="✉️ Mesaje recente" items={recents.messages} onNav={onNav} navTarget="media-admin-messages" type="contact" />
      </div>
    </MediaAdminLayout>
  );
}

function StatCard({ label, count, accent }) {
  return (
    <div className="card-glass" style={{ padding: 22 }}>
      <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em', marginBottom: 10 }}>{label.toUpperCase()}</div>
      <div className="display" style={{ fontSize: 40, color: accent, lineHeight: 1 }}>{count}</div>
    </div>
  );
}

function RecentList({ title, items, onNav, navTarget, type }) {
  return (
    <div className="card-glass" style={{ padding: 20 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <div style={{ fontSize: 14, fontWeight: 600 }}>{title}</div>
        <button onClick={() => onNav(navTarget)} style={{ background: 'transparent', border: 'none', color: 'var(--accent-1)', fontSize: 12, cursor: 'pointer' }}>Vezi toate →</button>
      </div>
      {items.length === 0 ? (
        <div style={{ color: 'var(--txt-3)', fontSize: 13, padding: 20, textAlign: 'center' }}>Niciun rezultat.</div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map(item => {
            const primary = type === 'influencer' ? item.full_name : (type === 'brand' ? item.company : item.name);
            const secondary = type === 'influencer' ? (item.tiktok_handle ? '@' + item.tiktok_handle : item.email) : (type === 'brand' ? item.contact_name : item.subject);
            return (
              <div key={item.id} style={{ padding: '10px 12px', borderRadius: 8, background: 'rgba(255,255,255,.02)', border: '.5px solid var(--line)' }}>
                <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--txt-0)', marginBottom: 2 }}>{primary}</div>
                <div style={{ fontSize: 11, color: 'var(--txt-3)' }}>{secondary}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 6 }}>
                  <span style={{ fontSize: 10, padding: '2px 8px', borderRadius: 4, background: 'rgba(82,242,15,.1)', color: 'var(--accent-1)' }}>{item.status}</span>
                  <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)' }}>{new Date(item.created_at).toLocaleDateString('ro-RO')}</span>
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

window.MediaAdminDashboard = MediaAdminDashboard;