'use client';

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

export default function EditItemPage({ params }) {
  const router = useRouter();
  const { id } = params;
  const formRef = useRef(null);
  
  const [isPending, startTransition] = useTransition();
  const [isLoading, setIsLoading] = useState(true);
  const [isUploading, setIsUploading] = useState(false);
  const [item, setItem] = useState(null);
  const [error, setError] = useState(null);
  const [successMessage, setSuccessMessage] = useState('');

  // Fetch the item data
  useEffect(() => {
    async function fetchItem() {
      setIsLoading(true);
      setError(null);
      
      if (!supabase) {
        setError('Could not connect to the database.');
        setIsLoading(false);
        return;
      }
      
      try {
        const { data, error } = await supabase
          .from('items')
          .select('*')
          .eq('id', id)
          .single();
          
        if (error) {
          throw error;
        }
        
        if (!data) {
          throw new Error('Item not found');
        }
        
        setItem(data);
      } catch (err) {
        console.error('Error fetching item:', err);
        setError(err.message || 'Failed to load item');
      } finally {
        setIsLoading(false);
      }
    }
    
    if (id) {
      fetchItem();
    }
  }, [id]);

  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 = item.picture_url; // Keep existing URL by default
      
      // Handle image upload directly from client if a new 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('id', id);
      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 updateItem(serverFormData);
        if (result.error) {
          setError(result.error);
        } else if (result.success) {
          setSuccessMessage(result.message);
          // Redirect after a delay
          setTimeout(() => router.push('/'), 1500);
        }
      });
    } catch (err) {
      setError(err.message);
    } finally {
      setIsUploading(false);
    }
  };

  const handleDeleteClick = () => {
    if (confirm('Are you sure you want to delete this item? This cannot be undone.')) {
      startTransition(async () => {
        try {
          const { error } = await supabase
            .from('items')
            .delete()
            .eq('id', id);
            
          if (error) {
            setError(`Failed to delete: ${error.message}`);
            return;
          }
          
          setSuccessMessage('Item deleted successfully');
          setTimeout(() => router.push('/'), 1500);
        } catch (err) {
          setError(err.message || 'Failed to delete item');
        }
      });
    }
  };

  if (isLoading) {
    return (
      <div className="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 text-neutral-100">
        <div className="text-center py-12">
          <div className="animate-pulse flex flex-col items-center">
            <div className="h-8 w-64 bg-neutral-700 rounded mb-4"></div>
            <div className="h-4 w-48 bg-neutral-700 rounded"></div>
          </div>
        </div>
      </div>
    );
  }

  if (error && !item) {
    return (
      <div className="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8 text-neutral-100">
        <div className="bg-red-900 border border-red-700 text-red-100 p-4 rounded">
          <h2 className="text-xl font-bold mb-2">Error</h2>
          <p>{error}</p>
          <button 
            onClick={() => router.push('/')}
            className="mt-4 bg-neutral-800 hover:bg-neutral-700 text-white font-medium py-2 px-4 rounded transition-colors"
          >
            Go Back Home
          </button>
        </div>
      </div>
    );
  }

  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">Edit Item</h1>
        <p className="text-neutral-400 mt-1">
          Update information about "{item?.title || 'this item'}"
        </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
            defaultValue={item?.title || ''}
            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
            defaultValue={item?.type || ''}
            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"
            defaultValue={item?.rating || ''}
            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>
          
          {item?.picture_url && (
            <div className="mb-2">
              <p className="text-xs text-neutral-400 mb-2">Current image:</p>
              <img 
                src={item.picture_url} 
                alt={item.title || 'Item image'} 
                className="h-32 object-cover rounded"
              />
              <p className="text-xs text-neutral-500 mt-1">Upload a new image to replace the current one</p>
            </div>
          )}
          
          <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"
            defaultValue={item?.notes || ''}
            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-between items-center pt-3">
          <button
            type="button"
            onClick={handleDeleteClick}
            disabled={isPending}
            className="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-800 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            Delete Item
          </button>
          
          <div className="flex space-x-3">
            <button
              type="button"
              onClick={() => router.push('/')}
              disabled={isPending || isUploading}
              className="inline-flex items-center justify-center px-4 py-2 border border-neutral-600 text-sm font-medium rounded-md text-neutral-200 bg-transparent hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-neutral-800 focus:ring-neutral-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              Cancel
            </button>
            
            <button
              type="submit"
              disabled={isPending || isUploading}
              className="inline-flex items-center justify-center px-6 py-2 border border-transparent text-sm 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 ? 'Saving Changes...' : 'Save Changes'}
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}