'use client';

import { Annotator } from '@mintel/annotator';
import { useEffect, useState } from 'react';
import { getAnnotatorAssets } from '@/app/actions/getAnnotatorAssets';
import { submitAnnotations } from '@/app/actions/submitAnnotations';

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

  useEffect(() => {
    getAnnotatorAssets().then(fetchedAssets => {
      console.log('[AnnotatorClientWrapper] fetchedAssets:', fetchedAssets);
      if (Array.isArray(fetchedAssets)) {
        setAssets(fetchedAssets);
      }
    }).catch(err => {
      console.error('[AnnotatorClientWrapper] Action 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} />;
}