/* ==========================================================
   NewsNator — Page: Tools list & Tool detail
   ========================================================== */

function ToolsListPage() {
  // sort by mention count this week
  const sorted = [...TOOL_MENTIONS].sort((a,b) => b.count - a.count);
  return (
    <div className="page-enter" style={{padding:'56px 0 80px'}}>
      <div className="container">
        <div className="eyebrow mb-4">/ {t('nav_tools')}</div>
        <h1 className="title-xl" style={{marginBottom:14}}>
          {window.__lang === 'zh' ? '200+ 工具的提及矩阵' : 'The tool mention matrix'}
        </h1>
        <p className="lede" style={{maxWidth:'58ch', marginBottom: 40}}>
          {window.__lang === 'zh'
            ? '每个工具都按本周在 100 位创业者中的提及次数排序，并附 4 周走势 sparkline。'
            : 'Every tool ranked by how often it shows up in posts from the 100 builders we track this week — with a 4-week mention sparkline.'}
        </p>

        <div className="card" style={{padding:'4px 24px'}}>
          <div className="row-line mono faint" style={{gridTemplateColumns:'40px 1.6fr 1.2fr 90px 100px 1fr', fontSize:11, letterSpacing:'0.04em'}}>
            <span>#</span><span>TOOL</span><span>CATEGORY</span><span style={{textAlign:'right'}}>WEEK</span><span style={{textAlign:'right'}}>Δ</span><span style={{textAlign:'right'}}>TREND (4W)</span>
          </div>
          {sorted.map((item, i) => {
            const tool = toolByDomain(item.domain);
            const trend4 = [item.count - item.delta - 3, item.count - item.delta - 1, item.count - item.delta, item.count];
            return (
              <a key={item.domain} href={`/tools/${item.domain}`} className="row-line"
                 style={{gridTemplateColumns:'40px 1.6fr 1.2fr 90px 100px 1fr', textDecoration:'none', color:'var(--fg)'}}>
                <span className="mono faint" style={{fontSize:12}}>{String(i+1).padStart(2,'0')}</span>
                <span className="flex items-center gap-3">
                  <ToolIcon domain={item.domain} size={32}/>
                  <span style={{display:'flex', flexDirection:'column'}}>
                    <span style={{fontWeight:500, fontSize:14}}>{tool.name}</span>
                    <span className="mono faint" style={{fontSize:11}}>{tool.domain}</span>
                  </span>
                </span>
                <span className="soft" style={{fontSize:13}}>{tool.cat}</span>
                <span className="num mono" style={{textAlign:'right', fontSize:13, fontWeight:600}}>{item.count}</span>
                <span className="num mono" style={{textAlign:'right', fontSize:12, color: item.delta > 0 ? 'var(--positive)' : item.delta < 0 ? 'var(--negative)' : 'var(--fg-faint)'}}>
                  {item.delta > 0 ? '↑' : item.delta < 0 ? '↓' : '·'} {Math.abs(item.delta)}
                </span>
                <span style={{textAlign:'right'}}>
                  <Sparkline data={trend4} width={100} height={20} color={item.delta >= 0 ? 'var(--accent)' : 'var(--fg-muted)'}/>
                </span>
              </a>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function ToolDetailPage({ domain }) {
  const tool = toolByDomain(domain);
  const mention = TOOL_MENTIONS.find(m => m.domain === domain) || { count: 0, delta: 0 };
  const usedBy = MAKERS.filter(m => m.tools.includes(domain));
  const relatedEvents = EVENTS.filter(e => e.tools.includes(domain));

  // synthetic trend data
  const trend = [
    { d: 'W14', v: 12 }, { d: 'W15', v: 14 }, { d: 'W16', v: 13 },
    { d: 'W17', v: mention.count - mention.delta - 2 },
    { d: 'W18', v: mention.count - mention.delta },
    { d: 'W19', v: mention.count },
  ];

  return (
    <div className="page-enter">
      <section style={{borderBottom:'1px solid var(--border)', background:'var(--bg-elev)', padding:'56px 0'}}>
        <div className="container">
          <div className="eyebrow mb-4">
            <a href="/tools" style={{color:'var(--fg-muted)'}}>{t('nav_tools')}</a> / {tool.domain}
          </div>
          <div className="flex items-center gap-6">
            <ToolIcon domain={domain} size={48}/>
            <div style={{flex:1}}>
              <h1 className="title-xl">{tool.name}</h1>
              <div className="flex items-center gap-3 mono mt-2" style={{fontSize:13, color:'var(--fg-muted)'}}>
                <span>{tool.domain}</span>
                <span style={{color:'var(--fg-faint)'}}>·</span>
                <span>{tool.cat}</span>
                <span style={{color:'var(--fg-faint)'}}>·</span>
                <span>{t('tool_used_by', { n: usedBy.length })}</span>
              </div>
            </div>
            <a className="btn" href={`https://${tool.domain}`} target="_blank" rel="noopener">Visit {tool.domain} →</a>
          </div>
          <p className="lede mt-6" style={{maxWidth:'60ch'}}>{tool.desc}</p>
        </div>
      </section>

      <div className="container" style={{padding:'56px 32px 80px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:48}}>
          <div>
            <div className="section-head">
              <h2 className="title-lg">{t('tool_trend')}</h2>
              <span className="mono faint" style={{fontSize:11}}>6 weeks · mentions in builder posts</span>
            </div>
            <div className="card mb-8" style={{padding:'24px'}}>
              <LineChart data={trend} height={220}/>
            </div>

            <div className="section-head">
              <h2 className="title-lg">Recent events mentioning {tool.name}</h2>
              <span className="count">{relatedEvents.length}</span>
            </div>
            {relatedEvents.length === 0 ? (
              <div className="card" style={{padding:'40px', textAlign:'center', color:'var(--fg-muted)'}}>
                <span className="mono">No events this week mention {tool.name}.</span>
              </div>
            ) : (
              <div style={{display:'grid', gap:20}}>
                {relatedEvents.map(ev => <EventCard key={ev.id} event={ev}/>)}
              </div>
            )}
          </div>

          <aside>
            <div className="card" style={{padding:'20px', marginBottom:16}}>
              <div className="eyebrow mb-3">This week</div>
              <div className="num mono" style={{fontSize:36, fontWeight:600, color:'var(--accent)'}}>{mention.count}</div>
              <div className="mono faint" style={{fontSize:11, marginTop:4}}>mentions across {THIS_WEEK.metrics.totalEvents} events</div>
              <div className="hr mt-4 mb-3"/>
              <div className="flex items-center gap-2">
                <span className="mono faint" style={{fontSize:11}}>vs. last week</span>
                <span className="num mono" style={{fontSize:13, fontWeight:600, color: mention.delta > 0 ? 'var(--positive)' : mention.delta < 0 ? 'var(--negative)' : 'var(--fg-faint)'}}>
                  {mention.delta > 0 ? '↑' : mention.delta < 0 ? '↓' : '·'} {Math.abs(mention.delta)}
                </span>
              </div>
            </div>

            <div className="card" style={{padding:'20px'}}>
              <div className="eyebrow mb-3">{usedBy.length} builders using</div>
              {usedBy.map(m => (
                <a key={m.slug} href={`/makers/${m.slug}`} className="flex items-center gap-3"
                   style={{padding:'8px 0', borderTop:'1px solid var(--border-soft)', color:'var(--fg)'}}>
                  <Avatar maker={m} size={28}/>
                  <span style={{display:'flex', flexDirection:'column', minWidth:0}}>
                    <span style={{fontSize:13, fontWeight:500}}>{m.name}</span>
                    <span className="mono faint" style={{fontSize:10}}>{fmtMRR(m.totalMrr)} MRR</span>
                  </span>
                  <span className="grow"/>
                  <span style={{color:'var(--fg-faint)'}}>→</span>
                </a>
              ))}
            </div>
          </aside>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ToolsListPage, ToolDetailPage });