script.js

// script.js
// Handles: adding items, editing, deleting, filtering, and saving
// everything to Supabase (a Postgres database + file storage) so it
// persists in the cloud instead of just in this browser.

import { SUPABASE_URL, SUPABASE_ANON_KEY } from './supabase-config.js';
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm';

// ---------------------------------------------
// 1. Connect to Supabase
// ---------------------------------------------

const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

// ---------------------------------------------
// 2. State
// ---------------------------------------------

let items = [];
let currentFilter = 'all';
let currentAuthorFilter = null;
let currentSeriesFilter = null;
let editingId = null; // the row's id being edited, if any
let pendingCoverFile = null; // a File object selected via "upload a file", not yet saved

// ---------------------------------------------
// 3. Element references
// ---------------------------------------------

const form = document.getElementById('item-form');
const shelf = document.getElementById('shelf');
const emptyState = document.getElementById('empty-state');
const loadingState = document.getElementById('loading-state');
const submitButton = form.querySelector('.stamp-button');
const saveStatus = document.getElementById('save-status');
const fetchCoverBtn = document.getElementById('fetch-cover-btn');
const coverFileInput = document.getElementById('cover-file');
const coverPreview = document.getElementById('cover-preview');
const authorFilterBanner = document.getElementById('author-filter-banner');
const filterMenu = document.getElementById('filter-menu');
const filterMenuLabel = document.getElementById('filter-menu-label');
const ownerLogin = document.getElementById('owner-login');
const ownerStatus = document.getElementById('owner-status');
const loginForm = document.getElementById('login-form');
const loginHint = document.getElementById('login-hint');
const logoutBtn = document.getElementById('logout-btn');

// ---------------------------------------------
// 4. Helpers
// ---------------------------------------------

function statusLabel(status) {
  if (status === 'done') return 'Done';
  if (status === 'in-progress') return 'In progress';
  return 'Want to try';
}

function starString(rating) {
  const n = Number(rating);
  return n > 0 ? '★'.repeat(n) : '—';
}

function setSaveStatus(message, isError) {
  saveStatus.textContent = message;
  saveStatus.hidden = !message;
  saveStatus.style.color = isError ? 'var(--clay)' : 'var(--gold)';
}

function cardHTML(item) {
  const spineClass = item.type === 'book' ? 'spine-tag--book' : 'spine-tag--recipe';
  const spineLabel = item.type === 'book' ? 'Book' : 'Recipe';
  const statusClass = 'status-pill--' + (item.status === 'in-progress' ? 'progress' : item.status === 'done' ? 'done' : 'want');

  const coverHTML = item.cover
    ? `<img class="card-cover" src="${item.cover}" alt="Cover of ${item.title}" onerror="this.outerHTML='<div class=&quot;card-cover card-cover--placeholder&quot;>${item.title.charAt(0).toUpperCase()}</div>'">`
    : `<div class="card-cover card-cover--placeholder">${item.title.charAt(0).toUpperCase()}</div>`;

  const authorHTML = item.author
    ? `<button type="button" class="card-author" data-action="filter-author" data-author="${item.author}">by ${item.author}</button>`
    : '';

  const seriesHTML = item.series
    ? `<button type="button" class="card-series" data-action="filter-series" data-series="${item.series}">${item.series} series</button>`
    : '';

  const notesHTML = item.notes
    ? `<details class="card-notes">
         <summary>Summary / notes</summary>
         <p>${item.notes.replace(/</g, '&lt;')}</p>
       </details>`
    : '';

  return `
    <article class="card" data-type="${item.type}" data-id="${item.id}">
      <span class="spine-tag ${spineClass}">${spineLabel}</span>
      ${coverHTML}
      <h3 class="card-title">${item.title}</h3>
      ${authorHTML}
      ${seriesHTML}
      <div class="card-meta">
        <span class="status-pill ${statusClass}">${statusLabel(item.status)}</span>
        <span class="rating">${starString(item.rating)}</span>
      </div>
      ${notesHTML}
      <details class="card-menu">
        <summary class="card-menu-btn" aria-label="More actions">⋯</summary>
        <div class="card-menu-dropdown">
          <button type="button" class="card-btn" data-action="edit" data-id="${item.id}">Edit</button>
          <button type="button" class="card-btn card-btn--danger" data-action="delete" data-id="${item.id}">Delete</button>
        </div>
      </details>
    </article>
  `;
}

