Series to Collection Function

frontend/src/components/collections/CollectionDetailView.tsx

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Collection } from '../../types/api';
-import { collectionApi, getImageUrl } from '../../lib/api';
+import { collectionApi, audioCoveApi, getImageUrl } from '../../lib/api';
 import Button from '../ui/Button';
 import StoryReorderList from './StoryReorderList';
 import AddToCollectionModal from './AddToCollectionModal';
@@ -29,6 +29,8 @@ export default function CollectionDetailView({
   const [editRating, setEditRating] = useState(collection.rating || '');
   const [saving, setSaving] = useState(false);
   const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const [isSendingToAudioCove, setIsSendingToAudioCove] = useState(false);
+  const [audioCoveSuccess, setAudioCoveSuccess] = useState(false);
 
   const formatReadingTime = (minutes: number): string => {
     if (minutes < 60) {
@@ -118,6 +120,21 @@ export default function CollectionDetailView({
     }
   };
 
+  const handleSendToAudioCove = async () => {
+    if (isSendingToAudioCove) return;
+    setIsSendingToAudioCove(true);
+    try {
+      await audioCoveApi.sendCollectionToAudioCove(collection.id);
+      setAudioCoveSuccess(true);
+      setTimeout(() => setAudioCoveSuccess(false), 3000);
+    } catch (error: any) {
+      const message = error?.response?.data || 'Failed to send to AudioCove. Please try again.';
+      alert(message);
+    } finally {
+      setIsSendingToAudioCove(false);
+    }
+  };
+
   return (
     <div className="space-y-8">
       {/* Header Section */}
@@ -305,6 +322,14 @@ export default function CollectionDetailView({
               >
                 {actionLoading === 'delete' ? <LoadingSpinner size="sm" /> : 'Delete'}
               </Button>
+              <Button
+                variant="ghost"
+                onClick={handleSendToAudioCove}
+                disabled={isSendingToAudioCove || audioCoveSuccess || collection.storyCount === 0}
+                className="flex-shrink-0"
+              >
+                {isSendingToAudioCove ? '🎧 Sending...' : audioCoveSuccess ? '✅ Sent!' : '🎧 Send to Audiocove'}
+              </Button>
             </div>
 
             {/* Tags */}