/* NAS Insight Panel — 페르소나에 매칭되는 나스미디어 인사이트 노출
   - 최근 1년 인사이트 중 현재 카테고리와 매칭되는 것 표시
   - 매칭된 인사이트의 boost 합산이 페르소나 점수에 반영됨을 시각화
*/

const { useState: useNIState, useMemo: useNIMemo } = React;

function NasInsightPanel({ query }) {
  const [ver, setVer] = useNIState(0);
  const agg = useNIMemo(() => {
    if (!window.NasInsight) return null;
    return window.NasInsight.aggregate(query);
  }, [JSON.stringify(query.flatMap(g => g.leaves)), ver]);

  const meta = window.NasInsight?.meta?.();
  const initStatus = window.NasInsight?.syncStatus?.() || { isDue: true, last: 0, ageDays: null, dueInDays: 0 };
  const [syncState, setSyncState] = useNIState({
    status: 'idle', lastSync: initStatus.last ? new Date(initStatus.last) : null,
    newCount: 0, items: [], ageDays: initStatus.ageDays, dueInDays: initStatus.dueInDays,
  });

  async function refresh() {
    if (!window.DataLab?.nasFeed) return;
    setSyncState(s => ({ ...s, status: 'syncing' }));
    try {
      const feed = await window.DataLab.nasFeed({ limit: 12 });
      const merge = window.NasInsight.mergeFeedItems(feed.items || []);   // 신규글 데이터셋 병합(영속)
      window.NasInsight.setLastSync(Date.now());
      if (merge.merged > 0) setVer(v => v + 1);                            // 매칭 재계산
      const st = window.NasInsight.syncStatus();
      setSyncState({
        status: merge.merged > 0 ? 'new' : 'ok',
        lastSync: new Date(),
        newCount: merge.merged,
        items: merge.items,
        ageDays: st.ageDays, dueInDays: st.dueInDays,
      });
    } catch (e) {
      setSyncState(s => ({ ...s, status: 'error' }));
    }
  }

  // 주간 자동 갱신 — 마지막 동기화 후 7일 경과(또는 최초)일 때만 자동 호출
  React.useEffect(() => {
    const st = window.NasInsight?.syncStatus?.();
    if (st && st.isDue) refresh();
    else setSyncState(s => ({ ...s, status: 'ok' }));
    /* eslint-disable-line */
  }, []);

  if (!agg || !meta) return null;

  const matched = agg.matched;
  const boostEntries = Object.entries(agg.boost).sort((a, b) => b[1] - a[1]).slice(0, 6);
  const labels = window.NAS_INSIGHTS?.boostKeys || {};

  return (
    <div className="ni-panel">
      <div className="ni-head">
        <div>
          <span className="label" style={{ fontSize: 10 }}>나스미디어 인사이트 매칭</span>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 2 }}>
            <strong style={{ fontSize: 17, fontWeight: 700 }}>{matched.length}건</strong>
            <span className="mono mute" style={{ fontSize: 11 }}>
              · 전체 {meta.total}건 중 · {meta.lastUpdated} 기준
              {window.NasInsight.feedCount() > 0 && <> · 자동수집 {window.NasInsight.feedCount()}건</>}
            </span>
          </div>
          <div className="mono mute" style={{ fontSize: 10, marginTop: 3, color: 'var(--plant)' }}>
            ⟳ 주간 자동 갱신 · {syncState.lastSync
              ? <>마지막 {syncState.ageDays != null ? (syncState.ageDays === 0 ? '오늘' : syncState.ageDays + '일 전') : '방금'} · 다음 D-{syncState.dueInDays != null ? syncState.dueInDays : 7}</>
              : '미동기화 — 첫 접속 시 자동 수집'}
          </div>
        </div>
        <div className="ni-head-actions">
          <button className="ni-sync" data-state={syncState.status} onClick={refresh} disabled={syncState.status === 'syncing'}>
            {syncState.status === 'syncing' && <><span className="spin"></span> 동기화 중</>}
            {syncState.status === 'idle' && <>🔄 새로고침</>}
            {syncState.status === 'ok' && <>✓ 최신 ({syncState.items.length}건 확인)</>}
            {syncState.status === 'new' && <>● 신규 {syncState.newCount}건</>}
            {syncState.status === 'error' && <>! 재시도</>}
          </button>
          <a className="ni-source" href={meta.source} target="_blank" rel="noreferrer noopener">↗ 원본</a>
        </div>
      </div>

      {/* 신규 글 알림 */}
      {syncState.status === 'new' && syncState.newCount > 0 && (
        <div className="ni-new-banner">
          <strong>● 새 인사이트 {syncState.newCount}건을 데이터셋에 병합했습니다.</strong>
          <span className="mono mute" style={{ fontSize: 10 }}>
            마지막 동기화 {syncState.lastSync ? new Date(syncState.lastSync).toLocaleString('ko-KR') : '-'}
          </span>
          <div className="ni-new-list">
            {syncState.items.slice(0, 4).map(it => (
              <a key={it.id} href={it.link || '#'} target="_blank" rel="noreferrer noopener" className="ni-new-item">
                <span>{it.date}</span> · <strong>{it.title}</strong>
              </a>
            ))}
          </div>
          <span className="mono mute" style={{ fontSize: 10 }}>
            ※ 자동수집 글은 태그로 매칭에만 사용 — 행동 가중(boost)은 수동 분석 전까지 부여하지 않습니다(거짓 정밀 금지). localStorage에 누적 영속.
          </span>
        </div>
      )}

      {/* Boost effects */}
      {boostEntries.length > 0 && (
        <div className="ni-boosts">
          <div className="label" style={{ fontSize: 10, marginBottom: 5 }}>페르소나에 적용된 행동 가중</div>
          <div className="ni-boost-list">
            {boostEntries.map(([k, v]) => (
              <div key={k} className="ni-boost">
                <span className="ni-boost-label">{labels[k] || k}</span>
                <span className="ni-boost-mult">×{v.toFixed(2)}</span>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Insight cards */}
      <div className="ni-list">
        {matched.length === 0 ? (
          <div className="ni-empty">매칭되는 최신 인사이트 없음 — 카테고리를 추가하면 매주 발간되는 나스미디어 보고서가 자동 매칭됩니다.</div>
        ) : (
          matched.slice(0, 5).map(ins => (
            <div key={ins.id} className="ni-card">
              <div className="ni-card-head">
                <strong>{ins.title}</strong>
                <span className="mono mute" style={{ fontSize: 10 }}>{ins.date}</span>
              </div>
              <div className="ni-tags">
                {(ins.tags || []).map(t => <span key={t} className="ni-tag">#{t}</span>)}
              </div>
              {ins.keyStats && (
                <div className="ni-stats">
                  {Object.entries(ins.keyStats).slice(0, 3).map(([k, v]) => (
                    <div key={k} className="ni-stat">
                      <span className="ni-stat-l">{k}</span>
                      <span className="ni-stat-v">{typeof v === 'number' && v < 100 && v !== Math.round(v) ? v.toFixed(1) : v}{typeof v === 'number' && k.includes('%') === false && v < 100 ? '%' : ''}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))
        )}
      </div>

      <style>{`
        .ni-panel {
          display: flex; flex-direction: column; gap: 10px;
          padding: 12px 14px;
          background: linear-gradient(120deg, oklch(0.74 0.13 145 / 0.05), transparent 70%);
          border: 1px solid rgba(255,240,220,0.10);
          border-left: 2px solid var(--plant);
        }
        .ni-head {
          display: flex; justify-content: space-between; align-items: flex-start;
          gap: 12px;
        }
        .ni-head-actions { display: flex; gap: 6px; align-items: center; }
        .ni-sync {
          padding: 4px 10px;
          background: oklch(0.10 0.02 240 / 0.5);
          border: 1px solid rgba(255,240,220,0.18);
          color: var(--text);
          font-size: 11px;
          font-weight: 600;
          font-family: var(--font-sans);
          cursor: pointer;
          display: inline-flex; align-items: center; gap: 5px;
          transition: all 0.15s;
        }
        .ni-sync:disabled { cursor: wait; opacity: 0.7; }
        .ni-sync:hover:not(:disabled) { background: oklch(0.13 0.02 240 / 0.7); }
        .ni-sync[data-state="new"] {
          background: oklch(0.80 0.14 72 / 0.20);
          border-color: var(--signal);
          color: var(--signal);
          animation: nipulse 2s infinite;
        }
        .ni-sync[data-state="ok"] { color: var(--plant); border-color: oklch(0.74 0.13 145 / 0.4); }
        .ni-sync[data-state="error"] { color: var(--alert); border-color: var(--alert); }
        @keyframes nipulse {
          0%, 100% { box-shadow: 0 0 0 0 oklch(0.80 0.14 72 / 0.5); }
          50%      { box-shadow: 0 0 0 6px oklch(0.80 0.14 72 / 0); }
        }
        .ni-new-banner {
          padding: 10px 12px;
          background: oklch(0.80 0.14 72 / 0.10);
          border: 1px solid var(--signal);
          display: flex; flex-direction: column; gap: 6px;
        }
        .ni-new-banner > strong { font-size: 12px; color: var(--signal); }
        .ni-new-list { display: flex; flex-direction: column; gap: 3px; margin: 4px 0; }
        .ni-new-item {
          font-size: 11px; color: var(--text-dim); text-decoration: none;
          padding: 2px 0;
        }
        .ni-new-item strong { color: var(--text); }
        .ni-new-item:hover strong { color: var(--signal); }
        .ni-source {
          font-size: 10px;
          color: var(--cyan);
          text-decoration: none;
          font-family: var(--font-mono);
          padding: 3px 7px;
          border: 1px solid oklch(0.78 0.12 220 / 0.35);
          background: oklch(0.78 0.12 220 / 0.07);
        }
        .ni-source:hover { background: oklch(0.78 0.12 220 / 0.20); }
        .ni-boosts {
          padding: 8px 10px;
          background: rgba(255,240,220,0.04);
          border: 1px solid var(--border);
        }
        .ni-boost-list {
          display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 14px;
        }
        .ni-boost {
          display: flex; justify-content: space-between;
          font-size: 11px; padding: 2px 0;
        }
        .ni-boost-label { color: var(--text-dim); }
        .ni-boost-mult {
          font-family: var(--font-mono);
          color: var(--plant); font-weight: 600;
        }
        .ni-list {
          display: flex; flex-direction: column; gap: 6px;
          max-height: 320px; overflow-y: auto;
        }
        .ni-empty {
          padding: 14px; font-size: 11px; text-align: center;
          color: var(--text-mute); font-style: italic;
        }
        .ni-card {
          padding: 8px 10px;
          background: oklch(0.10 0.02 240 / 0.5);
          border: 1px solid var(--border);
          display: flex; flex-direction: column; gap: 5px;
        }
        .ni-card-head {
          display: flex; justify-content: space-between; align-items: baseline;
          gap: 8px;
        }
        .ni-card-head strong { font-size: 12px; font-weight: 600; line-height: 1.4; }
        .ni-tags { display: flex; gap: 4px; flex-wrap: wrap; }
        .ni-tag {
          font-family: var(--font-mono); font-size: 9px;
          padding: 1px 5px;
          background: oklch(0.78 0.12 220 / 0.10);
          color: var(--cyan);
        }
        .ni-stats {
          display: flex; gap: 10px; flex-wrap: wrap;
          padding-top: 4px;
          border-top: 1px dashed var(--border);
        }
        .ni-stat { display: flex; flex-direction: column; }
        .ni-stat-l { font-size: 9px; color: var(--text-mute); }
        .ni-stat-v { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
      `}</style>
    </div>
  );
}

Object.assign(window, { NasInsightPanel });