Prompt_Catalog/src/pages/add.astro

---
import MainLayout from '../layouts/MainLayout.astro';
import Sidebar from "../components/SidebarAdd.astro";

const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
---

<MainLayout page="Add Prompt">
  <div
    id="supabase-env"
    data-url={supabaseUrl}
    data-key={supabaseKey}
    hidden
  ></div>

  <header class="border-b p-4">
    <h1 class="text-2xl font-bold"><a href="/">Prompt Catalog - Add New Prompt</a></h1>
    <p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
  </header>

  <main class="flex">
    <Sidebar />

    <div class="border-l flex-1 flex flex-col overflow-hidden">
      <div class="flex-1 overflow-y-auto p-4">
        <div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
          Prompt added successfully!
        </div>
        <div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>

        <form id="add-form" class="space-y-4">
          <div>
            <label for="title" class="block text-md font-semibold mb-1">Title<span class="text-red-600">*</span></label>
            <input name="title" id="title" required class="border p-2 w-full rounded" />
            <input type="hidden" name="slug" id="slug" />
          </div>

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div>
              <label for="type" class="block text-md font-semibold mb-1">Type<span class="text-red-600">*</span></label>
              <select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
                <option value="System">System</option>
                <option value="Task">Task</option>
              </select>
            </div>

            <div>
              <label for="tags" class="block text-md font-semibold mb-1">Tags (comma-separated)</label>
              <input name="tags" id="tags" class="border p-2 pt-1 w-full rounded" />
            </div>
          </div>

          <div>
            <label for="description" class="block text-md font-semibold mb-1">Prompt<span class="text-red-600">*</span></label>
            <textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded"></textarea>
          </div>

          <div>
            <label for="notes" class="block text-md font-semibold mb-1">Description<span class="text-red-600">*</span></label>
            <textarea name="notes" id="notes" rows="3" required class="border p-2 w-full rounded"></textarea>
          </div>

          <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
            Add Prompt
          </button>

          <hr class="my-6 border-gray-600" />

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div>
              <h2 class="text-lg font-semibold mb-2">Import Prompts</h2>
              <p class="text-sm text-gray-400 mb-2">Upload a JSON file to import prompts.</p>

              <label for="importFile" class="block text-md font-semibold mb-1">Import Prompts from JSON</label>
              <input type="file" id="importFile" accept="application/json" class="border p-2 w-full rounded bg-gray-800 text-white" />
              <button type="button" id="importBtn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors duration-300 cursor-pointer">
                Import Prompts
              </button>
            </div>

            <div id="export-section">
              <h2 class="text-lg font-semibold mb-2">Export Prompts</h2>
              <p class="text-sm text-gray-400 mb-2">Select prompts to export, or leave all unchecked to export everything.</p>

              <label class="block text-md font-semibold mb-1">Export Prompts to JSON</label>
              <div id="prompt-list" class="max-h-64 overflow-y-auto mb-4 border py-1 pb-2 px-3 rounded flex flex-wrap gap-x-4 gap-y-1"></div>

              <button type="button" id="exportBtn" class="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 transition-colors duration-300 cursor-pointer">
                Export All Prompts
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </main>

  <footer class="border-t p-4 text-center text-sm">
    &copy; {new Date().getFullYear()} Prompt Catalog
  </footer>

  <script type="module">
    import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';

    const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
    const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;

    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const form = document.getElementById('add-form');
    const importBtn = document.getElementById('importBtn');
    const exportBtn = document.getElementById('exportBtn');
    const successBox = document.getElementById('success');
    const errorBox = document.getElementById('error');

    async function loadPromptCheckboxes() {
      const promptList = document.getElementById('prompt-list');
      const { data, error } = await supabase.from('prompts').select('id, title');

      if (error) {
        promptList.innerHTML = `<p class="text-red-400">Failed to load prompts: ${error.message}</p>`;
        return;
      }

      promptList.innerHTML = data
        .map(
          prompt => `
          <label class="block mb-0">
            <input type="checkbox" value="${prompt.id}" class="mr-0" />
            ${prompt.title}
          </label>`
        )
        .join('');

      // After rendering, attach change listeners to checkboxes
      const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
      checkboxes.forEach(cb => cb.addEventListener('change', updateExportBtnText));
      updateExportBtnText();
    }

    // Load checkboxes on DOM load
    loadPromptCheckboxes();

    function updateExportBtnText() {
      const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
      const checkedCount = checkboxes.filter(cb => cb.checked).length;

      exportBtn.textContent = checkedCount > 0 ? 'Export Selected Prompts' : 'Export All Prompts';
    }

    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('title').addEventListener('input', (e) => {
        const value = e.target.value
          .toLowerCase()
          .replace(/[^\w\s-]/g, '')
          .replace(/\s+/g, '-')
          .trim();
        document.getElementById('slug').value = value;
      });

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

        successBox.style.display = 'none';
        errorBox.style.display = 'none';

        const formData = new FormData(form);
        const payload = {
          title: formData.get('title'),
          slug: formData.get('slug'),
          type: formData.get('type'),
          description: formData.get('description'),
          tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
          notes: formData.get('notes')
        };

        const { error } = await supabase.from('prompts').insert([payload]);

        if (error) {
          errorBox.innerText = error.message;
          errorBox.style.display = 'block';
        } else {
          successBox.style.display = 'block';
          form.reset();
        }
      });
    });

    importBtn.addEventListener('click', async () => {
      const fileInput = document.getElementById('importFile');
      const file = fileInput.files[0];

      if (!file) {
        alert('Please select a JSON file.');
        return;
      }

      const successBox = document.getElementById('success');
      const errorBox = document.getElementById('error');

      try {
        const text = await file.text();
        const prompts = JSON.parse(text);

        const formatted = prompts.map(p => ({
          type: p.type.charAt(0).toUpperCase() + p.type.slice(1), // normalize to "System"/"Task"
          title: p.title,
          description: p.description,
          tags: p.tags.replace(/[{}"]/g, '').split(',').map(t => t.trim()), // parse tag string
          notes: p.notes,
          slug: p.title
            .toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/\s+/g, '-')
            .trim()
        }));

        const { error } = await supabase.from('prompts').insert(formatted);

        if (error) {
          errorBox.innerText = `Import failed: ${error.message}`;
          errorBox.style.display = 'block';
        } else {
          successBox.innerText = 'Prompts imported successfully!';
          successBox.style.display = 'block';
          fileInput.value = '';
        }
      } catch (err) {
        errorBox.innerText = `Error: ${err.message}`;
        errorBox.style.display = 'block';
      }
    });

    exportBtn.addEventListener('click', async () => {
      const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
      const selectedIds = checkboxes.filter(cb => cb.checked).map(cb => cb.value);

      const { data, error } = selectedIds.length > 0
        ? await supabase.from('prompts').select('*').in('id', selectedIds)
        : await supabase.from('prompts').select('*');

      successBox.style.display = 'none';
      errorBox.style.display = 'none';

      if (error) {
        errorBox.innerText = `Export failed: ${error.message}`;
        errorBox.style.display = 'block';
        return;
      }

      const output = data.map(p => ({
        id: p.id,
        type: p.type.toLowerCase(),
        title: p.title,
        description: p.description,
        tags: `{${(p.tags || []).join(',')}}`,
        createdat: p.createdat,
        notes: p.notes || ''
      }));

      const blob = new Blob([JSON.stringify(output, null, 2)], {
        type: 'application/json'
      });

      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = selectedIds.length > 0 ? 'selected-prompts.json' : 'all-prompts.json';
      link.click();
      URL.revokeObjectURL(url);
    });
  </script>
</MainLayout>