// ─── Creators Module ─────────────────────────────────────

// ─── Content-Creator Fit Scoring ────────────────────────
function scoreDropForCreator(drop, creator) {
  if (drop.creator_id) return 0; // already assigned

  var score = 0;

  // Platform match: tiktok drops → tiktok creator
  if (drop.medium && creator.platform) {
    var platformMediumMap = { tiktok: ['internet', 'meme', 'viral'], instagram: ['internet', 'meme'], youtube: ['tv', 'movie', 'music'] };
    var relevantMediums = platformMediumMap[creator.platform] || [];
    if (relevantMediums.indexOf(drop.medium) > -1) score += 20;
  }

  // Audience demo keyword overlap
  if (creator.audience_demo && drop.situation) {
    var demoTokens = creator.audience_demo.toLowerCase().split(/[\s,;]+/).filter(function(t) { return t.length > 2; });
    var dropText = ((drop.situation || '') + ' ' + (drop.line || '') + ' ' + (drop.source || '')).toLowerCase();
    var demoMatches = 0;
    demoTokens.forEach(function(t) { if (dropText.indexOf(t) > -1) demoMatches++; });
    score += Math.min(demoMatches * 10, 30);
  }

  // Content style keyword match
  if (creator.content_style) {
    var styleTokens = creator.content_style.toLowerCase().split(/[\s,;]+/).filter(function(t) { return t.length > 2; });
    var situationText = ((drop.situation || '') + ' ' + (drop.signoff || '')).toLowerCase();
    var styleMatches = 0;
    styleTokens.forEach(function(t) { if (situationText.indexOf(t) > -1) styleMatches++; });
    score += Math.min(styleMatches * 10, 20);
  }

  // Performance bonus (fire-rated drops)
  if (drop.performance === 'fire') score += 10;

  return score;
}

