<script lang="ts">
  import MarketContext from '$lib/components/shared/MarketContext.svelte';
  import SignalBadge from '$lib/components/shared/SignalBadge.svelte';
  import VerdictPill from '$lib/components/shared/VerdictPill.svelte';
  import { sorted } from '$lib/utils.js';
  import type { AssetResult, MarketContext as MarketContextType } from '$lib/types.js';

  interface PageData {
    ETF:           AssetResult[];
    BOND:          AssetResult[];
    marketContext: MarketContextType | null;
    error?:        string;
  }
  let { data }: { data: PageData } = $props();

  const SIGNAL_STRONG = '✅ Strong Buy';

  // Filter to only Strong Buy in both modes — the safest picks
  const strongEtfs  = $derived((data.ETF  ?? []).filter(r => r.signal === SIGNAL_STRONG));
  const strongBonds = $derived((data.BOND ?? []).filter(r => r.signal === SIGNAL_STRONG));

  // All other non-error results — "watch" tier (pass one mode but not both)
  const watchEtfs  = $derived((data.ETF  ?? []).filter(r => r.signal !== SIGNAL_STRONG));
  const watchBonds = $derived((data.BOND ?? []).filter(r => r.signal !== SIGNAL_STRONG));

  const totalScreened = $derived((data.ETF?.length ?? 0) + (data.BOND?.length ?? 0));
  const totalStrong   = $derived(strongEtfs.length + strongBonds.length);
</script>

<div class="page">
  <div class="page-header">
    <div>
      <h1>🛡 Safe Buys</h1>
      <p class="subtitle">
        Low-cost ETFs and investment-grade bonds passing <strong>both</strong> Market-Adjusted and Fundamental gates.
        {totalStrong} of {totalScreened} screened assets qualify.
      </p>
    </div>
  </div>

  {#if data.error}
    <div class="error-banner">⚠ {data.error}</div>
  {/if}

  {#if data.marketContext}
    <MarketContext ctx={data.marketContext} />
  {/if}

  <!-- ── Strong Buy ─────────────────────────────────────────────────── -->
  {#if strongEtfs.length || strongBonds.length}
    <div class="strong-header">
      <span class="strong-badge">✅ Strong Buy</span>
      <span class="strong-sub">Pass both Market-Adjusted and Fundamental gates</span>
    </div>

    {#if strongEtfs.length}
      <section class="section">
        <div class="section-header">
          <h2>ETFs</h2>
          <span class="count">{strongEtfs.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>Expense</th>
                <th>Yield</th>
                <th>AUM</th>
                <th>5Y Ret</th>
                <th>Score</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(strongEtfs) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><VerdictPill label={r.inflated.label} /></td>
                  <td><VerdictPill label={r.fundamental.label} /></td>
                  <td class="num">{m['Exp Ratio%'] ?? '—'}</td>
                  <td class="num">{m['Yield%'] ?? '—'}</td>
                  <td class="num">{m['AUM'] ?? '—'}</td>
                  <td class="num">{m['5Y Return%'] ?? '—'}</td>
                  <td class="score">{r.inflated.scoreSummary}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}

    {#if strongBonds.length}
      <section class="section">
        <div class="section-header">
          <h2>Bond ETFs</h2>
          <span class="count">{strongBonds.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>YTM</th>
                <th>Duration</th>
                <th>Rating</th>
                <th>Score</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(strongBonds) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><VerdictPill label={r.inflated.label} /></td>
                  <td><VerdictPill label={r.fundamental.label} /></td>
                  <td class="num">{m['YTM%'] ?? '—'}</td>
                  <td class="num">{m['Duration'] ?? '—'}</td>
                  <td class="num">{m['Rating'] ?? '—'}</td>
                  <td class="score">{r.inflated.scoreSummary}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}
  {:else}
    <div class="empty-strong">
      No assets currently pass both gates — market conditions may be elevated.
      Check the Watch List below for assets passing at least one mode.
    </div>
  {/if}

  <!-- ── Watch List ─────────────────────────────────────────────────── -->
  {#if watchEtfs.length || watchBonds.length}
    <div class="watch-header">
      <span class="watch-label">👀 Watch List</span>
      <span class="watch-sub">Pass one gate — monitor for entry</span>
    </div>

    {#if watchEtfs.length}
      <section class="section watch-section">
        <div class="section-header">
          <h2>ETFs</h2>
          <span class="count">{watchEtfs.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Signal</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>Expense</th>
                <th>Yield</th>
                <th>AUM</th>
                <th>5Y Ret</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(watchEtfs) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><SignalBadge signal={r.signal} /></td>
                  <td><VerdictPill label={r.inflated.label} /></td>
                  <td><VerdictPill label={r.fundamental.label} /></td>
                  <td class="num">{m['Exp Ratio%'] ?? '—'}</td>
                  <td class="num">{m['Yield%'] ?? '—'}</td>
                  <td class="num">{m['AUM'] ?? '—'}</td>
                  <td class="num">{m['5Y Return%'] ?? '—'}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}

    {#if watchBonds.length}
      <section class="section watch-section">
        <div class="section-header">
          <h2>Bond ETFs</h2>
          <span class="count">{watchBonds.length}</span>
        </div>
        <div class="table-wrap">
          <table>
            <thead>
              <tr>
                <th class="col-ticker">Ticker</th>
                <th>Price</th>
                <th>Signal</th>
                <th>Mkt-Adj</th>
                <th>Graham</th>
                <th>YTM</th>
                <th>Duration</th>
                <th>Rating</th>
              </tr>
            </thead>
            <tbody>
              {#each sorted(watchBonds) as r}
                {@const m = r.asset.displayMetrics ?? {}}
                <tr>
                  <td class="ticker">{r.asset.ticker}</td>
                  <td class="num">{m.Price ?? '—'}</td>
                  <td><SignalBadge signal={r.signal} /></td>
                  <td><VerdictPill label={r.inflated.label} /></td>
                  <td><VerdictPill label={r.fundamental.label} /></td>
                  <td class="num">{m['YTM%'] ?? '—'}</td>
                  <td class="num">{m['Duration'] ?? '—'}</td>
                  <td class="num">{m['Rating'] ?? '—'}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </section>
    {/if}
  {/if}
</div>

<style>
  /* ── Page ── unique to this route ──────────────────────────────── */
  .page { max-width: 1100px; padding-bottom: 60px; }

  .page-header { margin-bottom: 20px; }
  h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
  .subtitle { font-size: 12px; color: var(--text-dimmer); line-height: 1.5; }
  .subtitle strong { color: var(--text-muted); }

  /* ── Strong Buy banner ───────────────────────────────────────────── */
  .strong-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

  .strong-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-bg);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
  }

  .strong-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }

  .empty-strong {
    padding: var(--space-3xl) 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    font-size: var(--fs-md);
    color: var(--text-dim);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.6;
  }

  /* ── Watch List ──────────────────────────────────────────────────── */
  .watch-header { display: flex; align-items: center; gap: 12px; margin-top: 28px; margin-bottom: 12px; }

  .watch-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-card);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
  }

  .watch-sub { font-size: var(--fs-sm); color: var(--text-dimmer); }

  /* Watch sections are slightly dimmed — hover to focus */
  .watch-section { opacity: 0.75; }
  .watch-section:hover { opacity: 1; transition: opacity 0.2s; }

  /* ── Score cell ─────────────────────────────────────────────────── */
  .score { color: var(--text-dimmer); font-size: var(--fs-sm); }
</style>
