// News v7 — Executive News Intelligence Cockpit
// Apple News + Bloomberg Terminal + Reuters + Feedly Pro DNA, KW Birlik diline çevrilmiş
// Modüler yapı: NewsScreen + LikedNewsScreen v2 + 7 yeni component (tek dosya, mevcut codebase paterni)

// ============================================================
// HELPERS
// ============================================================

const importanceMeta = (score) => {
  if (score >= 8) return { label: 'Kritik', cls: 'crit', dot: '🔴' };
  if (score >= 6) return { label: 'Önemli', cls: 'high', dot: '🟠' };
  if (score >= 4) return { label: 'Orta',   cls: 'mid',  dot: '🟡' };
  return                 { label: 'Düşük',  cls: 'low',  dot: '⚪' };
};

const relativeTime = (iso) => {
  const t = new Date(iso).getTime();
  const now = new Date('2026-05-03T13:14:00Z').getTime();
  const diff = now - t;
  const min = Math.floor(diff / 60000);
  if (min < 1) return 'şimdi';
  if (min < 60) return `${min} dk önce`;
  const hr = Math.floor(min / 60);
  if (hr < 24) return `${hr} sa önce`;
  const day = Math.floor(hr / 24);
  if (day === 1) return 'dün';
  if (day < 7) return `${day} gün önce`;
  return `${Math.floor(day / 7)} hafta önce`;
};

const trustClass = (t) => t >= 8.5 ? 'high' : t >= 7.5 ? 'med' : 'low';

// Render text with business-context keyword highlights
const HighlightedText = ({ text }) => {
  if (!text) return null;
  const segs = NEWS_V7.highlightKeywords(text);
  return (
    <>
      {segs.map((s, i) => s.hl
        ? <span key={i} className="kw-hl">{s.text}</span>
        : <React.Fragment key={i}>{s.text}</React.Fragment>
      )}
    </>
  );
};

// ============================================================
// SHARED ATOMS
// ============================================================

const ImportancePill = ({ score }) => {
  const m = importanceMeta(score);
  return (
    <span className={`importance-pill ${m.cls}`}>
      <span className="importance-dot">{m.dot}</span>
      {m.label} · {score.toFixed(1)}
    </span>
  );
};

const TrustPill = ({ trust }) => (
  <span className={`trust-pill ${trustClass(trust)}`} title={`Kaynak güvenilirlik puanı: ${trust.toFixed(1)} / 10. Son 90 günde gerçeklik denetimine göre.`}>
    <span className="trust-shield"></span>
    trust {trust.toFixed(1)}
  </span>
);

const ReadIndicator = ({ isRead, onToggle }) => (
  <button
    className={`read-indicator ${isRead ? 'read' : ''}`}
    onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggle(); }}
    title={isRead ? 'Okunmadı işaretle' : 'Okundu işaretle'}
    aria-label={isRead ? 'Okunmadı işaretle' : 'Okundu işaretle'}
  >
    <span className="dot-circle"></span>
  </button>
);

// ============================================================
// BREAKING STRIP
// ============================================================

