import React, { useState } from "react";
import {
  Card,
  CardContent,
  CardHeader,
  CardFooter,
  CardTitle,
  CardDescription
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { AlertCircle, CheckCircle, ShieldAlert, FileText, AlertTriangle, Wrench, Globe, Server, RefreshCcw, CircleAlert, BookOpen, ListChecks } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Checkbox } from "@/components/ui/checkbox";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

interface WebhookResultDisplayProps {
  response: any;
  isLoading?: boolean;
  error?: string | null;
  isRedacted?: boolean;
  connectionFailed?: boolean;
  onRetry?: () => void;
}

interface QuizQuestion {
  question: string;
  options?: string[];
  answer?: string | string[] | boolean;
}

interface QuizQuestions {
  multipleChoice?: QuizQuestion[];
  trueFalse?: QuizQuestion[];
  multipleSelect?: QuizQuestion[];
  openEnded?: QuizQuestion[];
}

const WebhookResultDisplay = ({ 
  response, 
  isLoading = false, 
  error = null,
  isRedacted = true, // Default to redacting sensitive content
  connectionFailed = false,
  onRetry
}: WebhookResultDisplayProps) => {
  const [showAnswers, setShowAnswers] = useState(false);
  const [selectedTab, setSelectedTab] = useState<string>("analysis");
  
  // Check if the error message includes webhook configuration issues
  const isWebhookConfigError = error && error.includes("Webhook node not correctly configured") || 
    (response && response.error && response.error.includes("Webhook"));
    
  // Check if it's an API service error from external API
  const isAPIServiceError = response && 
    (response.error && (
      response.error.includes("The service was not able to process your request") ||
      response.error.includes("service was not able to process") ||
      response.error.includes("Problem in node 'HTTP Request'")
    )) ||
    (typeof response === 'string' && response.includes("The service was not able to process your request"));

  // Specifically check for the error shown in the screenshot
  const isServiceProcessingError = response && 
    ((response.error && response.error.includes("process your request")) ||
     (typeof response === 'string' && response.includes("process your request")));

  if (isLoading) {
    return (
      <Card className="w-full bg-muted/20">
        <CardContent className="pt-6">
          <div className="flex items-center justify-center py-8">
            <div className="flex flex-col items-center">
              <div className="h-8 w-8 animate-spin rounded-full border-b-2 border-primary"></div>
              <p className="mt-2 text-sm text-muted-foreground">Connecting to AI analysis service...</p>
            </div>
          </div>
        </CardContent>
      </Card>
    );
  }

  // Display connection failure message
  if (connectionFailed) {
    return (
      <Alert variant="destructive" className="mb-4">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>Connection Failed</AlertTitle>
        <AlertDescription>
          <p>Failed to connect to the AI analysis service. This could be due to:</p>
          <ul className="list-disc pl-5 mt-2">
            <li>CORS restrictions</li>
            <li>Network connectivity issues</li>
            <li>n8n server may be unavailable</li>
            <li>HTTP Request node in the n8n workflow has an error</li>
            <li>Incorrect webhook URL</li>
          </ul>
          <p className="mt-2">Please check your n8n workflow and verify that the HTTP Request node and AI integration are correctly configured.</p>
          <div className="mt-4 p-3 border border-red-200 rounded bg-red-50">
            <h4 className="text-sm font-medium flex items-center gap-1 text-red-700">
              <Globe size={14} /> Common AI Integration Issues:
            </h4>
            <ul className="list-disc pl-5 mt-1 text-sm text-red-600">
              <li>Invalid or missing OpenAI API key</li>
              <li>Incorrect prompt format for content analysis</li>
              <li>Rate limiting on the OpenAI API</li>
              <li>Insufficient structure in the AI response</li>
            </ul>
          </div>
          {onRetry && (
            <div className="mt-4">
              <Button 
                onClick={onRetry} 
                variant="outline"
                className="flex items-center gap-2 bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200"
              >
                <RefreshCcw size={16} />
                Retry Connection
              </Button>
            </div>
          )}
        </AlertDescription>
      </Alert>
    );
  }

  // Display No AI Data error (similar to the screenshot)
  if (!response || (!response.output && !response.data && !response.result)) {
    return (
      <Alert variant="warning" className="mb-4 border-yellow-300 bg-yellow-50">
        <CircleAlert className="h-4 w-4 text-yellow-600" />
        <AlertTitle className="text-yellow-700">No AI Analysis Data</AlertTitle>
        <AlertDescription className="text-yellow-600">
          <p>No data was received from the AI analysis service. The service might be experiencing issues or the request format may be incorrect.</p>
          <div className="my-2 p-3 border border-yellow-200 rounded bg-yellow-100/50">
            <h4 className="text-sm font-medium mb-1">Common reasons for this issue:</h4>
            <ul className="list-disc pl-5 text-sm">
              <li>The n8n workflow&apos;s OpenAI node is not properly configured</li>
              <li>The AI response structure doesn&apos;t match the expected format</li>
              <li>The content provided was too short or not suitable for analysis</li>
              <li>Network interruptions occurred during the AI processing</li>
            </ul>
          </div>
          {onRetry && (
            <div className="mt-3">
              <Button 
                onClick={onRetry} 
                variant="outline"
                className="flex items-center gap-2 bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200"
              >
                <RefreshCcw size={16} />
                Retry AI Analysis
              </Button>
            </div>
          )}
        </AlertDescription>
      </Alert>
    );
  }

  // Display API service errors - matches your screenshot error
  if (isAPIServiceError || isServiceProcessingError) {
    return (
      <Alert variant="warning" className="mb-4 border-yellow-300 bg-yellow-50">
        <Server className="h-4 w-4 text-yellow-600" />
        <AlertTitle className="text-yellow-700">AI Service Error</AlertTitle>
        <AlertDescription className="text-yellow-600">
          <p>No data was received from the AI analysis service. The service might be experiencing issues or the request format may be incorrect.</p>
          <div className="mt-2">
            <h4 className="text-sm font-medium mb-1">Common reasons for this issue:</h4>
            <ul className="list-disc pl-5 text-sm">
              <li>The n8n workflow&apos;s OpenAI node is not properly configured</li>
              <li>The AI response structure doesn&apos;t match the expected format</li>
              <li>The content provided was too short or not suitable for analysis</li>
              <li>Network interruptions occurred during the AI processing</li>
              <li>The OpenAI API key may be invalid or have insufficient credits</li>
            </ul>
          </div>
          
          <div className="my-3 p-3 border border-yellow-200 rounded bg-yellow-100/50">
            {response && response.error ? (
              <p className="text-sm"><strong>Error details:</strong> {response.error}</p>
            ) : (
              <p className="text-sm"><strong>Error:</strong> The service was not able to process your request</p>
            )}
          </div>
          
          {onRetry && (
            <div className="mt-3">
              <Button 
                onClick={onRetry} 
                variant="outline"
                className="flex items-center gap-2 bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200"
              >
                <RefreshCcw size={16} />
                Retry AI Analysis
              </Button>
            </div>
          )}
        </AlertDescription>
      </Alert>
    );
  }

  // Display webhook configuration issues
  if (isWebhookConfigError) {
    return (
      <Alert variant="warning" className="mb-4 border-yellow-300 bg-yellow-50">
        <Wrench className="h-4 w-4 text-yellow-600" />
        <AlertTitle className="text-yellow-700">AI Integration Configuration Error</AlertTitle>
        <AlertDescription className="text-yellow-600">
          <p>The AI workflow integration is not correctly configured. This typically happens when:</p>
          <ul className="list-disc pl-5 mt-2">
            <li>The webhook is set up without the proper response mode (Respond to Webhook)</li>
            <li>The OpenAI node is not correctly connected to the response</li>
            <li>The output structure from the AI is not in the expected format</li>
          </ul>
          <p className="mt-2">To fix this:</p>
          <ol className="list-decimal pl-5 mt-1">
            <li>Open your n8n workflow</li>
            <li>Ensure the OpenAI node is configured to output structured data</li>
            <li>Check that the webhook node has &quot;Respond to Webhook&quot; option enabled</li>
            <li>Set response content type to &quot;application/json&quot;</li>
            <li>Add a proper JSON structure with fields like &quot;output&quot; or &quot;result&quot;</li>
          </ol>
          {onRetry && (
            <div className="mt-4">
              <Button 
                onClick={onRetry} 
                variant="outline"
                className="flex items-center gap-2 bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200"
              >
                <RefreshCcw size={16} />
                Retry Connection
              </Button>
            </div>
          )}
        </AlertDescription>
      </Alert>
    );
  }

  // Display general errors
  if (error) {
    return (
      <Alert variant="destructive" className="mb-4">
        <AlertCircle className="h-4 w-4" />
        <AlertTitle>AI Analysis Error</AlertTitle>
        <AlertDescription>{error}</AlertDescription>
        {onRetry && (
          <div className="mt-4">
            <Button 
              onClick={onRetry} 
              variant="outline"
              className="flex items-center gap-2 bg-yellow-100 border-yellow-300 text-yellow-700 hover:bg-yellow-200"
            >
              <RefreshCcw size={16} />
              Retry Connection
            </Button>
          </div>
        )}
      </Alert>
    );
  }

  // Parse the response to extract both analysis data and quiz questions
  let analysisData: any = {};
  let quizQuestions: QuizQuestions = {};
  
  // Function to parse the response and extract quiz questions
  const parseResponse = () => {
    try {
      let parsedOutput;
      
      // Check if the output is a string that needs parsing
      if (response.output && typeof response.output === 'string') {
        try {
          parsedOutput = JSON.parse(response.output);
          console.log("Parsed response output:", parsedOutput);
        } catch (e) {
          console.error("Failed to parse output string:", e);
          return { analysisData: response.output, quizQuestions: {} };
        }
      } else {
        // Output is already an object
        parsedOutput = response.output || response.data || response.result || {};
      }
      
      // Extract analysis data and quiz questions
      if (parsedOutput.output && typeof parsedOutput.output === 'object') {
        // The structure seems to be { output: {...analysisData}, quizQuestions: {...} }
        return {
          analysisData: parsedOutput.output,
          quizQuestions: parsedOutput.quizQuestions || {}
        };
      } else {
        // The response might be directly the analysis data
        return {
          analysisData: parsedOutput,
          quizQuestions: {}
        };
      }
    } catch (error) {
      console.error("Error parsing webhook response:", error);
      return { analysisData: {}, quizQuestions: {} };
    }
  };
  
  const { analysisData: parsedAnalysisData, quizQuestions: parsedQuizQuestions } = parseResponse();
  analysisData = parsedAnalysisData;
  quizQuestions = parsedQuizQuestions;
  
  // Check if we have a structured response with quiz questions
  const hasQuizQuestions = quizQuestions && Object.keys(quizQuestions).length > 0 && 
    Object.values(quizQuestions).some(questions => Array.isArray(questions) && questions.length > 0);
  
  // Check if the analysis data is structured
  const isStructuredData = typeof analysisData === 'object' && analysisData !== null && !Array.isArray(analysisData);
  
  // Sanitize output to ensure HIPAA/GDPR compliance
  const sanitizeOutput = (text: string): string => {
    if (!text) return "";
    
    // Replace potential PII/PHI patterns
    const piiPatterns = [
      // Email pattern
      { pattern: /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b/g, replacement: "[EMAIL REDACTED]" },
      // Phone number patterns 
      { pattern: /\b\d{3}[-.]?\d{3}[-.]?\d{4}\b/g, replacement: "[PHONE REDACTED]" },
      // SSN pattern
      { pattern: /\b\d{3}[-]?\d{2}[-]?\d{4}\b/g, replacement: "[ID REDACTED]" },
      // Names (this is a simplified approach)
      { pattern: /Dr\.\s+[A-Z][a-z]+\s+[A-Z][a-z]+/g, replacement: "[NAME REDACTED]" },
      // Patient identifiers
      { pattern: /patient\s+id:?\s*\w+/gi, replacement: "[PATIENT ID REDACTED]" },
      // Medical record numbers
      { pattern: /MRN:?\s*\d+/gi, replacement: "[MRN REDACTED]" }
    ];
    
    // Apply all sanitization patterns
    let sanitized = text;
    piiPatterns.forEach(({ pattern, replacement }) => {
      sanitized = sanitized.replace(pattern, replacement);
    });
    
    return sanitized;
  };
  
  // Determine if the response contains medical or sensitive information
  const containsMedicalTerms = (text: string): boolean => {
    if (typeof text !== 'string') return false;
    
    const medicalTerms = [
      "patient", "medical", "clinical", "diagnosis", "treatment",
      "healthcare", "physician", "hospital", "prescription", "surgery",
      "masseter", "hypertrophy", "botulinum", "injection", "facial"
    ];
    
    return medicalTerms.some(term => text.toLowerCase().includes(term.toLowerCase()));
  };
  
  const hasMedicalContent = typeof analysisData === 'string' 
    ? containsMedicalTerms(analysisData)
    : JSON.stringify(analysisData).toLowerCase().includes("medical") ||
      JSON.stringify(analysisData).toLowerCase().includes("clinical") ||
      JSON.stringify(analysisData).toLowerCase().includes("patient");

  // Render quiz questions section
  const renderQuizQuestions = () => {
    if (!hasQuizQuestions) return <p className="text-muted-foreground">No quiz questions available.</p>;
    
    return (
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <h3 className="font-medium text-lg">Quiz Questions</h3>
          <Button 
            variant="outline" 
            size="sm" 
            onClick={() => setShowAnswers(!showAnswers)}
          >
            {showAnswers ? "Hide Answers" : "Show Answers"}
          </Button>
        </div>
        
        <Accordion type="multiple" className="w-full">
          {quizQuestions.multipleChoice && quizQuestions.multipleChoice.length > 0 && (
            <AccordionItem value="multiple-choice">
              <AccordionTrigger className="text-md font-medium">
                Multiple Choice Questions
              </AccordionTrigger>
              <AccordionContent>
                <div className="space-y-4">
                  {quizQuestions.multipleChoice.map((q, i) => (
                    <div key={`mc-${i}`} className="bg-white p-4 rounded-md border">
                      <p className="font-medium mb-2">{i + 1}. {q.question}</p>
                      <RadioGroup>
                        {q.options?.map((option, j) => (
                          <div key={`mc-${i}-${j}`} className="flex items-start space-x-2 my-2">
                            <RadioGroupItem value={`option-${j}`} id={`mc-${i}-${j}`} />
                            <label htmlFor={`mc-${i}-${j}`} className="text-sm font-normal">
                              {option}
                              {showAnswers && q.answer === option && (
                                <span className="ml-2 text-green-600 font-medium">✓ Correct</span>
                              )}
                            </label>
                          </div>
                        ))}
                      </RadioGroup>
                    </div>
                  ))}
                </div>
              </AccordionContent>
            </AccordionItem>
          )}
          
          {quizQuestions.trueFalse && quizQuestions.trueFalse.length > 0 && (
            <AccordionItem value="true-false">
              <AccordionTrigger className="text-md font-medium">
                True/False Questions
              </AccordionTrigger>
              <AccordionContent>
                <div className="space-y-4">
                  {quizQuestions.trueFalse.map((q, i) => (
                    <div key={`tf-${i}`} className="bg-white p-4 rounded-md border">
                      <p className="font-medium mb-2">{i + 1}. {q.question}</p>
                      <RadioGroup>
                        <div className="flex items-start space-x-2 my-2">
                          <RadioGroupItem value="true" id={`tf-${i}-true`} />
                          <label htmlFor={`tf-${i}-true`} className="text-sm font-normal">
                            True
                            {showAnswers && q.answer === true && (
                              <span className="ml-2 text-green-600 font-medium">✓ Correct</span>
                            )}
                          </label>
                        </div>
                        <div className="flex items-start space-x-2 my-2">
                          <RadioGroupItem value="false" id={`tf-${i}-false`} />
                          <label htmlFor={`tf-${i}-false`} className="text-sm font-normal">
                            False
                            {showAnswers && q.answer === false && (
                              <span className="ml-2 text-green-600 font-medium">✓ Correct</span>
                            )}
                          </label>
                        </div>
                      </RadioGroup>
                    </div>
                  ))}
                </div>
              </AccordionContent>
            </AccordionItem>
          )}
          
          {quizQuestions.multipleSelect && quizQuestions.multipleSelect.length > 0 && (
            <AccordionItem value="multiple-select">
              <AccordionTrigger className="text-md font-medium">
                Multiple Select Questions
              </AccordionTrigger>
              <AccordionContent>
                <div className="space-y-4">
                  {quizQuestions.multipleSelect.map((q, i) => (
                    <div key={`ms-${i}`} className="bg-white p-4 rounded-md border">
                      <p className="font-medium mb-2">{i + 1}. {q.question}</p>
                      {q.options?.map((option, j) => {
                        const isCorrect = Array.isArray(q.answer) && q.answer.includes(option);
                        return (
                          <div key={`ms-${i}-${j}`} className="flex items-start space-x-2 my-2">
                            <Checkbox id={`ms-${i}-${j}`} />
                            <label htmlFor={`ms-${i}-${j}`} className="text-sm font-normal">
                              {option}
                              {showAnswers && isCorrect && (
                                <span className="ml-2 text-green-600 font-medium">✓ Correct</span>
                              )}
                            </label>
                          </div>
                        );
                      })}
                    </div>
                  ))}
                </div>
              </AccordionContent>
            </AccordionItem>
          )}
          
          {quizQuestions.openEnded && quizQuestions.openEnded.length > 0 && (
            <AccordionItem value="open-ended">
              <AccordionTrigger className="text-md font-medium">
                Open Ended Questions
              </AccordionTrigger>
              <AccordionContent>
                <div className="space-y-4">
                  {quizQuestions.openEnded.map((q, i) => (
                    <div key={`oe-${i}`} className="bg-white p-4 rounded-md border">
                      <p className="font-medium">{i + 1}. {q.question}</p>
                      <textarea 
                        className="w-full border rounded mt-2 p-2 min-h-[100px] text-sm"
                        placeholder="Enter your answer here..."
                      ></textarea>
                    </div>
                  ))}
                </div>
              </AccordionContent>
            </AccordionItem>
          )}
        </Accordion>
      </div>
    );
  };

  // Now render the combined analysis and quiz data with tabs
  return (
    <Card className="w-full bg-blue-50 border-blue-200">
      <CardHeader className="pb-2">
        <CardTitle className="text-blue-800 text-lg flex items-center">
          {selectedTab === "quiz" ? (
            <>
              <ListChecks className="h-5 w-5 mr-2" /> 
              Assessment Questions
            </>
          ) : (
            <>
              <BookOpen className="h-5 w-5 mr-2" />
              AI Analysis Results
            </>
          )}
        </CardTitle>
        <CardDescription className="text-blue-700">
          Content analyzed using OpenAI&apos;s natural language understanding
        </CardDescription>
      </CardHeader>
      <CardContent>
        {hasQuizQuestions && (
          <Tabs 
            value={selectedTab} 
            onValueChange={setSelectedTab}
            className="mb-4"
          >
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="analysis">Content Analysis</TabsTrigger>
              <TabsTrigger value="quiz">Quiz Questions</TabsTrigger>
            </TabsList>
            
            <TabsContent value="analysis">
              {isStructuredData ? (
                <Table>
                  <TableHeader>
                    <TableRow className="bg-blue-100/50">
                      <TableHead className="w-1/3">Property</TableHead>
                      <TableHead>Value</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {Object.entries(analysisData).map(([key, value]) => {
                      // Skip empty values or complex objects
                      if (value === null || value === undefined || typeof value === 'function') {
                        return null;
                      }
                      
                      // Format the value for display
                      let displayValue: React.ReactNode = '';
                      
                      if (typeof value === 'object') {
                        if (Array.isArray(value)) {
                          // Display arrays as comma-separated list
                          displayValue = (value as any[]).join(", ");
                        } else {
                          // For other objects, stringify
                          try {
                            const jsonStr = JSON.stringify(value);
                            displayValue = isRedacted ? sanitizeOutput(jsonStr) : jsonStr;
                          } catch (e) {
                            displayValue = "Complex object";
                          }
                        }
                      } else if (typeof value === 'string') {
                        // Sanitize strings if redaction is enabled
                        displayValue = isRedacted ? sanitizeOutput(value.toString()) : value.toString();
                      } else {
                        // For other primitives
                        displayValue = String(value);
                      }
                      
                      return (
                        <TableRow key={key} className="border-blue-100">
                          <TableCell className="font-medium text-blue-900">
                            {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}
                          </TableCell>
                          <TableCell className="text-blue-800">
                            {displayValue}
                          </TableCell>
                        </TableRow>
                      );
                    })}
                  </TableBody>
                </Table>
              ) : (
                <div className="bg-white/80 p-4 rounded border border-blue-100 max-h-[400px] overflow-auto whitespace-pre-wrap font-mono text-sm">
                  {typeof analysisData === 'string' 
                    ? (isRedacted ? sanitizeOutput(analysisData) : analysisData)
                    : JSON.stringify(analysisData, null, 2) || "No analysis data available."}
                </div>
              )}
            </TabsContent>
            
            <TabsContent value="quiz">
              {renderQuizQuestions()}
            </TabsContent>
          </Tabs>
        ) : (
          // Display without tabs if there are no quiz questions
          <>
            {isStructuredData ? (
              <Table>
                <TableHeader>
                  <TableRow className="bg-blue-100/50">
                    <TableHead className="w-1/3">Property</TableHead>
                    <TableHead>Value</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {Object.entries(analysisData).map(([key, value]) => {
                    // Skip empty values or complex objects
                    if (value === null || value === undefined || typeof value === 'function') {
                      return null;
                    }
                    
                    // Format the value for display
                    let displayValue: React.ReactNode = '';
                    
                    if (typeof value === 'object') {
                      if (Array.isArray(value)) {
                        // Display arrays as comma-separated list
                        displayValue = (value as any[]).join(", ");
                      } else {
                        // For other objects, stringify
                        try {
                          const jsonStr = JSON.stringify(value);
                          displayValue = isRedacted ? sanitizeOutput(jsonStr) : jsonStr;
                        } catch (e) {
                          displayValue = "Complex object";
                        }
                      }
                    } else if (typeof value === 'string') {
                      // Sanitize strings if redaction is enabled
                      displayValue = isRedacted ? sanitizeOutput(value.toString()) : value.toString();
                    } else {
                      // For other primitives
                      displayValue = String(value);
                    }
                    
                    return (
                      <TableRow key={key} className="border-blue-100">
                        <TableCell className="font-medium text-blue-900">
                          {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}
                        </TableCell>
                        <TableCell className="text-blue-800">
                          {displayValue}
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>
              </Table>
            ) : (
              <div className="bg-white/80 p-4 rounded border border-blue-100 max-h-[400px] overflow-auto whitespace-pre-wrap font-mono text-sm">
                {typeof analysisData === 'string' 
                  ? (isRedacted ? sanitizeOutput(analysisData) : analysisData)
                  : JSON.stringify(analysisData, null, 2) || "No analysis data available."}
              </div>
            )}
          </>
        )}
        
        {hasMedicalContent && isRedacted && (
          <div className="flex items-center gap-2 mt-4 p-3 bg-blue-100/50 rounded text-sm">
            <ShieldAlert className="h-4 w-4 text-blue-600" />
            <span className="text-blue-700">
              This content contains medical information. Personal identifiers have been redacted for privacy compliance.
            </span>
          </div>
        )}
        
        <div className="mt-4 flex justify-end">
          <Badge variant="outline" className="bg-blue-100/50 text-blue-700 border-blue-300">
            <CheckCircle className="h-3 w-3 mr-1" /> AI Analysis Complete
          </Badge>
        </div>
      </CardContent>
    </Card>
  );
};

export default WebhookResultDisplay;