// ──────────────────────────────────────────────────────────────
// Find influencers — configurable YouTube gaming-channel parser.
// Searches videos via the YouTube Data API with filters (keyword,
// region, language, recency, duration, gaming category), dedupes to
// channels, enriches with stats + contacts pulled from the channel
// description, and lets you expand a row to read the full description.
// Results are NOT persisted (one-off discovery tool).
// ──────────────────────────────────────────────────────────────
const { useState: useIS, useMemo: useISMemo } = React;

function ISIconYT() {
  return <span style={{ color: "#ff0033", display: "inline-flex" }}><svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M21.6 7.2s-.2-1.4-.8-2c-.7-.8-1.5-.8-1.9-.9C16.2 4.1 12 4.1 12 4.1h0s-4.2 0-7 .2c-.4.1-1.2.1-1.9.9-.6.6-.8 2-.8 2S1.3 8.9 1.3 10.6v1.6c0 1.7.2 3.4.2 3.4s.2 1.4.8 2c.7.8 1.7.8 2.1.9 1.5.1 6.6.2 6.6.2s4.2 0 7-.2c.4-.1 1.2-.1 1.9-.9.6-.6.8-2 .8-2s.2-1.7.2-3.4v-1.6c0-1.7-.3-3.4-.3-3.4zM9.9 14.6V8.8l5.4 2.9-5.4 2.9z"/></svg></span>;
}

// Small ⓘ marker with a hover tooltip explaining how a filter really behaves.
function InfoDot({ text }) {
  return (
    <span
      data-tooltip={text}
      style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 15, height: 15, borderRadius: "50%", border: "1px solid var(--border-default)", color: "var(--text-tertiary)", fontSize: 10, fontWeight: 700, cursor: "help", flexShrink: 0 }}
    >i</span>
  );
}

// A filter control wrapped with an inline info marker.
function Field({ info, children, grow }) {
  return (
    <span style={{ display: "flex", alignItems: "center", gap: 4, minWidth: 0, ...(grow ? { flex: 1 } : {}) }}>
      <span style={{ flex: 1, minWidth: 0, display: "flex" }}>{children}</span>
      {info && <InfoDot text={info} />}
    </span>
  );
}

const IS_REGIONS = [
  { c: "", l: "Any region" }, { c: "RU", l: "Russia" }, { c: "US", l: "USA" },
  { c: "GB", l: "UK" }, { c: "DE", l: "Germany" }, { c: "FR", l: "France" },
  { c: "BR", l: "Brazil" }, { c: "UA", l: "Ukraine" }, { c: "KZ", l: "Kazakhstan" },
  { c: "PL", l: "Poland" }, { c: "TR", l: "Turkey" }, { c: "ID", l: "Indonesia" },
];
const IS_LANGS = [
  { c: "", l: "Any language" }, { c: "ru", l: "Russian" }, { c: "en", l: "English" },
  { c: "de", l: "German" }, { c: "fr", l: "French" }, { c: "pt", l: "Portuguese" },
  { c: "tr", l: "Turkish" }, { c: "id", l: "Indonesian" }, { c: "uk", l: "Ukrainian" },
];
const IS_RECENCY = [
  { v: "", l: "Any time" }, { v: "7", l: "Last 7 days" }, { v: "30", l: "Last 30 days" },
  { v: "90", l: "Last 3 months" }, { v: "365", l: "Last year" },
];

