import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { ScrollArea } from '@/components/ui/scroll-area';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { TaskStatus, TaskType } from '@/types/workflow';
import { Loader2 } from 'lucide-react';

interface TaskOutputViewerProps {
  taskId: string;
  taskName: string;
  taskType: TaskType;
  status: TaskStatus;
  content: string;
}

export function TaskOutputViewer({ 
  taskId, 
  taskName, 
  taskType, 
  status, 
  content 
}: TaskOutputViewerProps) {
  
  return (
    <Card className="h-full flex flex-col border-l-0 rounded-l-none shadow-none">
      <CardHeader className="flex flex-row items-center justify-between py-4">
        <div className="flex flex-col gap-1">
          <CardTitle className="text-lg font-medium">{taskName}</CardTitle>
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <span className="font-mono">{taskId}</span>
            <span>•</span>
            <span>{taskType}</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant={
            status === 'Completed' ? 'default' : // 'success' variant might not exist in default shadcn, using default (primary)
            status === 'Failed' ? 'destructive' :
            status === 'Running' ? 'secondary' :
            'outline'
          }>
            {status === 'Running' && <Loader2 className="w-3 h-3 mr-1 animate-spin" />}
            {status}
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="flex-1 p-0 min-h-0">
        <ScrollArea className="h-full w-full p-4">
          {content ? (
            <div className="prose dark:prose-invert max-w-none text-sm">
              <ReactMarkdown remarkPlugins={[remarkGfm]}>
                {content}
              </ReactMarkdown>
            </div>
          ) : (
            <div className="flex h-full items-center justify-center text-muted-foreground text-sm italic">
              {status === 'Pending' ? 'Waiting to start...' : 
               status === 'Running' ? 'Processing...' :
               'No output available'}
            </div>
          )}
        </ScrollArea>
      </CardContent>
    </Card>
  );
}

