// ————————————————————————————————————————————————————————————————
//  Trend Radar — autonomous trend signal detection dashboard
// ————————————————————————————————————————————————————————————————

const { useState: TRUS, useMemo: TRUM, useEffect: TRUE, useRef: TRUR } = React;

const TRIGGER_META = {
  supply_shortage:       { label: "Supply Shortage",     labelJp: "供給不足",           color: "oklch(68% 0.18 25)",   icon: "⚠" },
  demand_surge:          { label: "Demand Surge",        labelJp: "需要急増",           color: "oklch(72% 0.16 145)",  icon: "📈" },
  capacity_constraint:   { label: "Capacity Constraint", labelJp: "設備能力制約",        color: "oklch(70% 0.14 30)",   icon: "🔧" },
  policy_catalyst:       { label: "Policy Catalyst",     labelJp: "政策触媒",           color: "oklch(66% 0.16 260)",  icon: "🏛" },
  technology_shift:      { label: "Technology Shift",    labelJp: "技術転換",           color: "oklch(72% 0.14 300)",  icon: "🔬" },
  geopolitical_shift:    { label: "Geopolitical Shift",  labelJp: "地政学変動",          color: "oklch(64% 0.18 15)",   icon: "🌍" },
  cycle_rotation:        { label: "Cycle Rotation",      labelJp: "セクターローテーション", color: "oklch(74% 0.12 200)",  icon: "🔄" },
  global_synchronous_move:{ label: "Global Sync Move",   labelJp: "世界同時高",          color: "oklch(70% 0.16 80)",   icon: "🌐" },
};

const ANTI_PATTERN_META = {
  "WARNING:peak_earnings_trap":       { label: "Peak Earnings Trap",      labelJp: "ピーク収益トラップ",   color: "oklch(60% 0.22 25)",  icon: "🚨" },
  "WARNING:capacity_expansion_hangover": { label: "Capacity Hangover",    labelJp: "設備過剰リスク",      color: "oklch(62% 0.18 40)",  icon: "⚡" },
};

const STATUS_STYLE = {
  monitoring:    { bg: "oklch(30% 0.02 260)", fg: "oklch(72% 0.05 260)", label: "Monitoring",    labelJp: "監視中" },
  investigating: { bg: "oklch(30% 0.06 70)",  fg: "oklch(78% 0.14 70)",  label: "Investigating", labelJp: "調査中" },
  confirmed:     { bg: "oklch(28% 0.06 145)", fg: "oklch(76% 0.16 145)", label: "Confirmed",     labelJp: "確認済" },
};

function ScoreBadge({ score }) {
  const fills = [];
  for (let i = 1; i <= 5; i++) {
    fills.push(
      <span key={i} style={{
        display: "inline-block", width: 8, height: 8, borderRadius: "50%",
        marginRight: 2,
        background: i <= score ? "oklch(76% 0.16 145)" : "oklch(30% 0.02 260)",
        border: i <= score ? "none" : "1px solid oklch(40% 0.02 260)",
      }} />
    );
  }
  return <span style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>{fills}</span>;
}