// ---------------------------------------------
// 4b. Owner sign-in
// ---------------------------------------------
//
// Anyone can view the shelf (the "Public read access" policy allows
// it), but adding/editing/deleting requires being signed in as the
// owner — enforced both here (hiding the controls) and, more
// importantly, by the database policies themselves. The UI hiding is
// just for a clean visitor experience; the real security is the RLS
// policies, since a visitor could still call the API directly.

function applyAuthState(session) {
  const isOwner = !!session;
  document.body.classList.toggle('is-owner', isOwner);
  ownerLogin.hidden = isOwner;
  ownerStatus.hidden = !isOwner;
}

// Check whether we're already signed in (e.g. after a page refresh)
supabase.auth.getSession().then(({ data }) => applyAuthState(data.session));

// Keep the UI in sync if auth state changes (sign in, sign out, or
// the session expiring)
supabase.auth.onAuthStateChange((_event, session) => applyAuthState(session));

loginForm.addEventListener('submit', async (event) => {
  event.preventDefault();

  const email = document.getElementById('login-email').value.trim();
  const password = document.getElementById('login-password').value;

  const { error } = await supabase.auth.signInWithPassword({ email, password });

  if (error) {
    loginHint.textContent = 'Incorrect email or password.';
    loginHint.hidden = false;
  } else {
    loginHint.hidden = true;
    loginForm.reset();
    ownerLogin.open = false;
  }
});

logoutBtn.addEventListener('click', async () => {
  await supabase.auth.signOut();
});

// ---------------------------------------------
// 5. Render — redraws the whole shelf from `items` + active filters
// ---------------------------------------------

function render() {
  const visible = items.filter((item) => {
    const statusFilters = ['want', 'in-progress', 'done'];
    const matchesTypeFilter =
      currentFilter === 'all' ? true :
      statusFilters.includes(currentFilter) ? item.status === currentFilter :
      item.type === currentFilter;

    const matchesAuthorFilter = !currentAuthorFilter || item.author === currentAuthorFilter;
    const matchesSeriesFilter = !currentSeriesFilter || item.series === currentSeriesFilter;

    return matchesTypeFilter && matchesAuthorFilter && matchesSeriesFilter;
  });

  shelf.innerHTML = visible.map(cardHTML).join('');
  emptyState.hidden = visible.length !== 0;

  const parts = [];
  if (currentAuthorFilter) parts.push(`by ${currentAuthorFilter}`);
  if (currentSeriesFilter) parts.push(`in the ${currentSeriesFilter} series`);

  if (parts.length > 0) {
    authorFilterBanner.hidden = false;
    authorFilterBanner.innerHTML = `Showing works ${parts.join(', ')} <button type="button" id="clear-author-filter">Clear</button>`;
  } else {
    authorFilterBanner.hidden = true;
    authorFilterBanner.innerHTML = '';
  }
}

// ---------------------------------------------
// 6. Load from Supabase + stay in sync
// ---------------------------------------------

async function loadItems() {
  const { data, error } = await supabase
    .from('items')
    .select('*')
    .order('created_at', { ascending: true });

  if (error) {
    loadingState.textContent = 'Could not load your shelf — check your Supabase config and internet connection.';
    console.error('Load error:', error);
    return;
  }

  items = data;
  loadingState.hidden = true;
  render();
}

loadItems();

