// Yenilikler — Anthropic news feed (TR çevirili, tam makale)

function fmtNewsDate(s) {
  if (!s) return '';
  const d = new Date(s);
  if (isNaN(d.getTime())) return s;
  const isEn = window.LANG === 'en';
  const months = isEn
    ? ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
    : ['Oca','Şub','Mar','Nis','May','Haz','Tem','Ağu','Eyl','Eki','Kas','Ara'];
  return `${d.getUTCDate()} ${months[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
}

// Çok küçük bir Markdown -> JSX render
function renderMarkdown(md) {
  if (!md) return null;
  const blocks = md.split(/\n{2,}/);
  return blocks.map((blk, i) => {
    const trimmed = blk.trim();
    if (!trimmed) return null;
    if (trimmed.startsWith('## ')) return <h2 key={i} className="news-article__h2">{renderInline(trimmed.slice(3))}</h2>;
    if (trimmed.startsWith('### ')) return <h3 key={i} className="news-article__h3">{renderInline(trimmed.slice(4))}</h3>;
    if (trimmed.startsWith('# ')) return <h1 key={i} className="news-article__h1">{renderInline(trimmed.slice(2))}</h1>;
    if (trimmed.startsWith('#### ')) return <h4 key={i} className="news-article__h4">{renderInline(trimmed.slice(5))}</h4>;
    // List: each line starts with "- " or "1. "
    const lines = trimmed.split(/\n/);
    if (lines.every(l => /^(\s*-\s|\s*\d+\.\s)/.test(l))) {
      const ordered = /^\s*\d+\.\s/.test(lines[0]);
      const Tag = ordered ? 'ol' : 'ul';
      return (
        <Tag key={i} className="news-article__list">
          {lines.map((l, j) => <li key={j}>{renderInline(l.replace(/^\s*(?:-|\d+\.)\s+/, ''))}</li>)}
        </Tag>
      );
    }
    return <p key={i} className="news-article__p">{renderInline(trimmed)}</p>;
  });
}

// Inline: **bold**, *italic*, `code`
function renderInline(s) {
  // Tek geçişte basit parse
  const tokens = [];
  let i = 0;
  let buf = '';
  const flush = () => { if (buf) { tokens.push(buf); buf = ''; } };
  while (i < s.length) {
    if (s[i] === '*' && s[i+1] === '*') {
      const end = s.indexOf('**', i + 2);
      if (end > -1) {
        flush();
        tokens.push(<strong key={tokens.length}>{s.slice(i + 2, end)}</strong>);
        i = end + 2; continue;
      }
    }
    if (s[i] === '*') {
      const end = s.indexOf('*', i + 1);
      if (end > -1 && end !== i + 1) {
        flush();
        tokens.push(<em key={tokens.length}>{s.slice(i + 1, end)}</em>);
        i = end + 1; continue;
      }
    }
    if (s[i] === '`') {
      const end = s.indexOf('`', i + 1);
      if (end > -1) {
        flush();
        tokens.push(<code key={tokens.length}>{s.slice(i + 1, end)}</code>);
        i = end + 1; continue;
      }
    }
    buf += s[i];
    i += 1;
  }
  flush();
  return tokens;
}

