omotomo_site/src/routes/DeckPreview.svelte

<script>
  import { push } from 'svelte-spa-router';
  import { auth } from '../lib/stores/auth.js';
  import { fetchDeckWithQuestions, copyDeckToUser, userHasDeck } from '../lib/api/decks.js';

  export let params = {};

  let deck = null;
  let loading = true;
  let error = null;
  let adding = false;
  let addError = null;
  let userAlreadyHasDeck = false;

  $: userId = $auth.user?.id;
  $: deckId = params?.id;
  let prevDeckId = null;
  $: if (deckId && deckId !== prevDeckId) {
    prevDeckId = deckId;
    load();
  }

  async function load() {
    if (!deckId) return;
    loading = true;
    error = null;
    addError = null;
    userAlreadyHasDeck = false;
    try {
      deck = await fetchDeckWithQuestions(deckId);
      if (!deck.published) {
        error = 'This deck is not available.';
        deck = null;
      } else if (userId) {
        userAlreadyHasDeck = await userHasDeck(deckId, userId);
      }
    } catch (e) {
      error = e?.message ?? 'Failed to load deck';
      deck = null;
    } finally {
      loading = false;
    }
  }

  function goCommunity() {
    push('/community');
  }

  async function addToMyDecks() {
    if (!deckId || !deck?.published) return;
    addError = null;
    if (!userId) {
      addError = 'Sign in to add this deck to My decks.';
      return;
    }
    adding = true;
    try {
      await copyDeckToUser(deckId, userId);
      userAlreadyHasDeck = true;
    } catch (e) {
      addError = e?.message ?? 'Failed to add deck';
    } finally {
      adding = false;
    }
  }

  function goReviews() {
    if (!deckId) return;
    push(`/decks/${deckId}/reviews`);
  }
</script>

<header class="page-header page-header-fixed">
  <div class="page-header-inner">
    <div class="page-header-actions">
      <button type="button" class="btn btn-back" onclick={goCommunity}>← Community</button>
      {#if deck && deck.published && !userAlreadyHasDeck}
        <button
          type="button"
          class="btn btn-add"
          onclick={addToMyDecks}
          disabled={adding}
          title="Add to my decks"
        >
          {#if adding}
            Adding…
          {:else}
            Add to my decks
          {/if}
        </button>
      {:else if deck && deck.published && userAlreadyHasDeck}
        <span class="already-have">In My decks</span>
      {/if}
      {#if deck && deck.published}
        <button type="button" class="btn btn-reviews" onclick={goReviews} title="View reviews">
          Reviews
        </button>
      {/if}
    </div>
    {#if deck && deck.published && !userAlreadyHasDeck && addError}
      <p class="page-header-error">{addError}</p>
    {/if}
  </div>
</header>

<div class="page page-with-fixed-header">
  {#if loading}
    <p class="muted">Loading…</p>
  {:else if error}
    <p class="error">{error}</p>
  {:else if deck}
    <h1 class="deck-title">{deck.title}</h1>
    {#if deck.description}
      <p class="deck-description">{deck.description}</p>
    {/if}
    <p class="deck-meta">{deck.questions?.length ?? 0} questions</p>

    <h2 class="section-title">Questions</h2>
    <ol class="question-list">
      {#each deck.questions ?? [] as q, i}
        <li class="question-item">
          <div class="question-prompt">{q.prompt}</div>
          <ul class="question-answers">
            {#each (q.answers ?? []) as ans, j}
              <li class:correct={(q.correct_answer_indices ?? []).includes(j)}>{ans}</li>
            {/each}
          </ul>
          {#if q.explanation}
            <p class="question-explanation">{q.explanation}</p>
          {/if}
        </li>
      {/each}
    </ol>
  {/if}

</div>

<style>
  .page {
    padding: 1.5rem;
    max-width: 700px;
    margin: 0 auto;
  }

  .page-with-fixed-header {
    padding-top: calc(var(--navbar-height, 60px) + 3.5rem);
  }

  .page-header {
    margin-bottom: 0;
  }

  .page-header-fixed {
    position: fixed;
    top: var(--navbar-height, 60px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--bg, #0f0f0f);
    border-bottom: 1px solid var(--border, #333);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .page-header-inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
  }

  .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }

  .btn-back {
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
  }

  .btn-back:hover {
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-hover, #444);
  }

  .btn-add {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    background: var(--accent, #3b82f6);
    color: white;
    cursor: pointer;
  }

  .btn-add:hover:not(:disabled) {
    background: #2563eb;
  }

  .btn-add:disabled {
    opacity: 0.85;
    cursor: not-allowed;
  }

  .btn-reviews {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
  }

  .btn-reviews:hover {
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-hover, #444);
  }

  .page-header-error {
    margin: 0.5rem 0 0 0;
    font-size: 0.85rem;
    color: #ef4444;
  }

  .already-have {
    font-size: 0.9rem;
    color: #22c55e;
    font-style: italic;
  }

  .deck-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
  }

  .deck-description {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    color: var(--text-muted, #a0a0a0);
    line-height: 1.5;
  }

  .deck-meta {
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
    color: var(--text-muted, #a0a0a0);
  }

  .section-title {
    margin: 0 0 0.75rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
  }

  .question-list {
    margin: 0;
    padding-left: 1.5rem;
    list-style: decimal;
  }

  .question-item {
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: var(--card-bg, #1a1a1a);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
  }

  .question-prompt {
    font-weight: 500;
    color: var(--text-primary, #f0f0f0);
    margin-bottom: 0.5rem;
  }

  .question-answers {
    margin: 0 0 0.5rem 0;
    padding-left: 1.25rem;
    list-style: disc;
    font-size: 0.9rem;
    color: var(--text-muted, #a0a0a0);
  }

  .question-answers li.correct {
    color: #22c55e;
  }

  .question-explanation {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted, #888);
    font-style: italic;
  }

  .muted,
  .error {
    margin: 0;
  }

  .error {
    color: #ef4444;
  }

  .muted {
    color: var(--text-muted, #a0a0a0);
  }
</style>