import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { AnalysisResultDto, AnalysisModuleConfig } from '@/types';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

interface AnalysisViewerProps {
  result?: AnalysisResultDto;
  config: AnalysisModuleConfig;
  isActive: boolean;
}

export function AnalysisViewer({ result, config, isActive: _isActive }: AnalysisViewerProps) {
  
  if (!result) {
    return (
      <div className="flex flex-col items-center justify-center h-[300px] text-muted-foreground border rounded-lg border-dashed gap-2">
        <p>Waiting for analysis...</p>
        <Badge variant="outline">{config.name}</Badge>
      </div>
    );
  }

  return (
    <Card className="border-none shadow-none">
      <CardHeader className="px-0 pt-0">
        <div className="flex items-center justify-between">
            <CardTitle className="text-lg">{config.name}</CardTitle>
            <Badge variant="secondary" className="font-mono text-xs">
                {config.model_id}
            </Badge>
        </div>
        <CardDescription>
            Generated by {config.provider_id}
        </CardDescription>
      </CardHeader>
      <CardContent className="px-0">
        <div className="prose prose-sm dark:prose-invert max-w-none">
          <ReactMarkdown remarkPlugins={[remarkGfm]}>
            {result.content}
          </ReactMarkdown>
          {/* Simple cursor effect if we think it's still streaming (we don't have explicit stream status per module here easily without more props, but this is fine for now) */}
          {/* You could add a blinking cursor here if needed, but maybe overkill if we don't know for sure if it's done */}
        </div>
      </CardContent>
    </Card>
  );
}