const BreakingStrip = ({ items, onOpen }) => {
  if (!items || items.length < 1) return null;
  return (
    <div className="breaking-strip">
      <div className="breaking-h">
        <span className="pulse-dot"></span>
        <span>BREAKING — son 2 saat</span>
        <span className="breaking-meta">{items.length} önemli haber</span>
      </div>
      <ul className="breaking-list">
        {items.map(it => (
          <li key={it.id} className="breaking-item" onClick={() => onOpen(it)}>
            <span className="b-bullet">•</span>
            <span className="b-title"><HighlightedText text={it.title}/></span>
            <span className="b-meta">{it.source} · {relativeTime(it.publishedAt)}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

// ============================================================
// HERO GRID (1 büyük + 2 mini)
// ============================================================

const HeroGrid = ({ items, onOpen, onToggleLike }) => {
  if (!items || items.length < 1) return null;
  const [main, ...sides] = items;

  return (
    <div className="news-hero-grid">
      <div className="news-hero-main" onClick={() => onOpen(main)}>
        <button
          className={`news-pin-btn news-hero-pin ${main.liked ? 'liked' : ''}`}
          onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggleLike(main.id); }}
          aria-label={main.liked ? 'Beğeniden çıkar' : 'Beğen'}
        >
          <Icon name="bookmark" size={15}/>
        </button>
        <div className="news-hero-rank featured">⚡ Günün Manşeti · Önem {main.importance.toFixed(1)}</div>
        <div className="news-hero-meta">
          <ImportancePill score={main.importance}/>
          <span className="news-source-pill">{main.source}</span>
          <TrustPill trust={main.source_trust}/>
          <span className="news-time">{relativeTime(main.publishedAt)}</span>
        </div>
        <h2 className="news-hero-title"><HighlightedText text={main.title}/></h2>
        {main.hook && (
          <div className="news-hero-hook">
            <HighlightedText text={main.hook}/>
          </div>
        )}
        {main.whyRelevant && (
          <div className="news-hero-why">
            <div className="news-hero-why-h">💡 Niye sana önemli</div>
            <HighlightedText text={main.whyRelevant}/>
          </div>
        )}
        <div className="news-hero-cta">
          <Icon name="external" size={11}/>
          <span>Reader mode → CoS özeti</span>
        </div>
      </div>

      <div className="news-hero-side">
        {sides.slice(0, 2).map((it, i) => (
          <div key={it.id} className="news-hero-mini" onClick={() => onOpen(it)}>
            <div className="news-hero-rank">{i === 0 ? 'Öne çıkan' : 'Takip et'} · {it.importance.toFixed(1)}</div>
            <div className="news-hero-meta">
              <ImportancePill score={it.importance}/>
            </div>
            <h3 className="news-hero-mini-title"><HighlightedText text={it.title}/></h3>
            <div className="news-hero-meta" style={{ marginTop: 'auto' }}>
              <span className="news-source-pill">{it.source}</span>
              <span className="news-time">{relativeTime(it.publishedAt)}</span>
            </div>
          </div>
        ))}
        {sides.length === 0 && (
          <div className="news-hero-mini" style={{ alignItems: 'center', justifyContent: 'center', color: 'var(--text-tertiary)', fontSize: 12 }}>
            Bugün ek manşet yok
          </div>
        )}
      </div>
    </div>
  );
};

// ============================================================
// DATE BAR (v6 + count rosette)
// ============================================================

const DateBar = ({ selectedDay, onSelect, dayCounts }) => {
  return (
    <div className="news-date-bar">
      <div className="date-bar-track">
        {last7Days.map(d => (
          <button
            key={d.iso}
            className={`date-pill ${d.iso === selectedDay ? 'active' : ''}`}
            onClick={() => onSelect(d.iso)}
          >
            <span className="date-pill-label">{d.label}</span>
            {d.offset > 1 && <span className="date-pill-day">{d.shortDay}</span>}
            {dayCounts[d.iso] > 0 && (
              <span className="date-pill-count">{dayCounts[d.iso]}</span>
            )}
          </button>
        ))}
      </div>
    </div>
  );
};

// ============================================================
// CATEGORY TABS
// ============================================================

const CATEGORIES = [
  { id: 'tr',     flag: '🇹🇷', label: 'Türkiye' },
  { id: 'us',     flag: '🇺🇸', label: 'Amerika' },
  { id: 'global', flag: '🌍', label: 'Küresel' },
];

const CategoryTabs = ({ active, counts, onPick }) => (
  <div className="news-cat-tabs">
    {CATEGORIES.map(c => (
      <button
        key={c.id}
        className={`news-cat-tab ${active === c.id ? 'active' : ''}`}
        onClick={() => onPick(c.id)}
      >
        <span className="news-cat-flag">{c.flag}</span>
        <span>{c.label}</span>
        <span className="news-cat-count">{counts[c.id] || 0}</span>
      </button>
    ))}
  </div>
);

// ============================================================
// UTILITY BAR (search / filter / sources / threads)
// ============================================================

const UtilityBar = ({ onSearch, onSources, onThreads, onFilter, sourcesCount, threadsCount, filtersActive }) => (
  <div className="news-utility-bar" style={{ position: 'relative' }}>
    <div className="utility-search" onClick={onSearch}>
      <Icon name="search" size={14}/>
      <span>Ara: "İzmir konut", "EB-1A", "faiz"…</span>
      <span className="kbd">⌘K</span>
    </div>
    <button className="utility-btn" onClick={onFilter} style={filtersActive ? { borderColor: 'var(--kw-red)', color: 'var(--kw-red)' } : {}}>
      <Icon name="filter" size={13}/>
      <span>Filter</span>
    </button>
    <button className="utility-btn" onClick={onSources}>
      <Icon name="globe" size={13}/>
      <span>Kaynaklar</span>
      <span className="util-count">{sourcesCount}</span>
    </button>
    <button className="utility-btn" onClick={onThreads}>
      <span style={{ fontSize: 13 }}>🧬</span>
      <span>Konular</span>
      <span className="util-count">{threadsCount}</span>
    </button>
  </div>
);

// ============================================================
// NEWS ITEM CARD v7
// ============================================================

const NewsItemCardV7 = ({
  item, selected, onToggleLike, onToggleSelect, onToggleRead, onOpenReader, onOpenThread,
}) => {
  const thread = item.threadId ? NEWS_V7.getThread(item.threadId) : null;

  return (
    <div className={`news-item-card ${item.isRead ? 'is-read' : ''}`} style={{ position: 'relative' }}>
      <div
        className={`news-select-checkbox ${selected ? 'checked' : ''}`}
        onClick={(e) => { e.stopPropagation(); onToggleSelect(item.id); }}
        title={selected ? 'Seçimi kaldır' : 'Çoklu seç'}
      >
        {selected && <Icon name="check" size={11}/>}
      </div>

      <div className="news-item-head">
        <div className="news-item-meta">
          <ImportancePill score={item.importance}/>
          <span className="news-source-pill">{item.source}</span>
          <TrustPill trust={item.source_trust}/>
          <span className="news-time">{relativeTime(item.publishedAt)}</span>
        </div>
        <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          <ReadIndicator isRead={item.isRead} onToggle={() => onToggleRead(item.id)}/>
          <button
            className={`news-pin-btn ${item.liked ? 'liked' : ''}`}
            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggleLike(item.id); }}
            aria-label={item.liked ? 'Beğeniden çıkar' : 'Beğen'}
            title={item.liked ? 'Beğeniden çıkar' : 'Beğen'}
          >
            <Icon name="bookmark" size={15}/>
          </button>
        </div>
      </div>

      <h3 className="news-item-title" onClick={() => onOpenReader(item)} style={{ cursor: 'pointer' }}>
        <HighlightedText text={item.title}/>
      </h3>

      {item.hook && (
        <p className="news-item-hook">
          <span className="hook-icon">📌</span>
          <HighlightedText text={item.hook}/>
        </p>
      )}

      {item.whyRelevant && (
        <div className="news-item-why">
          <span className="why-icon">💡</span>
          <span><HighlightedText text={item.whyRelevant}/></span>
        </div>
      )}

      {thread && (
        <button className="thread-badge" onClick={(e) => { e.stopPropagation(); onOpenThread(thread.id); }}>
          <span className="thread-emoji">{thread.emoji}</span>
          <span>Konu: {thread.label}</span>
          <span className="thread-count">→</span>
        </button>
      )}

      <div className="news-item-foot-v7">
        <button className="reader-btn" onClick={() => onOpenReader(item)}>
          <span style={{ fontSize: 13 }}>📖</span>
          <span>İçinde oku</span>
        </button>
        <a href={item.url} target="_blank" rel="noopener noreferrer" className="foot-link" onClick={(e) => e.stopPropagation()}>
          <span>Kaynağa git</span>
          <Icon name="external" size={11}/>
        </a>
      </div>
    </div>
  );
};

// ============================================================
// MULTI-SELECT BAR
// ============================================================

const MultiSelectBar = ({ count, onAsk, onPinAll, onClear }) => (
  <div className="multiselect-bar">
    <span className="multiselect-count">{count} haber seçildi</span>
    <button className="primary" onClick={onAsk}>
      <Icon name="chat" size={13}/>
      <span>CoS'a sor</span>
    </button>
    <button onClick={onPinAll}>
      <Icon name="bookmark" size={12}/>
      <span>Hepsini sabitle</span>
    </button>
    <button className="close-btn" onClick={onClear} aria-label="Seçimi temizle">
      <Icon name="x" size={13}/>
    </button>
  </div>
);

// ============================================================
// ASK COS MODAL
// ============================================================

const AskCosModal = ({ count, onClose, onSubmit }) => {
  const [text, setText] = React.useState('');
  const taRef = React.useRef(null);

  React.useEffect(() => { taRef.current?.focus(); }, []);

  const suggestions = [
    'Bu haberlerin ortak çıkarımı ne? KW Türkiye için aksiyon planı öner.',
    'Hangi rolüm bu konularla doğrudan ilgilenmeli?',
    'Bunlardan 1 task üret ve sahibini ata.',
  ];

  return (
    <div className="news-modal-backdrop" onClick={onClose}>
      <div className="news-modal" onClick={(e) => e.stopPropagation()}>
        <div className="ask-cos-modal">
          <h3>{count} seçili haber hakkında CoS'a ne soracaksın?</h3>
          <div className="ask-sub">Chief of Staff bu haberleri context olarak alır ve sentezler.</div>
          <textarea
            ref={taRef}
            placeholder="örn: 'Bu 3 haberden çıkacak ortak ders ne? KW Türkiye için aksiyon planı öner.'"
            value={text}
            onChange={(e) => setText(e.target.value)}
          />
          <div className="ask-suggestions">
            <h4>Önerilen sorular</h4>
            {suggestions.map((s, i) => (
              <button key={i} className="sug-chip" onClick={() => setText(s)}>{s}</button>
            ))}
          </div>
          <div className="ask-actions">
            <button onClick={onClose}>İptal</button>
            <button className="primary" onClick={() => onSubmit(text || suggestions[0])}>
              CoS'a sor →
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// SEARCH PALETTE (⌘K)
// ============================================================

const SearchPalette = ({ news, onClose, onOpenReader }) => {
  const [tab, setTab] = React.useState('search'); // 'search' | 'saved'
  const [query, setQuery] = React.useState('');
  const [savedSearches, setSaved] = React.useState(NEWS_V7.SAVED_SEARCHES || []);
  const inputRef = React.useRef(null);

  React.useEffect(() => { inputRef.current?.focus(); }, []);

  // Backend'den kayıtlı aramaları yükle
  React.useEffect(() => {
    if (!window.KW?.online) return;
    window.KW.listSavedSearches()
      .then(rows => {
        if (Array.isArray(rows) && rows.length) {
          setSaved(rows.map(r => ({
            id: r.id, query: r.query, name: r.name || r.query,
            alert: !!r.alert, count: 0,
          })));
        }
      })
      .catch(e => console.warn('[news] saved searches fetch fail', e));
  }, []);

  const results = React.useMemo(() => {
    if (!query.trim()) return [];
    const q = query.toLowerCase();
    return news
      .filter(n => n.title.toLowerCase().includes(q) || (n.hook||'').toLowerCase().includes(q))
      .slice(0, 8);
  }, [query, news]);

  const handleSave = async () => {
    if (!query.trim()) return;
    const newSaved = { id: 'ss' + Date.now(), query, name: query, alert: false, count: results.length };
    setSaved(s => [newSaved, ...s]);
    setTab('saved');
    if (window.KW?.online) {
      try {
        const res = await window.KW.createSavedSearch({ query, name: query, alert: false });
        if (res?.id) {
          // Optimistic id'yi backend id'siyle değiştir
          setSaved(s => s.map(x => x.id === newSaved.id ? { ...x, id: res.id } : x));
        }
      } catch (e) { console.warn('[news] save search fail', e); }
    }
  };

  const handleDelete = async (id, e) => {
    e?.stopPropagation();
    setSaved(s => s.filter(x => x.id !== id));
    if (window.KW?.online) {
      try { await window.KW.deleteSavedSearch(id); } catch {}
    }
  };

  return (
    <div className="news-modal-backdrop" onClick={onClose}>
      <div className="news-modal search-palette" onClick={(e) => e.stopPropagation()}>
        <div className="search-input-row">
          <Icon name="search" size={18}/>
          <input
            ref={inputRef}
            type="text"
            placeholder="Haber ara — başlık, hook, kaynak…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
          />
          <button className="search-close-x" onClick={onClose}>esc</button>
        </div>
        <div className="search-tabs">
          <button className={`search-tab ${tab === 'search' ? 'active' : ''}`} onClick={() => setTab('search')}>
            Arama {results.length > 0 && `(${results.length})`}
          </button>
          <button className={`search-tab ${tab === 'saved' ? 'active' : ''}`} onClick={() => setTab('saved')}>
            Kaydedilen aramalar ({savedSearches.length})
          </button>
        </div>

        {tab === 'search' && (
          <>
            <div className="search-results">
              {!query.trim() && (
                <div className="search-empty-hint">
                  Aramaya başlamak için yazmaya başla.<br/>
                  Önerilen anahtar kelimeler: <strong>İzmir konut</strong>, <strong>EB-1A</strong>, <strong>faiz</strong>, <strong>Çeşme</strong>
                </div>
              )}
              {query.trim() && results.length === 0 && (
                <div className="search-empty-hint">
                  "{query}" için sonuç yok.<br/>
                  Bu aramayı kaydet, ileride eşleşen haberleri bildirelim.
                </div>
              )}
              {results.map(r => (
                <div key={r.id} className="search-result-item" onClick={() => { onOpenReader(r); onClose(); }}>
                  <span className="sr-icon"><Icon name="news" size={14}/></span>
                  <div className="sr-body">
                    <div className="sr-title">{r.title}</div>
                    <div className="sr-meta">
                      <span>{r.source}</span>
                      <span>·</span>
                      <span>{relativeTime(r.publishedAt)}</span>
                      <span>·</span>
                      <span>Önem {r.importance.toFixed(1)}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            {query.trim() && (
              <button className="search-save-btn" onClick={handleSave}>
                <Icon name="bookmark" size={13}/>
                <span>"{query}" aramasını kaydet — eşleşen yeni haberlerde bildir</span>
              </button>
            )}
          </>
        )}

        {tab === 'saved' && (
          <div className="search-results">
            {savedSearches.length === 0 && (
              <div className="search-empty-hint">Henüz kaydettiğin arama yok.</div>
            )}
            {savedSearches.map(ss => (
              <div key={ss.id} className="search-saved-row" onClick={() => { setQuery(ss.query); setTab('search'); }}>
                <Icon name="search" size={14}/>
                <span className="saved-name">{ss.name}</span>
                <span className="saved-query">{ss.count} eşleşme</span>
                {ss.alert && <span className="saved-alert">UYARI AÇIK</span>}
                <button
                  className="search-saved-delete"
                  title="Aramayı sil"
                  onClick={(e) => handleDelete(ss.id, e)}
                  style={{
                    marginLeft: 'auto', background: 'transparent', border: 'none',
                    cursor: 'pointer', color: 'var(--text-tertiary)', padding: '4px 6px',
                    borderRadius: 6, fontSize: 13,
                  }}
                >🗑️</button>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

// ============================================================
// FILTER POPOVER (popover, not modal)
// ============================================================

const FilterPopover = ({ filters, onChange, onClose, onClear }) => {
  const importanceOpts = [
    { id: 'crit', label: 'Kritik 8+' },
    { id: 'high', label: 'Önemli 6-8' },
    { id: 'mid',  label: 'Orta 4-6' },
  ];
  const statusOpts = [
    { id: 'unread', label: 'Okumadıklarım' },
    { id: 'read',   label: 'Okuduklarım' },
    { id: 'liked',  label: 'Sabitlediklerim' },
  ];
  const trustOpts = [
    { id: 'trust7', label: 'Trust 7+' },
    { id: 'trust8', label: 'Trust 8+' },
    { id: 'trust9', label: 'Trust 9+' },
  ];

  const toggle = (key, val) => {
    const next = { ...filters, [key]: filters[key] === val ? null : val };
    onChange(next);
  };

  return (
    <div className="filter-popover" onClick={(e) => e.stopPropagation()}>
      <div className="filter-section">
        <h4>Önem</h4>
        <div className="filter-chips">
          {importanceOpts.map(o => (
            <button key={o.id}
              className={`filter-chip ${filters.importance === o.id ? 'active' : ''}`}
              onClick={() => toggle('importance', o.id)}>
              {o.label}
            </button>
          ))}
        </div>
      </div>
      <div className="filter-section">
        <h4>Durum</h4>
        <div className="filter-chips">
          {statusOpts.map(o => (
            <button key={o.id}
              className={`filter-chip ${filters.status === o.id ? 'active' : ''}`}
              onClick={() => toggle('status', o.id)}>
              {o.label}
            </button>
          ))}
        </div>
      </div>
      <div className="filter-section">
        <h4>Kaynak güveni</h4>
        <div className="filter-chips">
          {trustOpts.map(o => (
            <button key={o.id}
              className={`filter-chip ${filters.trust === o.id ? 'active' : ''}`}
              onClick={() => toggle('trust', o.id)}>
              {o.label}
            </button>
          ))}
        </div>
      </div>
      <div className="filter-actions">
        <button onClick={onClear}>Temizle</button>
        <button className="apply" onClick={onClose}>Uygula</button>
      </div>
    </div>
  );
};

// ============================================================
// SOURCES MODAL (Source diversity grid + echo warning)
// ============================================================

const SourcesModal = ({ onClose }) => {
  const sources = NEWS_V7.SOURCES_TODAY;
  const echo = NEWS_V7.ECHO_WARNING;
  const all = [...sources.tr, ...sources.us, ...sources.global];
  const total = all.reduce((s, x) => s + x.count, 0);
  const uniqueSources = new Set(all.map(s => s.name)).size;
  const maxCount = Math.max(...all.map(s => s.count));

  const renderRegion = (label, flag, list) => (
    <div className="sources-region">
      <h4>{flag} {label}</h4>
      {list.map(s => (
        <div key={s.name} className="source-row">
          <span className="source-name">{s.name}</span>
          <div className="source-bar-wrap">
            <div className="source-bar-fill" style={{ width: `${(s.count / maxCount) * 100}%` }}></div>
          </div>
          <span className="source-count">{s.count}</span>
          <span className="source-trust-cell">trust {s.trust.toFixed(1)}</span>
        </div>
      ))}
    </div>
  );

  return (
    <div className="news-modal-backdrop" onClick={onClose}>
      <div className="news-modal news-modal-wide" onClick={(e) => e.stopPropagation()}>
        <div className="sources-modal-body">
          <h3>📊 Bugünkü haber kaynakları</h3>
          <div className="sources-modal-meta">{uniqueSources} farklı kaynak · {total} haber · son 24 saat</div>

          {renderRegion('Türkiye', '🇹🇷', sources.tr)}
          {renderRegion('Amerika', '🇺🇸', sources.us)}
          {renderRegion('Küresel', '🌍', sources.global)}

          <div className={`echo-warning ${echo.active ? '' : 'ok'}`}>
            <div className="echo-h">{echo.active ? '⚠️ Echo Chamber Uyarısı' : '✓ Çeşitlilik İyi'}</div>
            <div>{echo.text}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// THREADS MODAL
// ============================================================

const ThreadsModal = ({ onClose, onPick }) => (
  <div className="news-modal-backdrop" onClick={onClose}>
    <div className="news-modal news-modal-wide" onClick={(e) => e.stopPropagation()}>
      <div className="threads-modal-body">
        <h3>🧬 Bu hafta öne çıkan {NEWS_V7.TOPIC_THREADS.length} konu</h3>
        {NEWS_V7.TOPIC_THREADS.map(t => (
          <div key={t.id} className="thread-card" onClick={() => { onPick(t.id); onClose(); }}>
            <span className="thread-emoji-lg">{t.emoji}</span>
            <div className="thread-body">
              <div className="thread-title-row">
                <span className="thread-title">{t.label}</span>
                <span className="thread-meta">son 7 günde · {t.regions.join(' + ')}</span>
              </div>
              <div className="thread-summary">{t.summary}</div>
              <div className="thread-heat" title={`Heat: ${Math.round(t.heat * 100)}`}>
                <div className="thread-heat-fill" style={{ width: `${t.heat * 100}%` }}></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

// ============================================================
// TOPIC THREAD DETAIL VIEW (in-page, not modal)
// ============================================================

const TopicThreadView = ({ threadId, news, onBack, onOpenReader, onToggleLike, onToggleRead }) => {
  const thread = NEWS_V7.getThread(threadId);
  const items = React.useMemo(
    () => news.filter(n => n.threadId === threadId).sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt)),
    [news, threadId]
  );

  if (!thread) return null;

  return (
    <div className="fade-in news-page thread-detail-page">
      <button className="news-breadcrumb" onClick={onBack}>
        <Icon name="arrow-back" size={13}/>
        <span>Haberler</span>
        <span className="bc-sep">/</span>
        <span className="bc-current">Konular / {thread.label}</span>
      </button>

      <div className="thread-detail-head">
        <span className="thread-emoji-lg">{thread.emoji}</span>
        <h1>{thread.label}</h1>
        <p className="thread-detail-summary">{thread.summary}</p>
        <div className="thread-detail-meta">
          <span><strong>{items.length}</strong> haber</span>
          <span>·</span>
          <span>{thread.regions.join(' + ')}</span>
          <span>·</span>
          <span>Heat <strong>{Math.round(thread.heat * 100)}</strong>/100</span>
        </div>
      </div>

      <div className="news-list">
        {items.length === 0 ? (
          <div className="news-empty">
            <div className="empty-icon">📭</div>
            <h3>Bu konuda henüz haber yok</h3>
            <p>AI cluster bu thread'i 7 gün içinde yeni eşleşmelerle güncelleyecek.</p>
          </div>
        ) : items.map((item, i) => (
          <div key={item.id} className="news-stagger" style={{ animationDelay: `${Math.min(i, 6) * 40}ms` }}>
            <NewsItemCardV7
              item={item}
              selected={false}
              onToggleLike={onToggleLike}
              onToggleSelect={() => {}}
              onToggleRead={onToggleRead}
              onOpenReader={onOpenReader}
              onOpenThread={() => {}}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

// ============================================================
// READER MODE (in-app, AI summary)
// ============================================================

const ReaderMode = ({ news, allNews, onClose, onToggleLike, onSendChat, onOpenReader }) => {
  const [loadingSummary, setLoading] = React.useState(true);
  const [summaryText, setSummaryText] = React.useState(null);
  const [summaryError, setSummaryError] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setSummaryText(null);
    setSummaryError(null);
    if (window.KW?.online) {
      window.KW.getNewsSummary(news.id)
        .then(res => {
          if (cancelled) return;
          if (res?.summary) setSummaryText(res.summary);
          else setSummaryError('AI özet henüz alınamadı.');
        })
        .catch(err => {
          if (cancelled) return;
          setSummaryError(err.message || 'AI özet hatası');
        })
        .finally(() => { if (!cancelled) setLoading(false); });
    } else {
      // Offline mock fallback
      const t = setTimeout(() => { if (!cancelled) setLoading(false); }, 800);
      return () => { cancelled = true; clearTimeout(t); };
    }
    return () => { cancelled = true; };
  }, [news.id]);

  // Related: same thread (frontend tarafında)
  const related = React.useMemo(() => {
    if (!news.threadId) return [];
    return allNews.filter(n => n.id !== news.id && n.threadId === news.threadId).slice(0, 3);
  }, [news, allNews]);

  // Render AI summary: backend'den gerçek CoS metni → markdown render
  // Yoksa fallback: hook + whyRelevant özet
  const renderSummaryText = (txt) => {
    if (!txt) return null;
    if (window.marked && window.DOMPurify) {
      const html = window.DOMPurify.sanitize(window.marked.parse(txt, { breaks: true }));
      return <div dangerouslySetInnerHTML={{ __html: html }} />;
    }
    return <div style={{ whiteSpace: 'pre-wrap' }}>{txt}</div>;
  };

  const aiSummary = summaryText ? renderSummaryText(summaryText) : (
    <>
      {summaryError && (
        <p style={{ color: 'var(--text-tertiary)', fontStyle: 'italic', fontSize: 12.5 }}>
          ⚠️ {summaryError} (Aşağıda kaynak metnin temel çerçevesi.)
        </p>
      )}
      <p>
        {news.source}{news.source ? "'in" : ''} bu haberine göre, {(news.hook || '').toLowerCase().replace(/\.$/, '')}.
        CoS bu gelişmeyi <strong>{importanceMeta(news.importance).label.toLowerCase()}</strong> olarak işaretledi.
      </p>
      {news.whyRelevant && (
        <p>
          <strong>CoS notu:</strong> {news.whyRelevant}
        </p>
      )}
    </>
  );

  return (
    <div className="news-modal-backdrop" onClick={onClose}>
      <div className="news-modal news-modal-reader reader-modal" onClick={(e) => e.stopPropagation()}>
        <div className="reader-head">
          <button className="reader-back" onClick={onClose}>
            <Icon name="arrow-back" size={13}/>
            <span>Geri</span>
          </button>
          <div className="reader-actions">
            <button
              className={news.liked ? 'liked' : ''}
              onClick={() => onToggleLike(news.id)}
              title={news.liked ? 'Beğeniden çıkar' : 'Beğen'}
            >
              <Icon name="bookmark" size={14}/>
            </button>
            <button onClick={onClose} title="Kapat">
              <Icon name="x" size={14}/>
            </button>
          </div>
        </div>

        <div className="reader-body">
          <div className="reader-meta">
            <span className="news-source-pill">{news.source}</span>
            <TrustPill trust={news.source_trust}/>
            <span className="news-time">{relativeTime(news.publishedAt)}</span>
            <ImportancePill score={news.importance}/>
          </div>
          <h1><HighlightedText text={news.title}/></h1>

          <div className="reader-section">
            <h3>💡 Niye sana önemli</h3>
            <div className="reader-why">
              <HighlightedText text={news.whyRelevant}/>
            </div>
          </div>

          <div className="reader-divider"></div>

          <div className="reader-section">
            <h3>📜 CoS özeti — readability mode</h3>
            {loadingSummary ? (
              <div className="reader-loading">
                <div className="heart-pulse"></div>
                <div>✨ CoS özet hazırlıyor…</div>
                <div className="reader-loading-sub">
                  Kaynak yazısını okuyup ana çıkarımları yazmasına 5–7 saniye verir.
                </div>
              </div>
            ) : (
              <div className="reader-summary">{aiSummary}</div>
            )}
          </div>

          {related.length > 0 && (
            <>
              <div className="reader-divider"></div>
              <div className="reader-section">
                <h3>📂 İlişkili haberler ({related.length})</h3>
                <div className="reader-related">
                  {related.map(r => (
                    <div key={r.id} className="reader-related-item" onClick={() => onOpenReader(r)}>
                      <Icon name="news" size={13}/>
                      <span><HighlightedText text={r.title}/></span>
                      <span className="rr-meta">{r.source} · {relativeTime(r.publishedAt)}</span>
                    </div>
                  ))}
                </div>
              </div>
            </>
          )}

          <div className="reader-cta-row">
            <a href={news.url} target="_blank" rel="noopener noreferrer">
              <Icon name="external" size={12}/>
              <span>Kaynağa git</span>
            </a>
            <button onClick={() => { onClose(); onSendChat(`"${news.title}" haberini konuşmak istiyorum. ${news.whyRelevant}`); }}>
              <Icon name="chat" size={12}/>
              <span>CoS'a sor</span>
            </button>
            <button
              className={news.liked ? 'primary' : ''}
              onClick={() => onToggleLike(news.id)}
            >
              <Icon name="bookmark" size={12}/>
              <span>{news.liked ? 'Sabitli ✓' : 'Sabitle'}</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// ============================================================
// DAILY BRIEF BAR
// ============================================================

const DailyBriefBar = ({ onSendChat, onDismiss }) => {
  const brief = NEWS_V7.DAILY_BRIEF || { generated: null, insights: [] };
  // Boş ya da generated null ise hiç render etme — "2939 hafta önce" gibi yanlış değerleri önle
  if (!brief.generated || !brief.insights || brief.insights.length === 0) return null;
  return (
    <div className="daily-brief-bar">
      <div className="daily-brief-h">
        <span className="brief-spark"><Icon name="sparkle" size={12}/></span>
        <span>CoS Günün Özeti — 3 Ana Çıkarım</span>
        <span className="brief-time">{relativeTime(brief.generated)}</span>
      </div>
      <ul className="daily-brief-list">
        {brief.insights.map((ins, i) => <li key={i}>{ins}</li>)}
      </ul>
      <div className="daily-brief-actions">
        <button className="primary" onClick={() => onSendChat('Bugünün haber özetinden tüm çıkarımları aksiyonlarla birlikte aç.')}>
          Tüm özeti aç →
        </button>
        <button onClick={() => onSendChat('Günün haber özetini e-mail formatına dönüştür.')}>
          E-mail olarak gönder
        </button>
        <button className="dismiss" onClick={onDismiss}>Görmezden gel</button>
      </div>
    </div>
  );
};

// ============================================================
// MAIN NEWS SCREEN v7
// ============================================================

const NewsScreen = ({ news, onToggleLike, onToggleRead, onNavigate, onSendChat, onOpenThreadView }) => {
  const [selectedDay, setSelectedDay] = React.useState(todayISO);
  const [activeCat, setActiveCat]     = React.useState('tr');
  const [readerNews, setReaderNews]   = React.useState(null);
  const [searchOpen, setSearchOpen]   = React.useState(false);
  const [sourcesOpen, setSourcesOpen] = React.useState(false);
  const [threadsOpen, setThreadsOpen] = React.useState(false);
  const [filterOpen, setFilterOpen]   = React.useState(false);
  const [askOpen, setAskOpen]         = React.useState(false);
  const [briefDismissed, setBriefDismissed] = React.useState(false);
  const [selectedIds, setSelectedIds] = React.useState(new Set());
  const [filters, setFilters] = React.useState({ importance: null, status: null, trust: null });

  // Mount: backend'den breaking + threads + sources + saved searches çek
  const [breaking, setBreaking]   = React.useState(NEWS_V7.BREAKING || []);
  const [threads, setThreads]     = React.useState(NEWS_V7.TOPIC_THREADS || []);
  const [sourcesData, setSourcesData] = React.useState(NEWS_V7.SOURCES_TODAY || { tr: [], us: [], global: [] });
  React.useEffect(() => {
    if (!window.KW?.online) return;
    (async () => {
      try {
        const [br, th] = await Promise.all([
          window.KW.getBreakingNews(2),
          window.KW.getNewsThreads(7),
        ]);
        if (br?.length) setBreaking(br);
        if (th?.length) setThreads(th);
      } catch (e) { console.warn('[news] mount fetch fail', e); }
    })();
  }, []);

  // ============= keyboard shortcuts =============
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      const isMod = e.metaKey || e.ctrlKey;
      if (isMod && e.key === 'k') { e.preventDefault(); setSearchOpen(true); }
      else if (isMod && e.key === 'f') { e.preventDefault(); setFilterOpen(o => !o); }
      else if (isMod && e.key === '1') { e.preventDefault(); setActiveCat('tr'); }
      else if (isMod && e.key === '2') { e.preventDefault(); setActiveCat('us'); }
      else if (isMod && e.key === '3') { e.preventDefault(); setActiveCat('global'); }
      else if (e.key === 'Escape') {
        if (readerNews) setReaderNews(null);
        else if (searchOpen) setSearchOpen(false);
        else if (sourcesOpen) setSourcesOpen(false);
        else if (threadsOpen) setThreadsOpen(false);
        else if (askOpen) setAskOpen(false);
        else if (filterOpen) setFilterOpen(false);
        else if (selectedIds.size > 0) setSelectedIds(new Set());
      }
      else if (e.key === 'b') {
        if (!readerNews && !searchOpen) onNavigate('liked-news');
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [readerNews, searchOpen, sourcesOpen, threadsOpen, askOpen, filterOpen, selectedIds, onNavigate]);

  // ============= derived data =============
  const dayCounts = React.useMemo(() => {
    const c = {};
    news.forEach(n => {
      const d = n.publishedAt.slice(0, 10);
      c[d] = (c[d] || 0) + 1;
    });
    return c;
  }, [news]);

  const dayItems = React.useMemo(() => {
    return news.filter(n => n.publishedAt.slice(0, 10) === selectedDay);
  }, [news, selectedDay]);

  const counts = React.useMemo(() => {
    const c = { tr: 0, us: 0, global: 0 };
    dayItems.forEach(n => { c[n.category] = (c[n.category] || 0) + 1; });
    return c;
  }, [dayItems]);

  const visibleItems = React.useMemo(() => {
    let out = dayItems.filter(n => n.category === activeCat);
    if (filters.importance === 'crit') out = out.filter(n => n.importance >= 8);
    else if (filters.importance === 'high') out = out.filter(n => n.importance >= 6 && n.importance < 8);
    else if (filters.importance === 'mid')  out = out.filter(n => n.importance >= 4 && n.importance < 6);
    if (filters.status === 'unread') out = out.filter(n => !n.isRead);
    else if (filters.status === 'read') out = out.filter(n => n.isRead);
    else if (filters.status === 'liked') out = out.filter(n => n.liked);
    if (filters.trust === 'trust7') out = out.filter(n => n.source_trust >= 7);
    else if (filters.trust === 'trust8') out = out.filter(n => n.source_trust >= 8);
    else if (filters.trust === 'trust9') out = out.filter(n => n.source_trust >= 9);
    return out.sort((a, b) => b.importance - a.importance);
  }, [dayItems, activeCat, filters]);

  const totalToday = news.filter(n => n.publishedAt.slice(0, 10) === todayISO).length;
  const recentCount = news.filter(n => {
    const t = new Date(n.publishedAt).getTime();
    return (new Date('2026-05-03T13:14:00Z').getTime() - t) < 4 * 3600000;
  }).length;
  const likedCount = news.filter(n => n.liked).length;
  const filtersActive = Object.values(filters).some(v => v !== null);

  // hero items: today, importance >= 8.0
  const heroItems = React.useMemo(() => NEWS_V7.computeHero(news), [news]);

  // ============= handlers =============
  const toggleSelect = (id) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const handleAsk = async (question) => {
    setAskOpen(false);
    const ids = [...selectedIds];
    setSelectedIds(new Set());
    if (window.KW?.online && ids.length > 0) {
      try {
        // Backend CoS multi-news context inject + LLM call
        const res = await window.KW.askNewsCos(ids, question);
        if (res?.reply) {
          // CoS cevabı geldi — sohbet ekranına yönlendir
          onSendChat(`📰 ${ids.length} haber için CoS analizi:\n\n${res.reply}`);
          return;
        }
      } catch (e) {
        console.warn('[news] askNewsCos failed:', e);
      }
    }
    // Fallback: chat'e doğrudan soru gönder
    const titles = ids.map(id => {
      const n = news.find(x => x.id === id);
      return n ? `"${n.title}"` : '';
    }).filter(Boolean).join(', ');
    onSendChat(`${ids.length} haber bağlamında: ${question}\n\nSeçili: ${titles}`);
  };

  const handlePinAll = () => {
    selectedIds.forEach(id => {
      const n = news.find(x => x.id === id);
      if (n && !n.liked) onToggleLike(id);
    });
    setSelectedIds(new Set());
  };

  const handleOpenThreadFromCard = (threadId) => {
    onOpenThreadView(threadId);
  };

  return (
    <div className="fade-in news-page">
      <header className="news-head">
        <div>
          <h1 className="news-h1">Haberler</h1>
          <div className="news-sub-v7">
            <span><strong>{totalToday}</strong> haber bugün</span>
            <span className="dot-sep"></span>
            <span>son 4 saatte <strong>{recentCount}</strong> yeni</span>
            <span className="news-fresh-dot" title="Canlı"></span>
            <span className="dot-sep"></span>
            <span className="src-chip-mini"><Icon name="globe" size={11}/> Bloomberg, GZT, Habertürk + 18 kaynak</span>
          </div>
        </div>
        <button className="news-liked-btn" onClick={() => onNavigate('liked-news')}>
          <Icon name="bookmark" size={14}/>
          <span>Beğenilenler</span>
          {likedCount > 0 && <span className="news-liked-count">{likedCount}</span>}
        </button>
      </header>

      <BreakingStrip items={breaking} onOpen={(b) => {
        // Breaking item click: open reader with derived shape
        const fakeNews = { ...b, category: 'tr', liked: false, isRead: false, threadId: b.thread };
        setReaderNews(fakeNews);
      }}/>

      <HeroGrid items={heroItems} onOpen={setReaderNews} onToggleLike={onToggleLike}/>

      <DateBar selectedDay={selectedDay} onSelect={setSelectedDay} dayCounts={dayCounts}/>

      <CategoryTabs active={activeCat} counts={counts} onPick={setActiveCat}/>

      <UtilityBar
        onSearch={() => setSearchOpen(true)}
        onSources={() => setSourcesOpen(true)}
        onThreads={() => setThreadsOpen(true)}
        onFilter={() => setFilterOpen(o => !o)}
        sourcesCount={(sourcesData.tr?.length || 0) + (sourcesData.us?.length || 0) + (sourcesData.global?.length || 0)}
        threadsCount={threads.length}
        filtersActive={filtersActive}
      />
      {filterOpen && (
        <div style={{ position: 'relative', marginTop: -12, marginBottom: 12 }}>
          <FilterPopover
            filters={filters}
            onChange={setFilters}
            onClose={() => setFilterOpen(false)}
            onClear={() => { setFilters({ importance: null, status: null, trust: null }); }}
          />
        </div>
      )}

      <div className="news-list" key={selectedDay + activeCat + JSON.stringify(filters)}>
        {visibleItems.length === 0 ? (
          <div className="news-empty">
            <div className="empty-icon">📰</div>
            <h3>Bu kombinasyonda haber yok</h3>
            <p>Filtre/tarih/kategori değiştir, ya da arama palette'inden (⌘K) bir konu ara.</p>
          </div>
        ) : (
          visibleItems.map((item, i) => (
            <div key={item.id} className="news-stagger" style={{ animationDelay: `${Math.min(i, 8) * 40}ms` }}>
              <NewsItemCardV7
                item={item}
                selected={selectedIds.has(item.id)}
                onToggleLike={onToggleLike}
                onToggleSelect={toggleSelect}
                onToggleRead={onToggleRead}
                onOpenReader={setReaderNews}
                onOpenThread={handleOpenThreadFromCard}
              />
            </div>
          ))
        )}
      </div>

      {!briefDismissed && visibleItems.length > 0 && (
        <DailyBriefBar onSendChat={onSendChat} onDismiss={() => setBriefDismissed(true)}/>
      )}

      {/* Modals + bars */}
      {selectedIds.size > 0 && (
        <MultiSelectBar
          count={selectedIds.size}
          onAsk={() => setAskOpen(true)}
          onPinAll={handlePinAll}
          onClear={() => setSelectedIds(new Set())}
        />
      )}
      {askOpen && (
        <AskCosModal count={selectedIds.size} onClose={() => setAskOpen(false)} onSubmit={handleAsk}/>
      )}
      {searchOpen && (
        <SearchPalette news={news} onClose={() => setSearchOpen(false)} onOpenReader={setReaderNews}/>
      )}
      {sourcesOpen && (
        <SourcesModal onClose={() => setSourcesOpen(false)}/>
      )}
      {threadsOpen && (
        <ThreadsModal
          onClose={() => setThreadsOpen(false)}
          onPick={(tid) => { onOpenThreadView(tid); }}
        />
      )}
      {readerNews && (
        <ReaderMode
          news={readerNews}
          allNews={news}
          onClose={() => setReaderNews(null)}
          onToggleLike={(id) => { onToggleLike(id); setReaderNews(n => n && n.id === id ? { ...n, liked: !n.liked } : n); }}
          onSendChat={onSendChat}
          onOpenReader={setReaderNews}
        />
      )}
    </div>
  );
};

// ============================================================
// LIKED NEWS SCREEN v2 (patch: topic filter + export + bulk CoS)
// ============================================================

const FILTER_OPTIONS = [
  { id: 'all',        label: 'Tümü',         days: null },
  { id: 'this-week',  label: 'Bu hafta',     days: 7 },
  { id: 'this-month', label: 'Bu ay',        days: 30 },
  { id: 'last-month', label: 'Geçen ay',     days: 60, after: 30 },
];

// Export helpers — PDF (window.print) + Notion (markdown clipboard)
const buildPrintableHTML = (items) => {
  const today = new Date().toLocaleDateString('tr-TR');
  const escape = (s) => String(s || '').replace(/[&<>]/g, ch => ({ '&':'&amp;','<':'&lt;','>':'&gt;' }[ch]));
  const rows = items.map(n => `
    <article style="margin: 0 0 22px; padding: 16px 18px; border-left: 3px solid #C8102E; background: #faf7f4; border-radius: 0 8px 8px 0;">
      <div style="font-size: 11px; color: #86868B; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px;">
        ${escape(n.source || '')} · Önem ${(n.importance || 0).toFixed(1)} · ${new Date(n.publishedAt).toLocaleDateString('tr-TR')}
      </div>
      <h2 style="font-size: 17px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; color: #1D1D1F;">${escape(n.title)}</h2>
      ${n.hook ? `<p style="font-size: 13.5px; color: #6E6E73; line-height: 1.5; margin: 0 0 8px;">${escape(n.hook)}</p>` : ''}
      ${n.whyRelevant ? `<p style="font-size: 13px; color: #1D1D1F; line-height: 1.5; margin: 8px 0 0; font-style: italic;"><strong>Niye önemli:</strong> ${escape(n.whyRelevant)}</p>` : ''}
      ${n.url ? `<p style="font-size: 11px; color: #86868B; margin: 8px 0 0;">${escape(n.url)}</p>` : ''}
    </article>
  `).join('');
  return `<!DOCTYPE html><html lang="tr"><head><meta charset="UTF-8"><title>KW Birlik · Beğenilen Haberler</title>
    <style>
      body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; padding: 32px 36px; max-width: 720px; margin: 0 auto; color: #1D1D1F; }
      header { border-bottom: 2px solid #C8102E; padding-bottom: 12px; margin-bottom: 24px; }
      h1 { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
      .meta { font-size: 12px; color: #86868B; margin-top: 4px; }
      @media print { body { padding: 16px 20px; } }
    </style></head><body>
    <header><h1>KW Birlik · Beğenilen Haberler</h1><div class="meta">${today} · ${items.length} haber</div></header>
    ${rows || '<p>Liste boş.</p>'}
    </body></html>`;
};

const buildNotionMarkdown = (items) => {
  const today = new Date().toLocaleDateString('tr-TR');
  const lines = [
    `# KW Birlik · Beğenilen Haberler`,
    `_${today} · ${items.length} haber_`,
    '',
  ];
  items.forEach(n => {
    lines.push(`## ${n.title}`);
    lines.push(`**${n.source || ''}** · Önem ${(n.importance||0).toFixed(1)} · ${new Date(n.publishedAt).toLocaleDateString('tr-TR')}`);
    if (n.hook) lines.push(`\n${n.hook}`);
    if (n.whyRelevant) lines.push(`\n> 💡 **Niye önemli:** ${n.whyRelevant}`);
    if (n.url) lines.push(`\n[Kaynağa git](${n.url})`);
    lines.push('\n---\n');
  });
  return lines.join('\n');
};

const groupByBucket = (items) => {
  const today = new Date('2026-05-03T12:00:00Z').getTime();
  const dayMs = 86400000;
  const buckets = { 'Bugün': [], 'Dün': [], 'Bu hafta': [], 'Geçen hafta': [], 'Bu ay': [], 'Daha eski': [] };
  items.forEach(it => {
    const days = Math.floor((today - new Date(it.publishedAt).getTime()) / dayMs);
    if (days <= 0) buckets['Bugün'].push(it);
    else if (days === 1) buckets['Dün'].push(it);
    else if (days <= 7) buckets['Bu hafta'].push(it);
    else if (days <= 14) buckets['Geçen hafta'].push(it);
    else if (days <= 30) buckets['Bu ay'].push(it);
    else buckets['Daha eski'].push(it);
  });
  return Object.entries(buckets).filter(([_, list]) => list.length > 0);
};

const LikedNewsScreen = ({ news, onToggleLike, onToggleRead, onNavigate, onSendChat }) => {
  const [filter, setFilter] = React.useState('all');
  const [catFilter, setCatFilter] = React.useState('all');
  const [threadFilter, setThreadFilter] = React.useState('all');
  const [readerNews, setReaderNews] = React.useState(null);
  const [exportFlash, setExportFlash] = React.useState('');
  const [selectedIds, setSelectedIds] = React.useState(new Set());
  const [askOpen, setAskOpen] = React.useState(false);

  const liked = React.useMemo(() => news.filter(n => n.liked), [news]);

  const filtered = React.useMemo(() => {
    const today = new Date('2026-05-03T12:00:00Z').getTime();
    const dayMs = 86400000;
    let out = liked;
    const opt = FILTER_OPTIONS.find(o => o.id === filter);
    if (opt && opt.days !== null) {
      out = out.filter(n => {
        const days = Math.floor((today - new Date(n.publishedAt).getTime()) / dayMs);
        if (opt.after !== undefined) return days <= opt.days && days > opt.after;
        return days <= opt.days;
      });
    }
    if (catFilter !== 'all') out = out.filter(n => n.category === catFilter);
    if (threadFilter !== 'all') out = out.filter(n => n.threadId === threadFilter);
    return out.sort((a, b) => new Date(b.publishedAt) - new Date(a.publishedAt));
  }, [liked, filter, catFilter, threadFilter]);

  const groups = groupByBucket(filtered);

  // Threads available among liked
  const availableThreads = React.useMemo(() => {
    const set = new Set(liked.map(n => n.threadId).filter(Boolean));
    return [...set].map(id => NEWS_V7.getThread(id)).filter(Boolean);
  }, [liked]);

  const handleExport = async (format) => {
    setExportFlash(`${format} hazırlanıyor…`);
    try {
      if (format === 'PDF') {
        // Browser native PDF export — yeni window'da formatlanmış HTML açıp window.print()
        const html = buildPrintableHTML(filtered);
        const w = window.open('', '_blank', 'width=900,height=1200');
        if (!w) {
          throw new Error('Popup engellendi — tarayıcı pop-up\'a izin ver.');
        }
        w.document.write(html);
        w.document.close();
        // Render bittikten sonra print dialog
        setTimeout(() => { try { w.focus(); w.print(); } catch {} }, 400);
        setExportFlash('PDF için yazdır penceresi açıldı ✓');
      } else if (format === 'Notion') {
        // Markdown'a çevir, clipboard'a kopyala
        const md = buildNotionMarkdown(filtered);
        await navigator.clipboard.writeText(md);
        setExportFlash('Markdown panoya kopyalandı — Notion\'a yapıştır ✓');
      }
    } catch (e) {
      setExportFlash(`Hata: ${e.message}`);
    }
    setTimeout(() => setExportFlash(''), 3500);
  };

  const toggleSelect = (id) => {
    setSelectedIds(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const handleAsk = (question) => {
    setAskOpen(false);
    const titles = [...selectedIds].map(id => {
      const n = news.find(x => x.id === id);
      return n ? `"${n.title}"` : '';
    }).filter(Boolean).join(', ');
    onSendChat(`Beğendiğim ${selectedIds.size} haber bağlamında: ${question}\n\nSeçili: ${titles}`);
    setSelectedIds(new Set());
  };

  return (
    <div className="fade-in news-page">
      <button className="news-breadcrumb" onClick={() => onNavigate('news')}>
        <Icon name="arrow-back" size={13}/>
        <span>Haberler</span>
        <span className="bc-sep">/</span>
        <span className="bc-current">Beğenilenler</span>
      </button>

      <header className="news-head">
        <div>
          <h1 className="news-h1">Beğendiğiniz haberler</h1>
          <div className="news-sub">
            <span><strong>{liked.length}</strong> haber kaydedildi</span>
            <span className="dot-sep"></span>
            <span>son 30 gün</span>
          </div>
        </div>
      </header>

      {liked.length > 0 && (
        <>
          <div className="liked-filter-row">
            <div className="news-cat-tabs">
              {FILTER_OPTIONS.map(o => (
                <button key={o.id}
                  className={`news-cat-tab ${filter === o.id ? 'active' : ''}`}
                  onClick={() => setFilter(o.id)}>
                  <span>{o.label}</span>
                </button>
              ))}
            </div>
            <div className="news-cat-tabs liked-cat-tabs">
              <button className={`news-cat-tab ${catFilter === 'all' ? 'active' : ''}`} onClick={() => setCatFilter('all')}>
                Tüm kategoriler
              </button>
              {CATEGORIES.map(c => (
                <button key={c.id}
                  className={`news-cat-tab ${catFilter === c.id ? 'active' : ''}`}
                  onClick={() => setCatFilter(c.id)}>
                  <span className="news-cat-flag">{c.flag}</span>
                  <span>{c.label}</span>
                </button>
              ))}
            </div>
          </div>

          {availableThreads.length > 0 && (
            <div className="liked-export-row" style={{ marginBottom: 14 }}>
              <span style={{ fontSize: 11, color: 'var(--text-tertiary)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, alignSelf: 'center', marginRight: 4 }}>Konu:</span>
              <button
                className={`liked-thread-pill ${threadFilter === 'all' ? 'active' : ''}`}
                onClick={() => setThreadFilter('all')}
              >
                Tümü
              </button>
              {availableThreads.map(t => (
                <button key={t.id}
                  className={`liked-thread-pill ${threadFilter === t.id ? 'active' : ''}`}
                  onClick={() => setThreadFilter(t.id)}>
                  <span>{t.emoji}</span>
                  <span>{t.label}</span>
                </button>
              ))}
            </div>
          )}

          <div className="liked-cos-hint">
            <span className="cos-hint-ico"><Icon name="sparkle" size={14}/></span>
            <div className="cos-hint-body">
              <strong>Chief of Staff bu beğenileri takip ediyor.</strong>
              <span> Sorabilirsiniz — örn. "Bu hafta beğendiğim haberlerden 3 çıkarımı özetle."</span>
            </div>
            <button
              className="btn-primary cos-hint-btn"
              onClick={() => onSendChat('Bu hafta beğendiğim haberlerden 3 çıkarımı özetle.')}
            >
              CoS ile konuş
              <Icon name="arrow-up" size={11}/>
            </button>
          </div>

          <div className="liked-export-row">
            <button className="liked-thread-pill" onClick={() => handleExport('PDF')}>
              <Icon name="external" size={11}/>
              <span>PDF olarak indir</span>
            </button>
            <button className="liked-thread-pill" onClick={() => handleExport('Notion')}>
              <Icon name="external" size={11}/>
              <span>Notion'a aktar</span>
            </button>
            {exportFlash && (
              <span style={{ fontSize: 11.5, color: 'var(--text-secondary)', alignSelf: 'center', marginLeft: 8 }}>
                {exportFlash}
              </span>
            )}
          </div>
        </>
      )}

      <div className="news-list" style={{ marginTop: 18 }}>
        {filtered.length === 0 ? (
          liked.length === 0 ? (
            <div className="news-empty">
              <div className="empty-icon">🔖</div>
              <h3>Henüz haber beğenmediniz</h3>
              <p>Haberler ekranında 🔖 ikonuna tıklayarak haberleri buraya kaydedin. Chief of Staff bu beğenilerinizi takip eder ve sorduğunuzda hatırlar.</p>
              <button className="btn-primary" onClick={() => onNavigate('news')}>Haberlere dön</button>
            </div>
          ) : (
            <div className="news-empty">
              <div className="empty-icon">🔍</div>
              <h3>Bu filtrede beğeni yok</h3>
              <p>Farklı bir tarih, kategori ya da konu filtresi deneyin.</p>
            </div>
          )
        ) : (
          groups.map(([label, items]) => (
            <div key={label} className="liked-group">
              <div className="liked-group-h">
                <span className="liked-group-line"></span>
                <span className="liked-group-label">{label}</span>
                <span className="liked-group-count">{items.length}</span>
                <span className="liked-group-line"></span>
              </div>
              {items.map((item, i) => (
                <div key={item.id} className="news-stagger" style={{ animationDelay: `${Math.min(i, 6) * 40}ms` }}>
                  <NewsItemCardV7
                    item={item}
                    selected={selectedIds.has(item.id)}
                    onToggleLike={onToggleLike}
                    onToggleSelect={toggleSelect}
                    onToggleRead={onToggleRead}
                    onOpenReader={setReaderNews}
                    onOpenThread={() => {}}
                  />
                </div>
              ))}
            </div>
          ))
        )}
      </div>

      {selectedIds.size > 0 && (
        <MultiSelectBar
          count={selectedIds.size}
          onAsk={() => setAskOpen(true)}
          onPinAll={() => {
            selectedIds.forEach(id => {
              const n = news.find(x => x.id === id);
              if (n && n.liked) onToggleLike(id); // unpin (toggle off, since they're all liked here)
            });
            setSelectedIds(new Set());
          }}
          onClear={() => setSelectedIds(new Set())}
        />
      )}
      {askOpen && (
        <AskCosModal count={selectedIds.size} onClose={() => setAskOpen(false)} onSubmit={handleAsk}/>
      )}
      {readerNews && (
        <ReaderMode
          news={readerNews}
          allNews={news}
          onClose={() => setReaderNews(null)}
          onToggleLike={(id) => { onToggleLike(id); setReaderNews(n => n && n.id === id ? { ...n, liked: !n.liked } : n); }}
          onSendChat={onSendChat}
          onOpenReader={setReaderNews}
        />
      )}
    </div>
  );
};

window.NewsScreen = NewsScreen;
window.LikedNewsScreen = LikedNewsScreen;
window.TopicThreadView = TopicThreadView;
