/* global React */
const { useState, useEffect, useRef, useMemo } = React;

// ===== Helpers =====
const fmtK = (n) => {
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1).replace(".0","") + " млн";
  if (n >= 1_000) return (n / 1_000).toFixed(n >= 10_000 ? 0 : 1).replace(".0","") + " тыс.";
  return String(n);
};

const plur = (n, one, few, many) => {
  const m10 = n % 10, m100 = n % 100;
  if (m100 >= 11 && m100 <= 14) return many;
  if (m10 === 1) return one;
  if (m10 >= 2 && m10 <= 4) return few;
  return many;
};

function Avatar({ b, size=44, radius=12, className="" }) {
  const style = { width:size, height:size, borderRadius:radius, background:b.color, fontSize: Math.round(size*0.38) };
  if (b.avatarUrl) {
    return (
      <div className={"avatar " + className} style={style}>
        <img src={b.avatarUrl} alt="" loading="lazy"
          onError={(e)=>{ e.currentTarget.style.display='none'; }}/>
        <span className="avatar-fallback">{b.avatar}</span>
      </div>
    );
  }
  return <div className={"avatar avatar-initials " + className} style={style}>{b.avatar}</div>;
}

const PLATFORM_ICONS = window.PLATFORM_ICONS;
const PLATFORM_COLORS = window.PLATFORM_COLORS;

function PlatIcon({ p, size=14 }) {
  const html = PLATFORM_ICONS[p];
  if (!html) return null;
  return <span style={{width:size,height:size,display:"inline-grid",placeItems:"center"}}
    dangerouslySetInnerHTML={{__html: html.replace('<svg ', `<svg width="${size}" height="${size}" `)}} />;
}

// Trust card icon. Body strings come from the server-built window.TRUST_ICONS registry
// which is a hardcoded whitelist of 30 SVG paths in backend/src/admin/trust-icons.ts.
// The slug is also validated server-side at save-time, so this is not user-controlled HTML.
function TrustIcon({ slug, size = 22 }) {
  const reg = window.TRUST_ICONS || {};
  const body = reg[slug];
  if (!body) return null;
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + size + '" height="' + size + '" '
    + 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" '
    + 'stroke-linecap="round" stroke-linejoin="round">' + body + '</svg>';
  return <span style={{width:size,height:size,display:"inline-grid",placeItems:"center"}}
    dangerouslySetInnerHTML={{__html: svg}} />;
}

// ===== Ticker Tape =====
function TickerTape() {
  const items = [...window.TICKERS, ...window.TICKERS]; // duplicate for loop
  return (
    <div className="ticker-tape">
      <div className="ticker-tape-label">LIVE · MOEX</div>
      <div className="ticker-tape-track">
        {items.map((t, i) => (
          <div className="ticker-item" key={i}>
            <span className="ticker-sym">{t.s}</span>
            <span className="ticker-val">{t.v.toLocaleString("ru-RU")}</span>
            <span className={"ticker-delta " + (t.d >= 0 ? "up" : "down")}>
              {t.d >= 0 ? "▲" : "▼"} {Math.abs(t.d).toFixed(2)}%
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ===== Header =====
function Header({ onOpenAdd, onOpenMobile, onGoTo, activeSection }) {
  const nav = [
    { id: "rankings", label: "Рейтинги" },
    { id: "catalog", label: "Каталог" },
    { id: "journal", label: "Журнал", href: "/zhurnal/", title: "Журнал: статьи про инвест-блогеров и трейдинг" },
    { id: "collections", label: "Подборки" },
    { id: "about", label: "О проекте" },
  ];
  const handleNav = (id) => (e) => {
    e.preventDefault();
    if (onGoTo) onGoTo(id);
  };
  return (
    <header className="header">
      <div className="container header-inner">
        <a href="#" className="brand" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0,behavior:"smooth"});}}>
          <img src="/logo.svg" alt="" className="brand-logo-img" width="32" height="32" />
          Инвест Блогеры
        </a>
        <nav className="header-nav">
          {nav.map(n => (
            n.href ? (
              <a key={n.id} href={n.href} title={n.title || undefined}
                className="nav-link">{n.label}</a>
            ) : (
              <a key={n.id} href={"#"+n.id} onClick={handleNav(n.id)}
                className={"nav-link " + (activeSection===n.id?"active":"")}>{n.label}</a>
            )
          ))}
        </nav>
        <div className="header-spacer" />
        <div className="header-actions">
          <button className="btn btn-outline" onClick={()=>window.open("https://t.me/investbloggers_manager","_blank")}>
            <PlatIcon p="tg" size={14} /> Поддержка
          </button>
          <button className="btn btn-primary" onClick={onOpenAdd}>
            + Добавить блогера
          </button>
        </div>
        <button className="menu-toggle" onClick={onOpenMobile} aria-label="Меню">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        </button>
      </div>
    </header>
  );
}

// ===== Hero with live viz =====
function HeroViz() {
  // SVG live candles
  const candles = useMemo(() => {
    const arr = [];
    let y = 60;
    for (let i = 0; i < 40; i++) {
      const up = Math.random() > 0.45;
      const move = Math.random() * 8 + 2;
      const o = y;
      const c = up ? y - move : y + move;
      const h = Math.min(o, c) - Math.random() * 4;
      const l = Math.max(o, c) + Math.random() * 4;
      arr.push({ o, c, h, l, up, x: i * 20 });
      y = c;
      if (y < 30) y = 30;
      if (y > 100) y = 100;
    }
    return arr;
  }, []);

  return (
    <div className="hero-viz" aria-hidden>
      <svg viewBox="0 0 800 140" preserveAspectRatio="none">
        <defs>
          <linearGradient id="lineGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#26d97f" stopOpacity="0.8"/>
            <stop offset="100%" stopColor="#26d97f" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* grid lines */}
        {[20,40,60,80,100,120].map(y=>(
          <line key={y} x1="0" y1={y} x2="800" y2={y} stroke="rgba(255,255,255,0.04)" strokeDasharray="2,4"/>
        ))}
        {/* trend line */}
        <path d={candles.map((c,i)=>`${i===0?"M":"L"} ${c.x} ${c.c}`).join(" ") + " L 800 140 L 0 140 Z"}
          fill="url(#lineGrad)" opacity="0.5"/>
        <path d={candles.map((c,i)=>`${i===0?"M":"L"} ${c.x} ${c.c}`).join(" ")}
          fill="none" stroke="#26d97f" strokeWidth="1.5" opacity="0.9"/>
        {/* candles */}
        {candles.map((c, i) => (
          <g key={i}>
            <line x1={c.x} y1={c.h} x2={c.x} y2={c.l} stroke={c.up ? "#26d97f" : "#ff5757"} strokeWidth="1" opacity="0.7"/>
            <rect x={c.x - 4} y={Math.min(c.o, c.c)} width="8" height={Math.abs(c.o - c.c) || 1}
              fill={c.up ? "#26d97f" : "#ff5757"} opacity="0.85"/>
          </g>
        ))}
      </svg>
    </div>
  );
}