// Live sync: Postgres "changes" subscription — like Firestore's
// onSnapshot, this updates the page automatically if data changes
// from another tab, device, or directly in the Supabase dashboard.
supabase
  .channel('items-changes')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'items' }, () => {
    loadItems();
  })
  .subscribe();

// ---------------------------------------------
// 7. Cover image handling (URL, auto-fetch, or file upload)
// ---------------------------------------------

form.cover.addEventListener('input', () => {
  pendingCoverFile = null;
  if (form.cover.value.trim()) {
    coverPreview.src = form.cover.value.trim();
    coverPreview.hidden = false;
  } else {
    coverPreview.hidden = true;
  }
});

coverFileInput.addEventListener('change', () => {
  const file = coverFileInput.files[0];
  if (!file) return;

  // We don't upload yet — just preview. The actual upload to Supabase
  // Storage happens on form submit.
  pendingCoverFile = file;
  form.cover.value = '';

  const reader = new FileReader();
  reader.onload = () => {
    coverPreview.src = reader.result;
    coverPreview.hidden = false;
  };
  reader.readAsDataURL(file);

  setSaveStatus(`"${file.name}" selected — it'll upload when you save.`, false);
});

fetchCoverBtn.addEventListener('click', async () => {
  const title = form.title.value.trim();
  if (!title) { setSaveStatus('Type a title first.', true); return; }

  fetchCoverBtn.disabled = true;
  fetchCoverBtn.textContent = 'Searching…';

  try {
    const url = `https://openlibrary.org/search.json?title=${encodeURIComponent(title)}&limit=1`;
    const response = await fetch(url);
    if (!response.ok) throw new Error('Request failed');

    const data = await response.json();
    const firstResult = data.docs && data.docs[0];

    if (firstResult && firstResult.cover_i) {
      form.cover.value = `https://covers.openlibrary.org/b/id/${firstResult.cover_i}-M.jpg`;
      pendingCoverFile = null;
      coverPreview.src = form.cover.value;
      coverPreview.hidden = false;
      setSaveStatus(`Found a cover for "${firstResult.title}".`, false);
    } else {
      setSaveStatus('No cover found — try a more exact title, or paste a URL.', true);
    }
  } catch (error) {
    setSaveStatus('Could not reach Open Library — check your connection.', true);
  } finally {
    fetchCoverBtn.disabled = false;
    fetchCoverBtn.textContent = 'Find cover';
  }
});

// Uploads the pending file to the Supabase "covers" bucket and
// returns its public URL. Only called on submit, and only if a file
// was actually chosen.
async function uploadPendingCover() {
  if (!pendingCoverFile) return form.cover.value.trim();

  const path = `${Date.now()}-${pendingCoverFile.name}`;
  const { error } = await supabase.storage.from('covers').upload(path, pendingCoverFile);
  if (error) throw error;

  const { data } = supabase.storage.from('covers').getPublicUrl(path);
  return data.publicUrl;
}

// ---------------------------------------------
// 8. Add / update an item (form submit)
// ---------------------------------------------

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const title = form.title.value.trim();
  if (!title) return;

  submitButton.disabled = true;
  submitButton.textContent = editingId ? 'Updating…' : 'Adding…';

  try {
    const coverUrl = await uploadPendingCover();

    const itemData = {
      title,
      author: form.author.value.trim(),
      series: form.series.value.trim(),
      notes: form.notes.value.trim(),
      cover: coverUrl,
      type: form.type.value,
      status: form.status.value,
      rating: form.rating.value
    };

    let saveError;
    if (editingId) {
      ({ error: saveError } = await supabase.from('items').update(itemData).eq('id', editingId));
    } else {
      ({ error: saveError } = await supabase.from('items').insert(itemData));
    }

    if (saveError) throw saveError;

    // The postgres_changes subscription (section 6) will also fire and
    // reload — but we reload here too so the UI feels instant rather
    // than waiting on the realtime round-trip.
    await loadItems();

    editingId = null;
    pendingCoverFile = null;
    submitButton.textContent = 'Add item';
    setSaveStatus('');
    coverPreview.hidden = true;
    form.reset();
  } catch (error) {
    setSaveStatus('Could not save — check your Supabase config and connection.', true);
    console.error('Save error:', error);
  } finally {
    submitButton.disabled = false;
    if (submitButton.textContent.includes('…')) submitButton.textContent = editingId ? 'Update item' : 'Add item';
  }
});