function ISContactChips({ contacts }) {
  if (!contacts || !contacts.any) return <span className="small muted">—</span>;
  const chip = (txt, href, color) => (
    <a key={txt} href={href} target="_blank" rel="noopener noreferrer"
      onClick={(e) => e.stopPropagation()}
      style={{ display: "inline-flex", alignItems: "center", gap: 3, background: "var(--bg-app)", border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "2px 8px", fontSize: 11, color, textDecoration: "none", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
      {txt}
    </a>
  );
  return (
    <div style={{ display: "flex", gap: 5, flexWrap: "wrap" }}>
      {contacts.emails.map(e => chip("✉ " + e, "mailto:" + e, "#2563eb"))}
      {contacts.telegram.map(t => chip("✈ " + t, "https://" + t.replace(/^https?:\/\//, ""), "#229ED9"))}
      {contacts.discord.map(d => chip("🎮 " + d, "https://" + d.replace(/^https?:\/\//, ""), "#5865F2"))}
      {contacts.instagram.map(i => chip("📷 " + i.replace("instagram.com/", "@"), "https://" + i.replace(/^https?:\/\//, ""), "#E1306C"))}
      {contacts.twitter.map(t => chip("𝕏 " + t.replace(/(twitter|x)\.com\//, "@"), "https://" + t.replace(/^https?:\/\//, ""), "#000"))}
      {contacts.links.map(l => chip("🔗 " + l.replace(/^https?:\/\//, "").slice(0, 24), l, "var(--text-secondary)"))}
    </div>
  );
}

function InfluencerSearchView({ creators, onAddCreator, onOpenCreator }) {
  const T = window.t || (s => s);
  const [query, setQuery] = useIS("");
  const [region, setRegion] = useIS("");
  const [lang, setLang] = useIS("");
  const [recency, setRecency] = useIS("");
  const [duration, setDuration] = useIS("any");
  const [gamingOnly, setGamingOnly] = useIS(true);
  const [minSubs, setMinSubs] = useIS("");
  const [maxSubs, setMaxSubs] = useIS("");
  const [onlyContacts, setOnlyContacts] = useIS(false);
  const [order, setOrder] = useIS("relevance");
  const [deepStats, setDeepStats] = useIS(false);
  const [loading, setLoading] = useIS(false);
  const [error, setError] = useIS(null);
  const [results, setResults] = useIS(null);
  const [expanded, setExpanded] = useIS(null);

  // Build a lookup of creators we already have, keyed by channelId, normalized
  // @handle, and normalized nickname — so a found channel matches whether the
  // stored creator was added by UC-id, by @handle URL, or just by name.
  const knownIndex = useISMemo(() => {
    const byId = new Map(), byHandle = new Map(), byName = new Map();
    const normH = (s) => (s || "").toLowerCase().replace(/^@/, "").replace(/[^a-z0-9._-]/g, "");
    const normN = (s) => (s || "").toLowerCase().replace(/[\s|]+/g, "").replace(/[^a-z0-9._@-]/g, "");
    (creators || []).forEach(c => {
      const chans = (c.channels && c.channels.length) ? c.channels : [{ url: c.channel || c.url }];
      chans.forEach(ch => {
        const ref = window.youtube?.parseChannelRef?.(ch.url || "");
        if (ref?.mode === "id") byId.set(ref.value, c);
        else if (ref?.mode === "handle") byHandle.set(normH(ref.value), c);
      });
      if (c.handle) byHandle.set(normH(c.handle), c);
      if (c.name) byName.set(normN(c.name), c);
    });
    return { byId, byHandle, byName, normH, normN };
  }, [creators]);

  const matchKnown = React.useCallback((r) => {
    const { byId, byHandle, byName, normH, normN } = knownIndex;
    return byId.get(r.channelId)
      || (r.handle && byHandle.get(normH(r.handle)))
      || (r.title && byName.get(normN(r.title)))
      || null;
  }, [knownIndex]);

  const run = async () => {
    setError(null); setResults(null); setExpanded(null);
    if (!window.youtube?.hasKey()) { setError("YouTube API key not set"); return; }
    if (!query.trim()) { setError(T("Enter a keyword to search")); return; }
    setLoading(true);
    try {
      const publishedAfter = recency ? new Date(Date.now() - (+recency) * 86400000).toISOString() : "";
      const list = await window.youtube.searchInfluencers({
        query: query.trim(), regionCode: region, relevanceLanguage: lang,
        order, publishedAfter, videoDuration: duration, gamingOnly,
        minSubs: minSubs ? +minSubs : 0, maxSubs: maxSubs ? +maxSubs : 0,
        onlyWithContacts: onlyContacts, maxResults: 50,
        deepStats, deepLimit: 30,
      });
      setResults(list);
    } catch (e) {
      setError(e.message || String(e));
    } finally {
      setLoading(false);
    }
  };

  const exportToPubdate = () => {
    if (!results || !results.length) return;
    const urls = results.map(r => r.url).join("\n");
    try {
      window.pubdate.saveStored({ items: window.pubdate.parseUrlList(urls), rawText: urls, lastFullCheckAt: null });
      location.hash = "pubdate";
    } catch {}
  };

  const selStyle = { width: "100%", padding: "7px 9px", borderRadius: 8, border: "1px solid var(--border-default)", background: "var(--bg-app)", color: "var(--text-primary)", fontSize: 13, minWidth: 0 };
  const fmtNum = (n) => window.CRM?.fmtNum ? window.CRM.fmtNum(n) : n.toLocaleString();

  return (
    <div>
      <div className="section-block" style={{ marginBottom: 14 }}>
        <div className="section-block-title">
          <span className="icon"><ISIconYT /></span>
          {T("Find influencers")}
          <span className="meta">{T("YouTube gaming-channel parser")}</span>
        </div>

        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center", marginBottom: 10 }}>
          <Field grow info={T("Free-text search across video titles, descriptions and tags. This is the only thing that actually finds channels — all other controls just narrow or re-rank these results.")}>
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && run()}
              placeholder={T("Keywords — e.g. rust survival, raid base, oxide")}
              style={{ width: "100%", padding: "8px 11px", borderRadius: 8, border: "1px solid var(--border-default)", background: "var(--bg-app)", color: "var(--text-primary)", fontSize: 13 }}
            />
          </Field>
          <button className="btn primary" onClick={run} disabled={loading} style={{ flexShrink: 0 }}>
            {loading ? T("Searching…") : `🔎 ${T("Search")}`}
          </button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 8, alignItems: "center" }}>
          <Field info={T("Filters results to channels whose profile declares this country. YouTube's own region param only biases ranking, so we filter client-side; channels that hide their country are kept.")}>
            <select value={region} onChange={(e) => setRegion(e.target.value)} style={selStyle}>
              {IS_REGIONS.map(r => <option key={r.c} value={r.c}>{r.l}</option>)}
            </select>
          </Field>
          <Field info={T("Keeps channels whose language we can detect (from the channel's declared language, else guessed from title/description text) matching this one. Channels we can't classify are kept rather than dropped.")}>
            <select value={lang} onChange={(e) => setLang(e.target.value)} style={selStyle}>
              {IS_LANGS.map(l => <option key={l.c} value={l.c}>{l.l}</option>)}
            </select>
          </Field>
          <Field info={T("Only counts videos published within this window. Useful to find currently-active channels and skip ones that went quiet.")}>
            <select value={recency} onChange={(e) => setRecency(e.target.value)} style={selStyle}>
              {IS_RECENCY.map(r => <option key={r.v} value={r.v}>{r.l}</option>)}
            </select>
          </Field>
          <Field info={T("Matches the length of the videos found in search: short = under 4 min (mostly Shorts), medium = 4–20 min, long = over 20 min.")}>
            <select value={duration} onChange={(e) => setDuration(e.target.value)} style={selStyle}>
              <option value="any">{T("Any length")}</option>
              <option value="short">{T("Shorts (<4m)")}</option>
              <option value="medium">{T("Medium (4–20m)")}</option>
              <option value="long">{T("Long (>20m)")}</option>
            </select>
          </Field>
          <Field info={T("How YouTube ranks the raw search hits before we dedupe to channels: relevance, total view count, newest first, or rating. Final list is then re-sorted by subscribers.")}>
            <select value={order} onChange={(e) => setOrder(e.target.value)} style={selStyle}>
              <option value="relevance">{T("Relevance")}</option>
              <option value="viewCount">{T("View count")}</option>
              <option value="date">{T("Newest")}</option>
              <option value="rating">{T("Rating")}</option>
            </select>
          </Field>
          <Field info={T("Min/max subscriber count, applied after fetching channel stats. Leave empty for no bound. Channels that hide their subscriber count are dropped when a bound is set.")}>
            <input type="number" value={minSubs} onChange={(e) => setMinSubs(e.target.value)} placeholder={T("Min subs")} style={selStyle} />
          </Field>
          <Field info={T("Min/max subscriber count, applied after fetching channel stats. Leave empty for no bound. Channels that hide their subscriber count are dropped when a bound is set.")}>
            <input type="number" value={maxSubs} onChange={(e) => setMaxSubs(e.target.value)} placeholder={T("Max subs")} style={selStyle} />
          </Field>
          <label className="row small" style={{ gap: 5, alignItems: "center", cursor: "pointer", minWidth: 0 }}>
            <input type="checkbox" checked={gamingOnly} onChange={(e) => setGamingOnly(e.target.checked)} /> {T("Gaming only")}
            <InfoDot text={T("Restricts the search to YouTube's Gaming category (id 20). Turn off to search all categories with your keywords.")} />
          </label>
          <label className="row small" style={{ gap: 5, alignItems: "center", cursor: "pointer", minWidth: 0 }}>
            <input type="checkbox" checked={onlyContacts} onChange={(e) => setOnlyContacts(e.target.checked)} /> {T("Has contacts")}
            <InfoDot text={T("Keeps only channels where we found at least one contact (email, Telegram, Discord, Instagram, X or a link) in the channel description.")} />
          </label>
          <label className="row small" style={{ gap: 5, alignItems: "center", cursor: "pointer", minWidth: 0 }}>
            <input type="checkbox" checked={deepStats} onChange={(e) => setDeepStats(e.target.checked)} /> {T("Deep stats")}
            <InfoDot text={T("Fetches the last ~10 videos of each found channel (top 30) to compute median recent views, posting frequency per week, last-upload recency, and a liveness score. Slower and uses more API quota.")} />
          </label>
        </div>

        {error && <div className="small" style={{ color: "var(--danger)", marginTop: 10 }}>{error}</div>}
        {region && <div className="small muted" style={{ marginTop: 8 }}>ℹ️ {T("Region filters by the channel's declared country; channels that hide their country are kept.")}</div>}
      </div>

      {results && (
        <div className="section-block">
          <div className="section-block-title">
            <span className="icon"><IconChart size={14} /></span>
            {T("Channels found")}
            <span className="meta">{results.length}</span>
            {results.length > 0 && (
              <button className="btn sm" style={{ marginLeft: "auto" }} onClick={exportToPubdate} data-tooltip={T("Send all to Publication date check")}>
                📋 {T("Export to Publication date")}
              </button>
            )}
          </div>

          {results.length === 0 ? (
            <div className="small muted" style={{ padding: "16px 2px" }}>{T("No channels matched. Try broadening filters.")}</div>
          ) : (
            <div style={{ overflowX: "auto" }}>
              <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
                <thead>
                  <tr style={{ textAlign: "left", color: "var(--text-tertiary)", fontSize: 11, textTransform: "uppercase", letterSpacing: ".04em" }}>
                    <th style={{ padding: "6px 8px", fontWeight: 600 }}>{T("Channel")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600, textAlign: "right" }}>{T("Subscribers")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600, textAlign: "right" }}>{T("Videos")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600, textAlign: "right" }}>{T("Age")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600, textAlign: "right" }} data-tooltip={deepStats ? T("Median views of last ~10 videos") : T("Lifetime avg views per video (turn on Deep stats for recent median)")}>{deepStats ? T("Median ~10") : T("Avg/video")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600, textAlign: "center" }} data-tooltip={T("Posting frequency / liveness — recent median views ÷ subs, penalised if dormant")}>{deepStats ? T("Live") : T("V/sub")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600 }}>{T("Contacts")}</th>
                    <th style={{ padding: "6px 8px", fontWeight: 600, textAlign: "right" }}></th>
                  </tr>
                </thead>
                <tbody>
                  {results.map(r => {
                    const knownC = matchKnown(r);
                    const known = !!knownC;
                    const isOpen = expanded === r.channelId;
                    return (
                      <React.Fragment key={r.channelId}>
                        <tr
                          onClick={() => setExpanded(isOpen ? null : r.channelId)}
                          style={{ borderTop: "1px solid var(--border-subtle)", cursor: "pointer", background: isOpen ? "var(--bg-app)" : "transparent" }}
                        >
                          <td style={{ padding: "9px 8px" }}>
                            <div className="row" style={{ alignItems: "center", gap: 8 }}>
                              {r.thumbnail ? <img src={r.thumbnail} alt="" style={{ width: 28, height: 28, borderRadius: "50%", flexShrink: 0 }} /> : <PlatformBadge platform="youtube" size={20} />}
                              <div style={{ minWidth: 0 }}>
                                <div style={{ fontWeight: 700, display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
                                  {r.title}
                                  {r.country && <span className="small muted" style={{ fontSize: 10, fontWeight: 700, border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "0 6px" }}>🌍 {r.country}</span>}
                                  {known && (() => {
                                    const sm = window.CRM?.STATUS_META?.[knownC.status];
                                    const col = sm?.color || "#22c55e";
                                    const tip = `${T("Already in base")}: ${knownC.name}${sm ? " · " + T(sm.ru) : ""}${knownC.manager ? " · " + knownC.manager : ""}`;
                                    return (
                                      <span
                                        className="small"
                                        onClick={(e) => { e.stopPropagation(); onOpenCreator && onOpenCreator(knownC); }}
                                        data-tooltip={tip}
                                        style={{ color: col, fontSize: 10, fontWeight: 800, border: `1px solid ${col}`, borderRadius: 999, padding: "0 6px", cursor: onOpenCreator ? "pointer" : "default" }}
                                      >
                                        ✓ {T("in base")}{sm ? ` · ${T(sm.ru)}` : ""}
                                      </span>
                                    );
                                  })()}
                                </div>
                                <a href={r.url} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()} className="small muted" style={{ fontFamily: "var(--font-mono)" }}>
                                  {r.handle || r.url.replace(/^https?:\/\//, "")}
                                </a>
                              </div>
                            </div>
                          </td>
                          <td style={{ padding: "9px 8px", textAlign: "right", fontWeight: 700, whiteSpace: "nowrap" }}>{r.hiddenSubs ? "—" : fmtNum(r.subs)}</td>
                          <td style={{ padding: "9px 8px", textAlign: "right", color: "var(--text-secondary)" }}>{fmtNum(r.videoCount)}</td>
                          <td style={{ padding: "9px 8px", textAlign: "right", color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{r.ageYears != null ? `${r.ageYears}${T("y")}` : "—"}</td>
                          <td style={{ padding: "9px 8px", textAlign: "right", whiteSpace: "nowrap" }}>
                            {deepStats && r.recentMedian != null ? (
                              <span style={{ fontWeight: 700 }} data-tooltip={r.perWeek != null ? `${r.perWeek}/${T("wk")} · ${r.daysSinceUpload != null ? r.daysSinceUpload + T("d ago") : ""}` : ""}>{fmtNum(r.recentMedian)}</span>
                            ) : (
                              <span style={{ color: "var(--text-secondary)" }}>{fmtNum(r.avgViewsPerVideo)}</span>
                            )}
                          </td>
                          <td style={{ padding: "9px 8px", textAlign: "center", whiteSpace: "nowrap" }}>
                            {deepStats && r.liveness != null ? (() => {
                              const col = r.liveness >= 60 ? "#22c55e" : r.liveness >= 30 ? "#f59e0b" : "#ef4444";
                              const dot = r.liveness >= 60 ? "🟢" : r.liveness >= 30 ? "🟡" : "🔴";
                              return (
                                <span data-tooltip={`${T("Liveness")} ${r.liveness}/100 · ${r.perWeek != null ? r.perWeek + "/" + T("wk") : ""}${r.daysSinceUpload != null ? " · " + r.daysSinceUpload + T("d ago") : ""}`} style={{ color: col, fontWeight: 700 }}>
                                  {dot} {r.liveness}
                                </span>
                              );
                            })() : (
                              <span className="small muted" data-tooltip={T("Lifetime avg views ÷ subs")}>{r.viewsPerSubLifetime ? (r.viewsPerSubLifetime * 100).toFixed(0) + "%" : "—"}</span>
                            )}
                          </td>
                          <td style={{ padding: "9px 8px" }} onClick={(e) => e.stopPropagation()}><ISContactChips contacts={r.contacts} /></td>
                          <td style={{ padding: "9px 8px", textAlign: "right", whiteSpace: "nowrap" }}>
                            {known ? (
                              onOpenCreator && (
                                <button className="btn sm" onClick={(e) => { e.stopPropagation(); onOpenCreator(knownC); }} data-tooltip={T("Open card")}>↗</button>
                              )
                            ) : (onAddCreator && (
                              <button className="btn sm" onClick={(e) => { e.stopPropagation(); onAddCreator({ name: r.title, platform: "youtube", url: r.url, subs: r.subs }); }} data-tooltip={T("Add as creator")}>
                                <IconPlus size={12} />
                              </button>
                            ))}
                            <span className="small muted" style={{ marginLeft: 6 }}>{isOpen ? "▲" : "▼"}</span>
                          </td>
                        </tr>
                        {isOpen && (
                          <tr style={{ background: "var(--bg-app)" }}>
                            <td colSpan={8} style={{ padding: "4px 12px 14px" }}>
                              {known && (() => {
                                const sm = window.CRM?.STATUS_META?.[knownC.status];
                                const col = sm?.color || "#22c55e";
                                const _sym = { RUB: "₽", USD: "$", EUR: "€" };
                                const price = knownC.priceOriginal != null && knownC.priceOriginalCurrency
                                  ? `${fmtNum(knownC.priceOriginal)} ${_sym[knownC.priceOriginalCurrency] || knownC.priceOriginalCurrency}`
                                  : (knownC.price ? `${fmtNum(knownC.price)} €` : null);
                                const notesN = (knownC.notes || knownC.thread || []).length;
                                return (
                                  <div style={{ marginBottom: 8, padding: "8px 10px", borderRadius: 8, border: `1px solid ${col}`, background: "color-mix(in srgb, " + col + " 8%, transparent)", display: "flex", flexWrap: "wrap", gap: 12, alignItems: "center", fontSize: 12.5 }}>
                                    <b style={{ color: col }}>✓ {T("Already in base")}</b>
                                    <span style={{ fontWeight: 700 }}>{knownC.name}</span>
                                    {sm && <span style={{ color: col, fontWeight: 700 }}>{T(sm.ru)}</span>}
                                    {knownC.manager && <span>👤 {knownC.manager}</span>}
                                    {price && <span>💶 {price}</span>}
                                    {notesN > 0 && <span>💬 {notesN}</span>}
                                    {onOpenCreator && <button className="btn sm" style={{ marginLeft: "auto" }} onClick={() => onOpenCreator(knownC)}>{T("Open card")} ↗</button>}
                                  </div>
                                );
                              })()}
                              <div className="small" style={{ color: "var(--text-tertiary)", marginBottom: 6 }}>
                                {r.country && <span>🌍 {r.country} · </span>}
                                {r.publishedAt && <span>{T("since")} {new Date(r.publishedAt).getFullYear()} · </span>}
                                {r.lang && <span>🗣 {r.lang}{r.langSource === "guessed" ? "?" : ""} · </span>}
                                {r.avgViewsPerVideo ? <span>{T("avg/video")}: {fmtNum(r.avgViewsPerVideo)} · </span> : null}
                                {deepStats && r.recentMedian != null && <span>{T("recent median")}: {fmtNum(r.recentMedian)} · {r.perWeek}/{T("wk")} · {r.daysSinceUpload != null ? r.daysSinceUpload + T("d ago") : ""} · </span>}
                                {r.foundVia && <span>{T("found via")}: “{r.foundVia.title}”</span>}
                              </div>
                              <div style={{ whiteSpace: "pre-wrap", fontSize: 12.5, lineHeight: 1.6, color: "var(--text-secondary)", maxHeight: 220, overflowY: "auto", padding: "8px 10px", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: 8 }}>
                                {r.description || T("(no description)")}
                              </div>
                            </td>
                          </tr>
                        )}
                      </React.Fragment>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { InfluencerSearchView });