'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { collectionApi } from '../../../lib/api';
import AppLayout from '../../../components/layout/AppLayout';
import CollectionForm from '../../../components/collections/CollectionForm';
import { Collection } from '../../../types/api';

export default function NewCollectionPage() {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const router = useRouter();

  const handleSubmit = async (formData: {
    name: string;
    description?: string;
    tags?: string[];
    storyIds?: string[];
    coverImage?: File;
  }) => {
    try {
      setLoading(true);
      setError(null);

      let collection: Collection;
      
      if (formData.coverImage) {
        collection = await collectionApi.createCollectionWithImage({
          name: formData.name,
          description: formData.description,
          tags: formData.tags,
          storyIds: formData.storyIds,
          coverImage: formData.coverImage,
        });
      } else {
        collection = await collectionApi.createCollection({
          name: formData.name,
          description: formData.description,
          tagNames: formData.tags,
          storyIds: formData.storyIds,
        });
      }

      // Redirect to the new collection's detail page
      router.push(`/collections/${collection.id}`);
    } catch (err: any) {
      console.error('Failed to create collection:', err);
      setError(err.response?.data?.message || 'Failed to create collection');
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    router.push('/collections');
  };

  return (
    <AppLayout>
      <div className="max-w-2xl mx-auto">
        <div className="mb-6">
          <h1 className="text-3xl font-bold theme-header">Create New Collection</h1>
          <p className="theme-text mt-2">
            Organize your stories into a curated collection for better reading experience.
          </p>
        </div>

        {error && (
          <div className="mb-6 p-4 bg-red-100 border border-red-300 text-red-700 rounded-lg">
            {error}
          </div>
        )}

        <CollectionForm
          onSubmit={handleSubmit}
          onCancel={handleCancel}
          loading={loading}
          submitLabel="Create Collection"
        />
      </div>
    </AppLayout>
  );
}