// ─── Unified Insights Module (with embedded Rate) ────────
// Combines performance analytics across drops + slips.
// Rate queue is embedded at the top. CSS prefix: IN-

function InsightsModule(props) {
  var db = props.db, showToast = props.showToast;
  var drops = props.drops || {};
  var slips = props.slips || {};
  var cards = props.cards;
  var creators = props.creators;

  var [filter, setFilter] = useState('all');

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

  // ─── Rate Section ──────────────────────────────────────
  var unrated = useMemo(function() {
    var items = [];
    dropsArray.forEach(function(d) {
      if (d.status === 'published' && !d.performance) items.push(Object.assign({}, d, { _type: 'drop' }));
    });
    slipsArray.forEach(function(s) {
      if (s.status === 'published' && !s.performance) items.push(Object.assign({}, s, { _type: 'slip' }));
    });
    items.sort(function(a, b) {
      var da = a.scheduled_date || (a.created_at ? a.created_at.toString() : '');
      var db2 = b.scheduled_date || (b.created_at ? b.created_at.toString() : '');
      return da.localeCompare(db2);
    });
    if (filter === 'drops') return items.filter(function(i) { return i._type === 'drop'; });
    if (filter === 'slips') return items.filter(function(i) { return i._type === 'slip'; });
    return items;
  }, [dropsArray, slipsArray, filter]);

  var hasOldUnrated = useMemo(function() {
    var sevenDays = 7 * 86400000;
    var now = Date.now();
    return unrated.some(function(d) {
      var dt = d.scheduled_date ? new Date(d.scheduled_date).getTime() : (typeof d.created_at === 'number' ? d.created_at : d.created_at ? new Date(d.created_at).getTime() : 0);
      return now - dt > sevenDays;
    });
  }, [unrated]);

  var [nudgeDismissed, setNudgeDismissed] = useState(false);

  function rate(item, rating) {
    var path = item._type === 'drop' ? 'drops/' : 'slips/';
    var updates = {};
    updates[path + item.id + '/performance'] = rating;
    updates[path + item.id + '/rated_at'] = new Date().toISOString();
    db.ref().update(updates).then(function() {
      var label = item._type === 'drop' ? (item.line || item.id) : (item.acronym || item.id);
      showToast(rating.toUpperCase() + ': ' + label.substring(0, 30));
    }).catch(function(e) { showToast('RATE FAILED: ' + e.message); });
  }

  // ─── Insights Metrics ─────────────────────────────────
  var metrics = useMemo(function() {
    var allItems = [];
    dropsArray.forEach(function(d) { allItems.push(Object.assign({}, d, { _type: 'drop' })); });
    slipsArray.forEach(function(s) { allItems.push(Object.assign({}, s, { _type: 'slip' })); });

    var filtered = allItems;
    if (filter === 'drops') filtered = allItems.filter(function(i) { return i._type === 'drop'; });
    if (filter === 'slips') filtered = allItems.filter(function(i) { return i._type === 'slip'; });

    var total = filtered.length;
    var published = filtered.filter(function(d) { return d.status === 'published'; });
    var fire = published.filter(function(d) { return d.performance === 'fire'; });
    var mid = published.filter(function(d) { return d.performance === 'mid'; });
    var flop = published.filter(function(d) { return d.performance === 'flop'; });
    var unratedCount = published.filter(function(d) { return !d.performance; });

    // Content type breakdown
    var dropCount = dropsArray.length;
    var slipCount = slipsArray.length;

    // Source leaderboard (merged)
    var sourceMap = {};
    published.forEach(function(d) {
      var src = d.source || 'Unknown';
      if (!sourceMap[src]) sourceMap[src] = { total: 0, fire: 0 };
      sourceMap[src].total++;
      if (d.performance === 'fire') sourceMap[src].fire++;
    });
    var sourceLeaderboard = Object.entries(sourceMap)
      .filter(function(e) { return e[1].total >= 2; })
      .map(function(e) { return { name: e[0], total: e[1].total, fire: e[1].fire, rate: Math.round(e[1].fire / e[1].total * 100) }; })
      .sort(function(a, b) { return b.rate - a.rate; });

    // Medium balance (combined, normalize slip 'film' → 'movie')
    var mediumMap = {};
    filtered.forEach(function(d) {
      var m = d.medium || 'unknown';
      if (m === 'film') m = 'movie';
      mediumMap[m] = (mediumMap[m] || 0) + 1;
    });
    var mediumBalance = Object.entries(mediumMap).map(function(e) {
      var pct = total > 0 ? Math.round(e[1] / total * 100) : 0;
      return { name: e[0], count: e[1], pct: pct, warn: pct > 60 };
    }).sort(function(a, b) { return b.count - a.count; });

    // Creator leaderboard (drops only)
    var creatorMap = {};
    dropsArray.filter(function(d) { return d.status === 'published'; }).forEach(function(d) {
      if (!d.creator_id || !creators || !creators[d.creator_id]) return;
      var cid = d.creator_id;
      if (!creatorMap[cid]) creatorMap[cid] = { name: creators[cid].name || cid, handle: creators[cid].handle || '', total: 0, fire: 0 };
      creatorMap[cid].total++;
      if (d.performance === 'fire') creatorMap[cid].fire++;
    });
    var creatorLeaderboard = Object.values(creatorMap)
      .filter(function(c) { return c.total >= 1; })
      .map(function(c) { return { name: c.name, handle: c.handle, total: c.total, fire: c.fire, rate: Math.round(c.fire / c.total * 100) }; })
      .sort(function(a, b) { return b.rate - a.rate; });

    // Content mix over time (last 8 weeks)
    var weekMap = {};
    var now = new Date();
    filtered.forEach(function(d) {
      var dt = d.scheduled_date ? new Date(d.scheduled_date + 'T00:00:00') : (d.created_at ? new Date(d.created_at) : null);
      if (!dt) return;
      var diffWeeks = Math.floor((now - dt) / (7 * 86400000));
      if (diffWeeks < 0 || diffWeeks > 7) return;
      var weekLabel = diffWeeks === 0 ? 'THIS WEEK' : diffWeeks + 'W AGO';
      if (!weekMap[weekLabel]) weekMap[weekLabel] = { drops: 0, slips: 0, order: diffWeeks };
      if (d._type === 'drop') weekMap[weekLabel].drops++;
      else weekMap[weekLabel].slips++;
    });
    var contentMix = Object.entries(weekMap)
      .map(function(e) { return { label: e[0], drops: e[1].drops, slips: e[1].slips, order: e[1].order }; })
      .sort(function(a, b) { return a.order - b.order; });

    // Stale references (drops only — cards not used in drops for 30+ days)
    var nowMs = Date.now();
    var thirtyDays = 30 * 86400000;
    var cardRefMap = {};
    dropsArray.forEach(function(d) {
      var ref = d.reference_id;
      if (!ref) return;
      var dt = d.scheduled_date ? new Date(d.scheduled_date).getTime() : (d.created_at ? new Date(d.created_at).getTime() : 0);
      if (!cardRefMap[ref] || dt > cardRefMap[ref]) cardRefMap[ref] = dt;
    });
    var staleRefs = [];
    var unusedRefs = [];
    if (cards) {
      Object.values(cards).forEach(function(c) {
        var lastUsed = cardRefMap[c.id];
        if (lastUsed === undefined) {
          unusedRefs.push({ id: c.id, answer: c.content && c.content.answer || c.id, source: c.source || '' });
        } else if (nowMs - lastUsed > thirtyDays) {
          var days = Math.floor((nowMs - lastUsed) / 86400000);
          staleRefs.push({ id: c.id, answer: c.content && c.content.answer || c.id, source: c.source || '', days: days });
        }
      });
    }
    staleRefs.sort(function(a, b) { return b.days - a.days; });

    return {
      total: total,
      published: published.length,
      fire: fire.length,
      mid: mid.length,
      flop: flop.length,
      unrated: unratedCount.length,
      firePct: published.length > 0 ? Math.round(fire.length / published.length * 100) : 0,
      midPct: published.length > 0 ? Math.round(mid.length / published.length * 100) : 0,
      flopPct: published.length > 0 ? Math.round(flop.length / published.length * 100) : 0,
      dropCount: dropCount,
      slipCount: slipCount,
      sourceLeaderboard: sourceLeaderboard,
      mediumBalance: mediumBalance,
      creatorLeaderboard: creatorLeaderboard,
      contentMix: contentMix,
      staleRefs: staleRefs.slice(0, 20),
      unusedRefs: unusedRefs.slice(0, 20)
    };
  }, [dropsArray, slipsArray, cards, creators, filter]);

  var [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  useEffect(function(){
    function onResize(){setIsMobile(window.innerWidth < 768)}
    window.addEventListener('resize', onResize);
    return function(){window.removeEventListener('resize', onResize)};
  },[]);

  return (
    <div style={{height:'100%',overflow:'auto',padding:isMobile?12:24}}>
      <div style={{maxWidth:900}}>

        {/* Filter bar */}
        <div style={{display:'flex',gap:6,marginBottom:20}}>
          {['all','drops','slips'].map(function(f) {
            return <div key={f} className={'A-chip' + (filter === f ? ' on' : '')} onClick={function(){setFilter(f)}}>{f.toUpperCase()}</div>;
          })}
        </div>

        {/* ─── Rate Section ─────────────────────────────── */}
        {unrated.length > 0 && (
          <div className="A-section">
            <div className="A-section-head">RATE ({unrated.length} UNRATED)</div>
            <div style={{fontSize:10,color:'var(--text-dim)',marginBottom:12,letterSpacing:.5}}>
              Rate published content — oldest first.
            </div>

            {hasOldUnrated && !nudgeDismissed && (
              <div style={{padding:'10px 16px',marginBottom:12,border:'1px solid var(--gold)',background:'rgba(255,215,0,.06)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                <span style={{fontSize:11,color:'var(--gold)',letterSpacing:.5}}>Unrated content older than 7 days — rate before the signal goes cold.</span>
                <button className="A-btn" style={{fontSize:9,padding:'2px 8px'}} onClick={function(){setNudgeDismissed(true)}}>DISMISS</button>
              </div>
            )}

            {unrated.map(function(item) {
              var label = item._type === 'drop' ? (item.line || '—') : (item.acronym || item.answer || '—');
              var truncLabel = label.length > 40 ? label.substring(0, 40) + '...' : label;
              var truncSource = (item.source || '').length > 25 ? item.source.substring(0, 25) + '...' : (item.source || '');
              var badge = item._type === 'drop' ? 'DROP' : 'SLIP';
              var badgeColor = item._type === 'drop' ? 'var(--signal)' : 'var(--cyan)';
              return (
                <div key={item.id} style={{display:'flex',alignItems:'center',gap:12,padding:'10px 12px',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
                  <span style={{fontSize:8,fontWeight:700,color:badgeColor,letterSpacing:'.08em',flexShrink:0,padding:'2px 6px',border:'1px solid ' + badgeColor}}>{badge}</span>
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:12,color:'#fff',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{item._type === 'drop' ? '"' + truncLabel + '"' : truncLabel}</div>
                    <div style={{fontSize:10,color:'var(--text-sec)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
                      {truncSource}
                      {item.scheduled_date && <span style={{marginLeft:8,color:'var(--text-dim)'}}>{item.scheduled_date}</span>}
                    </div>
                  </div>
                  <div style={{display:'flex',gap:6,flexShrink:0}}>
                    <button className="A-btn" style={{fontSize:10,padding:'6px 12px',borderColor:'#4ade80',color:'#4ade80',background:'rgba(74,222,128,.08)'}} onClick={function(){rate(item,'fire')}}>FIRE</button>
                    <button className="A-btn" style={{fontSize:10,padding:'6px 12px',borderColor:'#9ca3af',color:'#9ca3af',background:'rgba(156,163,175,.08)'}} onClick={function(){rate(item,'mid')}}>MID</button>
                    <button className="A-btn" style={{fontSize:10,padding:'6px 12px',borderColor:'#ef4444',color:'#ef4444',background:'rgba(239,68,68,.08)'}} onClick={function(){rate(item,'flop')}}>FLOP</button>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {unrated.length === 0 && (
          <div style={{padding:20,textAlign:'center',color:'#4ade80',fontSize:11,letterSpacing:1,marginBottom:24,border:'1px solid rgba(74,222,128,.2)'}}>ALL RATED</div>
        )}

        {/* ─── KPI Cards ────────────────────────────────── */}
        <div className="A-section-head">INSIGHTS</div>

        <div className="AN-grid" style={{marginBottom:24}}>
          <div className="AN-card"><div className="AN-card-val">{metrics.total}</div><div className="AN-card-label">TOTAL CONTENT</div></div>
          <div className="AN-card"><div className="AN-card-val">{metrics.published}</div><div className="AN-card-label">PUBLISHED</div></div>
          <div className="AN-card"><div className="AN-card-val" style={{color:'#4ade80'}}>{metrics.fire} <span style={{fontSize:12}}>({metrics.firePct}%)</span></div><div className="AN-card-label">FIRE RATE</div></div>
          <div className="AN-card"><div className="AN-card-val" style={{color:'#9ca3af'}}>{metrics.mid} <span style={{fontSize:12}}>({metrics.midPct}%)</span></div><div className="AN-card-label">MID RATE</div></div>
          <div className="AN-card"><div className="AN-card-val" style={{color:'#ef4444'}}>{metrics.flop} <span style={{fontSize:12}}>({metrics.flopPct}%)</span></div><div className="AN-card-label">FLOP RATE</div></div>
          <div className="AN-card"><div className="AN-card-val" style={{color:'var(--text-dim)'}}>{metrics.unrated}</div><div className="AN-card-label">UNRATED</div></div>
        </div>

        {/* Content type breakdown */}
        <div className="A-section">
          <div className="A-section-head">CONTENT TYPE BREAKDOWN</div>
          <div style={{display:'flex',gap:16}}>
            <div className="AN-card" style={{flex:1}}><div className="AN-card-val" style={{color:'var(--signal)'}}>{metrics.dropCount}</div><div className="AN-card-label">DROPS</div></div>
            <div className="AN-card" style={{flex:1}}><div className="AN-card-val" style={{color:'var(--cyan)'}}>{metrics.slipCount}</div><div className="AN-card-label">SLIPS</div></div>
          </div>
        </div>

        {/* Content mix over time */}
        {metrics.contentMix.length > 0 && (
          <div className="A-section">
            <div className="A-section-head">CONTENT MIX (LAST 8 WEEKS)</div>
            {metrics.contentMix.map(function(w) {
              var total = w.drops + w.slips;
              var dropPct = total > 0 ? Math.round(w.drops / total * 100) : 0;
              return (
                <div key={w.label} style={{display:'flex',alignItems:'center',gap:12,padding:'6px 0',borderBottom:'1px solid rgba(42,42,42,.4)'}}>
                  <div style={{width:80,fontSize:10,color:'var(--text-sec)',letterSpacing:'.04em'}}>{w.label}</div>
                  <div style={{flex:1}}>
                    <div className="AN-bar" style={{height:12,display:'flex',overflow:'hidden'}}>
                      <div style={{width:dropPct + '%',height:'100%',background:'var(--signal)'}}></div>
                      <div style={{width:(100 - dropPct) + '%',height:'100%',background:'var(--cyan)'}}></div>
                    </div>
                  </div>
                  <div style={{fontSize:9,color:'var(--text-dim)',minWidth:60,textAlign:'right'}}>{w.drops}D / {w.slips}S</div>
                </div>
              );
            })}
          </div>
        )}

        {/* Source leaderboard */}
        {metrics.sourceLeaderboard.length > 0 && (
          <div className="A-section">
            <div className="A-section-head">SOURCE LEADERBOARD <span style={{fontSize:9,color:'var(--text-dim)',fontWeight:400}}>(min 2 uses)</span></div>
            {metrics.sourceLeaderboard.map(function(s) {
              return (
                <div key={s.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'}}>{s.name}</div>
                  <div style={{width:120}}>
                    <div className="AN-bar" style={{height:8}}>
                      <div style={{width:s.rate + '%',height:'100%',background:'#4ade80'}}></div>
                    </div>
                  </div>
                  <div style={{fontSize:10,color:'#4ade80',minWidth:40,textAlign:'right'}}>{s.rate}%</div>
                  <div style={{fontSize:9,color:'var(--text-dim)',minWidth:30,textAlign:'right'}}>{s.fire}/{s.total}</div>
                </div>
              );
            })}
          </div>
        )}

        {/* Medium balance */}
        <div className="A-section">
          <div className="A-section-head">MEDIUM BALANCE</div>
          {metrics.mediumBalance.map(function(m) {
            return (
              <div key={m.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:m.warn ? 'var(--signal)' : '#fff',textTransform:'uppercase'}}>{m.name}</div>
                <div style={{width:160}}>
                  <div className="AN-bar" style={{height:8}}>
                    <div style={{width:m.pct + '%',height:'100%',background:m.warn ? 'var(--signal)' : 'var(--cyan)'}}></div>
                  </div>
                </div>
                <div style={{fontSize:10,color:'var(--text-sec)',minWidth:50,textAlign:'right'}}>{m.pct}% ({m.count})</div>
              </div>
            );
          })}
        </div>

        {/* Creator leaderboard */}
        {metrics.creatorLeaderboard.length > 0 && (
          <div className="A-section">
            <div className="A-section-head">CREATOR LEADERBOARD <span style={{fontSize:9,color:'var(--text-dim)',fontWeight:400}}>(drops only — fire rate per creator)</span></div>
            {metrics.creatorLeaderboard.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.rate + '%',height:'100%',background:'#4ade80'}}></div>
                    </div>
                  </div>
                  <div style={{fontSize:10,color:'#4ade80',minWidth:40,textAlign:'right'}}>{c.rate}%</div>
                  <div style={{fontSize:9,color:'var(--text-dim)',minWidth:30,textAlign:'right'}}>{c.fire}/{c.total}</div>
                </div>
              );
            })}
          </div>
        )}

        {/* Stale references */}
        {metrics.staleRefs.length > 0 && (
          <div className="A-section">
            <div className="A-section-head">STALE REFERENCES <span style={{fontSize:9,color:'var(--text-dim)',fontWeight:400}}>(unused 30+ days)</span></div>
            {metrics.staleRefs.map(function(r) {
              return (
                <div key={r.id} style={{display:'flex',justifyContent:'space-between',padding:'4px 0',borderBottom:'1px solid rgba(42,42,42,.3)',fontSize:11}}>
                  <span style={{color:'#fff'}}>"{r.answer}" <span style={{color:'var(--text-dim)'}}>— {r.source}</span></span>
                  <span style={{color:'var(--signal)',fontSize:10}}>{r.days}d</span>
                </div>
              );
            })}
          </div>
        )}

        {/* Unused references */}
        {metrics.unusedRefs.length > 0 && (
          <div className="A-section">
            <div className="A-section-head">UNUSED REFERENCES <span style={{fontSize:9,color:'var(--text-dim)',fontWeight:400}}>(never in a drop)</span></div>
            {metrics.unusedRefs.map(function(r) {
              return (
                <div key={r.id} style={{display:'flex',justifyContent:'space-between',padding:'4px 0',borderBottom:'1px solid rgba(42,42,42,.3)',fontSize:11}}>
                  <span style={{color:'var(--text-sec)'}}>"{r.answer}" <span style={{color:'var(--text-dim)'}}>— {r.source}</span></span>
                </div>
              );
            })}
          </div>
        )}

      </div>
    </div>
  );
}