const { useState: useStateMC, useEffect: useEffectMC } = React;

const C_STATUS_OPTIONS = ['Draft', 'Activă', 'Completă', 'Anulată'];
const C_STATUS_COLORS = {
  'Draft': { bg: 'rgba(255,255,255,.05)', color: 'var(--txt-2)' },
  'Activă': { bg: 'rgba(82,242,15,.1)', color: 'var(--accent-1)' },
  'Completă': { bg: 'rgba(63,169,245,.1)', color: '#3FA9F5' },
  'Anulată': { bg: 'rgba(255,90,90,.1)', color: '#FF5A5A' },
};
const CAMPAIGN_TYPES_OPTIONS = ['TikTok Live', 'Video TikTok', 'Story Instagram', 'Reel Instagram', 'Post Instagram', 'YouTube', 'Mix'];

const CC_STATUS_OPTIONS = ['Invitat', 'Acceptat', 'Refuzat', 'Material trimis', 'Material aprobat', 'Publicat', 'Plătit'];
const CC_STATUS_COLORS = {
  'Invitat': { bg: 'rgba(255,255,255,.05)', color: 'var(--txt-2)' },
  'Acceptat': { bg: 'rgba(82,242,15,.08)', color: 'var(--accent-1)' },
  'Refuzat': { bg: 'rgba(255,90,90,.1)', color: '#FF5A5A' },
  'Material trimis': { bg: 'rgba(255,215,0,.1)', color: '#FFD700' },
  'Material aprobat': { bg: 'rgba(63,169,245,.1)', color: '#3FA9F5' },
  'Publicat': { bg: 'rgba(82,242,15,.15)', color: 'var(--accent-1)' },
  'Plătit': { bg: 'rgba(82,242,15,.2)', color: 'var(--accent-1)' },
};
const CC_PAYMENT_STATUS_OPTIONS = ['Neplătit', 'În proces', 'Plătit'];

