MyFavStuff/myfavstuff/app/add-item/page.js

// app/add-item/page.js
'use client';

import { useState, useTransition, useRef } from 'react';
import { createItem } from './actions'; // Server Action
import { useRouter } from 'next/navigation';
import { supabase } from '@/lib/supabaseClient';

export default function AddItemPage() {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [error, setError] = useState(null);
  const [successMessage, setSuccessMessage] = useState('');

  const [isUploading, setIsUploading] = useState(false);
  const formRef = useRef(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setError(null);
    setSuccessMessage('');
    setIsUploading(true);
    
    try {
      const formData = new FormData(event.currentTarget);
      const pictureFile = formData.get('picture_file');
      let pictureUrl = null;

      // Handle image upload directly from client if a file is selected
      if (pictureFile && pictureFile.size > 0) {
        // Upload to Supabase Storage directly from client
        const BUCKET_NAME = 'item_images';
        const fileName = `public/${Date.now()}-${pictureFile.name.replace(/[^a-zA-Z0-9.]/g, '_')}`;
        
        const { data: uploadData, error: uploadError } = await supabase.storage
          .from(BUCKET_NAME)
          .upload(fileName, pictureFile);

        if (uploadError) {
          throw new Error(`Failed to upload image: ${uploadError.message}`);
        }

        const { data: publicUrlData } = supabase.storage
          .from(BUCKET_NAME)
          .getPublicUrl(fileName);

        if (!publicUrlData || !publicUrlData.publicUrl) {
          throw new Error('Failed to get image public URL after upload.');
        }
        
        pictureUrl = publicUrlData.publicUrl;
      }

      // Create a new FormData without the file to reduce payload size
      const serverFormData = new FormData();
      serverFormData.append('title', formData.get('title'));
      serverFormData.append('type', formData.get('type'));
      
      if (formData.get('rating')) {
        serverFormData.append('rating', formData.get('rating'));
      }
      
      if (formData.get('notes')) {
        serverFormData.append('notes', formData.get('notes'));
      }
      
      // Send the image URL instead of the file
      if (pictureUrl) {
        serverFormData.append('picture_url', pictureUrl);
      }
      
      // Call server action with the form data (minus the image file)
      startTransition(async () => {
        const result = await createItem(serverFormData);
        if (result.error) {
          setError(result.error);
        } else if (result.success) {
          setSuccessMessage(result.message);
          // Clear form fields
          formRef.current.reset();
          // Redirect after a delay
          setTimeout(() => router.push('/'), 1500);
        }
      });
    } catch (err) {
      setError(err.message);
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 text-neutral-100">
      <header className="mb-8">
        <h1 className="text-3xl font-bold text-sky-400">Add New Favorite Item</h1>
        <p className="text-neutral-400 mt-1">
          Fill in the details below to add a new item to your collection.
        </p>
      </header>

      {error && (
        <div className="mb-4 p-3 bg-red-900 border border-red-700 text-red-100 rounded">
          <p className="font-semibold">Error:</p>
          <p>{error}</p>
        </div>
      )}
      {successMessage && (
        <div className="mb-4 p-3 bg-green-900 border border-green-700 text-green-100 rounded">
          <p className="font-semibold">Success:</p>
          <p>{successMessage}</p>
        </div>
      )}

      <form ref={formRef} onSubmit={handleSubmit} className="space-y-6 bg-neutral-800 p-6 rounded-lg shadow-xl">
        <div>
          <label htmlFor="title" className="block text-sm font-medium text-neutral-300 mb-1">Title <span className="text-red-500">*</span></label>
          <input
            type="text"
            name="title"
            id="title"
            required
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="e.g., The Hitchhiker's Guide to the Galaxy"
          />
        </div>

        <div>
          <label htmlFor="type" className="block text-sm font-medium text-neutral-300 mb-1">Type <span className="text-red-500">*</span></label>
          <select
            name="type"
            id="type"
            required
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
          >
            <option value="">Select a type</option>
            <option value="book">Book</option>
            <option value="movie">Movie</option>
            <option value="series">TV Series</option>
            <option value="game">Game</option>
            <option value="music">Music Album</option>
            <option value="other">Other</option>
          </select>
        </div>

        <div>
          <label htmlFor="rating" className="block text-sm font-medium text-neutral-300 mb-1">Rating (1-5)</label>
          <input
            type="number"
            name="rating"
            id="rating"
            min="1"
            max="5"
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="e.g., 5"
          />
        </div>

        <div>
          <label htmlFor="picture_file" className="block text-sm font-medium text-neutral-300 mb-1">Picture</label>
          <input
            type="file"
            name="picture_file" 
            id="picture_file"
            accept="image/*"
            className="block w-full text-sm text-neutral-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-sky-100 file:text-sky-700 hover:file:bg-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500"
          />
        </div>

        <div>
          <label htmlFor="notes" className="block text-sm font-medium text-neutral-300 mb-1">Notes</label>
          <textarea
            name="notes"
            id="notes"
            rows="4"
            className="block w-full bg-neutral-700 border-neutral-600 rounded-md shadow-sm py-2 px-3 text-neutral-100 focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
            placeholder="Why is this item your favorite? Any interesting thoughts?"
          ></textarea>
        </div>

        <div className="flex justify-end">
          <button
            type="submit"
            disabled={isPending || isUploading}
            className="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-sky-600 hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-800 focus:ring-sky-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {isUploading ? 'Uploading Image...' : isPending ? 'Adding Item...' : 'Add Item'}
          </button>
        </div>
      </form>
    </div>
  );
}