spritesheet-generator/src/stores/useProjectStore.ts

import { defineStore } from 'pinia';
import { ref } from 'vue';
import { useAuthStore } from './useAuthStore';

export interface Project {
  id: string;
  name: string;
  data: any; // Store the JSON export of the project here
  created: string;
  updated: string;
}

export const useProjectStore = defineStore('project', () => {
  const authStore = useAuthStore();
  const projects = ref<Project[]>([]);
  const currentProject = ref<Project | null>(null);
  const isLoading = ref(false);
  const page = ref(1);
  const perPage = ref(12);
  const totalItems = ref(0);
  const totalPages = ref(0);

  async function fetchProjects(pageVal = 1, perPageVal = 12, searchVal = '') {
    if (!authStore.user) return;
    isLoading.value = true;
    try {
      const filter = searchVal ? `name ~ "${searchVal}"` : '';
      const records = await authStore.pb.collection('projects').getList(pageVal, perPageVal, {
        sort: '-updated',
        filter,
      });
      projects.value = records.items.map((r: any) => ({
        id: r.id,
        name: r.name,
        data: r.data,
        created: r.created,
        updated: r.updated,
      }));
      page.value = records.page;
      perPage.value = records.perPage;
      totalItems.value = records.totalItems;
      totalPages.value = records.totalPages;
    } catch (error) {
      console.error('Failed to fetch projects:', error);
    } finally {
      isLoading.value = false;
    }
  }

  async function createProject(name: string, data: any) {
    if (!authStore.user) return;
    isLoading.value = true;
    try {
      const record = await authStore.pb.collection('projects').create({
        name,
        data,
        user: authStore.user.id,
      });
      currentProject.value = {
        id: record.id,
        name: record.name,
        data: record.data,
        created: record.created,
        updated: record.updated,
      };
      // Refresh current page
      await fetchProjects(page.value, perPage.value);
    } catch (error) {
      console.error('Failed to create project:', error);
      throw error;
    } finally {
      isLoading.value = false;
    }
  }

  async function updateProject(id: string, name: string, data: any) {
    if (!authStore.user) return;
    isLoading.value = true;
    try {
      const record = await authStore.pb.collection('projects').update(id, {
        name,
        data,
      });
      currentProject.value = {
        ...currentProject.value!,
        name: record.name,
        data: record.data,
        updated: record.updated,
      };
      // No need to fetch all, just update locals or re-fetch current page if desired.
      // For now, let's re-fetch to keep consistency.
      await fetchProjects(page.value, perPage.value);
    } catch (error) {
      console.error('Failed to update project:', error);
      throw error;
    } finally {
      isLoading.value = false;
    }
  }

  async function loadProject(id: string) {
    if (!authStore.user) return;
    isLoading.value = true;
    try {
      const record = await authStore.pb.collection('projects').getOne(id);
      currentProject.value = {
        id: record.id,
        name: record.name,
        data: record.data,
        created: record.created,
        updated: record.updated,
      };
    } catch (error) {
      console.error('Failed to load project', error);
      throw error;
    } finally {
      isLoading.value = false;
    }
  }

  async function deleteProject(id: string) {
    if (!authStore.user) return;
    if (!confirm('Are you sure you want to delete this project?')) return;

    isLoading.value = true;
    try {
      await authStore.pb.collection('projects').delete(id);
      if (currentProject.value?.id === id) {
        currentProject.value = null;
      }
      // If we delete the last item on a page, we might want to go back a page.
      // For simplicity, just refetch current page.
      await fetchProjects(page.value, perPage.value);
    } catch (error) {
      console.error('Failed to delete project:', error);
    } finally {
      isLoading.value = false;
    }
  }

  return {
    projects,
    currentProject,
    isLoading,
    page,
    perPage,
    totalItems,
    totalPages,
    fetchProjects,
    createProject,
    updateProject,
    loadProject,
    deleteProject,
  };
});