function CreatorsModule(props) {
  var db = props.db, showToast = props.showToast, creators = props.creators, drops = props.drops, hotseatCards = props.hotseatCards;
  var library = props.library, crowdScores = props.crowdScores, generateId = props.generateId, tasteProfile = props.tasteProfile;
  var [view, setView] = useState('list');
  var [editCreator, setEditCreator] = useState(null);
  var [saving, setSaving] = useState(false);
  var [deleteConfirm, setDeleteConfirm] = useState(false);
  var [search, setSearch] = useState('');
  var [assignSearch, setAssignSearch] = useState('');

  // Brief state
  var [briefLoading, setBriefLoading] = useState(false);
  var [briefResult, setBriefResult] = useState(null);

  // Filter campaign state
  var [filterForm, setFilterForm] = useState(null);
  var [filterSaving, setFilterSaving] = useState(false);

  // Hot seat engagement state
  var [engagement, setEngagement] = useState(null);

  // Hot seat deck builder state
  var [deckLoading, setDeckLoading] = useState(false);
  var [deckPlan, setDeckPlan] = useState(null);
  var [deckCount, setDeckCount] = useState(10);

  // Drop plan builder state
  var [dropPlanLoading, setDropPlanLoading] = useState(false);
  var [dropPlan, setDropPlan] = useState(null);
  var [dropPlanCount, setDropPlanCount] = useState(15);
  var [dropAutoSchedule, setDropAutoSchedule] = useState(true);

  var creatorsArray = useMemo(function() {
    if (!creators) return [];
    var arr = Object.values(creators);
    if (search) {
      var q = search.toLowerCase();
      arr = arr.filter(function(c) {
        return (c.name || '').toLowerCase().includes(q) || (c.handle || '').toLowerCase().includes(q);
      });
    }
    arr.sort(function(a, b) { return (b.created_at || '').localeCompare(a.created_at || ''); });
    return arr;
  }, [creators, search]);

  var dropsArray = useMemo(function() {
    if (!drops) return [];
    return Object.values(drops);
  }, [drops]);

  // Compute creator stats
  function getCreatorStats(creatorId) {
    var assigned = dropsArray.filter(function(d) { return d.creator_id === creatorId; });
    var published = assigned.filter(function(d) { return d.status === 'published'; });
    var fire = published.filter(function(d) { return d.performance === 'fire'; });
    var rated = published.filter(function(d) { return d.performance; });
    var fireRate = rated.length > 0 ? Math.round(fire.length / rated.length * 100) : 0;
    return { assigned: assigned.length, published: published.length, fire: fire.length, rated: rated.length, fireRate: fireRate };
  }

  function newCreator() {
    var id = 'creator-' + Date.now() + '-' + Math.random().toString(36).substr(2, 6);
    setEditCreator({
      id: id, name: '', handle: '', platform: 'instagram', audience_size: '',
      audience_demo: '', content_style: '', notes: '', created_at: new Date().toISOString()
    });
    setView('detail');
    setDeleteConfirm(false);
    setBriefResult(null);
    setFilterForm(null);
  }

  function openCreator(c) {
    setEditCreator(JSON.parse(JSON.stringify(c)));
    setView('detail');
    setDeleteConfirm(false);
    setBriefResult(null);
    setFilterForm(null);
  }

  // Listen for engagement data when a creator is opened
  useEffect(function() {
    if (!editCreator || view !== 'detail') { setEngagement(null); return; }
    var ref = db.ref('creator_engagement/' + editCreator.id);
    ref.on('value', function(snap) { setEngagement(snap.val() || null); });
    return function() { ref.off(); };
  }, [editCreator && editCreator.id, view]);

  function updateField(field, value) {
    setEditCreator(function(prev) { var n = Object.assign({}, prev); n[field] = value; return n; });
  }

  function saveCreator() {
    if (!editCreator || !editCreator.id) return;
    if (!editCreator.name.trim()) { showToast('NAME REQUIRED'); return; }
    setSaving(true);
    db.ref('creators/' + editCreator.id).set(editCreator).then(function() {
      setSaving(false);
      showToast('CREATOR SAVED');
    }).catch(function(e) { setSaving(false); showToast('SAVE FAILED: ' + e.message); });
  }

  function deleteCreator() {
    if (!editCreator) return;
    db.ref('creators/' + editCreator.id).remove().then(function() {
      showToast('CREATOR DELETED');
      setEditCreator(null);
      setView('list');
    }).catch(function(e) { showToast('DELETE FAILED: ' + e.message); });
  }

  function assignDrop(dropId) {
    db.ref('drops/' + dropId + '/creator_id').set(editCreator.id).then(function() {
      showToast('DROP ASSIGNED');
    }).catch(function(e) { showToast('ASSIGN FAILED: ' + e.message); });
  }

  function unassignDrop(dropId) {
    db.ref('drops/' + dropId + '/creator_id').remove().then(function() {
      showToast('DROP UNASSIGNED');
    }).catch(function(e) { showToast('UNASSIGN FAILED: ' + e.message); });
  }

  // ─── Feature 3: Briefing Workflow ─────────────────
  function generateBrief() {
    if (!editCreator) return;
    setBriefLoading(true);
    setBriefResult(null);

    var stats = getCreatorStats(editCreator.id);
    var assigned = dropsArray.filter(function(d) { return d.creator_id === editCreator.id; });

    // Build structured context
    var context = 'Creator: ' + editCreator.name;
    if (editCreator.handle) context += ' (' + editCreator.handle + ')';
    if (editCreator.platform) context += ' on ' + editCreator.platform;
    if (editCreator.audience_size) context += '. Audience: ' + editCreator.audience_size;
    if (editCreator.audience_demo) context += '. Demo: ' + editCreator.audience_demo;
    if (editCreator.content_style) context += '. Style: ' + editCreator.content_style;
    if (editCreator.notes) context += '. Notes: ' + editCreator.notes;

    // Add assigned drops summary
    context += '\n\nAssigned drops (' + assigned.length + '):';
    assigned.slice(0, 20).forEach(function(d) {
      context += '\n- "' + (d.line || '') + '" from ' + (d.source || '') + ' [' + (d.status || '') + (d.performance ? '/' + d.performance : '') + ']';
    });

    // Add performance stats
    context += '\n\nPerformance: ' + stats.fire + ' fire / ' + stats.rated + ' rated (' + stats.fireRate + '% fire rate).';

    // Fire-rated patterns
    var fireDrops = assigned.filter(function(d) { return d.performance === 'fire'; });
    if (fireDrops.length > 0) {
      var fireSits = fireDrops.map(function(d) { return d.situation; }).filter(Boolean).slice(0, 5);
      if (fireSits.length > 0) context += '\nTop fire situations: ' + fireSits.map(function(s) { return '"' + s + '"'; }).join(', ');
    }

    // Build creator profile for the API
    var creatorProfile = 'Creator: ' + editCreator.name;
    if (editCreator.handle) creatorProfile += ' (' + editCreator.handle + ')';
    if (editCreator.platform) creatorProfile += ' on ' + editCreator.platform;
    if (editCreator.audience_size) creatorProfile += '. Audience size: ' + editCreator.audience_size;
    if (editCreator.audience_demo) creatorProfile += '. Audience demo: ' + editCreator.audience_demo;
    if (editCreator.content_style) creatorProfile += '. Content style: ' + editCreator.content_style;

    firebase.auth().currentUser.getIdToken().then(function(token) {
      return aiFetch('/api/ai/marketing', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        body: JSON.stringify({ type: 'creator_brief', context: context, creatorProfile: creatorProfile })
      });
    }).then(function(res) {
      return res.json();
    }).then(function(data) {
      setBriefResult(data.result);
      setBriefLoading(false);
    }).catch(function(e) {
      showToast('BRIEF FAILED: ' + formatAiError(e));
      setBriefLoading(false);
    });
  }

  function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() { showToast('COPIED'); }).catch(function() { showToast('COPY FAILED'); });
  }

  // ─── Hot Seat Deck Builder ─────────────────────────
  function getNextHotseatId() {
    if (!hotseatCards) return 1;
    var max = 0;
    Object.values(hotseatCards).forEach(function(c) {
      var num = parseInt((c.id || '').replace('hs_', '')) || 0;
      if (num > max) max = num;
    });
    return max + 1;
  }

  function buildHotSeatDeck() {
    if (!editCreator) return;
    setDeckLoading(true);
    setDeckPlan(null);

    // Auto-build brief from creator profile
    var brief = 'Generate hot seat cards for creator ' + editCreator.name;
    if (editCreator.platform) brief += ' on ' + editCreator.platform;
    brief += '.';
    if (editCreator.audience_demo) brief += ' Their audience is: ' + editCreator.audience_demo + '.';
    if (editCreator.content_style) brief += ' Content style: ' + editCreator.content_style + '.';
    brief += ' Cards should match references their audience would know and produce great clue-giving moments.';

    var startId = getNextHotseatId();

    firebase.auth().currentUser.getIdToken().then(function(token) {
      return aiFetch('/api/ai/generate-hotseat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        body: JSON.stringify({ brief: brief, count: deckCount, startId: startId })
      });
    }).then(function(res) {
      return res.json();
    }).then(function(data) {
      if (!data.ok || !data.plan) throw new Error('Invalid response');
      setDeckPlan(data.plan);
      setDeckLoading(false);
    }).catch(function(e) {
      showToast('DECK BUILD FAILED: ' + formatAiError(e));
      setDeckLoading(false);
    });
  }

  function acceptDeckCard(item) {
    var data = {
      id: item.id,
      line: (item.line || '').toUpperCase(),
      source: (item.source || '').toUpperCase(),
      category: item.category || 'movies',
      active: true,
      hotseat_exclusive: true,
      creator_id: editCreator.id
    };
    db.ref('hotseat_cards/' + data.id).set(data).then(function() {
      showToast('ACCEPTED: ' + data.line.substring(0, 30));
      setDeckPlan(function(prev) { return prev.filter(function(p) { return p.id !== item.id; }); });
    }).catch(function(e) { showToast('SAVE FAILED: ' + e.message); });
  }

  function acceptAllDeckCards() {
    if (!deckPlan || !deckPlan.length) return;
    var updates = {};
    deckPlan.forEach(function(item) {
      updates['hotseat_cards/' + item.id] = {
        id: item.id,
        line: (item.line || '').toUpperCase(),
        source: (item.source || '').toUpperCase(),
        category: item.category || 'movies',
        active: true,
        hotseat_exclusive: true,
        creator_id: editCreator.id
      };
    });
    db.ref().update(updates).then(function() {
      showToast('ACCEPTED ' + deckPlan.length + ' CARDS — DECK READY');
      setDeckPlan([]);
    }).catch(function(e) { showToast('BATCH SAVE FAILED: ' + e.message); });
  }

  function rejectDeckCard(index) {
    setDeckPlan(function(prev) { var next = prev.slice(); next.splice(index, 1); return next; });
  }

  // ─── Drop Plan Builder ────────────────────────────
  // Port of selectReferences + buildDigest from ailab.jsx
  function selectReferences(allRefs, briefText) {
    var briefLower = briefText.toLowerCase();
    var scored = allRefs.map(function(r) {
      var score = r.lineconic_score || r.scores && r.scores.lineconic_score || 5;
      if (r.category && briefLower.includes(r.category.toLowerCase())) score += 2;
      if (r.source && briefLower.includes(r.source.toLowerCase().split(' ')[0].toLowerCase())) score += 3;
      var tags = r.themes || r.tags || [];
      for (var i = 0; i < tags.length; i++) {
        if (briefLower.includes(tags[i].toLowerCase())) score += 1.5;
      }
      var pp = r.scores && r.scores.performance_potential || 5;
      score += pp * 0.15;
      var cs = crowdScores && crowdScores[r.id];
      if (cs && cs.lastPlayed) {
        var daysSince = (Date.now() - new Date(cs.lastPlayed).getTime()) / 86400000;
        if (daysSince < 30) score -= 4;
      }
      score += Math.random() * 1.5;
      return { ref: r, score: score };
    });
    scored.sort(function(a, b) { return b.score - a.score; });
    return scored.slice(0, 200).map(function(s) { return s.ref; });
  }

  function buildDigest(refs) {
    return refs.map(function(r) {
      var id = r.id || '';
      var answer = r.content && r.content.answer || r.line || '';
      var source = r.source || '';
      var mediaType = r.media_type || '';
      var category = r.category || '';
      var ls = r.lineconic_score || r.scores && r.scores.lineconic_score || '';
      var tags = r.themes || r.tags || [];
      var cs = crowdScores && crowdScores[id];
      var recentTag = cs && cs.lastPlayed && (Date.now() - new Date(cs.lastPlayed).getTime()) / 86400000 < 30 ? ' [RECENTLY USED — avoid]' : '';
      var scoreTag = ls ? ' LS:' + ls : '';
      return '[' + id + '] "' + answer + '" — ' + source + ' (' + mediaType + ') [' + category + ']' + scoreTag + ' tags: ' + tags.join(', ') + recentTag;
    }).join('\n');
  }

  function buildDropPlan() {
    if (!editCreator || !library) return;
    setDropPlanLoading(true);
    setDropPlan(null);

    // Auto-build brief from creator profile
    var brief = 'Generate drop content for creator ' + editCreator.name;
    if (editCreator.platform) brief += ' on ' + editCreator.platform;
    brief += '.';
    if (editCreator.audience_demo) brief += ' Their audience: ' + editCreator.audience_demo + '.';
    if (editCreator.content_style) brief += ' Style: ' + editCreator.content_style + '.';
    brief += ' Tailor situations and sign-offs to this creator\'s voice and audience.';

    var refs = selectReferences(library, brief);
    var digest = buildDigest(refs);

    // Gather fire-rated drops for feedback loop
    var topPerformers = null;
    if (drops) {
      var fireDrops = Object.values(drops).filter(function(d) { return d.performance === 'fire'; });
      if (fireDrops.length > 0) {
        var fireSituations = [];
        var fireSignoffs = [];
        fireDrops.forEach(function(d) {
          if (d.situation && fireSituations.indexOf(d.situation) === -1) fireSituations.push(d.situation);
          if (d.signoff && fireSignoffs.indexOf(d.signoff) === -1) fireSignoffs.push(d.signoff);
        });
        topPerformers = { situations: fireSituations.slice(0, 10), signoffs: fireSignoffs.slice(0, 10) };
      }
    }

    // Build creator profile string with performance enrichment
    var cr = editCreator;
    var creatorProfile = 'Creator: ' + cr.name;
    if (cr.handle) creatorProfile += ' (' + cr.handle + ')';
    if (cr.platform) creatorProfile += ' on ' + cr.platform;
    if (cr.audience_size) creatorProfile += '. Audience size: ' + cr.audience_size;
    if (cr.audience_demo) creatorProfile += '. Audience demo: ' + cr.audience_demo;
    if (cr.content_style) creatorProfile += '. Content style: ' + cr.content_style;

    // Enrich with performance data from this creator's drops
    var crDrops = dropsArray.filter(function(d) { return d.creator_id === cr.id; });
    var crRated = crDrops.filter(function(d) { return d.performance; });
    var crFire = crRated.filter(function(d) { return d.performance === 'fire'; });
    if (crRated.length > 0) {
      var crFireRate = Math.round(crFire.length / crRated.length * 100);
      creatorProfile += '\nPerformance: ' + crFire.length + ' fire / ' + crRated.length + ' rated (' + crFireRate + '%).';
      var mediumCounts = {};
      crFire.forEach(function(d) { if (d.medium) mediumCounts[d.medium] = (mediumCounts[d.medium] || 0) + 1; });
      var bestMediums = Object.keys(mediumCounts).sort(function(a, b) { return mediumCounts[b] - mediumCounts[a]; });
      if (bestMediums.length > 0) creatorProfile += ' Best mediums: ' + bestMediums.slice(0, 3).join(', ') + '.';
      var fireSits = crFire.map(function(d) { return d.situation; }).filter(Boolean).slice(0, 5);
      if (fireSits.length > 0) creatorProfile += ' Fire patterns: ' + fireSits.map(function(s) { return '"' + s + '"'; }).join(', ') + '.';
    }

    var tp = tasteProfile && tasteProfile.content ? tasteProfile.content : null;

    firebase.auth().currentUser.getIdToken().then(function(token) {
      return aiFetch('/api/ai/bulk-plan', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
        body: JSON.stringify({ brief: brief, count: dropPlanCount, libraryDigest: digest, totalLibrarySize: library.length, tasteProfile: tp, topPerformers: topPerformers, creatorProfile: creatorProfile })
      });
    }).then(function(res) {
      return res.json();
    }).then(function(data) {
      setDropPlan(data.plan || []);
      setDropPlanLoading(false);
    }).catch(function(e) {
      showToast('DROP PLAN FAILED: ' + formatAiError(e));
      setDropPlanLoading(false);
    });
  }

  function acceptDropPlanAll() {
    if (!dropPlan || dropPlan.length === 0 || !editCreator) return;
    var updates = {};
    var startDate = new Date();
    startDate.setDate(startDate.getDate() + 1);

    dropPlan.forEach(function(item, idx) {
      var id = 'drop-' + Date.now() + '-' + Math.random().toString(36).substr(2, 6);
      var scheduledDate = null;
      var status = 'draft';
      if (dropAutoSchedule) {
        var d = new Date(startDate);
        d.setDate(d.getDate() + idx);
        scheduledDate = d.toISOString().split('T')[0];
        status = 'scheduled';
      }
      updates['drops/' + id] = {
        id: id,
        line: item.line || '',
        source: item.source || '',
        situation: item.situation || '',
        signoff: item.signoff || '',
        acronym: item.acronym || '',
        medium: item.medium || 'movie',
        scheduled_date: scheduledDate,
        status: status,
        created_at: new Date().toISOString(),
        reference_id: generateId(item.line),
        creator_id: editCreator.id
      };
    });
    db.ref().update(updates).then(function() {
      showToast(dropPlan.length + ' DROPS ' + (dropAutoSchedule ? 'QUEUED' : 'CREATED') + ' FOR ' + editCreator.name.toUpperCase());
      setDropPlan(null);
    }).catch(function(e) { showToast('SEND TO DROPS FAILED: ' + e.message); });
  }

  function rejectDropPlanItem(index) {
    setDropPlan(function(prev) { var next = prev.slice(); next.splice(index, 1); return next; });
  }

  // ─── Feature 1: Suggested Drops ───────────────────
  var suggestedDrops = useMemo(function() {
    if (!editCreator || assignSearch.trim()) return [];
    var scored = dropsArray
      .map(function(d) {
        var s = scoreDropForCreator(d, editCreator);
        return { drop: d, score: s };
      })
      .filter(function(item) { return item.score > 0; })
      .sort(function(a, b) { return b.score - a.score; })
      .slice(0, 10);
    return scored;
  }, [dropsArray, editCreator, assignSearch]);

  // Available drops for assignment (search-based)
  var availableDrops = useMemo(function() {
    if (!assignSearch.trim()) return [];
    var q = assignSearch.toLowerCase();
    return dropsArray.filter(function(d) {
      return ((d.line || '').toLowerCase().includes(q) || (d.source || '').toLowerCase().includes(q)) &&
        d.creator_id !== (editCreator && editCreator.id);
    }).slice(0, 10);
  }, [dropsArray, assignSearch, editCreator]);

  // Drops assigned to current creator
  var assignedDrops = useMemo(function() {
    if (!editCreator) return [];
    return dropsArray.filter(function(d) { return d.creator_id === editCreator.id; });
  }, [dropsArray, editCreator]);

  // ─── Feature 5: Filter Campaigns ──────────────────
  function saveFilter() {
    if (!editCreator || !filterForm) return;
    if (!filterForm.filter_name || !filterForm.filter_name.trim()) { showToast('FILTER NAME REQUIRED'); return; }
    setFilterSaving(true);
    var filterId = filterForm.id || ('filter-' + Date.now() + '-' + Math.random().toString(36).substr(2, 6));
    var data = Object.assign({}, filterForm, { id: filterId });
    db.ref('creators/' + editCreator.id + '/filters/' + filterId).set(data).then(function() {
      setFilterSaving(false);
      setFilterForm(null);
      showToast('FILTER SAVED');
    }).catch(function(e) { setFilterSaving(false); showToast('SAVE FAILED: ' + e.message); });
  }

  function deleteFilter(filterId) {
    if (!editCreator) return;
    db.ref('creators/' + editCreator.id + '/filters/' + filterId).remove().then(function() {
      showToast('FILTER DELETED');
    }).catch(function(e) { showToast('DELETE FAILED: ' + e.message); });
  }

  function newFilterForm() {
    setFilterForm({
      filter_name: '', platform: 'instagram', impressions: 0, uses: 0, saves: 0,
      date_start: '', date_end: '', notes: ''
    });
  }

  // Compute filter summary
  var filterSummary = useMemo(function() {
    if (!editCreator || !editCreator.filters) return { total: 0, impressions: 0, uses: 0, saves: 0 };
    var filters = Object.values(editCreator.filters);
    return {
      total: filters.length,
      impressions: filters.reduce(function(sum, f) { return sum + (Number(f.impressions) || 0); }, 0),
      uses: filters.reduce(function(sum, f) { return sum + (Number(f.uses) || 0); }, 0),
      saves: filters.reduce(function(sum, f) { return sum + (Number(f.saves) || 0); }, 0)
    };
  }, [editCreator && editCreator.filters]);

  // Compute engagement stats
  var engagementStats = useMemo(function() {
    if (!engagement) return null;
    var sessions = Object.values(engagement);
    if (sessions.length === 0) return null;
    var totalSessions = sessions.length;
    var completed = sessions.filter(function(s) { return s.completed; }).length;
    var completionRate = Math.round(completed / totalSessions * 100);
    var totalCorrect = 0, totalShown = 0;
    var lastPlayed = 0;
    sessions.forEach(function(s) {
      totalCorrect += s.correct_count || 0;
      totalShown += s.cards_shown || 0;
      if (s.timestamp > lastPlayed) lastPlayed = s.timestamp;
    });
    var avgScore = totalShown > 0 ? Math.round(totalCorrect / totalShown * 100) : 0;
    return {
      totalSessions: totalSessions,
      completionRate: completionRate,
      avgScore: avgScore,
      lastPlayed: lastPlayed ? new Date(lastPlayed).toLocaleDateString() : '—'
    };
  }, [engagement]);

  if (!creators) return React.createElement('div', {className: 'A-empty'}, React.createElement('div', {className: 'icon'}, 'L'), React.createElement('div', {className: 'msg'}, 'LOADING CREATORS...'));

  if (view === 'detail' && editCreator) {
    var stats = getCreatorStats(editCreator.id);
    var filtersArray = editCreator.filters ? Object.values(editCreator.filters) : [];
    return (
      <div style={{padding:24,overflow:'auto',height:'100%'}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:20}}>
          <button className="A-btn" onClick={function(){setView('list');setEditCreator(null)}} style={{fontSize:10}}>← BACK</button>
          <div style={{display:'flex',gap:8}}>
            <button className="A-btn cyan" onClick={generateBrief} disabled={briefLoading} style={{fontSize:10}}>{briefLoading ? 'GENERATING...' : 'GENERATE BRIEF'}</button>
            <button className="A-btn signal" onClick={saveCreator} disabled={saving}>{saving ? 'SAVING...' : 'SAVE'}</button>
          </div>
        </div>

        <div className="A-section-head">CREATOR DETAILS</div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,marginBottom:24}}>
          <div>
            <label className="A-label">Name</label>
            <input className="A-input" value={editCreator.name} onChange={function(e){updateField('name',e.target.value)}} placeholder="Creator name" />
          </div>
          <div>
            <label className="A-label">Handle</label>
            <input className="A-input" value={editCreator.handle} onChange={function(e){updateField('handle',e.target.value)}} placeholder="@handle" />
          </div>
          <div>
            <label className="A-label">Platform</label>
            <select className="A-select" value={editCreator.platform} onChange={function(e){updateField('platform',e.target.value)}}>
              <option value="instagram">Instagram</option>
              <option value="tiktok">TikTok</option>
              <option value="youtube">YouTube</option>
              <option value="twitter">Twitter/X</option>
              <option value="other">Other</option>
            </select>
          </div>
          <div>
            <label className="A-label">Audience Size</label>
            <input className="A-input" value={editCreator.audience_size} onChange={function(e){updateField('audience_size',e.target.value)}} placeholder="e.g., 50K" />
          </div>
          <div style={{gridColumn:'1/-1'}}>
            <label className="A-label">Audience Demo</label>
            <input className="A-input" value={editCreator.audience_demo} onChange={function(e){updateField('audience_demo',e.target.value)}} placeholder="e.g., 18-34 London, pop culture fans" />
          </div>
          <div style={{gridColumn:'1/-1'}}>
            <label className="A-label">Content Style</label>
            <input className="A-input" value={editCreator.content_style} onChange={function(e){updateField('content_style',e.target.value)}} placeholder="e.g., unhinged commentary, reaction videos" />
          </div>
          <div style={{gridColumn:'1/-1'}}>
            <label className="A-label">Notes</label>
            <textarea className="A-textarea" rows="2" value={editCreator.notes} onChange={function(e){updateField('notes',e.target.value)}} placeholder="Internal notes..." />
          </div>
        </div>

        {/* Stats */}
        <div className="AN-grid" style={{marginBottom:24}}>
          <div className="AN-card"><div className="AN-card-val">{stats.assigned}</div><div className="AN-card-label">ASSIGNED DROPS</div></div>
          <div className="AN-card"><div className="AN-card-val">{stats.published}</div><div className="AN-card-label">PUBLISHED</div></div>
          <div className="AN-card"><div className="AN-card-val" style={{color:'#4ade80'}}>{stats.fireRate}%</div><div className="AN-card-label">FIRE RATE</div></div>
        </div>

        {/* Brief result (Feature 3) */}
        {briefResult && (
          <div style={{marginBottom:24,padding:16,border:'1px solid var(--border)',background:'var(--surface-01)'}}>
            <div className="A-section-head">GENERATED BRIEF</div>
            {briefResult.content && (
              <div style={{marginBottom:12}}>
                <span className="A-label">CONTENT</span>
                <div style={{fontSize:12,color:'#fff',whiteSpace:'pre-wrap',lineHeight:1.6,cursor:'pointer',padding:8,background:'var(--surface-2)',border:'1px solid var(--border)'}} onClick={function(){copyToClipboard(briefResult.content)}}>{briefResult.content}</div>
              </div>
            )}
            {briefResult.brief_sections && (function() {
              var sections = briefResult.brief_sections;
              var labels = {brand_context:'BRAND CONTEXT',campaign_objective:'CAMPAIGN OBJECTIVE',deliverables:'DELIVERABLES',creative_direction:'CREATIVE DIRECTION',talking_points:'TALKING POINTS',exclusions:'EXCLUSIONS',usage_rights:'USAGE RIGHTS',timeline:'TIMELINE'};
              return React.createElement('div', null,
                Object.keys(labels).map(function(key) {
                  if (!sections[key]) return null;
                  var val = Array.isArray(sections[key]) ? sections[key].join('\n') : sections[key];
                  return React.createElement('div', {key:key, style:{marginBottom:12}},
                    React.createElement('span', {className:'A-label'}, labels[key]),
                    React.createElement('div', {style:{fontSize:12,color:'#fff',whiteSpace:'pre-wrap',lineHeight:1.5,cursor:'pointer',padding:8,background:'var(--surface-2)',border:'1px solid var(--border)'},onClick:function(){copyToClipboard(val)}}, val)
                  );
                })
              );
            })()}
            <div style={{fontSize:9,color:'var(--text-dim)',marginTop:8}}>Click any section to copy</div>
          </div>
        )}

        {/* Assigned drops */}
        <div className="A-section-head">ASSIGNED DROPS ({assignedDrops.length})</div>
        {assignedDrops.length === 0 && <div style={{padding:16,color:'var(--text-dim)',fontSize:11}}>No drops assigned yet.</div>}
        {assignedDrops.map(function(d) {
          var perfColor = d.performance === 'fire' ? '#4ade80' : d.performance === 'flop' ? '#ef4444' : d.performance === 'mid' ? '#9ca3af' : 'var(--text-dim)';
          return (
            <div key={d.id} style={{display:'flex',alignItems:'center',gap:12,padding:'8px 0',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:11,color:'#fff',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>"{d.line || '—'}"</div>
                <div style={{fontSize:10,color:'var(--text-sec)'}}>{d.source || ''} · {d.status} {d.performance ? '· ' + d.performance : ''}</div>
              </div>
              <span style={{fontSize:10,color:perfColor,fontWeight:700}}>{d.performance ? d.performance.toUpperCase() : 'UNRATED'}</span>
              <button className="A-btn" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){unassignDrop(d.id)}}>REMOVE</button>
            </div>
          );
        })}

        {/* Drop plan builder */}
        <div style={{marginTop:24,padding:16,border:'1px solid var(--border)',background:'var(--surface-01)'}}>
          <div className="A-section-head">BUILD DROP PLAN</div>
          <div style={{fontSize:10,color:'var(--text-dim)',marginBottom:12}}>Auto-generate drops tailored to this creator's audience, with performance signal and auto-assignment.</div>
          <div style={{display:'flex',gap:12,alignItems:'end',flexWrap:'wrap'}}>
            <div>
              <label className="A-label">Count</label>
              <input className="A-input" type="number" min="5" max="30" value={dropPlanCount} onChange={function(e){setDropPlanCount(Math.max(5,Math.min(30,parseInt(e.target.value)||15)))}} style={{width:60}} />
            </div>
            <label style={{display:'flex',alignItems:'center',gap:4,fontSize:10,color:'var(--text-sec)',cursor:'pointer'}}><input type="checkbox" checked={dropAutoSchedule} onChange={function(e){setDropAutoSchedule(e.target.checked)}} /> AUTO-SCHEDULE</label>
            <button className="A-btn signal" onClick={buildDropPlan} disabled={dropPlanLoading || !library} style={{fontSize:10}}>{dropPlanLoading ? 'GENERATING...' : 'BUILD DROP PLAN'}</button>
          </div>

          {dropPlan && dropPlan.length > 0 && (
            <div style={{marginTop:16}}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                <span style={{fontSize:11,color:'var(--text-sec)'}}>{dropPlan.length} drops</span>
                <button className="A-btn signal" style={{fontSize:10}} onClick={acceptDropPlanAll}>{dropAutoSchedule ? 'QUEUE ALL' : 'CREATE ALL'}</button>
              </div>
              {dropPlan.map(function(item, i) {
                return (
                  <div key={i} style={{padding:'8px 0',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:10}}>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:12,color:'#fff',marginBottom:3}}>"{item.line}"</div>
                        <div style={{fontSize:10,color:'var(--text-sec)',marginBottom:3}}>{item.source} — {item.medium}</div>
                        <div style={{fontSize:11,color:'var(--cyan)',marginBottom:2}}>{item.situation}</div>
                        <div style={{fontSize:10,color:'var(--text-dim)'}}>signoff: "{item.signoff}"</div>
                      </div>
                      <button className="A-btn danger" style={{fontSize:9,padding:'2px 8px',flexShrink:0}} onClick={function(){rejectDropPlanItem(i)}}>CUT</button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
          {dropPlan && dropPlan.length === 0 && (
            <div style={{marginTop:12,fontSize:11,color:'#4ade80'}}>All drops sent — check the DROPS tab.</div>
          )}
        </div>

        {/* Assign drops */}
        <div style={{marginTop:24}}>
          <div className="A-section-head">ASSIGN DROPS</div>
          <input className="A-input" value={assignSearch} onChange={function(e){setAssignSearch(e.target.value)}} placeholder="Search drops to assign..." style={{marginBottom:8}} />

          {/* Feature 1: Suggested drops when search is empty */}
          {!assignSearch.trim() && suggestedDrops.length > 0 && (
            <div>
              <div style={{fontSize:9,color:'var(--gold)',letterSpacing:1,marginBottom:6,marginTop:8}}>SUGGESTED</div>
              {suggestedDrops.map(function(item) {
                var d = item.drop;
                return (
                  <div key={d.id} style={{display:'flex',alignItems:'center',gap:12,padding:'6px 0',borderBottom:'1px solid rgba(42,42,42,.3)'}}>
                    <div style={{flex:1,fontSize:11,color:'var(--text-sec)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>"{d.line || '—'}" — {d.source || ''}</div>
                    <span style={{fontSize:9,color:'var(--gold)',padding:'1px 6px',border:'1px solid var(--gold)',flexShrink:0}}>{item.score}pt</span>
                    <button className="A-btn cyan" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){assignDrop(d.id)}}>ASSIGN</button>
                  </div>
                );
              })}
            </div>
          )}

          {/* Search results */}
          {availableDrops.map(function(d) {
            return (
              <div key={d.id} style={{display:'flex',alignItems:'center',gap:12,padding:'6px 0',borderBottom:'1px solid rgba(42,42,42,.3)'}}>
                <div style={{flex:1,fontSize:11,color:'var(--text-sec)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>"{d.line || '—'}" — {d.source || ''}</div>
                <button className="A-btn cyan" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){assignDrop(d.id)}}>ASSIGN</button>
              </div>
            );
          })}
        </div>

        {/* Feature 4e: Hot Seat Engagement */}
        <div style={{marginTop:32}}>
          <div className="A-section-head">HOT SEAT ENGAGEMENT</div>
          {engagementStats ? (
            <div>
              <div className="AN-grid" style={{marginBottom:12}}>
                <div className="AN-card"><div className="AN-card-val">{engagementStats.totalSessions}</div><div className="AN-card-label">SESSIONS</div></div>
                <div className="AN-card"><div className="AN-card-val">{engagementStats.completionRate}%</div><div className="AN-card-label">COMPLETION</div></div>
                <div className="AN-card"><div className="AN-card-val" style={{color:'var(--cyan)'}}>{engagementStats.avgScore}%</div><div className="AN-card-label">AVG SCORE</div></div>
                <div className="AN-card"><div className="AN-card-val" style={{fontSize:14}}>{engagementStats.lastPlayed}</div><div className="AN-card-label">LAST PLAYED</div></div>
              </div>
            </div>
          ) : (
            <div style={{padding:12,color:'var(--text-dim)',fontSize:11}}>No engagement data yet.</div>
          )}
          <div style={{display:'flex',gap:8,marginTop:8}}>
            <button className="A-btn" style={{fontSize:10}} onClick={function(){
              var link = 'https://lineconic.live/hotseat?c=' + encodeURIComponent(editCreator.id) + '&n=' + encodeURIComponent(editCreator.handle || editCreator.name);
              copyToClipboard(link);
            }}>COPY HOT SEAT LINK</button>
          </div>

          {/* Deck builder */}
          <div style={{marginTop:16,padding:16,border:'1px solid var(--border)',background:'var(--surface-01)'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
              <div className="A-section-head" style={{marginBottom:0}}>BUILD HOT SEAT DECK</div>
            </div>
            <div style={{fontSize:10,color:'var(--text-dim)',marginBottom:12}}>Auto-generate cards tailored to this creator's audience and auto-tag with their ID for tracking.</div>
            <div style={{display:'flex',gap:12,alignItems:'end'}}>
              <div>
                <label className="A-label">Cards</label>
                <input className="A-input" type="number" min="5" max="30" value={deckCount} onChange={function(e){setDeckCount(Math.max(5,Math.min(30,parseInt(e.target.value)||10)))}} style={{width:60}} />
              </div>
              <button className="A-btn signal" onClick={buildHotSeatDeck} disabled={deckLoading} style={{fontSize:10}}>{deckLoading ? 'BUILDING...' : 'BUILD DECK'}</button>
            </div>

            {deckPlan && deckPlan.length > 0 && (
              <div style={{marginTop:16}}>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:8}}>
                  <span style={{fontSize:11,color:'var(--text-sec)'}}>{deckPlan.length} cards</span>
                  <button className="A-btn signal" style={{fontSize:10}} onClick={acceptAllDeckCards}>ACCEPT ALL</button>
                </div>
                {deckPlan.map(function(item, i) {
                  return (
                    <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'6px 0',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:11,color:'#fff',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{item.line}</div>
                        <div style={{fontSize:10,color:'var(--text-sec)'}}>{item.source} · {item.category}</div>
                      </div>
                      <button className="A-btn cyan" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){acceptDeckCard(item)}}>ACCEPT</button>
                      <button className="A-btn danger" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){rejectDeckCard(i)}}>REJECT</button>
                    </div>
                  );
                })}
              </div>
            )}
            {deckPlan && deckPlan.length === 0 && (
              <div style={{marginTop:12,fontSize:11,color:'#4ade80'}}>All cards accepted — deck is ready. Hot seat link copied above will use these cards.</div>
            )}
          </div>
        </div>

        {/* Feature 5: Filter Campaigns */}
        <div style={{marginTop:32}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <div className="A-section-head" style={{marginBottom:0}}>FILTER CAMPAIGNS</div>
            <button className="A-btn signal" style={{fontSize:9}} onClick={newFilterForm}>+ NEW FILTER</button>
          </div>

          {filterSummary.total > 0 && (
            <div className="AN-grid" style={{marginTop:12,marginBottom:12}}>
              <div className="AN-card"><div className="AN-card-val">{filterSummary.impressions.toLocaleString()}</div><div className="AN-card-label">TOTAL IMPRESSIONS</div></div>
              <div className="AN-card"><div className="AN-card-val">{filterSummary.uses.toLocaleString()}</div><div className="AN-card-label">TOTAL USES</div></div>
              <div className="AN-card"><div className="AN-card-val">{filterSummary.saves.toLocaleString()}</div><div className="AN-card-label">TOTAL SAVES</div></div>
            </div>
          )}

          {/* Filter form */}
          {filterForm && (
            <div style={{padding:16,border:'1px solid var(--border)',background:'var(--surface-01)',marginTop:12,marginBottom:12}}>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
                <div style={{gridColumn:'1/-1'}}>
                  <label className="A-label">Filter Name</label>
                  <input className="A-input" value={filterForm.filter_name} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{filter_name:e.target.value})})}} placeholder="e.g., Lineconic Quiz Face" />
                </div>
                <div>
                  <label className="A-label">Platform</label>
                  <select className="A-select" value={filterForm.platform} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{platform:e.target.value})})}}>
                    <option value="instagram">Instagram</option>
                    <option value="tiktok">TikTok</option>
                    <option value="snapchat">Snapchat</option>
                    <option value="other">Other</option>
                  </select>
                </div>
                <div>
                  <label className="A-label">Impressions</label>
                  <input className="A-input" type="number" min="0" value={filterForm.impressions} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{impressions:parseInt(e.target.value)||0})})}} />
                </div>
                <div>
                  <label className="A-label">Uses</label>
                  <input className="A-input" type="number" min="0" value={filterForm.uses} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{uses:parseInt(e.target.value)||0})})}} />
                </div>
                <div>
                  <label className="A-label">Saves</label>
                  <input className="A-input" type="number" min="0" value={filterForm.saves} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{saves:parseInt(e.target.value)||0})})}} />
                </div>
                <div>
                  <label className="A-label">Start Date</label>
                  <input className="A-input" type="date" value={filterForm.date_start} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{date_start:e.target.value})})}} />
                </div>
                <div>
                  <label className="A-label">End Date</label>
                  <input className="A-input" type="date" value={filterForm.date_end} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{date_end:e.target.value})})}} />
                </div>
                <div style={{gridColumn:'1/-1'}}>
                  <label className="A-label">Notes</label>
                  <input className="A-input" value={filterForm.notes} onChange={function(e){setFilterForm(function(p){return Object.assign({},p,{notes:e.target.value})})}} placeholder="Optional notes..." />
                </div>
              </div>
              <div style={{display:'flex',gap:8,marginTop:12}}>
                <button className="A-btn signal" onClick={saveFilter} disabled={filterSaving}>{filterSaving ? 'SAVING...' : 'SAVE FILTER'}</button>
                <button className="A-btn" onClick={function(){setFilterForm(null)}}>CANCEL</button>
              </div>
            </div>
          )}

          {/* Filter list */}
          {filtersArray.length === 0 && !filterForm && <div style={{padding:12,color:'var(--text-dim)',fontSize:11}}>No filter campaigns yet.</div>}
          {filtersArray.map(function(f) {
            return (
              <div key={f.id} style={{display:'flex',alignItems:'center',gap:12,padding:'8px 0',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:11,color:'#fff'}}>{f.filter_name}</div>
                  <div style={{fontSize:10,color:'var(--text-sec)'}}>{f.platform} · {f.date_start || '—'} to {f.date_end || '—'}</div>
                </div>
                <div style={{display:'flex',gap:12,fontSize:10,color:'var(--text-dim)',flexShrink:0}}>
                  <span>{(f.impressions || 0).toLocaleString()} imp</span>
                  <span>{(f.uses || 0).toLocaleString()} uses</span>
                  <span>{(f.saves || 0).toLocaleString()} saves</span>
                </div>
                <button className="A-btn" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){setFilterForm(Object.assign({},f))}}>EDIT</button>
                <button className="A-btn danger" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){deleteFilter(f.id)}}>DEL</button>
              </div>
            );
          })}
        </div>

        {/* Delete */}
        <div style={{marginTop:40,borderTop:'1px solid var(--border)',paddingTop:16}}>
          {!deleteConfirm ? (
            <button className="A-btn danger" style={{fontSize:10}} onClick={function(){setDeleteConfirm(true)}}>DELETE CREATOR</button>
          ) : (
            <div style={{display:'flex',gap:8,alignItems:'center'}}>
              <span style={{fontSize:10,color:'#ef4444'}}>Confirm delete?</span>
              <button className="A-btn danger" style={{fontSize:10}} onClick={deleteCreator}>YES, DELETE</button>
              <button className="A-btn" style={{fontSize:10}} onClick={function(){setDeleteConfirm(false)}}>CANCEL</button>
            </div>
          )}
        </div>
      </div>
    );
  }

  // List view
  return (
    <div style={{padding:24,overflow:'auto',height:'100%'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:16}}>
        <div className="A-section-head" style={{marginBottom:0}}>CREATORS</div>
        <button className="A-btn signal" onClick={newCreator}>+ NEW CREATOR</button>
      </div>

      <input className="A-input" value={search} onChange={function(e){setSearch(e.target.value)}} placeholder="Search creators..." style={{marginBottom:16}} />

      {creatorsArray.length === 0 && <div style={{padding:24,color:'var(--text-dim)',fontSize:11,textAlign:'center'}}>No creators yet. Add your first creator.</div>}

      {creatorsArray.map(function(c) {
        var stats = getCreatorStats(c.id);
        return (
          <div key={c.id} onClick={function(){openCreator(c)}} style={{
            display:'flex',alignItems:'center',gap:16,padding:'12px 16px',borderBottom:'1px solid rgba(42,42,42,.4)',cursor:'pointer',
            transition:'background .1s'
          }} onMouseOver={function(e){e.currentTarget.style.background='var(--surface-02)'}} onMouseOut={function(e){e.currentTarget.style.background='transparent'}}>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:13,color:'#fff',fontWeight:700}}>{c.name || '—'}</div>
              <div style={{fontSize:10,color:'var(--text-sec)',marginTop:2}}>
                {c.handle || ''} · {c.platform || ''} {c.audience_size ? '· ' + c.audience_size : ''}
              </div>
            </div>
            <div style={{display:'flex',gap:16,fontSize:10,color:'var(--text-dim)',flexShrink:0}}>
              <span>{stats.assigned} drops</span>
              <span style={{color:stats.fireRate > 50 ? '#4ade80' : 'var(--text-dim)'}}>{stats.fireRate}% fire</span>
            </div>
          </div>
        );
      })}

      {/* Creator leaderboard */}
      {creatorsArray.length >= 2 && (
        <div style={{marginTop:32}}>
          <div className="A-section-head">CREATOR LEADERBOARD</div>
          {creatorsArray
            .map(function(c) { var s = getCreatorStats(c.id); return { name: c.name, handle: c.handle, fire: s.fire, total: s.published, fireRate: s.fireRate }; })
            .filter(function(c) { return c.total >= 1; })
            .sort(function(a, b) { return b.fireRate - a.fireRate; })
            .map(function(c) {
              return (
                <div key={c.name} style={{display:'flex',alignItems:'center',gap:12,padding:'6px 0',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
                  <div style={{flex:1,fontSize:11,color:'#fff'}}>{c.name} <span style={{color:'var(--text-dim)'}}>{c.handle}</span></div>
                  <div style={{width:120}}>
                    <div className="AN-bar" style={{height:8}}>
                      <div style={{width:c.fireRate + '%',height:'100%',background:'#4ade80'}}></div>
                    </div>
                  </div>
                  <div style={{fontSize:10,color:'#4ade80',minWidth:40,textAlign:'right'}}>{c.fireRate}%</div>
                  <div style={{fontSize:9,color:'var(--text-dim)',minWidth:30,textAlign:'right'}}>{c.fire}/{c.total}</div>
                </div>
              );
            })
          }
        </div>
      )}
    </div>
  );
}