// trf-parts2.jsx — Traffic tab sections 4-6
const { HelpIcon: TrfHelpIcon2, HelpTitle: TrfHelpTitle2 } = window.OV2_UI || {};

/* ============== SECTION 4 — SEO ============== */
function TrfSeo({ lang }) {
  const t = window.TRF_T[lang];
  const help = window.TRF_HELP[lang];
  const k = window.TRF.seoKpi;

  return (
    <div className="trf-block">
      <div className="trf-block-head">
        <h2 className="trf-block-title">{t.seoTitle}</h2>
      </div>

      {/* KPIs */}
      <div className="trf-seo-kpis">
        <div className="trf-snap-card">
          <div className="trf-snap-label">
            <span>{t.seoKpi.imp}</span>
            {TrfHelpIcon2 && <TrfHelpIcon2 help={help.imp} />}
          </div>
          <div className="trf-snap-value">{fmtTrf(k.imp.value)}</div>
          <div className={`trf-snap-delta ${k.imp.delta >= 0 ? 'up' : 'down'}`}>{k.imp.delta >= 0 ? '↑' : '↓'} {Math.abs(k.imp.delta).toFixed(1)}%</div>
        </div>
        <div className="trf-snap-card">
          <div className="trf-snap-label">
            <span>{t.seoKpi.clk}</span>
            {TrfHelpIcon2 && <TrfHelpIcon2 help={help.clk} />}
          </div>
          <div className="trf-snap-value">{fmtTrf(k.clk.value)}</div>
          <div className={`trf-snap-delta ${k.clk.delta >= 0 ? 'up' : 'down'}`}>{k.clk.delta >= 0 ? '↑' : '↓'} {Math.abs(k.clk.delta).toFixed(1)}%</div>
        </div>
        <div className="trf-snap-card">
          <div className="trf-snap-label">
            <span>{t.seoKpi.ctr}</span>
            {TrfHelpIcon2 && <TrfHelpIcon2 help={help.ctr} />}
          </div>
          <div className="trf-snap-value">{k.ctr.value.toFixed(2)}%</div>
          <div className={`trf-snap-delta ${k.ctr.delta >= 0 ? 'up' : 'down'}`}>{k.ctr.delta >= 0 ? '↑' : '↓'} {Math.abs(k.ctr.delta).toFixed(2)}pp</div>
        </div>
        <div className="trf-snap-card">
          <div className="trf-snap-label">
            <span>{t.seoKpi.pos}</span>
            {TrfHelpIcon2 && <TrfHelpIcon2 help={help.pos} />}
          </div>
          <div className="trf-snap-value">{k.pos.value.toFixed(1)}</div>
          <div className={`trf-snap-delta ${k.pos.delta < 0 ? 'up' : 'down'}`}>{k.pos.delta < 0 ? '↑' : '↓'} {Math.abs(k.pos.delta).toFixed(1)}</div>
        </div>
      </div>

      {/* Queries table */}
      <div className="trf-card">
        <div className="trf-card-head">
          {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.seoQueries}>{t.seoQueries}</TrfHelpTitle2> : <span className="trf-card-title">{t.seoQueries}</span>}
        </div>
        <table className="trf-table">
          <thead>
            <tr>
              <th>{t.seoQTbl.q}</th>
              <th className="num">{t.seoQTbl.i}</th>
              <th className="num">{t.seoQTbl.c}</th>
              <th className="num">{t.seoQTbl.ctr}</th>
              <th className="num">{t.seoQTbl.pos}</th>
              <th className="num">{t.seoQTbl.tr}</th>
            </tr>
          </thead>
          <tbody>
            {window.TRF.seoQueries.map(q => (
              <tr key={q.q}>
                <td>{q.q}</td>
                <td className="num">{fmtTrf(q.i)}</td>
                <td className="num">{fmtTrf(q.c)}</td>
                <td className="num">{q.ctr.toFixed(2)}%</td>
                <td className="num">
                  <span className={`trf-pos-badge ${q.pos <= 5 ? 'good' : q.pos <= 10 ? 'mid' : 'low'}`}>{q.pos.toFixed(1)}</span>
                </td>
                <td className="num">
                  <span className={`trf-trend ${q.tr}`}>
                    {q.tr === 'up' ? '↗' : q.tr === 'down' ? '↘' : '→'} {q.delta !== 0 ? (q.delta > 0 ? '+' : '') + q.delta : ''}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Movers + Landing + Coverage */}
      <div className="trf-3col">
        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.seoMovers}>{t.seoMovers}</TrfHelpTitle2> : <span className="trf-card-title">{t.seoMovers}</span>}
          </div>
          <div className="trf-movers">
            <div className="trf-movers-section">
              <div className="trf-movers-h pos">↑ Winners</div>
              {window.TRF.seoMovers.winners.map((m, i) => (
                <div key={i} className="trf-mover-row">
                  <div className="trf-mover-q">{m.q}</div>
                  <div className="trf-mover-stats">
                    <span className="trf-mover-from">{m.from.toFixed(1)}</span>
                    <span className="trf-mover-arrow">→</span>
                    <span className="trf-mover-to pos">{m.to.toFixed(1)}</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="trf-movers-section">
              <div className="trf-movers-h neg">↓ Losers</div>
              {window.TRF.seoMovers.losers.map((m, i) => (
                <div key={i} className="trf-mover-row">
                  <div className="trf-mover-q">{m.q}</div>
                  <div className="trf-mover-stats">
                    <span className="trf-mover-from">{m.from.toFixed(1)}</span>
                    <span className="trf-mover-arrow">→</span>
                    <span className="trf-mover-to neg">{m.to.toFixed(1)}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.seoLanding}>{t.seoLanding}</TrfHelpTitle2> : <span className="trf-card-title">{t.seoLanding}</span>}
          </div>
          <table className="trf-table mini">
            <thead>
              <tr><th>URL</th><th className="num">Clicks</th><th className="num">CTR</th><th className="num">Pos</th></tr>
            </thead>
            <tbody>
              {window.TRF.seoLanding.map(l => (
                <tr key={l.url}>
                  <td><code className="trf-url">{l.url}</code></td>
                  <td className="num">{fmtTrf(l.c)}</td>
                  <td className="num">{l.ctr.toFixed(1)}%</td>
                  <td className="num">{l.pos.toFixed(1)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.seoCoverage}>{t.seoCoverage}</TrfHelpTitle2> : <span className="trf-card-title">{t.seoCoverage}</span>}
          </div>
          <TrfCoverageDonut data={window.TRF.coverage} lang={lang} />
        </div>
      </div>
    </div>
  );
}

function TrfCoverageDonut({ data, lang }) {
  const total = data.breakdown.reduce((s, b) => s + b.n, 0);
  const colors = { ok: '#10B981', warn: '#F59E0B', err: '#EF4444' };
  const r = 56, c = 70, sw = 16;
  const circ = 2 * Math.PI * r;
  let offset = 0;
  return (
    <div className="trf-cov">
      <svg viewBox="0 0 140 140" className="trf-cov-svg">
        <circle cx={c} cy={c} r={r} fill="none" stroke="var(--surface-alt)" strokeWidth={sw} />
        {data.breakdown.map((b, i) => {
          const len = (b.n / total) * circ;
          const dasharray = `${len} ${circ - len}`;
          const dashoffset = -offset;
          offset += len;
          return (
            <circle
              key={i}
              cx={c} cy={c} r={r}
              fill="none"
              stroke={colors[b.kind]}
              strokeWidth={sw}
              strokeDasharray={dasharray}
              strokeDashoffset={dashoffset}
              transform={`rotate(-90 ${c} ${c})`}
            />
          );
        })}
        <text x={c} y={c - 4} textAnchor="middle" fontSize="22" fontWeight="600" fill="var(--text)">{data.indexed}</text>
        <text x={c} y={c + 14} textAnchor="middle" fontSize="10" fill="var(--text-3)">indexed</text>
      </svg>
      <div className="trf-cov-list">
        {data.breakdown.map((b, i) => (
          <div key={i} className="trf-cov-row">
            <span className="trf-dot" style={{ background: colors[b.kind] }} />
            <span className="trf-cov-r">{b.reason}</span>
            <span className="trf-cov-n">{b.n}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============== SECTION 5 — Funnel ============== */
function TrfFunnel({ state, lang }) {
  const t = window.TRF_T[lang];
  const help = window.TRF_HELP[lang];
  const rows = window.TRF.funnel[state] || window.TRF.funnel.default;
  const max = rows[0].value;
  return (
    <div className="trf-block">
      <div className="trf-block-head">
        <h2 className="trf-block-title">{t.funnelTitle}</h2>
      </div>

      <div className="trf-card">
        <div className="trf-card-head">
          {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.funnel}>{t.funnelTitle}</TrfHelpTitle2> : <span className="trf-card-title">{t.funnelTitle}</span>}
        </div>
        <div className="trf-funnel">
          {rows.map((r, i) => {
            const w = (r.value / max) * 100;
            return (
              <div key={r.step} className={`trf-fn-row ${r.alert ? 'alert' : ''}`}>
                <div className="trf-fn-step">
                  <span className="trf-fn-num">{i + 1}</span>
                  <span className="trf-fn-lbl">{r.step}</span>
                </div>
                <div className="trf-fn-bar-wrap">
                  <div className="trf-fn-bar" style={{ width: `${w}%` }}>
                    <span className="trf-fn-val">{fmtTrf(r.value)}</span>
                  </div>
                </div>
                <div className="trf-fn-cr">{r.cr.toFixed(2)}%</div>
                {i > 0 && <div className="trf-fn-drop">−{r.dropPct.toFixed(1)}%</div>}
              </div>
            );
          })}
        </div>
      </div>

      <div className="trf-2col">
        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.funnelDevice}>{t.funnelByDevice}</TrfHelpTitle2> : <span className="trf-card-title">{t.funnelByDevice}</span>}
          </div>
          <div className="trf-dev-funnel">
            {window.TRF.funnelByDevice.map((d, i) => (
              <div key={i} className="trf-dev-row">
                <div className="trf-dev-name">{d.dev}</div>
                <div className="trf-dev-bar">
                  <div className="trf-dev-fill" style={{ width: `${d.cr / 5 * 100}%` }} />
                  <span className="trf-dev-val">{d.cr.toFixed(2)}%</span>
                </div>
                <div className="trf-dev-sessions">{fmtTrf(d.sessions)} sess.</div>
              </div>
            ))}
          </div>
        </div>

        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.funnelChannel}>{t.funnelByChannel}</TrfHelpTitle2> : <span className="trf-card-title">{t.funnelByChannel}</span>}
          </div>
          <div className="trf-cr-bars">
            {window.TRF.crByChannel.map((c, i) => {
              const max = Math.max(...window.TRF.crByChannel.map(x => x.cr));
              return (
                <div key={i} className="trf-cr-row">
                  <div className="trf-cr-lbl">{c.ch}</div>
                  <div className="trf-cr-bar">
                    <div className="trf-cr-fill" style={{ width: `${c.cr / max * 100}%` }} />
                  </div>
                  <div className="trf-cr-val">{c.cr.toFixed(2)}%</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============== SECTION 6 — Tech ============== */
function TrfTech({ lang }) {
  const t = window.TRF_T[lang];
  const help = window.TRF_HELP[lang];
  const cwv = window.TRF.cwv;

  const cwvStatus = (s) => s === 'good' ? 'pos' : s === 'needs' ? 'mid' : 'neg';
  const cwvLabel = (s) => s === 'good' ? 'Good' : s === 'needs' ? 'Needs work' : 'Poor';

  return (
    <div className="trf-block">
      <div className="trf-block-head">
        <h2 className="trf-block-title">{t.techTitle}</h2>
      </div>

      {/* Core Web Vitals */}
      <div className="trf-card">
        <div className="trf-card-head">
          {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.cwv}>{t.cwv}</TrfHelpTitle2> : <span className="trf-card-title">{t.cwv}</span>}
        </div>
        <div className="trf-cwv-grid">
          {['lcp', 'inp', 'cls'].map(k => {
            const v = cwv[k];
            const pct = Math.min((v.value / v.target) * 100, 100);
            return (
              <div key={k} className={`trf-cwv-card ${cwvStatus(v.status)}`}>
                <div className="trf-cwv-head">
                  <span className="trf-cwv-name">{t.cwvNames[k]}</span>
                  {TrfHelpIcon2 && <TrfHelpIcon2 help={help[k]} />}
                </div>
                <div className="trf-cwv-val">
                  {k === 'cls' ? v.value.toFixed(2) : v.value}
                  <span className="trf-cwv-unit">{v.unit}</span>
                </div>
                <div className="trf-cwv-meter">
                  <div className="trf-cwv-meter-bg">
                    <div className="trf-cwv-meter-target" style={{ left: '100%' }} />
                    <div className="trf-cwv-meter-fill" style={{ width: `${pct}%` }} />
                  </div>
                  <div className="trf-cwv-meter-lbl">
                    <span>0</span>
                    <span>{cwvLabel(v.status)}</span>
                    <span>{v.target}{v.unit}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* CWV by device */}
      <div className="trf-2col">
        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.cwvBy}>{t.cwvBy}</TrfHelpTitle2> : <span className="trf-card-title">{t.cwvBy}</span>}
          </div>
          <table className="trf-table mini">
            <thead>
              <tr>
                <th>Device</th>
                <th className="num">LCP, s</th>
                <th className="num">INP, ms</th>
                <th className="num">CLS</th>
              </tr>
            </thead>
            <tbody>
              {window.TRF.cwvByDevice.map(d => (
                <tr key={d.dev}>
                  <td>{d.dev}</td>
                  <td className="num"><span className={`trf-pos-badge ${d.lcp <= 2.5 ? 'good' : d.lcp <= 4 ? 'mid' : 'low'}`}>{d.lcp.toFixed(1)}</span></td>
                  <td className="num"><span className={`trf-pos-badge ${d.inp <= 200 ? 'good' : d.inp <= 500 ? 'mid' : 'low'}`}>{d.inp}</span></td>
                  <td className="num"><span className={`trf-pos-badge ${d.cls <= 0.1 ? 'good' : d.cls <= 0.25 ? 'mid' : 'low'}`}>{d.cls.toFixed(2)}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.devices}>{t.devices}</TrfHelpTitle2> : <span className="trf-card-title">{t.devices}</span>}
          </div>
          <div className="trf-dev-mix">
            {window.TRF.devices.map((d, i) => (
              <div key={i} className="trf-dev-mix-row">
                <div className="trf-dev-mix-lbl">{d.dev}</div>
                <div className="trf-dev-mix-bar">
                  <div className="trf-dev-mix-fill" style={{ width: `${d.pct}%` }} />
                  <span className="trf-dev-mix-pct">{d.pct.toFixed(1)}%</span>
                </div>
                <div className="trf-dev-mix-n">{fmtTrf(d.sessions)}</div>
              </div>
            ))}
          </div>

          <div className="trf-browsers">
            <div className="trf-browsers-h">{t.browsers}</div>
            <div className="trf-browsers-bar">
              {window.TRF.browsers.map((b, i) => {
                const colors = ['#6366F1', '#10B981', '#EF4444', '#F59E0B', '#06B6D4', '#94A3B8'];
                return (
                  <div key={i} className="trf-browsers-seg" style={{ width: `${b.pct}%`, background: colors[i] }} title={`${b.br} ${b.pct}%`}>
                    {b.pct >= 8 && <span>{b.br}</span>}
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Slow pages + errors */}
      <div className="trf-2col">
        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.slow}>{t.slow}</TrfHelpTitle2> : <span className="trf-card-title">{t.slow}</span>}
          </div>
          <table className="trf-table mini">
            <thead>
              <tr>
                <th>URL</th>
                <th className="num">LCP</th>
                <th className="num">INP</th>
                <th className="num">Status</th>
              </tr>
            </thead>
            <tbody>
              {window.TRF.slowPages.map(p => (
                <tr key={p.url}>
                  <td><code className="trf-url">{p.url}</code></td>
                  <td className="num">{p.lcp.toFixed(1)}s</td>
                  <td className="num">{p.inp}ms</td>
                  <td className="num">
                    <span className={`trf-pos-badge ${p.status === 'good' ? 'good' : p.status === 'needs' ? 'mid' : 'low'}`}>
                      {p.status === 'good' ? 'Good' : p.status === 'needs' ? 'Needs' : 'Poor'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="trf-card">
          <div className="trf-card-head">
            {TrfHelpTitle2 ? <TrfHelpTitle2 className="trf-card-title" help={help.errors}>{t.errors}</TrfHelpTitle2> : <span className="trf-card-title">{t.errors}</span>}
          </div>
          <div className="trf-errors">
            {window.TRF.errors.map((e, i) => (
              <div key={i} className="trf-error-row">
                <span className={`trf-error-tag ${e.kind === '404' ? 'warn' : e.kind === '500' ? 'err' : ''}`}>{e.kind}</span>
                <span className="trf-error-count">{e.count}</span>
                <code className="trf-url trf-error-top">{e.top}</code>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.TrfSeo = TrfSeo;
window.TrfFunnel = TrfFunnel;
window.TrfTech = TrfTech;