'use client';

import { Copy } from 'lucide-react';
import { toast } from 'sonner';

import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
import { Button } from '@spoon/ui';

export const AgentArtifactViewer = ({
  artifacts,
}: {
  artifacts: Doc<'agentJobArtifacts'>[];
}) => {
  if (!artifacts.length) {
    return (
      <p className='text-muted-foreground text-sm'>
        No artifacts captured yet.
      </p>
    );
  }

  return (
    <div className='space-y-3'>
      {artifacts.map((artifact) => (
        <section key={artifact._id} className='border-border rounded-md border'>
          <div className='flex items-center justify-between gap-3 border-b p-3'>
            <div>
              <h3 className='text-sm font-semibold'>{artifact.title}</h3>
              <p className='text-muted-foreground text-xs'>{artifact.kind}</p>
            </div>
            <Button
              type='button'
              variant='outline'
              size='icon'
              aria-label='Copy artifact'
              onClick={async () => {
                await navigator.clipboard.writeText(artifact.content);
                toast.success('Artifact copied.');
              }}
            >
              <Copy className='size-4' />
            </Button>
          </div>
          <pre className='bg-muted/40 max-h-96 overflow-auto p-3 text-xs whitespace-pre-wrap'>
            {artifact.content}
          </pre>
        </section>
      ))}
    </div>
  );
};
