// ============ Trends view (visual) ============
const TRENDS_LIMIT_MIN = 5;
const TRENDS_LIMIT_MAX = 50;
const TRENDS_LIMIT_STEP = 5;

const ViewTrends = ({ t }) => {
  const [period, setPeriod] = React.useState("30d");
  const [limit, setLimit] = React.useState(() => {
    const saved = Number.parseInt(localStorage.getItem("is_trends_limit") || "", 10);
    if (Number.isFinite(saved) && saved >= TRENDS_LIMIT_MIN && saved <= TRENDS_LIMIT_MAX) return saved;
    return 15;
  });
  React.useEffect(() => { localStorage.setItem("is_trends_limit", String(limit)); }, [limit]);

  const { loading, data, error } = useTrends(period, limit);
  const serverMin = data?.limit_min ?? TRENDS_LIMIT_MIN;
  const serverMax = data?.limit_max ?? TRENDS_LIMIT_MAX;

  const rising     = data?.rising       || [];
  const falling    = data?.falling      || [];
  const newTerms   = data?.new_terms    || [];
  const zeroRising = data?.zero_rising  || [];
  const zeroNew    = data?.zero_new     || [];

  const fmtRange = (r) => r ? `${r.start.slice(0,10)} → ${r.end.slice(0,10)}` : "";
  const fmtPct = (p) => p === null ? t("new_label") : `${p > 0 ? "+" : ""}${Math.round(p * 100)}%`;

  const topRiser  = rising[0];
  const topFaller = falling[0];
  const analyzed  = rising.length + falling.length + newTerms.length;

  return (
    <div className="view">
      {error && <ApiError t={t} message={error}/>}

      {/* Period + range header */}
      <Card style={{ marginBottom: 16 }}
        title={<SectionTitle icon="clock" tip={t("tip_trends_compare")}>{t("trends_compare")}</SectionTitle>}
        right={<Segment options={TOKENS.period.map(p => ({ value: p.value, label: t(p.labelKey)}))} value={period} onChange={setPeriod}/>}>
        <div style={{ display: "flex", gap: 24, padding: "4px 0", flexWrap: "wrap", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "var(--text-faint)" }}>{t("current_period")}</div>
            <div className="mono" style={{ fontSize: 13, color: "var(--accent)", marginTop: 4 }}>{fmtRange(data?.range?.current)}</div>
          </div>
          <div>
            <div style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "var(--text-faint)" }}>{t("previous_period")}</div>
            <div className="mono" style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 4 }}>{fmtRange(data?.range?.previous)}</div>
          </div>
          <div style={{ flex: 1 }}/>
          <LimitSlider t={t} value={limit} onChange={setLimit} min={serverMin} max={serverMax} step={TRENDS_LIMIT_STEP}/>
        </div>
      </Card>

      {/* KPI strip */}
      <div className="kpi-grid" style={{ marginBottom: 16 }}>
        <Card className="kpi"><div className="label"><Icon name="trending" size={12}/> Analizados <InfoTip text={t("tip_analyzed")}/></div>
          <div className="value">{loading && !data ? "…" : <CountUp value={analyzed}/>}</div>
          <div className="delta up"><Icon name="sparkle" size={12}/> {t("rising_terms")} + {t("falling_terms")} + {t("new_terms")}</div>
        </Card>
        <Card className="kpi"><div className="label"><Icon name="arrow-up" size={12}/> {t("rising_terms")} <InfoTip text={t("tip_rising")}/></div>
          <div className="value" style={{ color: "transparent", background: "linear-gradient(180deg, var(--success), #0f8b6b)", WebkitBackgroundClip: "text", backgroundClip: "text" }}>
            {loading && !data ? "…" : <CountUp value={rising.length}/>}
          </div>
          <div className="delta up"><Icon name="arrow-up" size={12}/> {topRiser ? fmtPct(topRiser.pct) : "—"}</div>
        </Card>
        <Card className="kpi"><div className="label"><Icon name="arrow-down" size={12}/> {t("falling_terms")} <InfoTip text={t("tip_falling")}/></div>
          <div className="value" style={{ color: "transparent", background: "linear-gradient(180deg, var(--danger), #a93838)", WebkitBackgroundClip: "text", backgroundClip: "text" }}>
            {loading && !data ? "…" : <CountUp value={falling.length}/>}
          </div>
          <div className="delta down"><Icon name="arrow-down" size={12}/> {topFaller ? fmtPct(topFaller.pct) : "—"}</div>
        </Card>
        <Card className="kpi"><div className="label"><Icon name="sparkle" size={12}/> {t("new_terms")} <InfoTip text={t("tip_new_terms")}/></div>
          <div className="value" style={{ color: "transparent", background: "linear-gradient(180deg, var(--accent), var(--accent-2))", WebkitBackgroundClip: "text", backgroundClip: "text" }}>
            {loading && !data ? "…" : <CountUp value={newTerms.length}/>}
          </div>
          <div className="delta up"><Icon name="zap" size={12}/> {t("new_label")}</div>
        </Card>
      </div>

      {/* Hero movers */}
      <div className="grid-2" style={{ marginBottom: 16 }}>
        <HeroMover t={t} term={topRiser} tone="success" icon="arrow-up" title={t("rising_terms")}/>
        <HeroMover t={t} term={topFaller} tone="danger"  icon="arrow-down" title={t("falling_terms")}/>
      </div>

      {/* Tornado / butterfly chart */}
      <Card style={{ marginBottom: 16 }}
        title={<SectionTitle icon="analytics" tip={t("tip_tornado")}>Movimiento</SectionTitle>}
        right={<Chip>{Math.min(10, Math.max(rising.length, falling.length))} × 2</Chip>}>
        {loading && !data ? <LoadingBlock t={t}/>
          : (rising.length === 0 && falling.length === 0) ? <EmptyBlock t={t}/>
          : <Tornado rising={rising} falling={falling} t={t}/>}
      </Card>

      {/* New terms tiles */}
      <Card style={{ marginBottom: 16 }}
        title={<SectionTitle icon="sparkle" tip={t("tip_new_terms")}>{t("new_terms")}</SectionTitle>}
        right={<Chip tone="running" dot>{newTerms.length}</Chip>}>
        {loading && !data ? <LoadingBlock t={t}/>
          : newTerms.length === 0 ? <EmptyBlock t={t}/>
          : <TileGrid items={newTerms} accent="var(--accent)" t={t}/>}
      </Card>

      {/* Zero-results rising */}
      <div className="grid-2" style={{ marginBottom: 16 }}>
        <Card title={<SectionTitle icon="zap" color="var(--warn)" tip={t("tip_zero_rising")}>{t("zero_rising")}</SectionTitle>}
          right={<Chip tone="warn" dot>{zeroRising.length}</Chip>}>
          {loading && !data ? <LoadingBlock t={t}/>
            : zeroRising.length === 0 ? <EmptyBlock t={t}/>
            : <ZeroList rows={zeroRising} accent="var(--warn)" t={t}/>}
        </Card>
        <Card title={<SectionTitle icon="plus" color="var(--danger)" tip={t("tip_zero_new")}>{t("zero_new")}</SectionTitle>}
          right={<Chip tone="danger" dot>{zeroNew.length}</Chip>}>
          {loading && !data ? <LoadingBlock t={t}/>
            : zeroNew.length === 0 ? <EmptyBlock t={t}/>
            : <ZeroList rows={zeroNew} accent="var(--danger)" t={t}/>}
        </Card>
      </div>
    </div>
  );
};