// ---------------------------------------------
// 9. Edit / delete (event delegation on the shelf container)
// ---------------------------------------------

shelf.addEventListener('click', async (event) => {
  const authorBtn = event.target.closest('[data-action="filter-author"]');
  if (authorBtn) {
    const author = authorBtn.dataset.author;
    currentAuthorFilter = currentAuthorFilter === author ? null : author;
    render();
    return;
  }

  const seriesBtn = event.target.closest('[data-action="filter-series"]');
  if (seriesBtn) {
    const series = seriesBtn.dataset.series;
    currentSeriesFilter = currentSeriesFilter === series ? null : series;
    render();
    return;
  }

  const button = event.target.closest('button[data-action]');
  if (!button) return;

  const id = button.dataset.id;

  if (button.dataset.action === 'delete') {
    const { error } = await supabase.from('items').delete().eq('id', id);
    if (error) {
      alert('Could not delete that item — check your connection.');
      console.error('Delete error:', error);
    } else {
      await loadItems();
    }
    return;
  }

  if (button.dataset.action === 'edit') {
    const item = items.find((item) => item.id === id);
    if (!item) return;

    form.title.value = item.title;
    form.author.value = item.author || '';
    form.series.value = item.series || '';
    form.notes.value = item.notes || '';
    form.cover.value = item.cover || '';
    form.type.value = item.type;
    form.status.value = item.status;
    form.rating.value = item.rating;
    pendingCoverFile = null;

    if (item.cover) {
      coverPreview.src = item.cover;
      coverPreview.hidden = false;
    } else {
      coverPreview.hidden = true;
    }

    editingId = id;
    submitButton.textContent = 'Update item';
    form.closest('details.add-panel').open = true;
    form.scrollIntoView({ behavior: 'smooth' });

    const menu = button.closest('details.card-menu');
    if (menu) menu.open = false;
  }
});

authorFilterBanner.addEventListener('click', (event) => {
  if (event.target.id === 'clear-author-filter') {
    currentAuthorFilter = null;
    currentSeriesFilter = null;
    render();
  }
});

// ---------------------------------------------
// 10. Filtering
// ---------------------------------------------

filterMenu.querySelector('.filter-menu-dropdown').addEventListener('click', (event) => {
  const option = event.target.closest('.filter-option');
  if (!option) return;

  filterMenu.querySelectorAll('.filter-option').forEach((o) => o.classList.remove('is-active'));
  option.classList.add('is-active');

  currentFilter = option.dataset.filter;
  filterMenuLabel.textContent = option.textContent;
  filterMenu.open = false;

  render();
});

// ---------------------------------------------
// 11. Dropdown coordination (card menus + filter menu)
// ---------------------------------------------

document.addEventListener('click', (event) => {
  if (!event.target.closest('.card-menu')) {
    shelf.querySelectorAll('details.card-menu[open]').forEach((menu) => { menu.open = false; });
  }
  if (!event.target.closest('.filter-menu')) {
    filterMenu.open = false;
  }
});

document.addEventListener('toggle', (event) => {
  const details = event.target;
  if (!details.open) return;

  if (details.matches('.card-menu')) {
    filterMenu.open = false;
    shelf.querySelectorAll('details.card-menu[open]').forEach((menu) => {
      if (menu !== details) menu.open = false;
    });
  }

  if (details.matches('.filter-menu')) {
    shelf.querySelectorAll('details.card-menu[open]').forEach((menu) => { menu.open = false; });
  }
}, true);