function MediaAdminCampaigns({ onNav }) {
  const [profile, setProfile] = useStateMC(null);
  const [loading, setLoading] = useStateMC(true);
  const [campaigns, setCampaigns] = useStateMC([]);
  const [brands, setBrands] = useStateMC([]);
  const [staffList, setStaffList] = useStateMC([]);
  const [search, setSearch] = useStateMC('');
  const [statusFilter, setStatusFilter] = useStateMC('Toate');
  const [selectedCampaign, setSelectedCampaign] = useStateMC(null);
  const [showCreateDrawer, setShowCreateDrawer] = useStateMC(false);
  const [refreshKey, setRefreshKey] = useStateMC(0);
  const [creatorsByCampaign, setCreatorsByCampaign] = useStateMC({});
  const [sortBy, setSortBy] = useStateMC('created_at');
  const [sortDir, setSortDir] = useStateMC('desc');

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

    const fetchAll = async () => {
      try {
        const [
          { data: camps },
          { data: brs },
          { data: staff }
        ] = await Promise.all([
          window.sb.from('campaigns').select('*').order('created_at', { ascending: false }),
          window.sb.from('brand_applications').select('id, company, brand').order('company'),
          window.sb.from('staff_profiles').select('id, full_name').eq('is_active', true).order('full_name'),
        ]);
        if (!mounted) return;
        setCampaigns(camps || []);
        setBrands(brs || []);
        setStaffList(staff || []);

        const { data: allCc } = await window.sb
          .from('campaign_creators')
          .select('campaign_id, status');
        const stats = {};
        (allCc || []).forEach(cc => {
          if (!stats[cc.campaign_id]) stats[cc.campaign_id] = { total: 0, published: 0 };
          stats[cc.campaign_id].total++;
          if (cc.status === 'Publicat' || cc.status === 'Plătit') stats[cc.campaign_id].published++;
        });
        if (!mounted) return;
        setCreatorsByCampaign(stats);
      } catch (err) {
        console.error('[4U Media Admin] Campaigns fetch 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);

        await fetchAll();
        if (!mounted) return;
        setLoading(false);

        channel = window.sb.channel('media-admin-campaigns-realtime')
          .on('postgres_changes', { event: '*', schema: 'public', table: 'campaigns' }, fetchAll)
          .on('postgres_changes', { event: '*', schema: 'public', table: 'campaign_creators' }, fetchAll)
          .subscribe();
      } catch (err) {
        console.error('[4U Media Admin] Campaigns page error:', err);
        onNav('media-login');
      }
    })();

    return () => {
      mounted = false;
      if (channel) window.sb.removeChannel(channel);
    };
  }, [refreshKey]);

  const filteredCampaigns = campaigns.filter(c => {
    if (statusFilter !== 'Toate' && c.status !== statusFilter) return false;
    if (search) {
      const s = search.toLowerCase();
      const brand = brands.find(b => b.id === c.brand_id);
      if (!(c.name || '').toLowerCase().includes(s) &&
          !(brand?.company || '').toLowerCase().includes(s) &&
          !(brand?.brand || '').toLowerCase().includes(s)) return false;
    }
    return true;
  }).sort((a, b) => {
    let valA, valB;
    if (sortBy === 'progress') {
      valA = (creatorsByCampaign[a.id] || {}).total || 0;
      valB = (creatorsByCampaign[b.id] || {}).total || 0;
    } else {
      valA = a[sortBy]; valB = b[sortBy];
    }
    if (valA === null || valA === undefined) valA = '';
    if (valB === null || valB === undefined) valB = '';
    if (typeof valA === 'string') valA = valA.toLowerCase();
    if (typeof valB === 'string') valB = valB.toLowerCase();
    if (valA < valB) return sortDir === 'asc' ? -1 : 1;
    if (valA > valB) return sortDir === 'asc' ? 1 : -1;
    return 0;
  });

  const handleSort = (key) => {
    if (sortBy === key) {
      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
    } else {
      setSortBy(key);
      setSortDir('asc');
    }
  };

  if (loading) {
    return (
      <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center' }}>
        <span style={{ width: 32, height: 32, borderRadius: 999, border: '3px solid rgba(82,242,15,.2)', borderTopColor: 'var(--accent-1)', animation: 'mc-spin 0.8s linear infinite' }} />
        <style>{`@keyframes mc-spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    );
  }

  return (
    <MediaAdminLayout onNav={onNav} currentPage="media-admin-campaigns" profile={profile}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 32, flexWrap: 'wrap', gap: 16 }}>
        <div>
          <h1 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', margin: '0 0 8px' }}>Campanii</h1>
          <p style={{ color: 'var(--txt-2)', fontSize: 15, margin: 0 }}>
            Total: <strong style={{ color: 'var(--txt-0)' }}>{campaigns.length}</strong>
            {filteredCampaigns.length !== campaigns.length && (<> · Afișate: <strong style={{ color: 'var(--accent-1)' }}>{filteredCampaigns.length}</strong></>)}
          </p>
        </div>
        <button onClick={() => setShowCreateDrawer(true)} className="btn btn-primary">+ Campanie nouă</button>
      </div>

      <div style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
        <input type="text" placeholder="🔍 Caută după nume campanie sau brand..."
          value={search} onChange={e => setSearch(e.target.value)}
          className="input" style={{ flex: 1, minWidth: 300 }} />
        <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}
          className="input" style={{ width: 200, color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
          <option value="Toate" style={{ backgroundColor: '#1a1a1a' }}>Toate statusurile</option>
          {C_STATUS_OPTIONS.map(s => <option key={s} value={s} style={{ backgroundColor: '#1a1a1a' }}>{s}</option>)}
        </select>
      </div>

      <div className="card-glass" style={{ padding: 0, overflow: 'hidden' }}>
        {filteredCampaigns.length === 0 ? (
          <div style={{ padding: 60, textAlign: 'center', color: 'var(--txt-3)' }}>
            {campaigns.length === 0 ? 'Nicio campanie încă. Apasă "+ Campanie nouă" ca să începi.' : 'Niciun rezultat care să corespundă filtrelor.'}
          </div>
        ) : (
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
              <thead>
                <tr style={{ background: 'rgba(255,255,255,.03)' }}>
                  <ThSortable sortKey="name" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Nume campanie</ThSortable>
                  <ThSortable sortKey="brand_id" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Brand</ThSortable>
                  <ThSortable>Tip</ThSortable>
                  <ThSortable sortKey="status" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Status</ThSortable>
                  <ThSortable sortKey="material_deadline" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Deadline material</ThSortable>
                  <ThSortable sortKey="progress" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Progress</ThSortable>
                  <ThSortable sortKey="assigned_to" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Manager</ThSortable>
                  <ThSortable sortKey="created_at" currentSort={sortBy} currentDir={sortDir} onSort={handleSort}>Data creare</ThSortable>
                </tr>
              </thead>
              <tbody>
                {filteredCampaigns.map(c => {
                  const brand = brands.find(b => b.id === c.brand_id);
                  const manager = staffList.find(s => s.id === c.assigned_to);
                  return (
                    <tr key={c.id} onClick={() => setSelectedCampaign(c)}
                      style={{ cursor: 'pointer', borderTop: '.5px solid var(--line)', transition: 'background .15s' }}
                      onMouseEnter={e => e.currentTarget.style.background = 'rgba(82,242,15,.04)'}
                      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <Td><strong>{c.name}</strong></Td>
                      <Td>{brand ? (brand.brand || brand.company) : <span style={{ color: 'var(--txt-3)' }}>—</span>}</Td>
                      <Td>{c.campaign_types && c.campaign_types.length > 0 ? c.campaign_types.slice(0, 2).join(', ') + (c.campaign_types.length > 2 ? '...' : '') : <span style={{ color: 'var(--txt-3)' }}>—</span>}</Td>
                      <Td><StatusBadgeC status={c.status} colors={C_STATUS_COLORS} /></Td>
                      <Td>{c.material_deadline ? <span className="mono" style={{ fontSize: 11 }}>{new Date(c.material_deadline).toLocaleDateString('ro-RO')}</span> : <span style={{ color: 'var(--txt-3)' }}>—</span>}</Td>
                      <Td>{(() => {
                        const s = creatorsByCampaign[c.id] || { total: 0, published: 0 };
                        if (s.total === 0) return <span style={{ color: 'var(--txt-3)' }}>—</span>;
                        return <span style={{ fontSize: 12 }}><strong style={{ color: 'var(--accent-1)' }}>{s.published}</strong> / {s.total} publicați</span>;
                      })()}</Td>
                      <Td>{manager ? manager.full_name : <span style={{ color: 'var(--txt-3)' }}>—</span>}</Td>
                      <Td><span className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>{new Date(c.created_at).toLocaleDateString('ro-RO')}</span></Td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {selectedCampaign && (
        <CampaignDrawer
          campaign={selectedCampaign}
          brands={brands}
          staffList={staffList}
          onClose={() => setSelectedCampaign(null)}
          onUpdate={() => { setRefreshKey(k => k + 1); setSelectedCampaign(null); }}
        />
      )}

      {showCreateDrawer && (
        <CampaignCreateDrawer
          brands={brands}
          staffList={staffList}
          onClose={() => setShowCreateDrawer(false)}
          onCreate={() => { setRefreshKey(k => k + 1); setShowCreateDrawer(false); }}
        />
      )}
    </MediaAdminLayout>
  );
}

function Th({ children }) {
  return <th style={{ textAlign: 'left', padding: '14px 16px', fontWeight: 600, fontSize: 11, color: 'var(--txt-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{children}</th>;
}
function Td({ children }) {
  return <td style={{ padding: '14px 16px', color: 'var(--txt-1)' }}>{children}</td>;
}
function ThSortable({ children, sortKey, currentSort, currentDir, onSort }) {
  const isActive = sortKey && currentSort === sortKey;
  const clickable = !!sortKey;
  return (
    <th
      onClick={clickable ? () => onSort(sortKey) : undefined}
      style={{
        textAlign: 'left', padding: '14px 16px', fontWeight: 600, fontSize: 11,
        color: isActive ? 'var(--accent-1)' : 'var(--txt-3)',
        textTransform: 'uppercase', letterSpacing: '0.05em',
        cursor: clickable ? 'pointer' : 'default',
        userSelect: 'none'
      }}
    >
      {children}
      {isActive && <span style={{ marginLeft: 6 }}>{currentDir === 'asc' ? '↑' : '↓'}</span>}
    </th>
  );
}
function StatusBadgeC({ status, colors }) {
  const c = colors[status] || { bg: 'rgba(255,255,255,.05)', color: 'var(--txt-2)' };
  return <span style={{ fontSize: 11, padding: '4px 10px', borderRadius: 6, background: c.bg, color: c.color, fontWeight: 500 }}>{status}</span>;
}

function waNormalizePhone(phone, country) {
  if (!phone) return '';
  let digits = String(phone).replace(/\D/g, '');
  if (digits.startsWith('00')) {
    digits = digits.slice(2);
  } else if (digits.startsWith('0')) {
    const prefix = country === 'Republica Moldova' ? '373' : '40';
    digits = prefix + digits.slice(1);
  }
  return digits;
}

function CampaignDrawer({ campaign, brands, staffList, onClose, onUpdate }) {
  const [name, setName] = useStateMC(campaign.name);
  const [brandId, setBrandId] = useStateMC(campaign.brand_id || '');
  const [campaignTypes, setCampaignTypes] = useStateMC(campaign.campaign_types || []);
  const [status, setStatus] = useStateMC(campaign.status);
  const [startDate, setStartDate] = useStateMC(campaign.start_date || '');
  const [endDate, setEndDate] = useStateMC(campaign.end_date || '');
  const [materialDeadline, setMaterialDeadline] = useStateMC(campaign.material_deadline || '');
  const [budgetTotal, setBudgetTotal] = useStateMC(campaign.budget_total || '');
  const [brief, setBrief] = useStateMC(campaign.brief || '');
  const [internalNotes, setInternalNotes] = useStateMC(campaign.internal_notes || '');
  const [assignedTo, setAssignedTo] = useStateMC(campaign.assigned_to || '');
  const [saving, setSaving] = useStateMC(false);
  const [errorMsg, setErrorMsg] = useStateMC('');

  const [creators, setCreators] = useStateMC([]);
  const [influencers, setInfluencers] = useStateMC([]);
  const [showAddCreator, setShowAddCreator] = useStateMC(false);
  const [selectedCreator, setSelectedCreator] = useStateMC(null);
  const [creatorsRefreshKey, setCreatorsRefreshKey] = useStateMC(0);

  useEffectMC(() => {
    (async () => {
      const [{ data: cc }, { data: infs }] = await Promise.all([
        window.sb.from('campaign_creators').select('*').eq('campaign_id', campaign.id),
        window.sb.from('influencer_applications').select('id, full_name, email, tiktok_handle, tiktok_followers, backstage_id, phone, country').order('full_name'),
      ]);
      setCreators(cc || []);
      setInfluencers(infs || []);
    })();
  }, [creatorsRefreshKey, campaign.id]);

  const toggleType = (t) => {
    setCampaignTypes(prev => prev.includes(t) ? prev.filter(x => x !== t) : [...prev, t]);
  };

  const handleSave = async () => {
    setSaving(true); setErrorMsg('');
    try {
      const { error } = await window.sb.from('campaigns').update({
        name: name.trim(),
        brand_id: brandId || null,
        campaign_types: campaignTypes,
        status,
        start_date: startDate || null,
        end_date: endDate || null,
        material_deadline: materialDeadline || null,
        budget_total: budgetTotal ? parseFloat(budgetTotal) : null,
        brief: brief.trim() || null,
        internal_notes: internalNotes.trim() || null,
        assigned_to: assignedTo || null,
      }).eq('id', campaign.id);
      if (error) { setErrorMsg('Eroare: ' + error.message); setSaving(false); return; }
      setSaving(false);
      onUpdate();
    } catch (err) { setErrorMsg('Conexiune eșuată.'); setSaving(false); }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100, display: 'grid', placeItems: 'center', background: 'rgba(0,0,0,.6)', backdropFilter: 'blur(4px)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 900, width: '90vw', maxHeight: '90vh', overflow: 'auto', background: '#0a0a0a', border: '.5px solid var(--line)', borderRadius: 16, padding: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <h2 className="display" style={{ fontSize: 22, margin: 0 }}>Detalii campanie</h2>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--txt-2)', fontSize: 22, cursor: 'pointer', padding: 4 }}>✕</button>
        </div>

        <EditField label="Nume campanie">
          <input type="text" value={name} onChange={e => setName(e.target.value)} className="input" style={{ width: '100%' }} />
        </EditField>

        <EditField label="Brand asociat">
          <select value={brandId} onChange={e => setBrandId(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
            <option value="" style={{ backgroundColor: '#1a1a1a' }}>— Niciun brand —</option>
            {brands.map(b => <option key={b.id} value={b.id} style={{ backgroundColor: '#1a1a1a' }}>{b.brand ? (b.brand + ' (' + b.company + ')') : b.company}</option>)}
          </select>
        </EditField>

        <EditField label="Tipuri campanie (selectează multiple)">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {CAMPAIGN_TYPES_OPTIONS.map(t => (
              <button key={t} onClick={() => toggleType(t)} type="button" style={{
                padding: '8px 14px', borderRadius: 8, fontSize: 12, cursor: 'pointer',
                border: campaignTypes.includes(t) ? '1px solid var(--accent-1)' : '.5px solid var(--line)',
                background: campaignTypes.includes(t) ? 'rgba(82,242,15,.1)' : 'transparent',
                color: campaignTypes.includes(t) ? 'var(--accent-1)' : 'var(--txt-2)'
              }}>{t}</button>
            ))}
          </div>
        </EditField>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12 }}>
          <EditField label="Status">
            <select value={status} onChange={e => setStatus(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
              {C_STATUS_OPTIONS.map(s => <option key={s} value={s} style={{ backgroundColor: '#1a1a1a' }}>{s}</option>)}
            </select>
          </EditField>
          <EditField label="Manager campanie">
            <select value={assignedTo} onChange={e => setAssignedTo(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
              <option value="" style={{ backgroundColor: '#1a1a1a' }}>— Nealocat —</option>
              {staffList.map(s => <option key={s.id} value={s.id} style={{ backgroundColor: '#1a1a1a' }}>{s.full_name}</option>)}
            </select>
          </EditField>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: 12 }}>
          <EditField label="Data start">
            <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }} />
          </EditField>
          <EditField label="Data end">
            <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }} />
          </EditField>
          <EditField label="Deadline material">
            <input type="date" value={materialDeadline} onChange={e => setMaterialDeadline(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }} />
          </EditField>
        </div>

        <EditField label="Buget total (RON)">
          <input type="number" min="0" step="0.01" value={budgetTotal} onChange={e => setBudgetTotal(e.target.value)} className="input" style={{ width: '100%' }} />
        </EditField>

        <EditField label="Brief campanie">
          <textarea value={brief} onChange={e => setBrief(e.target.value)} rows={4} className="input" style={{ width: '100%', resize: 'vertical', minHeight: 80, fontFamily: 'inherit', lineHeight: 1.5 }} placeholder="Descriere campanie, ce trebuie să facă creatorii..." />
        </EditField>

        <EditField label="Note interne">
          <textarea value={internalNotes} onChange={e => setInternalNotes(e.target.value)} rows={3} className="input" style={{ width: '100%', resize: 'vertical', minHeight: 60, fontFamily: 'inherit' }} />
        </EditField>

        {errorMsg && <div style={{ marginTop: 16, padding: '10px 12px', borderRadius: 8, background: 'rgba(255,90,90,.08)', border: '.5px solid rgba(255,100,100,.3)', fontSize: 12, color: 'var(--txt-2)' }}>⚠️ {errorMsg}</div>}

        <button onClick={handleSave} disabled={saving} className="btn btn-primary" style={{ width: '100%', marginTop: 20, opacity: saving ? 0.6 : 1 }}>
          {saving ? 'Se salvează...' : 'Salvează modificările'}
        </button>

        {/* SECTION CREATORI ALOCAȚI */}
        <div style={{ marginTop: 40, padding: 20, borderRadius: 12, background: 'rgba(82,242,15,.03)', border: '1px solid rgba(82,242,15,.15)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <h3 style={{ fontSize: 14, margin: 0, color: 'var(--accent-1)' }}>👥 Creatori alocați ({creators.length})</h3>
            <button onClick={() => setShowAddCreator(true)} className="btn btn-glass btn-sm">+ Alocă creator</button>
          </div>

          {creators.length === 0 ? (
            <div style={{ padding: 24, textAlign: 'center', color: 'var(--txt-3)', fontSize: 13 }}>Niciun creator alocat încă.</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {creators.map(cc => {
                const inf = influencers.find(i => i.id === cc.influencer_id);
                if (!inf) return null;
                return (
                  <div key={cc.id} onClick={() => setSelectedCreator(cc)} style={{ padding: 12, borderRadius: 8, background: 'rgba(255,255,255,.02)', border: '.5px solid var(--line)', cursor: 'pointer', transition: 'background .15s' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(82,242,15,.05)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,.02)'}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4, gap: 8 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                        <strong style={{ fontSize: 13 }}>{inf.full_name}</strong>
                        <button
                          type="button"
                          disabled={!inf.phone}
                          onClick={(e) => {
                            e.stopPropagation();
                            const phone = waNormalizePhone(inf.phone, inf.country);
                            if (!phone) return;
                            const brand = brands.find(b => b.id === campaign.brand_id);
                            const brandName = brand ? (brand.brand || brand.company) : '';
                            const msg = `Salut ${inf.full_name}, ai fost selectat pentru campania ${campaign.name} de la ${brandName} prin 4U Agency. \u{1F389} Revenim în curând cu toate detaliile!`;
                            window.open(`https://wa.me/${phone}?text=${encodeURIComponent(msg)}`, '_blank');
                          }}
                          title={inf.phone ? 'Trimite mesaj WhatsApp' : 'Telefon lipsă'}
                          style={{
                            padding: '3px 10px',
                            fontSize: 11,
                            borderRadius: 6,
                            border: '.5px solid rgba(37,211,102,.3)',
                            background: inf.phone ? 'rgba(37,211,102,.08)' : 'rgba(255,255,255,.03)',
                            color: inf.phone ? '#25D366' : 'var(--txt-3)',
                            cursor: inf.phone ? 'pointer' : 'not-allowed',
                            fontWeight: 500,
                            whiteSpace: 'nowrap',
                          }}
                        >
                          📱 WhatsApp
                        </button>
                      </div>
                      <StatusBadgeC status={cc.status} colors={CC_STATUS_COLORS} />
                    </div>
                    <div style={{ fontSize: 11, color: 'var(--txt-3)' }}>
                      {inf.tiktok_handle && <span>@{inf.tiktok_handle}</span>}
                      {cc.payment_status && <span style={{ marginLeft: 12 }}>💰 {cc.payment_status}</span>}
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {showAddCreator && (
          <AddCreatorModal
            campaignId={campaign.id}
            existingCreatorIds={creators.map(c => c.influencer_id)}
            influencers={influencers}
            onClose={() => setShowAddCreator(false)}
            onAdd={() => { setCreatorsRefreshKey(k => k + 1); setShowAddCreator(false); }}
          />
        )}

        {selectedCreator && (
          <CreatorAllocationDrawer
            allocation={selectedCreator}
            influencer={influencers.find(i => i.id === selectedCreator.influencer_id)}
            onClose={() => setSelectedCreator(null)}
            onUpdate={() => { setCreatorsRefreshKey(k => k + 1); setSelectedCreator(null); }}
          />
        )}
      </div>
    </div>
  );
}

