<script>
  import { push } from 'svelte-spa-router';
  import { auth } from '../lib/stores/auth.js';
  import { navContext } from '../lib/stores/navContext.js';
  import { supabase } from '../lib/supabase.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(supabase, deckId);
      const isMyCopy = !!(userId && deck.owner_id === userId && deck.copied_from_deck_id);
      const isOwnDeckLoad = !!(userId && deck.owner_id === userId && !deck.copied_from_deck_id);
      const canView = deck.published || isMyCopy || isOwnDeckLoad;
      if (!canView) {
        error = 'This deck is not available.';
        deck = null;
      } else {
        navContext.set(isMyCopy || isOwnDeckLoad ? 'my-decks' : 'community');
        if (isMyCopy) {
          userAlreadyHasDeck = true;
        } else if (userId) {
          userAlreadyHasDeck = await userHasDeck(supabase, deckId, userId);
        }
      }
    } catch (e) {
      error = e?.message ?? 'Failed to load deck';
      deck = null;
      navContext.set(null);
    } finally {
      loading = false;
    }
  }

  $: isMyCopy = !!(deck && userId && deck.owner_id === userId && deck.copied_from_deck_id);
  $: isOwnDeck = !!(deck && userId && deck.owner_id === userId && !deck.copied_from_deck_id);
  /** Only show "In My decks" when viewing from Community and user already has this deck */
  $: showInMyDecksLabel = !!(deck && !isMyCopy && !isOwnDeck && userAlreadyHasDeck);

  function goBack() {
    if (loading) {
      if (typeof window !== 'undefined' && window.history.length > 1) window.history.back();
      else push('/community');
    } else if (isMyCopy || isOwnDeck) {
      push('/');
    } else {
      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(supabase, deckId, userId);
      userAlreadyHasDeck = true;
    } catch (e) {
      addError = e?.message ?? 'Failed to add deck';
    } finally {
      adding = false;
    }
  }

  function goReviews() {
    if (!deck) return;
    const reviewsDeckId = isMyCopy ? deck.copied_from_deck_id : deck.id;
    if (reviewsDeckId) push(`/decks/${reviewsDeckId}/reviews`);
  }

  function goEdit() {
    if (deck?.id) push(`/decks/${deck.id}/edit`);
  }
</script>

<header class="page-header page-header-fixed">
  <div class="page-header-inner">
    <div class="header-top-row">
      <h1 class="page-header-title">Preview</h1>
      <div class="page-header-actions">
        <button type="button" class="btn btn-back" onclick={goBack}>
          {#if loading}
            ← Back
          {:else if isMyCopy || isOwnDeck}
            ← My decks
          {:else}
            ← Community
          {/if}
        </button>
        {#if loading}
          <span class="header-spinner" aria-hidden="true"></span>
        {:else if deck && (deck.published || isMyCopy || isOwnDeck)}
          {#if isOwnDeck}
            <button type="button" class="btn btn-edit" onclick={goEdit} title="Edit deck">
              Edit
            </button>
          {/if}
          {#if !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>
          {/if}
          <button type="button" class="btn btn-reviews" onclick={goReviews} title="View reviews">
            Reviews
          </button>
        {/if}
      </div>
    </div>
    {#if showInMyDecksLabel}
      <p class="header-in-my-decks">In My decks</p>
    {/if}
    {#if deck && (deck.published || isMyCopy || isOwnDeck) && !userAlreadyHasDeck && addError}
      <p class="page-header-error">{addError}</p>
    {/if}
  </div>
</header>

<div class="page page-with-fixed-header">
  {#if loading}
    <div class="loading-state" aria-busy="true" aria-live="polite">
      <span class="loading-spinner" aria-hidden="true"></span>
      <p class="loading-text">Loading deck…</p>
    </div>
  {: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;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .page-header-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
  }

  .header-in-my-decks {
    margin: 0;
    font-size: 0.9rem;
    color: #22c55e;
    font-style: italic;
  }

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

  .header-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--border, #333);
    border-top-color: var(--accent, #3b82f6);
    border-radius: 50%;
    animation: header-spin 0.7s linear infinite;
  }

  @keyframes header-spin {
    to { transform: rotate(360deg); }
  }

  .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);
  }

  .btn-edit {
    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-edit:hover {
    color: var(--text-primary, #f0f0f0);
    border-color: var(--border-hover, #444);
  }

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

  .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;
  }

  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 12rem;
    padding: 2rem;
  }

  .loading-spinner {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--border, #333);
    border-top-color: var(--accent, #3b82f6);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
  }

  @keyframes loading-spin {
    to { transform: rotate(360deg); }
  }

  .loading-text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted, #a0a0a0);
  }

  .error {
    margin: 0;
    color: #ef4444;
  }
</style>