function Hero({ onOpenAdd, onOpenPartner, onGoTo, bloggers }) {
  const list = bloggers || window.BLOGGERS || [];
  const totalAuth = Math.max(list.length, 1);
  const totalSubs = list.reduce((s, b) => s + (b.totalSubs || 0), 0);
  const yearsOnMarket = new Date().getFullYear() - 2015;
  return (
    <section className="hero">
      <HeroViz />
      <div className="container">
        <h1 className="hero-headline">
          Проверенный каталог <span className="accent">инвест-авторов</span>
        </h1>
        <p className="hero-lede">
          Навигация по миру финансов, инвестиций и трейдинга.
          Эксперты, рейтинг, охваты — все в одном месте!
        </p>

        <div className="hero-roles">
          <div className="role-card" data-role="blog" onClick={onOpenAdd}>
            <div className="role-title">Стать частью сообщества ИнвестБлогеров</div>
            <div className="role-desc">Закрытая профессиональная среда для авторов, которые хотят расти внутри сильного окружения и получать больше возможностей на рынке.</div>
            <span className="role-cta">Подать заявку →</span>
          </div>
          <div className="role-card" data-role="ad" onClick={onOpenPartner}>
            <div className="role-title">Партнёрство с авторами ИнвестБлогеров</div>
            <div className="role-desc">Помогаем брендам и продуктам выходить к нужной аудитории через авторов, которым доверяют.</div>
            <span className="role-cta">Обсудить сотрудничество →</span>
          </div>
          <div className="role-card" data-role="sub" onClick={()=>onGoTo("catalog")}>
            <div className="role-title">Доступ к проверенным авторам</div>
            <div className="role-desc">Подбери автора под нужные задачи по социальному рейтингу или охватам.</div>
            <span className="role-cta">Подобрать авторов →</span>
          </div>
        </div>

        <div className="hero-stats">
          <div className="stat-cell">
            <div className="stat-num-big num">{totalAuth}</div>
            <div className="stat-label-sm">{plur(totalAuth,"Проверенный автор","Проверенных автора","Проверенных авторов")}</div>
          </div>
          <div className="stat-cell">
            <div className="stat-num-big num">{fmtK(totalSubs)}</div>
            <div className="stat-label-sm">Совокупная аудитория</div>
          </div>
          <div className="stat-cell">
            <div className="stat-num-big num">{yearsOnMarket}</div>
            <div className="stat-label-sm">{plur(yearsOnMarket,"Год","Года","Лет")} на рынке</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Smart AI Search (DEPRECATED — оставлен как noop на случай старых ссылок) =====
function SmartSearchDeprecated({ bloggers, onOpenProfile }) {
  const [q, setQ] = useState("");
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);
  const inputRef = useRef(null);

  const suggestions = [
    "Дивидендные авторы с YouTube 100K+",
    "Кто ведёт публичный портфель",
    "Для начинающих, без жаргона",
    "Трейдинг с эфирами",
    "Облигации и ОФЗ"
  ];

  async function ask(text) {
    setLoading(true);
    setResult(null);
    setQ(text);

    // simple local matcher (fast path)
    const lower = text.toLowerCase();
    const localMatches = bloggers.filter(b => {
      const hay = (b.name + " " + b.bio + " " + b.specs.join(" ") + " " + b.level).toLowerCase();
      if (lower.includes("дивиденд")) return b.specs.some(s => s.toLowerCase().includes("дивиденд"));
      if (lower.includes("youtube") || lower.includes("ютуб"))
        return b.platforms.some(p => p.k === "yt" && p.subs >= 100000);
      if (lower.includes("облигац") || lower.includes("офз"))
        return b.specs.some(s => s.toLowerCase().includes("облигац"));
      if (lower.includes("начинающ") || lower.includes("новичк"))
        return b.specs.some(s => s.toLowerCase().includes("финанс") || s.toLowerCase().includes("налог"));
      if (lower.includes("трейдинг") || lower.includes("скальп") || lower.includes("эфир"))
        return b.specs.some(s => s.toLowerCase().includes("трейдинг") || s.toLowerCase().includes("скальп"));
      if (lower.includes("портфель") || lower.includes("публичн"))
        return /публичн|портфель|сделк/.test(b.bio.toLowerCase() + " " + b.trust.audit);
      return hay.includes(lower.split(" ")[0]);
    }).slice(0, 5);

    // Try Claude for reasoning if available
    let summary = null;
    try {
      if (window.claude && window.claude.complete) {
        const catalog = bloggers.map(b => `${b.id}. ${b.name} — ${b.specs.join(", ")}, ${b.level}. ${b.bio} Площадки: ${b.platforms.map(p=>`${p.name}(${fmtK(p.subs)})`).join(", ")}. Рейтинг ${b.rating}.`).join("\n");
        const prompt = `Ты помощник базы инвест-блогеров. Пользователь ищет: "${text}".
Каталог:
${catalog}

Дай ОЧЕНЬ короткий ответ (1-2 предложения) на русском: кого из списка стоит посмотреть и почему. НЕ перечисляй всех, только 2-3 самых релевантных по имени. Без markdown, без эмодзи.`;
        summary = await window.claude.complete(prompt);
      }
    } catch(e) { /* ignore, fall back */ }

    if (!summary) {
      if (localMatches.length === 0) summary = "По этому запросу точного совпадения нет. Попробуйте смежные темы или используйте фильтры каталога.";
      else summary = `Нашёл ${localMatches.length} релевантн${localMatches.length===1?"ого автора":"ых автор"+(localMatches.length<5?"а":"ов")}. Вот самые подходящие по вашему запросу.`;
    }

    setResult({ summary: summary.trim(), matches: localMatches });
    setLoading(false);
  }

  return (
    <section className="smart-search-section">
      <div className="container">
        <div className="smart-search">
          <span className="ai-badge">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 7.4L22 12l-7.6 2.6L12 22l-2.4-7.4L2 12l7.6-2.6z"/></svg>
            AI
          </span>
          <input
            ref={inputRef}
            value={q}
            onChange={(e)=>setQ(e.target.value)}
            onKeyDown={(e)=>{ if(e.key==="Enter" && q.trim()) ask(q.trim()); }}
            placeholder="Спросите: «дивидендные авторы с YouTube 100K+» или «для новичка»"
          />
          <button className="btn btn-primary" onClick={()=>q.trim() && ask(q.trim())} disabled={loading}>
            {loading ? "Думаю..." : "Найти"}
          </button>
        </div>

        <div className="search-suggestions">
          {suggestions.map((s,i)=>(
            <button key={i} className="suggestion-chip" onClick={()=>ask(s)}>
              <span className="sq">»</span>{s}
            </button>
          ))}
        </div>

        {result && (
          <div className="ai-result active">
            <div className="ai-result-header">
              <span>⚡</span> AI-ОТВЕТ · анализ каталога
            </div>
            <div className="ai-result-body">
              <p>{result.summary}</p>
              {result.matches.length > 0 && (
                <div className="match-list">
                  {result.matches.map(b=>(
                    <div key={b.id} className="ai-match-row" onClick={()=>onOpenProfile(b)}>
                      <span className="ai-match-avatar" style={{background:b.color}}>{b.avatar}</span>
                      <span className="ai-match-name">{b.name}</span>
                      <span className="ai-match-tag">{b.specs[0]}</span>
                      <span className="ai-match-tag num">{fmtK(b.totalSubs)}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

window.TickerTape = TickerTape;
window.Header = Header;
window.Hero = Hero;
window.PlatIcon = PlatIcon;
window.TrustIcon = TrustIcon;
window.Avatar = Avatar;
window.fmtK = fmtK;
window.plur = plur;