import { supabase, safeQuery } from '../lib/supabaseClient';

// Function to generate star ratings
const StarRating = ({ rating }) => {
  const totalStars = 5;
  let stars = [];
  for (let i = 1; i <= totalStars; i++) {
    stars.push(
      <span key={i} className={i <= rating ? 'text-yellow-400' : 'text-neutral-600'}>
        ★
      </span>
    );
  }
  return <div className="flex">{stars}</div>;
};

export default async function Home() {
  let items = [];
  let fetchError = null;

  // Using safeQuery helper to handle missing Supabase client gracefully
  const { data, error } = await safeQuery(async (supabase) => {
    return await supabase
      .from('items')
      .select('*')
      .order('created_at', { ascending: false }); // Assuming you have a created_at timestamp
  });
  
  if (error) {
    console.error('Error fetching items:', error.message);
    fetchError = 'Could not fetch items. ' + error.message;
  } else {
    items = data || [];
  }


  return (
    <div>
      <header className="mb-8">
        <h1 className="text-4xl font-bold text-neutral-100">My Favorite Stuff</h1>
        <p className="text-neutral-400">
          A curated list of things I've enjoyed, in reverse chronological order.
        </p>
      </header>

      {fetchError && (
        <div className="bg-red-900 border border-red-700 text-red-100 px-4 py-3 rounded relative mb-6" role="alert">
          <strong className="font-bold">Error: </strong>
          <span className="block sm:inline">{fetchError}</span>
        </div>
      )}

      {!fetchError && items.length === 0 && (
        <div className="text-center text-neutral-500 py-10">
          <p>No items added yet. Start by adding your favorite books, movies, or series!</p>
          <a 
            href="/add-item" // We'll create this page later
            className="mt-4 inline-block bg-sky-600 hover:bg-sky-700 text-white font-semibold py-2 px-4 rounded transition-colors"
          >
            Add New Item
          </a>
        </div>
      )}

      {items.length > 0 && (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {items.map((item) => (
            <div key={item.id} className="bg-neutral-800 rounded-lg shadow-lg p-4 flex flex-col">
              {item.picture_url ? (
                <div className="aspect-[3/4] w-full bg-neutral-700 rounded mb-3 overflow-hidden">
                  <img 
                    src={item.picture_url} 
                    alt={item.title || 'Item image'} 
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 ease-in-out"
                  />
                </div>
              ) : (
                <div className="aspect-[3/4] w-full bg-neutral-700 rounded mb-3 flex items-center justify-center">
                  <span className="text-neutral-500 text-sm">No Image</span>
                </div>
              )}
              <h2 className="text-xl font-semibold mb-1 text-neutral-100 truncate" title={item.title}>{item.title || 'Untitled'}</h2>
              <p className="text-sm text-neutral-400 mb-1 capitalize">{item.type || 'N/A'}</p>
              {typeof item.rating === 'number' && <StarRating rating={item.rating} />}
              {item.notes && (
                <p className="text-xs text-neutral-500 mt-2 flex-grow overflow-hidden line-clamp-3">
                  {item.notes}
                </p>
              )}
              {/* Placeholder for a details link/modal trigger */}
              {/* <a href={`/item/${item.id}`} className="text-sky-400 hover:text-sky-300 text-sm mt-auto pt-2">
                View Details
              </a> */}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}