import React, { useState, useEffect, useRef, CSSProperties } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Button,
  Tile,
  InlineNotification,
  TextArea,
  TextInput,
} from '@carbon/react';
import { 
  Download, 
  Restart, 
  Edit, 
  Send, 
  ArrowLeft,
  Pills,
  WarningAlt,
  Notebook,
  ChartMultitype,
  ChevronDown,
  ChevronUp,
  Phone,
} from '@carbon/react/icons';
import { 
  useConfig, 
  showSnackbar, 
  showNotification,
  usePatient
} from '@openmrs/esm-framework';
import { ConfigObject } from './config-schema';
import ReactMarkdown from 'react-markdown';
import './ai-analysis-workspace.scss';

export interface AiAnalysisWorkspaceProps {
  closeWorkspace: () => void;
}

interface AiAnalysisResult {
  patient_uuid: string;
  patient_name: string;
  ai_analysis: string;
  data_summary: {
    total_observations: number;
    total_medications: number;
    total_conditions: number;
    total_allergies: number;
  };
}

interface DecisionSupportResult {
  patient_uuid: string;
  patient_name: string;
  category: 'EMERGENCY' | 'URGENT' | 'NOT_URGENT';
  reason: string;
  recommendations: string;
  vital_signs: string[];
}

interface ChatMessage {
  sender: 'user' | 'ai';
  text: string;
  timestamp: string;
}

