Libraries API

curl -X GET "https://yourdomain.com/api/v1/libraries?page=1&limit=10" \
  -H "Authorization: Bearer YOUR_API_KEY"

const response = await fetch('https://yourdomain.com/api/v1/libraries?page=1&limit=10', {
  headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
});
const data = await response.json();

console.log(data);
// {
//   "libraries": [
//     {
//       "id": "550e8400-e29b-41d4-a716-446655440000",
//       "title": "Marketing Assets 2024",
//       "slug": "marketing-assets-2024",
//       "description": "Complete marketing materials for Q1 campaign",
//       "cover_image_path": "/uploads/covers/marketing-2024.jpg",
//       "published_at": "2024-01-15T10:30:00Z",
//       "is_paid": false,
//       "price": null,
//       "currency": "USD",
//       "asset_count": 24,
//       "view_count": 156,
//       "created_at": "2024-01-10T08:00:00Z",
//       "workspace_id": null
//     }
//   ],
//   "pagination": {
//     "page": 1,
//     "limit": 10,
//     "total": 3,
//     "total_pages": 1,
//     "has_next": false,
//     "has_prev": false
//   }
// }

curl -X GET "https://yourdomain.com/api/v1/libraries/550e8400-e29b-41d4-a716-446655440000?include_assets=true" \
  -H "Authorization: Bearer YOUR_API_KEY"

const libraryId = '550e8400-e29b-41d4-a716-446655440000';
const response = await fetch(
  `https://yourdomain.com/api/v1/libraries/${libraryId}?include_assets=true`,
  { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }
);
const library = await response.json();

console.log(library);
// {
//   "id": "550e8400-e29b-41d4-a716-446655440000",
//   "title": "Marketing Assets 2024",
//   "slug": "marketing-assets-2024",
//   "description": "Complete collection of marketing materials",
//   "cover_image_path": "/uploads/covers/marketing-2024.jpg",
//   "cover_overlay_color": "#000000",
//   "cover_overlay_opacity": 0.4,
//   "published_at": "2024-01-15T10:30:00Z",
//   "is_paid": false,
//   "price": null,
//   "currency": "USD",
//   "show_asset_count": true,
//   "allow_individual_downloads": true,
//   "allow_bulk_download": false,
//   "view_count": 156,
//   "created_at": "2024-01-10T08:00:00Z",
//   "updated_at": "2024-01-15T10:30:00Z",
//   "workspace_id": null,
//   "sections": [
//     {
//       "id": "660e8400-e29b-41d4-a716-446655440001",
//       "title": "Brand Guidelines",
//       "description": "Official brand assets and guidelines",
//       "display_order": 1,
//       "collapsed_by_default": false,
//       "assets": [
//         {
//           "id": "770e8400-e29b-41d4-a716-446655440002",
//           "title": "Logo Package 2024",
//           "description": "Complete logo set in all formats",
//           "asset_type": "pdf",
//           "thumbnail_url": "/uploads/thumbnails/logo-package.jpg",
//           "display_order": 1
//         },
//         {
//           "id": "880e8400-e29b-41d4-a716-446655440003",
//           "title": "Color Palette Guide",
//           "description": "Brand colors and usage",
//           "asset_type": "pdf",
//           "thumbnail_url": "/uploads/thumbnails/colors.jpg",
//           "display_order": 2
//         }
//       ]
//     },
//     {
//       "id": "990e8400-e29b-41d4-a716-446655440004",
//       "title": "Social Media Templates",
//       "description": "Ready-to-use social templates",
//       "display_order": 2,
//       "collapsed_by_default": false,
//       "assets": [
//         {
//           "id": "aa0e8400-e29b-41d4-a716-446655440005",
//           "title": "Instagram Post Template",
//           "description": "1080x1080 Photoshop template",
//           "asset_type": "image",
//           "thumbnail_url": "/uploads/thumbnails/ig-template.jpg",
//           "display_order": 1
//         }
//       ]
//     }
//   ],
//   "unsectioned_assets": []
// }

import { useEffect, useState } from 'react';

export function LibraryPage({ slug }) {
  const [library, setLibrary] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchLibrary() {
      // First, get all libraries to find the one with matching slug
      const listRes = await fetch('https://yourdomain.com/api/v1/libraries', {
        headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
      });
      const { libraries } = await listRes.json();
      const match = libraries.find(lib => lib.slug === slug);

      if (!match) {
        setLoading(false);
        return;
      }

      // Get full library details with assets
      const detailRes = await fetch(
        `https://yourdomain.com/api/v1/libraries/${match.id}?include_assets=true`,
        { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }
      );
      const data = await detailRes.json();
      setLibrary(data);
      setLoading(false);
    }
    fetchLibrary();
  }, [slug]);

  if (loading) return <div>Loading...</div>;
  if (!library) return <div>Library not found</div>;

  return (
    <div>
      {/* Hero Section */}
      {library.cover_image_path && (
        <div className="relative h-96">
          <img src={library.cover_image_path} alt={library.title} />
          {library.cover_overlay_color && (
            <div
              className="absolute inset-0"
              style={{
                backgroundColor: library.cover_overlay_color,
                opacity: library.cover_overlay_opacity
              }}
            />
          )}
        </div>
      )}

      {/* Header */}
      <h1>{library.title}</h1>
      {library.description && <p>{library.description}</p>}

      {/* Show asset count if enabled */}
      {library.show_asset_count && (
        <p>Total Assets: {library.sections.reduce((sum, s) =>
          sum + (s.assets?.length || 0), 0
        )}</p>
      )}

      {/* Sections */}
      {library.sections.map((section) => (
        <section key={section.id}>
          <h2>{section.title}</h2>
          {section.description && <p>{section.description}</p>}

          {/* Assets in section */}
          <div className="grid grid-cols-3 gap-4">
            {section.assets?.map((asset) => (
              <div key={asset.id} className="asset-card">
                {asset.thumbnail_url && (
                  <img src={asset.thumbnail_url} alt={asset.title} />
                )}
                <h3>{asset.title}</h3>
                <p>{asset.description}</p>
                <span className="badge">{asset.asset_type}</span>

                {/* Show download button if allowed */}
                {library.allow_individual_downloads && (
                  <a href={`/api/v1/assets/${asset.id}/download`}>
                    Download
                  </a>
                )}
              </div>
            ))}
          </div>
        </section>
      ))}

      {/* Unsectioned assets */}
      {library.unsectioned_assets?.length > 0 && (
        <section>
          <h2>Additional Resources</h2>
          <div className="grid grid-cols-3 gap-4">
            {library.unsectioned_assets.map((asset) => (
              <div key={asset.id} className="asset-card">
                {/* Same asset rendering as above */}
              </div>
            ))}
          </div>
        </section>
      )}

      {/* Bulk download if enabled */}
      {library.allow_bulk_download && (
        <button>Download All Assets</button>
      )}
    </div>
  );
}