'use client';

import dynamic from 'next/dynamic';
import { useEffect, useState } from 'react';
import { getAnnotatorAssets } from '@/app/actions/getAnnotatorAssets';
import { submitAnnotations } from '@/app/actions/submitAnnotations';

const Annotator = dynamic(() => import('@/components/annotator-local/Annotator').then(mod => mod.Annotator), { ssr: false });

export default function AnnotatorClientWrapper() {
  const [assets, setAssets] = useState<string[]>([]);

  useEffect(() => {
    getAnnotatorAssets()
      .then(fetchedAssets => {
        if (Array.isArray(fetchedAssets)) {
          setAssets(fetchedAssets);
        }
      })
      .catch(err => console.error('[AnnotatorClientWrapper] Fetch failed:', err));
  }, []);

  const handleSubmit = async (annotations: any[]) => {
    const result = await submitAnnotations(annotations);
    if (!result.success) {
      throw new Error(result.error);
    }
  };

  return <Annotator assets={assets} onSubmit={handleSubmit} />;
}