function SignalCard({ signal, lang, onOpenStock }) {
  const [expanded, setExpanded] = TRUS(false);
  const triggerType = signal.trigger_type;
  const isWarning = triggerType.startsWith("WARNING:");
  const meta = isWarning
    ? (ANTI_PATTERN_META[triggerType] || { label: triggerType, labelJp: triggerType, color: "oklch(60% 0.18 25)", icon: "⚠" })
    : (TRIGGER_META[triggerType] || { label: triggerType, labelJp: triggerType, color: "oklch(70% 0.05 260)", icon: "?" });
  const sMeta = STATUS_STYLE[signal.status] || STATUS_STYLE.monitoring;

  return (
    <div className="trend-card" style={{
      borderLeft: `3px solid ${meta.color}`,
      background: isWarning ? "oklch(22% 0.03 25 / 0.4)" : "var(--card-bg)",
    }}>
      <div className="trend-card-header" onClick={() => setExpanded(!expanded)} style={{ cursor: "pointer" }}>
        <div className="trend-card-left">
          <span className="trend-icon">{meta.icon}</span>
          <div>
            <div className="trend-type" style={{ color: meta.color }}>
              {lang === "jp" ? meta.labelJp : meta.label}
            </div>
            <div className="trend-headline">{signal.headline}</div>
          </div>
        </div>
        <div className="trend-card-right">
          <ScoreBadge score={signal.confidence_score} />
          <span className="trend-status" style={{
            background: sMeta.bg, color: sMeta.fg,
          }}>
            {lang === "jp" ? sMeta.labelJp : sMeta.label}
          </span>
          <span className="trend-expand">{expanded ? "▾" : "▸"}</span>
        </div>
      </div>

      {expanded && (
        <div className="trend-card-body">
          <div className="trend-meta-row">
            <span className="trend-meta-label">{lang === "jp" ? "日付" : "Date"}</span>
            <span>{signal.date}</span>
          </div>
          {signal.supply_chain && (
            <div className="trend-meta-row">
              <span className="trend-meta-label">{lang === "jp" ? "サプライチェーン" : "Supply Chain"}</span>
              <span>{signal.supply_chain.replace(/_/g, " ")}</span>
            </div>
          )}
          {signal.tickers && signal.tickers.length > 0 && (
            <div className="trend-meta-row">
              <span className="trend-meta-label">{lang === "jp" ? "関連銘柄" : "Tickers"}</span>
              <span className="trend-tickers">
                {signal.tickers.map((tk) => (
                  <button key={tk} className="trend-ticker-btn" onClick={(e) => {
                    e.stopPropagation();
                    if (window.STOCKS && window.STOCKS[tk]) onOpenStock(tk);
                  }}>
                    {tk}
                  </button>
                ))}
              </span>
            </div>
          )}
          {signal.confirming_signals && signal.confirming_signals.length > 1 && (
            <div className="trend-confirms">
              <div className="trend-meta-label" style={{ marginBottom: 4 }}>
                {lang === "jp" ? `確認シグナル (${signal.signal_count})` : `Confirming signals (${signal.signal_count})`}
              </div>
              {signal.confirming_signals.map((cs, i) => (
                <div key={i} className="trend-confirm-item">
                  <span className="trend-confirm-date">{cs.date}</span>
                  <span>{cs.headline}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function TriggerTypeFilter({ active, setActive, signals, lang }) {
  // Count signals by trigger type
  const counts = TRUM(() => {
    const c = {};
    (signals || []).forEach((s) => {
      const t = s.trigger_type;
      c[t] = (c[t] || 0) + 1;
    });
    return c;
  }, [signals]);

  const types = Object.keys(counts).sort((a, b) => (counts[b] || 0) - (counts[a] || 0));

  return (
    <div className="trend-filters">
      <button
        className={active === "all" ? "trend-filter on" : "trend-filter"}
        onClick={() => setActive("all")}
      >
        {lang === "jp" ? "全て" : "All"} ({signals.length})
      </button>
      {types.map((t) => {
        const isWarning = t.startsWith("WARNING:");
        const meta = isWarning
          ? (ANTI_PATTERN_META[t] || { label: t, labelJp: t, icon: "⚠" })
          : (TRIGGER_META[t] || { label: t, labelJp: t, icon: "?" });
        return (
          <button
            key={t}
            className={active === t ? "trend-filter on" : "trend-filter"}
            onClick={() => setActive(active === t ? "all" : t)}
          >
            {meta.icon} {lang === "jp" ? meta.labelJp : meta.label} ({counts[t]})
          </button>
        );
      })}
    </div>
  );
}

function MethodologyCard({ lang }) {
  const [open, setOpen] = TRUS(false);
  const patterns = window.REASONING_PATTERNS || {};
  const core = patterns.core_methodology || {};
  const antiPatterns = patterns.anti_patterns || [];
  const cycleIndicators = patterns.cycle_indicators || {};

  if (!core.steps) return null;

  return (
    <div className="trend-card methodology-card">
      <div className="trend-card-header" onClick={() => setOpen(!open)} style={{ cursor: "pointer" }}>
        <div className="trend-card-left">
          <span className="trend-icon">🧠</span>
          <div>
            <div className="trend-type" style={{ color: "oklch(76% 0.12 200)" }}>
              {lang === "jp" ? "分析手法" : "Methodology"}
            </div>
            <div className="trend-headline">
              {lang === "jp" ? "T-glass法 — サプライチェーン・ボトルネック分析" : "T-glass Method — Supply Chain Bottleneck Analysis"}
            </div>
          </div>
        </div>
        <span className="trend-expand">{open ? "▾" : "▸"}</span>
      </div>
      {open && (
        <div className="trend-card-body">
          <div className="methodology-steps">
            {(core.steps || []).map((step, i) => (
              <div key={i} className="methodology-step">{step}</div>
            ))}
          </div>

          {antiPatterns.length > 0 && (
            <div style={{ marginTop: 12 }}>
              <div className="trend-meta-label" style={{ marginBottom: 6, color: "oklch(68% 0.18 25)" }}>
                {lang === "jp" ? "アンチパターン（警告）" : "Anti-Patterns (Warnings)"}
              </div>
              {antiPatterns.map((ap, i) => (
                <div key={i} className="anti-pattern-item">
                  <strong>{ap.name.replace(/_/g, " ")}</strong>: {ap.description}
                </div>
              ))}
            </div>
          )}

          {cycleIndicators.buy_signals && (
            <div className="cycle-indicators" style={{ marginTop: 12 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div>
                  <div className="trend-meta-label" style={{ marginBottom: 4, color: "oklch(76% 0.16 145)" }}>
                    {lang === "jp" ? "買いシグナル" : "Buy Signals"}
                  </div>
                  {(cycleIndicators.buy_signals || []).map((s, i) => (
                    <div key={i} className="cycle-signal buy">{s}</div>
                  ))}
                </div>
                <div>
                  <div className="trend-meta-label" style={{ marginBottom: 4, color: "oklch(68% 0.18 25)" }}>
                    {lang === "jp" ? "売りシグナル" : "Sell Signals"}
                  </div>
                  {(cycleIndicators.sell_signals || []).map((s, i) => (
                    <div key={i} className="cycle-signal sell">{s}</div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function TrendRadarView({ lang, onOpenStock }) {
  const [filter, setFilter] = TRUS("all");
  const [statusFilter, setStatusFilter] = TRUS("all");

  const signals = TRUM(() => {
    const data = window.TREND_SIGNALS || {};
    return data.signals || [];
  }, []);

  const stats = TRUM(() => {
    const data = window.TREND_SIGNALS || {};
    return data.by_status || { monitoring: 0, investigating: 0, confirmed: 0 };
  }, []);

  const updatedAt = (window.TREND_SIGNALS || {}).updated_at || "";

  const filtered = TRUM(() => {
    let list = signals;
    if (filter !== "all") {
      list = list.filter((s) => s.trigger_type === filter);
    }
    if (statusFilter !== "all") {
      list = list.filter((s) => s.status === statusFilter);
    }
    return list;
  }, [signals, filter, statusFilter]);

  // Separate warnings from regular signals
  const warnings = TRUM(() => filtered.filter((s) => s.trigger_type.startsWith("WARNING:")), [filtered]);
  const regularSignals = TRUM(() => filtered.filter((s) => !s.trigger_type.startsWith("WARNING:")), [filtered]);
  const actionable = TRUM(() => signals.filter((s) => s.confidence_score >= 3), [signals]);

  return (
    <div className="trend-radar">
      {/* Header stats */}
      <div className="trend-stats-bar">
        <div className="trend-stat">
          <div className="trend-stat-value">{signals.length}</div>
          <div className="trend-stat-label">{lang === "jp" ? "全シグナル" : "Total Signals"}</div>
        </div>
        <div className="trend-stat">
          <div className="trend-stat-value" style={{ color: "oklch(76% 0.16 145)" }}>{stats.confirmed || 0}</div>
          <div className="trend-stat-label">{lang === "jp" ? "確認済" : "Confirmed"}</div>
        </div>
        <div className="trend-stat">
          <div className="trend-stat-value" style={{ color: "oklch(78% 0.14 70)" }}>{stats.investigating || 0}</div>
          <div className="trend-stat-label">{lang === "jp" ? "調査中" : "Investigating"}</div>
        </div>
        <div className="trend-stat">
          <div className="trend-stat-value">{stats.monitoring || 0}</div>
          <div className="trend-stat-label">{lang === "jp" ? "監視中" : "Monitoring"}</div>
        </div>
        <div className="trend-stat">
          <div className="trend-stat-value" style={{ color: "oklch(72% 0.16 30)" }}>{actionable.length}</div>
          <div className="trend-stat-label">{lang === "jp" ? "DD対象" : "DD Candidates"}</div>
        </div>
        {updatedAt && (
          <div className="trend-stat" style={{ marginLeft: "auto" }}>
            <div className="trend-stat-value" style={{ fontSize: 11 }}>{updatedAt.split("T")[0]}</div>
            <div className="trend-stat-label">{lang === "jp" ? "最終更新" : "Last Scan"}</div>
          </div>
        )}
      </div>

      {/* Status filter */}
      <div className="trend-status-filter">
        {[
          { key: "all", label: "All", labelJp: "全て" },
          { key: "confirmed", label: "Confirmed", labelJp: "確認済" },
          { key: "investigating", label: "Investigating", labelJp: "調査中" },
          { key: "monitoring", label: "Monitoring", labelJp: "監視中" },
        ].map(({ key, label, labelJp }) => (
          <button
            key={key}
            className={statusFilter === key ? "trend-filter on" : "trend-filter"}
            onClick={() => setStatusFilter(statusFilter === key ? "all" : key)}
          >
            {lang === "jp" ? labelJp : label}
          </button>
        ))}
      </div>

      {/* Trigger type filter */}
      <TriggerTypeFilter active={filter} setActive={setFilter} signals={signals} lang={lang} />

      {/* Methodology card */}
      <MethodologyCard lang={lang} />

      {/* Warnings section */}
      {warnings.length > 0 && (
        <div className="trend-section">
          <div className="trend-section-header" style={{ color: "oklch(68% 0.18 25)" }}>
            {lang === "jp" ? "警告シグナル" : "Warning Signals"}
          </div>
          {warnings.map((s, i) => (
            <SignalCard key={s.id || i} signal={s} lang={lang} onOpenStock={onOpenStock} />
          ))}
        </div>
      )}

      {/* Regular signals */}
      {regularSignals.length > 0 && (
        <div className="trend-section">
          <div className="trend-section-header">
            {lang === "jp" ? "トレンドシグナル" : "Trend Signals"}
            {actionable.length > 0 && (
              <span className="trend-actionable-badge">
                {actionable.length} {lang === "jp" ? "件がDD対象" : "actionable"}
              </span>
            )}
          </div>
          {regularSignals.map((s, i) => (
            <SignalCard key={s.id || i} signal={s} lang={lang} onOpenStock={onOpenStock} />
          ))}
        </div>
      )}

      {signals.length === 0 && (
        <div className="trend-empty">
          <div className="trend-empty-icon">📡</div>
          <div>{lang === "jp" ? "スキャン中... シグナルなし" : "Scanning... No signals detected yet"}</div>
          <div className="trend-empty-sub">
            {lang === "jp"
              ? "トレンドディテクターがニュースフィードを自動スキャンし、投資関連トレンドを検出します"
              : "The trend detector automatically scans news feeds for investment-relevant trends using MK's methodology patterns"}
          </div>
        </div>
      )}
    </div>
  );
}

window.TrendRadarView = TrendRadarView;