function NewsPage({ setPage, setNewsSlug }) {
  const isEn = window.LANG === 'en';
  const [items, setItems] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    window.API.listNews(40)
      .then(r => { if (!cancelled) setItems(r.items || []); })
      .catch(e => { if (!cancelled) setError(e.message); });
    return () => { cancelled = true; };
  }, []);

  const openArticle = (slug) => {
    if (setNewsSlug) setNewsSlug(slug);
    if (setPage) setPage('news_article');
  };

  return (
    <div className="page fade-up" style={{ maxWidth: 920 }}>
      <div className="kicker" style={{ marginBottom: 8 }}>
        {isEn ? 'CLAUDE NEWS' : 'CLAUDE HABERLERİ'}
      </div>
      <h1 className="page-title" style={{ fontSize: 36, marginBottom: 10 }}>
        {isEn ? "What's new in Claude" : "Claude'da yenilikler"}
      </h1>
      <p style={{ color: 'var(--ink-3)', fontSize: 14, marginBottom: 28, lineHeight: 1.55 }}>
        {isEn
          ? 'Latest announcements from Anthropic. Headlines and full text are translated by Claude Haiku; the original article is one click away.'
          : "Anthropic'ten en güncel duyurular. Başlıklar ve tam metin Claude Haiku ile Türkçeye çevrildi; orijinal makaleye tek tıkla geçebilirsiniz."}
      </p>

      {error && (
        <div style={{ padding: 18, background: 'var(--coral-soft)', borderRadius: 12, color: 'var(--ink)' }}>
          {isEn ? 'Failed to load: ' : 'Yüklenemedi: '}{error}
        </div>
      )}

      {!error && items === null && (
        <div style={{ padding: 24, color: 'var(--ink-3)' }}>{isEn ? 'Loading…' : 'Yükleniyor…'}</div>
      )}

      {items && items.length === 0 && (
        <div style={{ padding: 24, color: 'var(--ink-3)' }}>
          {isEn ? 'No items yet.' : 'Henüz öğe yok.'}
        </div>
      )}

      {items && items.length > 0 && (
        <div className="news-grid">
          {items.map(item => {
            const title = item.title_tr || item.title_en;
            const summary = item.summary_tr || item.summary_en;
            return (
              <article key={item.id} className="news-card">
                {item.image_url && (
                  <button
                    type="button"
                    onClick={() => openArticle(item.slug)}
                    className="news-card__cover"
                    aria-label={title}
                  >
                    <img src={item.image_url} alt="" loading="lazy" />
                  </button>
                )}
                <div className="news-card__body">
                  <div className="news-card__meta">
                    <span>Anthropic</span>
                    {item.published_at && <><span>·</span><span>{fmtNewsDate(item.published_at)}</span></>}
                    {item.title_tr && <><span>·</span><span style={{ color: 'var(--moss-deep)', fontWeight: 600 }}>TR</span></>}
                  </div>
                  <h2 className="news-card__title">
                    <button type="button" onClick={() => openArticle(item.slug)} className="news-card__titlebtn">
                      {title}
                    </button>
                  </h2>
                  {summary && <p className="news-card__summary">{summary}</p>}
                  <div className="news-card__actions">
                    <button className="news-card__btn news-card__btn--primary" onClick={() => openArticle(item.slug)}>
                      {isEn ? 'Read here →' : 'Burada oku →'}
                    </button>
                    <a className="news-card__btn" href={item.url} target="_blank" rel="noopener noreferrer">
                      {isEn ? 'Open original ↗' : 'Orijinali aç ↗'}
                    </a>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      )}

      <div style={{
        marginTop: 32,
        padding: 18,
        borderRadius: 12,
        background: 'var(--bg-soft)',
        fontSize: 13,
        color: 'var(--ink-3)',
        lineHeight: 1.5,
      }}>
        {isEn
          ? 'Source: anthropic.com/news. Translations are machine-generated by Claude Haiku 4.5; for citations and accuracy, use the original article.'
          : "Kaynak: anthropic.com/news. Çeviriler Claude Haiku 4.5 ile otomatik üretilmiştir; alıntı/doğruluk gerektiğinde orijinali esas alın."}
      </div>
    </div>
  );
}

function NewsArticlePage({ slug, setPage }) {
  const isEn = window.LANG === 'en';
  const [item, setItem] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [showOriginal, setShowOriginal] = React.useState(false);

  React.useEffect(() => {
    if (!slug) return;
    let cancelled = false;
    setItem(null); setError(null);
    window.API.getNewsItem(slug)
      .then(r => { if (!cancelled) setItem(r.item); })
      .catch(e => { if (!cancelled) setError(e.message); });
    return () => { cancelled = true; };
  }, [slug]);

  if (!slug) {
    return <div className="page" style={{ padding: 24 }}>{isEn ? 'No article selected.' : 'Makale seçilmedi.'}</div>;
  }

  const title = item ? (showOriginal || !item.title_tr ? item.title_en : item.title_tr) : '';
  const body = item ? (showOriginal || !item.body_tr ? item.body_en : item.body_tr) : '';
  const hasTr = item && item.title_tr && item.body_tr;

  return (
    <div className="page fade-up" style={{ maxWidth: 760 }}>
      <button onClick={() => setPage('news')} className="btn btn-ghost btn-sm" style={{ marginBottom: 18 }}>
        <span style={{ display: 'inline-block', transform: 'rotate(180deg)' }}><Icon name="arrow" size={13} /></span> {isEn ? 'All news' : 'Tüm haberler'}
      </button>

      {error && (
        <div style={{ padding: 18, background: 'var(--coral-soft)', borderRadius: 12 }}>
          {isEn ? 'Failed to load: ' : 'Yüklenemedi: '}{error}
        </div>
      )}

      {!error && !item && (
        <div style={{ padding: 24, color: 'var(--ink-3)' }}>{isEn ? 'Loading…' : 'Yükleniyor…'}</div>
      )}

      {item && (
        <article className="news-article">
          <div className="news-article__meta">
            <span>Anthropic</span>
            {item.published_at && <><span>·</span><span>{fmtNewsDate(item.published_at)}</span></>}
            <span>·</span>
            <span style={{ color: showOriginal ? 'var(--ink-3)' : 'var(--moss-deep)', fontWeight: 600 }}>
              {showOriginal ? 'EN' : (hasTr ? 'TR' : 'EN')}
            </span>
          </div>
          <h1 className="news-article__title">{title}</h1>

          {item.image_url && (
            <div className="news-article__hero">
              <img src={item.image_url} alt="" />
            </div>
          )}

          <div className="news-article__body">
            {renderMarkdown(body)}
          </div>

          <div className="news-article__footer">
            {hasTr && (
              <button className="news-card__btn" onClick={() => setShowOriginal(s => !s)}>
                {showOriginal
                  ? (isEn ? 'Show TR translation' : 'TR çeviriyi göster')
                  : (isEn ? 'Show original (EN)' : 'Orijinal (EN) göster')}
              </button>
            )}
            <a className="news-card__btn news-card__btn--primary" href={item.url} target="_blank" rel="noopener noreferrer">
              {isEn ? 'Open on anthropic.com ↗' : "anthropic.com'da aç ↗"}
            </a>
          </div>

          <div style={{
            marginTop: 28,
            padding: 14,
            borderRadius: 10,
            background: 'var(--bg-soft)',
            fontSize: 12.5,
            color: 'var(--ink-3)',
            lineHeight: 1.5,
          }}>
            {isEn
              ? 'Translated by Claude Haiku 4.5. For citations and exact wording, please refer to the original article.'
              : "Çeviri Claude Haiku 4.5 ile otomatik yapılmıştır. Alıntı veya tam ifade gerekiyorsa orijinal makaleyi esas alın."}
          </div>
        </article>
      )}
    </div>
  );
}

window.NewsPage = NewsPage;
window.NewsArticlePage = NewsArticlePage;