<script>
  import { onMount } from 'svelte'
  import { api } from '../lib/api.js'
  import { notify } from '../lib/store.js'

  let news = []
  let loading = true
  let filter = ''

  onMount(load)

  async function load() {
    loading = true
    try {
      news = await api.getNews(filter || null)
    } catch(e) {
      notify('Erreur chargement news : ' + e.message, 'error')
      news = []
    } finally {
      loading = false
    }
  }

  function sentimentColor(s) {
    if (!s) return ''
    if (s === 'positive') return 'green'
    if (s === 'negative') return 'red'
    return 'neutral'
  }

  function timeAgo(dateStr) {
    if (!dateStr) return ''
    const diff = Date.now() - new Date(dateStr).getTime()
    const h = Math.floor(diff / 3600000)
    if (h < 1) return 'il y a < 1h'
    if (h < 24) return `il y a ${h}h`
    return `il y a ${Math.floor(h / 24)}j`
  }
</script>

<div class="page">
  <h1>News</h1>

  <div class="toolbar">
    <input
      bind:value={filter}
      placeholder="Filtrer par ticker…"
      on:keydown={(e) => e.key === 'Enter' && load()}
    />
    <button class="btn-reload" on:click={load}>↻</button>
  </div>

  {#if loading}
    <p class="muted">Chargement…</p>
  {:else if news.length === 0}
    <p class="empty">Aucune news disponible. Les données arriveront une fois les intégrations API branchées.</p>
  {:else}
    <div class="news-list">
      {#each news as item}
        <div class="news-card">
          <div class="news-meta">
            <span class="ticker">{item.ticker ?? '—'}</span>
            <span class="source">{item.source ?? ''}</span>
            <span class="time">{timeAgo(item.published_at)}</span>
            {#if item.sentiment}
              <span class="sentiment {sentimentColor(item.sentiment)}">{item.sentiment}</span>
            {/if}
          </div>
          <div class="news-headline">
            {#if item.url}
              <a href={item.url} target="_blank" rel="noopener">{item.headline}</a>
            {:else}
              {item.headline}
            {/if}
          </div>
        </div>
      {/each}
    </div>
  {/if}
</div>

<style>
  .page h1 { color: #e6edf3; font-size: 1.4rem; }

  .toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-width: 360px;
  }

  input {
    flex: 1;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #e6edf3;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    outline: none;
  }
  input:focus { border-color: #58a6ff; }
  input::placeholder { color: #484f58; }

  .btn-reload {
    background: #21262d;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #8b949e;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }
  .btn-reload:hover { color: #e6edf3; background: #30363d; }

  .news-list { display: flex; flex-direction: column; gap: 0.75rem; }

  .news-card {
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: border-color 0.15s;
  }
  .news-card:hover { border-color: #30363d; }

  .news-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
    font-size: 0.75rem;
  }

  .ticker  { color: #58a6ff; font-weight: 600; }
  .source  { color: #8b949e; }
  .time    { color: #484f58; margin-left: auto; }

  .sentiment { padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; font-weight: 500; }
  .sentiment.green   { background: #0d2c1a; color: #3fb950; }
  .sentiment.red     { background: #2c0d0d; color: #f85149; }
  .sentiment.neutral { background: #1c1c1c; color: #8b949e; }

  .news-headline { font-size: 0.9rem; color: #c9d1d9; line-height: 1.4; }
  .news-headline a { color: #c9d1d9; text-decoration: none; }
  .news-headline a:hover { color: #58a6ff; }

  .empty, .muted { color: #484f58; font-size: 0.875rem; }
</style>
