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

const env = document.getElementById('supabase-env');
const supabaseUrl = env.dataset.url;
const supabaseKey = env.dataset.key;

const supabase = createClient(supabaseUrl, supabaseKey);

const promptContainer = document.getElementById('prompt-container');
const errorBox = document.getElementById('prompt-error');

function renderPromptCard(prompt) {
  const tagSpans = (prompt.tags ?? []).map(tag =>
    `<span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">${tag}</span>`
  ).join('');

  return `
    <div class="prompt-card border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]"
         data-type="${prompt.type}" data-tags="${(prompt.tags ?? []).join(',')}">
      <div class="flex items-center justify-between">
        <h3 class="text-xl font-semibold">${prompt.title}</h3>
        <span class="text-sm font-medium px-2 py-1 rounded ${
          prompt.type === 'System'
            ? 'bg-blue-100 text-blue-700'
            : 'bg-green-100 text-green-700'
        }">${prompt.type}</span>
      </div>
      <p class="text-md">${prompt.notes ?? ''}</p>
      <div class="flex flex-wrap gap-2 mt-2">${tagSpans}</div>
    </div>
  `;
}

function updateFiltersFromTags(prompts) {
  const tagSet = new Set(prompts.flatMap(p => p.tags ?? []));
  const tagContainer = document.querySelector('#filters fieldset > div');
  if (!tagContainer) return;

  tagContainer.innerHTML = '';

  tagSet.forEach(tag => {
    const label = document.createElement('label');
    label.className = "relative inline-flex items-center cursor-pointer";
    label.innerHTML = `
      <input type="checkbox" name="tag" value="${tag}" class="sr-only peer">
      <span class="px-3 py-1 pt-0 rounded-full border border-gray-300 peer-checked:bg-blue-600 peer-checked:text-white hover:bg-blue-600 hover:text-white transition-colors duration-300 text-sm">${tag}</span>
    `;
    tagContainer.appendChild(label);
  });
}

function filterCards() {
  const form = document.getElementById('filter-form');
  const cards = document.querySelectorAll('.prompt-card');
  const params = new URLSearchParams(new FormData(form));
  const type = params.get('type');
  const query = params.get('q')?.toLowerCase() || '';
  const tagParams = params.getAll('tag');

  let visibleCount = 0;

  cards.forEach(card => {
    const cardType = card.dataset.type;
    const cardTags = card.dataset.tags.split(',');
    const cardText = card.innerText.toLowerCase();

    const matchesType = !type || type === cardType;
    const matchesTags = tagParams.length === 0 || tagParams.some(t => cardTags.includes(t));
    const matchesSearch = !query || cardText.includes(query);

    const show = matchesType && matchesTags && matchesSearch;
    card.style.display = show ? 'block' : 'none';
    if (show) visibleCount++;
  });

  const countLabel = document.getElementById('prompt-count');
  if (countLabel) {
    countLabel.textContent = visibleCount === 1
      ? '1 prompt shown'
      : `${visibleCount} prompts shown`;
  }
}

async function loadPrompts() {
  const { data: prompts, error } = await supabase.from('prompts').select('*').order('title');

  if (error) {
    promptContainer.innerHTML = '';
    errorBox.textContent = error.message;
    errorBox.classList.remove('hidden');
    return;
  }

  promptContainer.innerHTML = prompts.map(renderPromptCard).join('');
  updateFiltersFromTags(prompts);
  filterCards(); // initial run

  const form = document.getElementById('filter-form');
  form?.addEventListener('input', filterCards);

  const clearBtn = document.getElementById('clear-filters');
  clearBtn?.addEventListener('click', () => {
    form.reset();
    filterCards();
  });
}

document.addEventListener('DOMContentLoaded', loadPrompts);