// ---------- Hero mover (big card for top riser/faller) ----------
const HeroMover = ({ t, term, tone, icon, title }) => {
  const color = tone === "success" ? "var(--success)" : "var(--danger)";
  const pctStr = !term
    ? "—"
    : term.pct === null ? t("new_label")
    : `${term.pct > 0 ? "+" : ""}${Math.round(term.pct * 100)}%`;
  return (
    <Card style={{ padding: 0 }}>
      <div style={{ padding: "18px 22px", display: "flex", flexDirection: "column", gap: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--text-faint)", fontSize: 11, letterSpacing: 1.2, textTransform: "uppercase" }}>
          <span style={{ color, display: "inline-flex" }}><Icon name={icon} size={12}/></span>
          {title}
        </div>
        {term ? (
          <>
            <div style={{ fontSize: 18, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
              {term.term}
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 16, flexWrap: "wrap" }}>
              <div className="num-mono" style={{ fontSize: 48, fontWeight: 800, lineHeight: 1, color, letterSpacing: "-1px", textShadow: `0 0 24px ${color}55` }}>
                {pctStr}
              </div>
              <div style={{ display: "flex", gap: 14, fontSize: 11, color: "var(--text-faint)" }}>
                <div><div style={{ textTransform: "uppercase", letterSpacing: 1 }}>Actual</div>
                  <div className="num-mono" style={{ fontSize: 15, color: "var(--text)" }}>{term.current.toLocaleString()}</div></div>
                <div><div style={{ textTransform: "uppercase", letterSpacing: 1 }}>Previo</div>
                  <div className="num-mono" style={{ fontSize: 15, color: "var(--text-dim)" }}>{term.previous.toLocaleString()}</div></div>
                <div><div style={{ textTransform: "uppercase", letterSpacing: 1 }}>Δ</div>
                  <div className="num-mono" style={{ fontSize: 15, color }}>{term.delta > 0 ? "+" : ""}{term.delta.toLocaleString()}</div></div>
              </div>
            </div>
            <div style={{ height: 8, marginTop: 6, borderRadius: 6, background: "var(--bg-2)", position: "relative", overflow: "hidden" }}>
              <div style={{ position: "absolute", left: 0, top: 0, bottom: 0,
                width: `${Math.min(100, (term.previous / Math.max(term.current, term.previous, 1)) * 100)}%`,
                background: "var(--line-2)" }}/>
              <div style={{ position: "absolute", left: 0, top: 0, bottom: 0,
                width: `${Math.min(100, (term.current / Math.max(term.current, term.previous, 1)) * 100)}%`,
                background: `linear-gradient(90deg, ${color}66, ${color})`,
                boxShadow: `0 0 10px ${color}88`,
                transition: "width 900ms var(--ease-emph)" }}/>
            </div>
          </>
        ) : (
          <div style={{ fontSize: 14, color: "var(--text-faint)", padding: "20px 0" }}>—</div>
        )}
      </div>
    </Card>
  );
};

// ---------- Tornado chart ----------
const Tornado = ({ rising, falling, t }) => {
  const N = 10;
  const left  = falling.slice(0, N);
  const right = rising.slice(0, N);
  const rows = Math.max(left.length, right.length);
  const maxPctLeft  = Math.max(1, ...left.map(r => Math.abs(r.pct ?? 0)));
  const maxPctRight = Math.max(1, ...right.map(r => r.pct ?? 0));
  const maxAbs = Math.max(maxPctLeft, maxPctRight);

  const fmtPct = (p, sign = "+") => p === null ? "NEW" : `${p > 0 ? sign : ""}${Math.round(p * 100)}%`;

  return (
    <div className="tornado">
      <div className="tornado-head">
        <div className="t-col t-col-left">
          <Icon name="arrow-down" size={12}/> {t("falling_terms")}
        </div>
        <div className="t-col t-col-right">
          {t("rising_terms")} <Icon name="arrow-up" size={12}/>
        </div>
      </div>
      <div className="tornado-body">
        {Array.from({ length: rows }).map((_, i) => {
          const l = left[i];
          const r = right[i];
          const lPct = l ? (Math.abs(l.pct) / maxAbs) * 100 : 0;
          const rPct = r ? (r.pct / maxAbs) * 100 : 0;
          return (
            <div key={i} className="tornado-row">
              <div className="t-side t-side-left">
                <div className="t-term t-term-left" title={l?.term}>{l?.term || ""}</div>
                <div className="t-bar-wrap">
                  <div className="t-bar t-bar-left" style={{ width: `${lPct}%` }}/>
                </div>
                <div className="t-val t-val-left">{l ? fmtPct(l.pct, "-") : ""}</div>
              </div>
              <div className="t-axis"/>
              <div className="t-side t-side-right">
                <div className="t-val t-val-right">{r ? fmtPct(r.pct) : ""}</div>
                <div className="t-bar-wrap">
                  <div className="t-bar t-bar-right" style={{ width: `${rPct}%` }}/>
                </div>
                <div className="t-term t-term-right" title={r?.term}>{r?.term || ""}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ---------- Tile grid (for new terms) ----------
const TileGrid = ({ items, accent, t }) => {
  const max = items[0]?.current || 1;
  return (
    <div className="tile-grid">
      {items.map((r) => {
        const pct = Math.round(((r.current || 0) / max) * 100);
        return (
          <div key={r.term} className="tile" style={{ "--tile-accent": accent }}>
            <div className="tile-badge">NEW</div>
            <div className="tile-term" title={r.term}>{r.term}</div>
            <div className="tile-num num-mono">{(r.current || 0).toLocaleString()}</div>
            <div className="tile-bar"><div style={{ width: pct + "%" }}/></div>
          </div>
        );
      })}
    </div>
  );
};

// ---------- Zero list (compact row with bar) ----------
const ZeroList = ({ rows, accent, t }) => {
  const max = rows[0]?.current || rows[0]?.count || 1;
  return (
    <div style={{ padding: "2px 0" }}>
      {rows.map(r => {
        const current = r.current ?? r.count ?? 0;
        const previous = r.previous ?? 0;
        const pct = r.pct;
        const barPct = Math.max(2, (current / max) * 100);
        const pctStr = pct === null ? "NEW" : pct != null ? `${pct > 0 ? "+" : ""}${Math.round(pct * 100)}%` : "";
        return (
          <div key={r.term} style={{ padding: "8px 4px", borderBottom: "1px solid var(--line)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
              <div style={{ fontSize: 13, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0, flex: 1 }}>
                {r.term}
              </div>
              <div className="num-mono" style={{ fontSize: 12, fontWeight: 700, color: accent }}>
                {pctStr}
              </div>
            </div>
            <div style={{ height: 5, marginTop: 4, borderRadius: 4, background: "var(--bg-2)", overflow: "hidden" }}>
              <div style={{
                height: "100%", width: `${barPct}%`, borderRadius: 4,
                background: `linear-gradient(90deg, ${accent}55, ${accent})`,
                boxShadow: `0 0 6px ${accent}66`,
                transition: "width 800ms var(--ease-emph)",
              }}/>
            </div>
            <div style={{ display: "flex", gap: 10, marginTop: 3, fontSize: 10, color: "var(--text-faint)" }}>
              <span>actual <span className="mono" style={{ color: "var(--text-dim)" }}>{current.toLocaleString()}</span></span>
              {previous > 0 && <span>previo <span className="mono" style={{ color: "var(--text-faint)" }}>{previous.toLocaleString()}</span></span>}
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ---------- Limit slider (per-category cap) ----------
const LimitSlider = ({ t, value, onChange, min, max, step }) => {
  const fillPct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 260 }}>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
        <span style={{ fontSize: 11, letterSpacing: 1, textTransform: "uppercase", color: "var(--text-faint)" }}>
          {t("per_category")}
        </span>
        <InfoTip text={t("tip_per_category").replace("{min}", min).replace("{max}", max)}/>
      </div>
      <input
        type="range" min={min} max={max} step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="trend-slider"
        style={{ flex: 1, "--fill": `${fillPct}%` }}
      />
      <span className="mono" style={{
        minWidth: 36, textAlign: "right", fontSize: 13, fontWeight: 700,
        color: "var(--accent)",
        textShadow: "0 0 10px rgba(34,211,238,.4)",
      }}>{value}</span>
    </div>
  );
};

Object.assign(window, { ViewTrends, HeroMover, Tornado, TileGrid, ZeroList, LimitSlider });