const AiAnalysisWorkspace: React.FC<AiAnalysisWorkspaceProps> = ({ 
  closeWorkspace 
}) => {
  const { t } = useTranslation();
  const config = useConfig<ConfigObject>();
  const { patient, patientUuid } = usePatient();
  const [analysisResult, setAnalysisResult] = useState<AiAnalysisResult | null>(null);
  const [decisionSupport, setDecisionSupport] = useState<DecisionSupportResult | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [isEditingMessage, setIsEditingMessage] = useState(false);
  const [editedMessage, setEditedMessage] = useState('');
  const [viewMode, setViewMode] = useState<'analysis' | 'chat'>('analysis');
  const [chatQuery, setChatQuery] = useState('');
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const chatViewRef = useRef<HTMLDivElement>(null);
  const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({
    clinical: true,
    drugs: false,
    patient: false
  });
  const [isSendingWhatsApp, setIsSendingWhatsApp] = useState(false);
  const defaultPhoneNumber = '+233501311059'; // Default testing number

  // Use the actual patient UUID from the OpenMRS context
  const effectivePatientUuid = patientUuid;

  // --- INLINE STYLES for Carbon-compliant UI ---

  const containerStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    width: '100%',
    overflow: 'hidden',
    position: 'relative',
    backgroundColor: '#ffffff',
  };

  const headerStyle: CSSProperties = {
    flexShrink: 0,
    borderBottom: '1px solid #e0e0e0',
    padding: '0.5rem 1rem',
    display: 'flex',
    alignItems: 'center',
    backgroundColor: 'white',
    zIndex: 10,
    justifyContent: viewMode === 'analysis' ? 'flex-end' : 'flex-start',
  };

  const contentStyle: CSSProperties = {
    flexGrow: 1,
    overflowY: 'auto',
    paddingBottom: '70px', /* Space for the input bar */
  };

  const chatViewStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    gap: '0.75rem',
    backgroundColor: 'var(--cds-layer-01, #f4f4f4)', // Carbon layer color
    padding: '1rem',
    minHeight: '100%',
    boxSizing: 'border-box',
  };

  const inputContainerStyle: CSSProperties = {
    position: 'absolute',
    bottom: 0,
    left: 0,
    width: '100%',
    zIndex: 10,
    boxSizing: 'border-box',
    display: 'flex',
    alignItems: 'flex-start', // Changed from 'center' to 'flex-start' for multi-line support
    gap: '0.5rem',
    padding: '0.75rem 1rem',
    backgroundColor: '#f0f0f0',
    borderTop: '1px solid #e0e0e0',
  };

  const inputWrapperStyle: CSSProperties = {
    flexGrow: 1,
  };

  const baseMessageStyle: CSSProperties = {
    padding: '0.75rem 1rem',
    borderRadius: '12px',
    maxWidth: '75%',
    lineHeight: '1.4',
    wordWrap: 'break-word',
    display: 'flex',
    flexDirection: 'column',
  };

  const userMessageStyle: CSSProperties = {
    ...baseMessageStyle,
    alignSelf: 'flex-end',
    backgroundColor: 'var(--cds-layer-02, #e8e8e8)', // Same as AI
    color: 'var(--cds-text-01, #161616)', // Same as AI
    borderRadius: '12px 12px 0 12px',
  };
  
  const aiMessageStyle: CSSProperties = {
    ...baseMessageStyle,
    alignSelf: 'flex-start',
    backgroundColor: 'var(--cds-layer-02, #e8e8e8)', // Carbon layer-02 for contrast
    color: 'var(--cds-text-01, #161616)', // Carbon primary text color
    borderRadius: '12px 12px 12px 0',
  };

  const timeStyle: CSSProperties = {
    fontSize: '0.7rem',
    color: '#66778199',
    alignSelf: 'flex-end',
    marginTop: '0.25rem',
  };

  const statsContainerStyle: CSSProperties = {
    display: 'flex',
    flexWrap: 'nowrap',
    gap: '0.5rem',
    justifyContent: 'flex-start',
    alignItems: 'center',
    overflowX: 'auto',
    paddingBottom: '5px',
  };

  const pillBaseStyle: CSSProperties = {
    padding: '0.1rem 0.5rem',
    borderRadius: '12px',
    fontSize: '0.75rem',
    fontWeight: 500,
    display: 'inline-flex',
    alignItems: 'center',
    lineHeight: '1.4',
    whiteSpace: 'nowrap',
  };

  const observationsPillStyle: CSSProperties = {
    ...pillBaseStyle,
    backgroundColor: '#e0f2fe',
    color: '#0c549c',
  };
  const medicationsPillStyle: CSSProperties = {
    ...pillBaseStyle,
    backgroundColor: '#dcfce7',
    color: '#1a6a33',
  };
  const conditionsPillStyle: CSSProperties = {
    ...pillBaseStyle,
    backgroundColor: '#fef3c7',
    color: '#8a5700',
  };
  const allergiesPillStyle: CSSProperties = {
    ...pillBaseStyle,
    backgroundColor: '#fee2e2',
    color: '#a31313',
  };

  // Decision Support Styles - Subtle and professional
  const decisionSupportContainerStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    gap: '0.5rem',
    marginLeft: 'auto',
  };

  const getDecisionSupportStyle = (category: string): CSSProperties => {
    const baseStyle: CSSProperties = {
      padding: '0.25rem 0.75rem',
      borderRadius: '4px',
      fontSize: '0.75rem',
      fontWeight: 500,
      display: 'flex',
      alignItems: 'center',
      gap: '0.375rem',
      textTransform: 'capitalize',
      letterSpacing: '0.02em',
      border: '1px solid',
      backgroundColor: 'var(--cds-layer-01, #f4f4f4)',
    };

    switch (category) {
      case 'EMERGENCY':
        return {
          ...baseStyle,
          color: '#da1e28',
          borderColor: '#da1e28',
          backgroundColor: '#fff1f1',
        };
      case 'URGENT':
        return {
          ...baseStyle,
          color: '#ff832b',
          borderColor: '#ff832b',
          backgroundColor: '#fff2e8',
        };
      case 'NOT_URGENT':
        return {
          ...baseStyle,
          color: '#198038',
          borderColor: '#198038',
          backgroundColor: '#f1f8f4',
        };
      default:
        return {
          ...baseStyle,
          color: '#525252',
          borderColor: '#8d8d8d',
          backgroundColor: 'var(--cds-layer-01, #f4f4f4)',
        };
    }
  };

  const getDecisionSupportIcon = (category: string) => {
    switch (category) {
      case 'EMERGENCY':
        return <WarningAlt size={12} style={{ color: '#da1e28' }} />;
      case 'URGENT':
        return <WarningAlt size={12} style={{ color: '#ff832b' }} />;
      case 'NOT_URGENT':
        return <ChartMultitype size={12} style={{ color: '#198038' }} />;
      default:
        return <ChartMultitype size={12} style={{ color: '#525252' }} />;
    }
  };

  const loadingContainerStyle: CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
    gap: '1rem',
  };

  const backButtonStyle: CSSProperties = {
    display: 'flex',
    alignItems: 'center',
    gap: '0.5rem',
  };

  // Parse AI analysis into sections
  const parseAiAnalysis = (analysis: string) => {
    // Split by numbered sections with emojis
    const sections = analysis.split(/(?=\d+\.\s*[📋💊💬])/);
    const clinicalSummary = sections.find(s => s.includes('📋')) || '';
    const drugAnalysis = sections.find(s => s.includes('💊')) || '';
    const patientMessage = sections.find(s => s.includes('💬')) || '';
    
    // Aggressive cleaning function to remove ALL redundant headers
    const cleanSection = (section: string) => {
      // First, find where the actual content starts (after any header lines)
      const lines = section.split('\n');
      let contentStartIndex = 0;
      
      // Skip lines that are headers or formatting
      for (let i = 0; i < lines.length; i++) {
        const line = lines[i].trim();
        // Skip empty lines, emoji headers, or all-caps headers
        if (!line || 
            line.match(/^\d+\.\s*[📋💊💬]/) ||
            line.match(/^[◆♦]/) ||
            line.match(/^[A-Z\s&]+:\*\*?$/i) ||
            line.match(/^\*\*[A-Z\s&]+:\*\*$/i) ||
            line === '**') {
          contentStartIndex = i + 1;
        } else {
          break;
        }
      }
      
      // Join the remaining content lines
      const cleanContent = lines.slice(contentStartIndex).join('\n').trim();
      return cleanContent;
    };
    
    return {
      clinicalSummary: cleanSection(clinicalSummary),
      drugAnalysis: cleanSection(drugAnalysis),
      patientMessage: cleanSection(patientMessage)
    };
  };

  const handleEditMessage = () => {
    if (analysisResult) {
      const sections = parseAiAnalysis(analysisResult.ai_analysis);
      setEditedMessage(sections.patientMessage);
      setIsEditingMessage(true);
    }
  };

  const handleSaveMessage = () => {
    if (analysisResult) {
      const sections = parseAiAnalysis(analysisResult.ai_analysis);
      const updatedAnalysis = `1. 📋 ${sections.clinicalSummary}\n\n2. 💊 ${sections.drugAnalysis}\n\n3. 💬 ${editedMessage}`;
      setAnalysisResult({
        ...analysisResult,
        ai_analysis: updatedAnalysis
      });
      setIsEditingMessage(false);
      setEditedMessage('');
      showSnackbar({
        title: t('messageSaved', 'Patient message updated successfully'),
        kind: 'success',
      });
    }
  };

  const handleCancelEdit = () => {
    setIsEditingMessage(false);
    setEditedMessage('');
  };

  // Function to scroll chat to bottom
  const scrollToBottom = () => {
    if (chatViewRef.current) {
      chatViewRef.current.scrollTop = chatViewRef.current.scrollHeight;
    }
  };

  // Use effect to scroll to bottom when messages change
  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSendMessage = async () => {
    if (!chatQuery.trim()) return;
    
    const newMessage: ChatMessage = {
      sender: 'user',
      text: chatQuery,
      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };
    
    setMessages(prev => [...prev, newMessage]);
    
    // Switch to chat view
    setViewMode('chat');
    
    // Clear the input immediately
    const currentQuery = chatQuery;
    setChatQuery('');
    
    // Add a loading message
    const loadingMessage: ChatMessage = {
      sender: 'ai',
      text: 'Thinking...',
      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
    };
    setMessages(prev => [...prev, loadingMessage]);
    
    try {
      // Call the chat API endpoint
      const response = await fetch(`${config.apiUrl}/patients/${effectivePatientUuid}/chat`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Basic ${btoa(`${config.username}:${config.password}`)}`,
        },
        body: JSON.stringify({
          message: currentQuery
        }),
      });

      if (!response.ok) {
        let errorMessage = `HTTP error! status: ${response.status}`;
        
        try {
          const errorData = await response.json();
          if (errorData.detail) {
            errorMessage = errorData.detail;
          }
        } catch (parseError) {
          if (response.status === 404) {
            errorMessage = 'Patient not found in the AI chat database.';
          } else if (response.status === 500) {
            errorMessage = 'Server error occurred while processing the chat request.';
          }
        }
        
        throw new Error(errorMessage);
      }

      const result = await response.json();
      
      // Remove the loading message and add the actual AI response
      setMessages(prev => {
        const withoutLoading = prev.slice(0, -1); // Remove loading message
        return [...withoutLoading, {
          sender: 'ai',
          text: result.ai_response || 'Sorry, I could not generate a response.',
          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        }];
      });
      
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
      
      // Remove the loading message and add error message
      setMessages(prev => {
        const withoutLoading = prev.slice(0, -1); // Remove loading message
        return [...withoutLoading, {
          sender: 'ai',
          text: `Sorry, I encountered an error: ${errorMessage}`,
          timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        }];
      });
      
      showNotification({
        title: t('error', 'Chat Error'),
        kind: 'error',
        description: errorMessage,
      });
    }
  };

  const handleGoBack = () => {
    setViewMode('analysis');
    setMessages([]); // Clear messages when going back
  };

  const toggleSection = (section: string) => {
    setExpandedSections(prev => ({
      ...prev,
      [section]: !prev[section]
    }));
  };

  const handleSendWhatsApp = async () => {
    if (!analysisResult) {
      showNotification({
        title: t('error', 'Error'),
        kind: 'error',
        description: t('noAnalysisData', 'No analysis data available'),
      });
      return;
    }

    setIsSendingWhatsApp(true);

    try {
      const sections = parseAiAnalysis(analysisResult.ai_analysis);
      const patientMessage = isEditingMessage ? editedMessage : sections.patientMessage;

      const response = await fetch(`${config.apiUrl}/patients/${effectivePatientUuid}/send-whatsapp`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Basic ${btoa(`${config.username}:${config.password}`)}`,
        },
        body: JSON.stringify({
          phone_number: defaultPhoneNumber,
          message_type: 'custom',
          custom_message: patientMessage
        }),
      });

      if (!response.ok) {
        let errorMessage = `HTTP error! status: ${response.status}`;
        
        try {
          const errorData = await response.json();
          if (errorData.detail) {
            errorMessage = errorData.detail;
          }
        } catch (parseError) {
          // Use default error message
        }
        
        throw new Error(errorMessage);
      }

      const result = await response.json();
      
      if (result.english_result?.success && result.twi_result?.success) {
        showSnackbar({
          title: t('whatsappSent', 'WhatsApp message sent successfully to {{phone}} (English text + Twi audio)', { 
            phone: defaultPhoneNumber
          }),
          kind: 'success',
        });
      } else {
        const errorMsg = result.english_result?.error || result.twi_result?.error || 'Failed to send WhatsApp message';
        throw new Error(errorMsg);
      }

    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
      showNotification({
        title: t('error', 'WhatsApp Error'),
        kind: 'error',
        description: errorMessage,
      });
    } finally {
      setIsSendingWhatsApp(false);
    }
  };

  const handleApproveAndSend = () => {
    handleSendWhatsApp();
  };

  const fetchDecisionSupport = async () => {
    try {
      const response = await fetch(`${config.apiUrl}/patients/${effectivePatientUuid}/decision-support`, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Basic ${btoa(`${config.username}:${config.password}`)}`,
        },
      });

      if (response.ok) {
        const result = await response.json();
        setDecisionSupport(result);
      }
    } catch (err) {
      // Silently fail for decision support - it's not critical
      console.warn('Decision support fetch failed:', err);
    }
  };

  const fetchAiAnalysis = async () => {
    if (!config.apiUrl || !config.enabled) {
      setError(t('configurationError', 'Birthsense AI is not properly configured'));
      setLoading(false);
      return;
    }

    setLoading(true);
    setError(null);
    setAnalysisResult(null); // Clear previous results
    setDecisionSupport(null); // Clear previous decision support

    try {
      // Fetch both AI analysis and decision support in parallel
      const [analysisResponse] = await Promise.all([
        fetch(`${config.apiUrl}/patients/${effectivePatientUuid}/ai-analysis`, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Basic ${btoa(`${config.username}:${config.password}`)}`,
          },
        }),
        fetchDecisionSupport(), // This can fail silently
      ]);

      if (!analysisResponse.ok) {
        let errorMessage = `HTTP error! status: ${analysisResponse.status}`;
        
        try {
          const errorData = await analysisResponse.json();
          if (errorData.detail) {
            errorMessage = errorData.detail;
          }
        } catch (parseError) {
          if (analysisResponse.status === 404) {
            errorMessage = 'Patient not found in the AI analysis database. This patient may not exist in the connected OpenMRS instance.';
          } else if (analysisResponse.status === 500) {
            errorMessage = 'Server error occurred while processing the AI analysis.';
          }
        }
        
        throw new Error(errorMessage);
      }

      const result = await analysisResponse.json();
      setAnalysisResult(result);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
      setError(t('fetchError', 'Failed to fetch Birthsense AI analysis: {{error}}', { error: errorMessage }));
      showNotification({
        title: t('error', 'Error'),
        kind: 'error',
        description: errorMessage,
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (effectivePatientUuid) {
      fetchAiAnalysis();
    }
  }, [effectivePatientUuid]);

  const handleRefresh = () => {
    fetchAiAnalysis();
  };

  const handleDownload = () => {
    if (!analysisResult) return;

    const content = `# Birthsense AI Report\n\n**Patient:** ${analysisResult.patient_name}\n\n**Analysis:**\n\n${analysisResult.ai_analysis}`;
    const blob = new Blob([content], { type: 'text/markdown' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `birthsense-ai-analysis-${analysisResult.patient_name}-${new Date().toISOString().split('T')[0]}.md`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

    showSnackbar({
      title: t('downloadSuccess', 'Analysis downloaded successfully'),
      kind: 'success',
    });
  };

  if (loading) {
    const spinnerStyle: CSSProperties = {
      width: '20px',
      height: '20px',
      border: '2px solid #e0e0e0',
      borderTop: '2px solid #0f62fe',
      borderRadius: '50%',
      animation: 'spin 1s linear infinite',
    };

    return (
      <div style={containerStyle}>
        <style>
          {`
            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }
          `}
        </style>
        <div style={loadingContainerStyle}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <div style={spinnerStyle}></div>
            <span style={{ fontSize: '14px', color: '#525252' }}>
              {t('loading', 'Loading...')}
            </span>
          </div>
        </div>
      </div>
    );
  }

  if (!config.enabled) {
    return (
      <div style={containerStyle} className="workspace-container">
        <InlineNotification
          kind="info"
          title={t('disabled', 'Birthsense AI is disabled')}
          subtitle={t('disabledMessage', 'Please enable Birthsense AI in the configuration to use this feature.')}
        />
      </div>
    );
  }

  return (
    <div style={containerStyle} className="workspace-container">
      <div style={headerStyle} className="workspace-header">
        {viewMode === 'analysis' ? (
          <div className="header-actions">
            <Button
              kind="ghost"
              renderIcon={Restart}
              onClick={handleRefresh}
            >
              {t('refresh', 'Refresh')}
            </Button>
            <Button
              kind="ghost"
              renderIcon={Download}
              onClick={handleDownload}
              disabled={!analysisResult}
            >
              {t('download', 'Download')}
            </Button>
          </div>
        ) : (
          <Button
            kind="ghost"
            onClick={handleGoBack}
          >
            <span style={backButtonStyle}>
              <ArrowLeft />
              {t('backToAnalysis', 'Back to Analysis')}
            </span>
          </Button>
        )}
      </div>

      <div style={contentStyle} className="workspace-content">
        {error && !analysisResult && (
          <InlineNotification
            kind="error"
            title={t('error', 'Error')}
            subtitle={error}
            onCloseButtonClick={() => setError(null)}
          />
        )}
        
        {viewMode === 'analysis' && analysisResult && (
          <div className="analysis-content">
            <Tile className="patient-header-tile">
              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
                <h3 className="patient-name-header" style={{ margin: 0, paddingBottom: 0, border: 'none' }}>
                  {analysisResult.patient_name.replace(/^\w+\s-\s/, '')}
                </h3>
                {decisionSupport && (
                  <div style={decisionSupportContainerStyle}>
                    <div 
                      style={getDecisionSupportStyle(decisionSupport.category)}
                      title={`Clinical Priority: ${decisionSupport.category.replace('_', ' ')}\n\nReason: ${decisionSupport.reason}\n\nRecommendations: ${decisionSupport.recommendations}`}
                    >
                      {getDecisionSupportIcon(decisionSupport.category)}
                      <span style={{ fontSize: '0.75rem', fontWeight: 500 }}>
                        {decisionSupport.category === 'NOT_URGENT' ? 'Routine' : decisionSupport.category.replace('_', ' ')}
                      </span>
                    </div>
                  </div>
                )}
              </div>
              <div style={statsContainerStyle}>
                <span style={observationsPillStyle}>
                  {analysisResult.data_summary.total_observations} {t('observations', 'Observations')}
                </span>
                <span style={medicationsPillStyle}>
                  {analysisResult.data_summary.total_medications} {t('medications', 'Medications')}
                </span>
                <span style={conditionsPillStyle}>
                  {analysisResult.data_summary.total_conditions} {t('conditions', 'Conditions')}
                </span>
                <span style={allergiesPillStyle}>
                  {analysisResult.data_summary.total_allergies} {t('allergies', 'Allergies')}
                </span>
              </div>
            </Tile>

            <div className="custom-accordion">
              {/* Clinical Summary Section */}
              <div className="accordion-item">
                <div 
                  className="accordion-header" 
                  onClick={() => toggleSection('clinical')}
                  style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 1.5rem', backgroundColor: 'var(--cds-layer-01, #f4f4f4)', borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }}
                >
                  <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--cds-text-primary, #161616)' }}>
                    {t('clinicalSummary', 'Clinical Summary')}
                  </span>
                  {expandedSections.clinical ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </div>
                {expandedSections.clinical && (
                  <div className="accordion-content" style={{ backgroundColor: 'white', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
                    <div className="analysis-section" style={{ padding: '1rem 1.5rem', lineHeight: 1.6 }}>
                      <ReactMarkdown>{parseAiAnalysis(analysisResult.ai_analysis).clinicalSummary}</ReactMarkdown>
                    </div>
                  </div>
                )}
              </div>

              {/* Drug Analysis Section */}
              <div className="accordion-item">
                <div 
                  className="accordion-header" 
                  onClick={() => toggleSection('drugs')}
                  style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 1.5rem', backgroundColor: 'var(--cds-layer-01, #f4f4f4)', borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }}
                >
                  <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--cds-text-primary, #161616)' }}>
                    {t('drugAnalysis', 'Drug Interaction & Medication Safety Analysis')}
                  </span>
                  {expandedSections.drugs ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </div>
                {expandedSections.drugs && (
                  <div className="accordion-content" style={{ backgroundColor: 'white', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
                    <div className="analysis-section" style={{ padding: '1rem 1.5rem', lineHeight: 1.6 }}>
                      <ReactMarkdown>{parseAiAnalysis(analysisResult.ai_analysis).drugAnalysis}</ReactMarkdown>
                    </div>
                  </div>
                )}
              </div>

              {/* Patient Communication Section */}
              <div className="accordion-item">
                <div 
                  className="accordion-header" 
                  onClick={() => toggleSection('patient')}
                  style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '1rem 1.5rem', backgroundColor: 'var(--cds-layer-01, #f4f4f4)', borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)' }}
                >
                  <span style={{ fontSize: '1rem', fontWeight: 600, color: 'var(--cds-text-primary, #161616)' }}>
                    {t('patientMessage', 'Patient Follow-up Communication')}
                  </span>
                  {expandedSections.patient ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
                </div>
                {expandedSections.patient && (
                  <div className="accordion-content" style={{ backgroundColor: 'white', borderBottom: '1px solid var(--cds-border-subtle, #e0e0e0)' }}>
                    <div className="analysis-section" style={{ padding: '1rem 1.5rem', lineHeight: 1.6 }}>
                      <div className="patient-message-header" style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', alignItems: 'center', marginBottom: '1rem' }}>
                        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
                          <Button
                            kind="ghost"
                            size="sm"
                            renderIcon={Edit}
                            onClick={handleEditMessage}
                            disabled={isEditingMessage || isSendingWhatsApp}
                          >
                            {t('editMessage', 'Edit Message')}
                          </Button>
                          <Button
                            kind="primary"
                            size="sm"
                            renderIcon={Phone}
                            onClick={handleApproveAndSend}
                            disabled={isEditingMessage || isSendingWhatsApp}
                          >
                            {isSendingWhatsApp ? t('sending', 'Sending...') : t('sendEnglishTwi', 'Approve & Send')}
                          </Button>
                        </div>
                      </div>
                      
                      {isEditingMessage ? (
                        <div className="edit-message-container">
                          <TextArea
                            id="patient-message-edit"
                            labelText={t('editPatientMessage', 'Edit patient message')}
                            value={editedMessage}
                            onChange={(e) => setEditedMessage(e.target.value)}
                            rows={10}
                            placeholder={t('enterPatientMessage', 'Enter patient message...')}
                          />
                          <div className="edit-actions">
                            <Button
                              kind="primary"
                              size="sm"
                              onClick={handleSaveMessage}
                            >
                              {t('save', 'Save')}
                            </Button>
                            <Button
                              kind="secondary"
                              size="sm"
                              onClick={handleCancelEdit}
                            >
                              {t('cancel', 'Cancel')}
                            </Button>
                          </div>
                        </div>
                      ) : (
                        <div className="patient-message-content">
                          <ReactMarkdown>{parseAiAnalysis(analysisResult.ai_analysis).patientMessage}</ReactMarkdown>
                        </div>
                      )}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {viewMode === 'chat' && (
          <div style={chatViewStyle} ref={chatViewRef}>
            {messages.map((msg, index) => (
              <div 
                key={index} 
                style={msg.sender === 'user' ? userMessageStyle : aiMessageStyle}
              >
                <div className="message-text">{msg.text}</div>
                <div className="message-time" style={timeStyle}>{msg.timestamp}</div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div style={inputContainerStyle} className="chat-input-container">
        <div style={inputWrapperStyle} className="chat-input-wrapper">
          <TextArea
            id="chat-input"
            labelText=""
            placeholder={
              viewMode === 'analysis'
                ? t('askAboutPatient', 'Ask about this patient...')
                : t('typeMessage', 'Type a message...')
            }
            value={chatQuery}
            onChange={(e) => setChatQuery(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                handleSendMessage();
              }
            }}
            rows={1}
            enableCounter={false}
            hideLabel={true}
          />
        </div>
        <div className="chat-input-button">
          <Button
            renderIcon={Send}
            iconDescription={t('sendMessage', 'Send')}
            hasIconOnly
            onClick={handleSendMessage}
            disabled={!chatQuery.trim()}
          />
        </div>
      </div>
    </div>
  );
};

export default AiAnalysisWorkspace;