function CampaignCreateDrawer({ brands, staffList, onClose, onCreate }) {
  const [name, setName] = useStateMC('');
  const [brandId, setBrandId] = useStateMC('');
  const [assignedTo, setAssignedTo] = useStateMC('');
  const [saving, setSaving] = useStateMC(false);
  const [errorMsg, setErrorMsg] = useStateMC('');

  const handleCreate = async () => {
    if (!name.trim()) { setErrorMsg('Numele campaniei e obligatoriu.'); return; }
    setSaving(true); setErrorMsg('');
    try {
      const { error } = await window.sb.from('campaigns').insert({
        name: name.trim(),
        brand_id: brandId || null,
        assigned_to: assignedTo || null,
        status: 'Draft',
      });
      if (error) { setErrorMsg('Eroare: ' + error.message); setSaving(false); return; }
      setSaving(false);
      onCreate();
    } catch (err) { setErrorMsg('Conexiune eșuată.'); setSaving(false); }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100, display: 'grid', placeItems: 'center', background: 'rgba(0,0,0,.6)', backdropFilter: 'blur(4px)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 900, width: '90vw', maxHeight: '90vh', overflow: 'auto', background: '#0a0a0a', border: '.5px solid var(--line)', borderRadius: 16, padding: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <h2 className="display" style={{ fontSize: 22, margin: 0 }}>Campanie nouă</h2>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--txt-2)', fontSize: 22, cursor: 'pointer', padding: 4 }}>✕</button>
        </div>

        <p style={{ fontSize: 13, color: 'var(--txt-2)', marginBottom: 24 }}>Completează minimul necesar. Restul detaliilor (date, buget, brief) le adaugi după creare în detaliile campaniei.</p>

        <EditField label="Nume campanie *">
          <input type="text" value={name} onChange={e => setName(e.target.value)} className="input" style={{ width: '100%' }} placeholder="ex: Vară 2026 - Pepsi" />
        </EditField>

        <EditField label="Brand asociat">
          <select value={brandId} onChange={e => setBrandId(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
            <option value="" style={{ backgroundColor: '#1a1a1a' }}>— Niciun brand (alegi mai târziu) —</option>
            {brands.map(b => <option key={b.id} value={b.id} style={{ backgroundColor: '#1a1a1a' }}>{b.brand ? (b.brand + ' (' + b.company + ')') : b.company}</option>)}
          </select>
        </EditField>

        <EditField label="Manager">
          <select value={assignedTo} onChange={e => setAssignedTo(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
            <option value="" style={{ backgroundColor: '#1a1a1a' }}>— Nealocat —</option>
            {staffList.map(s => <option key={s.id} value={s.id} style={{ backgroundColor: '#1a1a1a' }}>{s.full_name}</option>)}
          </select>
        </EditField>

        {errorMsg && <div style={{ marginTop: 16, padding: '10px 12px', borderRadius: 8, background: 'rgba(255,90,90,.08)', border: '.5px solid rgba(255,100,100,.3)', fontSize: 12, color: 'var(--txt-2)' }}>⚠️ {errorMsg}</div>}

        <button onClick={handleCreate} disabled={saving} className="btn btn-primary" style={{ width: '100%', marginTop: 20, opacity: saving ? 0.6 : 1 }}>
          {saving ? 'Se creează...' : 'Creează campania'}
        </button>
      </div>
    </div>
  );
}

function AddCreatorModal({ campaignId, existingCreatorIds, influencers, onClose, onAdd }) {
  const [search, setSearch] = useStateMC('');
  const [adding, setAdding] = useStateMC(null);

  const available = influencers.filter(i =>
    !existingCreatorIds.includes(i.id) &&
    (!search || i.full_name.toLowerCase().includes(search.toLowerCase()) || (i.tiktok_handle || '').toLowerCase().includes(search.toLowerCase()))
  );

  const handleAdd = async (infId) => {
    setAdding(infId);
    const { error } = await window.sb.from('campaign_creators').insert({
      campaign_id: campaignId,
      influencer_id: infId,
      status: 'Invitat',
      payment_status: 'Neplătit',
    });
    if (error) { alert('Eroare: ' + error.message); setAdding(null); return; }
    onAdd();
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(0,0,0,.8)', backdropFilter: 'blur(6px)', display: 'grid', placeItems: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} className="card-glass" style={{ width: '100%', maxWidth: 560, maxHeight: '80vh', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: 24, borderBottom: '.5px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h3 className="display" style={{ fontSize: 18, margin: 0 }}>Alocă creator pe campanie</h3>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--txt-2)', fontSize: 22, cursor: 'pointer' }}>✕</button>
        </div>
        <div style={{ padding: 24, paddingBottom: 16 }}>
          <input type="text" placeholder="🔍 Caută creator..." value={search} onChange={e => setSearch(e.target.value)} className="input" style={{ width: '100%' }} />
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '0 24px 24px' }}>
          {available.length === 0 ? (
            <div style={{ padding: 40, textAlign: 'center', color: 'var(--txt-3)' }}>Niciun creator disponibil.</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {available.map(i => (
                <div key={i.id} style={{ padding: 12, borderRadius: 8, background: 'rgba(255,255,255,.02)', border: '.5px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600 }}>{i.full_name}</div>
                    <div style={{ fontSize: 11, color: 'var(--txt-3)' }}>
                      {i.tiktok_handle && <span>@{i.tiktok_handle}</span>}
                      {i.tiktok_followers && <span style={{ marginLeft: 8 }}>{i.tiktok_followers.toLocaleString('ro-RO')} followers</span>}
                    </div>
                  </div>
                  <button onClick={() => handleAdd(i.id)} disabled={adding === i.id} className="btn btn-glass btn-sm">
                    {adding === i.id ? '...' : '+ Alocă'}
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function CreatorAllocationDrawer({ allocation, influencer, onClose, onUpdate }) {
  const [status, setStatus] = useStateMC(allocation.status);
  const [materialUrl, setMaterialUrl] = useStateMC(allocation.material_url || '');
  const [publishedUrl, setPublishedUrl] = useStateMC(allocation.published_url || '');
  const [paymentAmount, setPaymentAmount] = useStateMC(allocation.payment_amount || '');
  const [paymentStatus, setPaymentStatus] = useStateMC(allocation.payment_status);
  const [internalNotes, setInternalNotes] = useStateMC(allocation.internal_notes || '');
  const [saving, setSaving] = useStateMC(false);
  const [errorMsg, setErrorMsg] = useStateMC('');

  const handleSave = async () => {
    setSaving(true); setErrorMsg('');
    try {
      const updates = {
        status, payment_status: paymentStatus,
        material_url: materialUrl.trim() || null,
        published_url: publishedUrl.trim() || null,
        payment_amount: paymentAmount ? parseFloat(paymentAmount) : null,
        internal_notes: internalNotes.trim() || null,
      };
      // Set timestamps automat când statusul se schimbă
      if (status === 'Material trimis' && materialUrl && !allocation.material_sent_at) updates.material_sent_at = new Date().toISOString();
      if (status === 'Publicat' && publishedUrl && !allocation.published_at) updates.published_at = new Date().toISOString();
      if (paymentStatus === 'Plătit' && !allocation.paid_at) updates.paid_at = new Date().toISOString();

      const { error } = await window.sb.from('campaign_creators').update(updates).eq('id', allocation.id);
      if (error) { setErrorMsg('Eroare: ' + error.message); setSaving(false); return; }
      setSaving(false); onUpdate();
    } catch (err) { setErrorMsg('Conexiune eșuată.'); setSaving(false); }
  };

  const handleRemove = async () => {
    if (!confirm('Sigur scoți acest creator de pe campanie?')) return;
    const { error } = await window.sb.from('campaign_creators').delete().eq('id', allocation.id);
    if (error) { alert('Eroare: ' + error.message); return; }
    onUpdate();
  };

  if (!influencer) return null;

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 200, display: 'grid', placeItems: 'center', background: 'rgba(0,0,0,.7)', backdropFilter: 'blur(6px)' }}>
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 900, width: '90vw', maxHeight: '90vh', overflow: 'auto', background: '#0a0a0a', border: '.5px solid var(--line)', borderRadius: 16, padding: 32 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <h2 className="display" style={{ fontSize: 20, margin: 0 }}>{influencer.full_name}</h2>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', color: 'var(--txt-2)', fontSize: 22, cursor: 'pointer' }}>✕</button>
        </div>
        <div style={{ fontSize: 12, color: 'var(--txt-3)', marginBottom: 24 }}>
          {influencer.tiktok_handle && <span>@{influencer.tiktok_handle}</span>}
          {influencer.tiktok_followers && <span style={{ marginLeft: 8 }}>· {influencer.tiktok_followers.toLocaleString('ro-RO')} followers</span>}
          {influencer.backstage_id && <span style={{ marginLeft: 8 }}>· ID: {influencer.backstage_id}</span>}
        </div>

        <EditField label="Status">
          <select value={status} onChange={e => setStatus(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
            {CC_STATUS_OPTIONS.map(s => <option key={s} value={s} style={{ backgroundColor: '#1a1a1a' }}>{s}</option>)}
          </select>
        </EditField>

        <EditField label="Link material trimis">
          <input type="url" value={materialUrl} onChange={e => setMaterialUrl(e.target.value)} className="input" style={{ width: '100%' }} placeholder="https://..." />
          {allocation.material_sent_at && <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 4 }}>Primit la: {new Date(allocation.material_sent_at).toLocaleString('ro-RO')}</div>}
        </EditField>

        <EditField label="Link post publicat">
          <input type="url" value={publishedUrl} onChange={e => setPublishedUrl(e.target.value)} className="input" style={{ width: '100%' }} placeholder="https://tiktok.com/..." />
          {allocation.published_at && <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: 4 }}>Publicat la: {new Date(allocation.published_at).toLocaleString('ro-RO')}</div>}
        </EditField>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <EditField label="Plată (RON)">
            <input type="number" min="0" step="0.01" value={paymentAmount} onChange={e => setPaymentAmount(e.target.value)} className="input" style={{ width: '100%' }} />
          </EditField>
          <EditField label="Status plată">
            <select value={paymentStatus} onChange={e => setPaymentStatus(e.target.value)} className="input" style={{ width: '100%', color: '#FFFFFF', backgroundColor: '#1a1a1a' }}>
              {CC_PAYMENT_STATUS_OPTIONS.map(s => <option key={s} value={s} style={{ backgroundColor: '#1a1a1a' }}>{s}</option>)}
            </select>
          </EditField>
        </div>
        {allocation.paid_at && <div style={{ fontSize: 11, color: 'var(--txt-3)', marginTop: -8, marginBottom: 16 }}>Plătit la: {new Date(allocation.paid_at).toLocaleString('ro-RO')}</div>}

        <EditField label="Note interne">
          <textarea value={internalNotes} onChange={e => setInternalNotes(e.target.value)} rows={3} className="input" style={{ width: '100%', resize: 'vertical', minHeight: 60, fontFamily: 'inherit' }} />
        </EditField>

        {errorMsg && <div style={{ marginTop: 16, padding: '10px 12px', borderRadius: 8, background: 'rgba(255,90,90,.08)', border: '.5px solid rgba(255,100,100,.3)', fontSize: 12, color: 'var(--txt-2)' }}>⚠️ {errorMsg}</div>}

        <button onClick={handleSave} disabled={saving} className="btn btn-primary" style={{ width: '100%', marginTop: 12, opacity: saving ? 0.6 : 1 }}>
          {saving ? 'Se salvează...' : 'Salvează'}
        </button>
        <button onClick={handleRemove} className="btn btn-glass" style={{ width: '100%', marginTop: 8, color: '#FF5A5A' }}>
          Scoate de pe campanie
        </button>
      </div>
    </div>
  );
}

function EditField({ label, children }) {
  return (
    <div style={{ marginBottom: 16 }}>
      <label className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em', marginBottom: 6, display: 'block' }}>{label.toUpperCase()}</label>
      {children}
    </div>
  );
}

window.MediaAdminCampaigns = MediaAdminCampaigns;