<script lang="ts">
  interface TickerSnapshot {
    price:  number | null;
    signal: string | null;
  }

  interface MarketCall {
    id:       string;
    title:    string;
    quarter:  string;
    date:     string;
    thesis:   string;
    tickers:  string[];
    snapshot: Record<string, TickerSnapshot>;
  }

  let {
    call,
    onDelete,
  }: {
    call:     MarketCall;
    onDelete: (id: string) => void;
  } = $props();

  const signalColor = (s: string | null | undefined): string => {
    if (s?.includes('Strong'))      return '#4ade80';
    if (s?.includes('Momentum'))    return '#60a5fa';
    if (s?.includes('Neutral'))     return '#94a3b8';
    if (s?.includes('Speculation')) return '#fb923c';
    return '#f87171';
  };
</script>

<section class="section call-card">
  <div class="section-header">
    <div class="call-card-meta">
      <a href="/calls/{call.id}" class="call-card-title">{call.title}</a>
      <div class="call-card-badges">
        <span class="tag">{call.quarter}</span>
        <span class="call-date-badge">{call.date}</span>
        <span class="count">{call.tickers.length} tickers</span>
      </div>
    </div>
    <button class="btn-call-delete" onclick={() => onDelete(call.id)}>✕</button>
  </div>

  <div class="call-card-body">
    <p class="call-thesis">{call.thesis}</p>

    {#if Object.keys(call.snapshot ?? {}).length}
      <div class="snapshot-grid">
        {#each call.tickers as ticker}
          {@const snap = call.snapshot[ticker]}
          {#if snap}
            <a href="/calls/{call.id}" class="snap-card">
              <div class="snap-ticker">{ticker}</div>
              <div class="snap-price">${snap.price?.toFixed(2) ?? '—'}</div>
              <div class="snap-signal" style="color:{signalColor(snap.signal)}">
                {snap.signal?.replace(/[✅⚡⚠️🔄❌]/u, '').trim() ?? '—'}
              </div>
            </a>
          {/if}
        {/each}
      </div>
      <a href="/calls/{call.id}" class="call-view-link">View performance →</a>
    {/if}
  </div>
</section>

