<script>
  import { onMount } from 'svelte';
  import { push } from 'svelte-spa-router';
  import { auth } from '../lib/stores/auth.js';
  import { navContext } from '../lib/stores/navContext.js';
  import { fetchDeckWithQuestions, updateDeck, togglePublished, deleteDeck } from '../lib/api/decks.js';
  import { DEFAULT_DECK_CONFIG } from '../lib/deckConfig.js';
  import QuestionEditor from '../lib/QuestionEditor.svelte';
  import ConfirmModal from '../lib/ConfirmModal.svelte';

  onMount(() => {
    navContext.set('my-decks');
  });

  export let params = {};
  $: deckId = params?.id;

  let title = '';
  let description = '';
  let config = { ...DEFAULT_DECK_CONFIG };
  let published = false;
  let questions = [];
  let loading = true;
  let saving = false;
  let error = null;
  let showDeleteConfirm = false;
  let showJsonModal = false;
  let jsonEditText = '';
  let jsonModalError = null;
  let isCopiedDeck = false;

  const CONFIG_KEYS = Object.keys(DEFAULT_DECK_CONFIG);

  $: userId = $auth.user?.id;

  let prevDeckId = '';
  $: if (deckId && userId && deckId !== prevDeckId) {
    prevDeckId = deckId;
    load();
  } else if (!deckId || !userId) {
    loading = false;
  }

  async function load() {
    if (!deckId) return;
    loading = true;
    error = null;
    try {
      const deck = await fetchDeckWithQuestions(deckId);
      if (deck.owner_id !== userId) {
        push('/');
        return;
      }
      title = deck.title ?? '';
      description = deck.description ?? '';
      config = { ...DEFAULT_DECK_CONFIG, ...(deck.config || {}) };
      published = !!deck.published;
      isCopiedDeck = !!deck.copied_from_deck_id;
      questions = (deck.questions || []).map((q) => ({
        prompt: q.prompt ?? '',
        explanation: q.explanation ?? '',
        answers: Array.isArray(q.answers) ? [...q.answers] : [''],
        correct_answer_indices: Array.isArray(q.correct_answer_indices) ? [...q.correct_answer_indices] : [0],
      }));
      if (questions.length === 0) {
        questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
      }
    } catch (e) {
      error = e?.message ?? 'Failed to load deck';
      questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
      isCopiedDeck = false;
    } finally {
      loading = false;
    }
  }

  function addQuestion() {
    questions = [...questions, { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
  }

  function removeQuestion(i) {
    questions = questions.filter((_, idx) => idx !== i);
    if (questions.length === 0) {
      questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
    }
  }

  function normalizeQuestion(q) {
    const answers = (q.answers || []).map((a) => String(a).trim()).filter(Boolean);
    if (answers.length === 0) return null;
    const indices = (q.correct_answer_indices ?? [0]).filter((i) => i >= 0 && i < answers.length);
    return {
      prompt: (q.prompt ?? '').trim(),
      explanation: (q.explanation ?? '').trim() || null,
      answers,
      correct_answer_indices: indices.length ? indices : [0],
    };
  }

  async function save() {
    const t = title.trim();
    if (!t) {
      error = 'Title is required';
      return;
    }
    if (!userId || !deckId) return;
    const normalized = questions.map(normalizeQuestion).filter(Boolean);
    if (normalized.length === 0) {
      error = 'Add at least one question with at least one answer';
      return;
    }
    saving = true;
    error = null;
    try {
      await updateDeck(deckId, {
        title: t,
        description: description.trim(),
        config,
        questions: normalized,
      });
      push('/');
    } catch (e) {
      error = e?.message ?? 'Failed to save deck';
    } finally {
      saving = false;
    }
  }

  async function togglePublish() {
    if (!deckId) return;
    try {
      await togglePublished(deckId, !published);
      published = !published;
    } catch (e) {
      error = e?.message ?? 'Failed to update publish status';
    }
  }

  function openDeleteConfirm() {
    if (!deckId) return;
    showDeleteConfirm = true;
  }

  function closeDeleteConfirm() {
    showDeleteConfirm = false;
  }

  async function confirmRemove() {
    if (!deckId) return;
    closeDeleteConfirm();
    try {
      await deleteDeck(deckId);
      push('/');
    } catch (e) {
      error = e?.message ?? 'Failed to delete deck';
    }
  }

  function cancel() {
    push('/');
  }

  function openJsonModal() {
    jsonEditText = getDeckJson();
    jsonModalError = null;
    showJsonModal = true;
  }

  function closeJsonModal() {
    showJsonModal = false;
  }

  function getDeckJson() {
    const normalized = questions.map(normalizeQuestion).filter(Boolean);
    const payload = {
      title: title.trim(),
      description: description.trim(),
      config: { ...config },
      questions: normalized,
    };
    return JSON.stringify(payload, null, 2);
  }

  async function copyJsonToClipboard() {
    try {
      await navigator.clipboard.writeText(getDeckJson());
      closeJsonModal();
    } catch (_) {}
  }
</script>

<header class="page-header page-header-fixed">
  <div class="page-header-inner">
    <h1 class="page-header-title">Edit deck</h1>
    <div class="header-actions">
      {#if loading}
        <span class="header-spinner" aria-hidden="true"></span>
      {:else}
        <button type="button" class="btn btn-secondary btn-icon-text" onclick={openJsonModal} disabled={saving} title="See JSON">
          <span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg></span>
          See JSON
        </button>
        <button type="button" class="btn btn-secondary btn-icon-text" onclick={cancel} disabled={saving} title="Cancel">
          <span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg></span>
          Cancel
        </button>
        <button type="button" class="btn btn-primary btn-icon-text" onclick={save} disabled={saving} title={saving ? 'Saving…' : 'Save'}>
          <span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></span>
          {saving ? 'Saving…' : 'Save'}
        </button>
        <button type="button" class="btn btn-danger btn-icon-only" onclick={openDeleteConfirm} disabled={saving} title="Delete deck" aria-label="Delete deck">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
        </button>
      {/if}
    </div>
  </div>
</header>

<div class="page page-with-fixed-header">
  {#if $auth.loading}
    <p class="muted">Loading…</p>
  {:else if !userId}
    <p class="auth-required">Sign in to edit decks.</p>
  {:else 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}
    <form class="deck-form" onsubmit={(e) => { e.preventDefault(); save(); }}>
      {#if !isCopiedDeck}
        <div class="publish-row">
          <label class="toggle-label">
            <input type="checkbox" checked={published} onchange={togglePublish} />
            Published (visible in Community)
          </label>
        </div>
      {/if}
      <div class="form-group">
        <label for="title">Title</label>
        <input id="title" type="text" class="input" bind:value={title} placeholder="Deck title" required />
      </div>
      <div class="form-group">
        <label for="description">Description</label>
        <textarea id="description" class="input textarea" bind:value={description} placeholder="Optional description" rows="2"></textarea>
      </div>

      <h2 class="section-title">Questions</h2>
      {#each questions as question, i}
        <QuestionEditor bind:question index={i} onRemove={() => removeQuestion(i)} />
      {/each}
      <button type="button" class="btn btn-add-q" onclick={addQuestion}>+ Add question</button>

      {#if error}
        <p class="error">{error}</p>
      {/if}
    </form>
  {/if}

  {#if showJsonModal}
    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
    <div
      class="json-modal-backdrop"
      role="dialog"
      aria-modal="true"
      aria-label="Deck JSON"
      tabindex="-1"
      onclick={(e) => e.target === e.currentTarget && closeJsonModal()}
      onkeydown={(e) => e.key === 'Escape' && closeJsonModal()}
    >
      <div
        class="json-modal"
        role="document"
        tabindex="-1"
        onclick={(e) => e.stopPropagation()}
        onkeydown={(e) => e.key === 'Escape' && closeJsonModal()}
      >
        <h2 class="json-modal-title">Deck JSON</h2>
        <textarea class="json-modal-textarea" bind:value={jsonEditText} spellcheck="false" aria-label="Edit deck JSON"></textarea>
        {#if jsonModalError}
          <p class="json-modal-error">{jsonModalError}</p>
        {/if}
        <div class="json-modal-actions">
          <button type="button" class="btn btn-secondary" onclick={closeJsonModal}>Close</button>
          <button type="button" class="btn btn-secondary" onclick={copyJsonToClipboard}>Copy</button>
          <button type="button" class="btn btn-primary" onclick={applyJsonFromModal}>Apply</button>
        </div>
      </div>
    </div>
  {/if}

  <ConfirmModal
    open={showDeleteConfirm}
    title="Delete deck"
    message="Delete this deck? This cannot be undone."
    confirmLabel="Delete"
    cancelLabel="Cancel"
    variant="danger"
    onConfirm={confirmRemove}
    onCancel={closeDeleteConfirm}
  />
</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;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
  }

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

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

  .btn-icon-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .btn-icon-text .btn-icon-svg {
    display: inline-flex;
  }

  .btn-icon-only {
    padding: 0.5rem;
    margin-left: auto;
  }

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

  .publish-row {
    margin-bottom: 1rem;
  }

  .toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
  }

  .toggle-label input {
    width: 1rem;
    height: 1rem;
  }

  .auth-required,
  .muted {
    margin: 0;
    color: var(--text-muted, #a0a0a0);
  }

  .deck-form {
    display: flex;
    flex-direction: column;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted, #a0a0a0);
    margin-bottom: 0.35rem;
  }

  .input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: var(--card-bg, #1e1e1e);
    color: var(--text-primary, #f0f0f0);
  }

  .textarea {
    resize: vertical;
    min-height: 2.5rem;
  }

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

  .btn-add-q {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px dashed var(--border, #333);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #a0a0a0);
    cursor: pointer;
    margin-bottom: 1rem;
  }

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

  .json-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .json-modal {
    background: var(--card-bg, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    width: 94vw;
    max-width: 94vw;
    height: 90vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .json-modal-title {
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #f0f0f0);
    border-bottom: 1px solid var(--border, #333);
  }

  .json-modal-textarea {
    margin: 0;
    padding: 1rem 1.25rem;
    width: 100%;
    min-height: 280px;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    color: var(--text-primary, #f0f0f0);
    background: var(--card-bg, #1e1e1e);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    resize: vertical;
    flex: 1;
    box-sizing: border-box;
  }

  .json-modal-textarea:focus {
    outline: none;
    border-color: var(--accent, #3b82f6);
  }

  .json-modal-error {
    margin: 0 1.25rem;
    font-size: 0.85rem;
    color: #ef4444;
  }

  .json-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border, #333);
  }

  .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 0 1rem 0;
    font-size: 0.9rem;
    color: #ef4444;
  }

  .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: var(--card-bg, #1e1e1e);
    color: var(--text-primary, #f0f0f0);
    cursor: pointer;
  }

  .btn:hover:not(:disabled) {
    background: var(--hover-bg, #2a2a2a);
  }

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

  .btn-primary {
    background: var(--accent, #3b82f6);
    border-color: var(--accent, #3b82f6);
  }

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

  .btn-secondary {
    background: transparent;
  }

  .btn-danger {
    background: transparent;
    color: #ef4444;
    border-color: #ef4444;
  }

  .btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.15);
  }
</style>
