/*
 * File: AIPredictionDetailScreen.tsx
 * Description: AI Prediction detail screen with suggestion form for updating AI findings
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React, { useState, useCallback, useEffect } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TextInput,
  TouchableOpacity,
  Alert,
  SafeAreaView,
  StatusBar,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import Icon from 'react-native-vector-icons/Feather';
import { theme } from '../../../theme';
import { useAppDispatch, useAppSelector } from '../../../store/hooks';
import { CustomModal } from '../../../shared/components/CustomModal';
import Toast from 'react-native-toast-message';
import { aiPredictionAPI } from '../services/aiPredictionAPI';
import { showError } from '../../../shared/utils/toast';

// Import Redux selectors
import { selectCurrentCase, selectIsLoadingCaseDetails, selectError } from '../redux';
import { selectUser } from '../../Auth/redux/authSelectors';

// Import types
import type { AIPredictionDetailsScreenProps } from '../navigation/navigationTypes';
import type { AIPredictionCase } from '../types';

// ============================================================================
// ENUMS & TYPES
// ============================================================================

/**
 * Suggestion Type Enum
 * 
 * Purpose: Define available suggestion types as specified by user
 */
export enum SuggestionType {
  TREATMENT = 'Treatment',
  FOLLOW_UP = 'Follow Up',
  DIAGNOSIS = 'Diagnosis',
  OTHER = 'Other'
}

/**
 * Priority Enum
 * 
 * Purpose: Define priority levels as specified by user
 */
export enum Priority {
  LOW = 'Low',
  MEDIUM = 'Medium',
  HIGH = 'High',
  CRITICAL = 'Critical'
}

/**
 * Related Finding Interface
 * 
 * Purpose: Structure for key-value pairs in related findings
 */
interface RelatedFinding {
  key: string;
  value: string;
}

/**
 * Suggestion Form Data Interface
 * 
 * Purpose: Structure for suggestion form data
 */
interface SuggestionFormData {
  patientId: string;
  suggestionType: SuggestionType;
  title: string;
  suggestionText: string;
  confidence: string;
  priority: Priority;
  category: string;
  costEstimate: string;
  timeEstimate: string;
  expiresAt: Date | null;
  aiModelVersion: string;
  evidenceSources: string;
  contraindications: string;
  tags: string;
  relatedFindings: RelatedFinding[];
}

/**
 * API Response Interface
 * 
 * Purpose: Structure for API response data
 */
interface APIResponse {
  success: boolean;
  message: string;
  data: {
    created_at: string;
    updated_at: string;
    status: string;
    suggestion_id: string;
  };
}

// ============================================================================
// CONSTANTS
// ============================================================================

const SUGGESTION_TYPE_OPTIONS = [
  { label: 'Treatment', value: SuggestionType.TREATMENT },
  { label: 'Follow Up', value: SuggestionType.FOLLOW_UP },
  { label: 'Diagnosis', value: SuggestionType.DIAGNOSIS },
  { label: 'Other', value: SuggestionType.OTHER },
];



const PRIORITY_OPTIONS = [
  { label: 'Low', value: Priority.LOW, color: theme.colors.success },
  { label: 'Medium', value: Priority.MEDIUM, color: theme.colors.warning },
  { label: 'High', value: Priority.HIGH, color: '#FF5722' },
  { label: 'Critical', value: Priority.CRITICAL, color: theme.colors.critical },
];

// ============================================================================
// AI PREDICTION DETAIL SCREEN COMPONENT
// ============================================================================

/**
 * AIPredictionDetailScreen Component
 * 
 * Purpose: Display AI prediction details and allow suggestion updates
 * 
 * Features:
 * - View complete AI prediction details
 * - Create/update suggestions for AI findings
 * - Form validation and submission
 * - Dynamic related findings management
 * - Date picker for expiration
 * - Dropdown selections for types and priorities
 * - Responsive design with keyboard handling
 */
const AIPredictionDetailScreen: React.FC<AIPredictionDetailsScreenProps> = ({ 
  navigation, 
  route 
}) => {
  // ============================================================================
  // REDUX STATE
  // ============================================================================

  const dispatch = useAppDispatch();
  const user = useAppSelector(selectUser);
  const currentCase = useAppSelector(selectCurrentCase);
  const isLoading = useAppSelector(selectIsLoadingCaseDetails);
  const error = useAppSelector(selectError);

  // ============================================================================
  // LOCAL STATE
  // ============================================================================

  const [formData, setFormData] = useState<SuggestionFormData>({
    patientId: route.params.caseId,
    suggestionType: SuggestionType.TREATMENT,
    title: '',
    suggestionText: '',
    confidence: '0.99',
    priority: Priority.HIGH,
    category: 'Radiology',
    costEstimate: '',
    timeEstimate: '1-2 hours',
    expiresAt: null,
    aiModelVersion: 'v2.1.0',
    evidenceSources: '',
    contraindications: '',
    tags: '',
    relatedFindings: [
      { key: 'finding_label', value: 'midline shift' },
      { key: 'finding_type', value: 'no_pathology' },
      { key: 'clinical_urgency', value: 'urgent' },
      { key: 'primary_severity', value: 'high' },
      { key: 'modality', value: '/DX' },
      { key: 'institution', value: 'Brighton Radiology' },
    ],
  });

  const [showSuggestionTypeDropdown, setShowSuggestionTypeDropdown] = useState(false);
  const [showPriorityDropdown, setShowPriorityDropdown] = useState(false);
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [apiResponse, setApiResponse] = useState<any>(null);

  // ============================================================================
  // EFFECTS
  // ============================================================================

  /**
   * Initialize form data from current case
   */
  useEffect(() => {
    if (currentCase) {
      setFormData(prev => ({
        ...prev,
        patientId: currentCase.patid,
        title: `Recommended CT Scan`,
        suggestionText: `Describe your suggestion with clinical reasoning...`,
        confidence: currentCase.prediction.confidence_score.toFixed(4),
      }));
    }
  }, [currentCase]);

  // ============================================================================
  // EVENT HANDLERS
  // ============================================================================

  /**
   * Handle form field changes
   */
  const handleFieldChange = useCallback((field: keyof SuggestionFormData, value: any) => {
    setFormData(prev => ({
      ...prev,
      [field]: value,
    }));
  }, []);

  /**
   * Handle dropdown selection
   */
  const handleDropdownSelect = useCallback((field: keyof SuggestionFormData, value: any) => {
    setFormData(prev => ({
      ...prev,
      [field]: value,
    }));
    setShowSuggestionTypeDropdown(false);
    setShowPriorityDropdown(false);
  }, []);

  /**
   * Handle date selection
   */
  const handleDateChange = useCallback((event: any, selectedDate?: Date) => {
    setShowDatePicker(false);
    if (selectedDate) {
      handleFieldChange('expiresAt', selectedDate);
    }
  }, [handleFieldChange]);

  /**
   * Add new related finding
   */
  const handleAddRelatedFinding = useCallback(() => {
    setFormData(prev => ({
      ...prev,
      relatedFindings: [...prev.relatedFindings, { key: '', value: '' }],
    }));
  }, []);

  /**
   * Remove related finding
   */
  const handleRemoveRelatedFinding = useCallback((index: number) => {
    setFormData(prev => ({
      ...prev,
      relatedFindings: prev.relatedFindings.filter((_, i) => i !== index),
    }));
  }, []);

  /**
   * Update related finding
   */
  const handleUpdateRelatedFinding = useCallback((index: number, field: 'key' | 'value', value: string) => {
    setFormData(prev => ({
      ...prev,
      relatedFindings: prev.relatedFindings.map((finding, i) => 
        i === index ? { ...finding, [field]: value } : finding
      ),
    }));
  }, []);

  /**
   * Validate form data
   */
  const validateForm = useCallback((): boolean => {
    if (!formData.title.trim()) {
      showError('Validation Error', 'Title is required');
      return false;
    }
    if (!formData.suggestionText.trim()) {
      showError('Validation Error', 'Suggestion text is required');
      return false;
    }
    if (!formData.patientId.trim()) {
      showError('Validation Error', 'Patient ID is required');
      return false;
    }
    
    // Validate expiry date - must be in the future
    if (formData.expiresAt) {
      const now = new Date();
      const expiryDate = new Date(formData.expiresAt);
      
      if (expiryDate <= now) {
        showError('Validation Error', 'Expiry date must be in the future');
        return false;
      }
    }
    
    return true;
  }, [formData]);

  /**
   * Handle form submission
   */
  const handleSubmitSuggestion = useCallback(async () => {
    if (!validateForm()) return;

    setIsSubmitting(true);
    try {
      // Prepare API payload according to backend structure
      const apiPayload = {
        patid: formData.patientId,
        suggestion_type: formData.suggestionType.toLowerCase().replace(' ', '_'),
        suggestion_title: formData.title,
        suggestion_text: formData.suggestionText,
        confidence_score: parseFloat(formData.confidence),
        priority_level: formData.priority.toLowerCase(),
        category: formData.category,
        related_findings: formData.relatedFindings.reduce((acc, finding) => {
          if (finding.key && finding.value) {
            acc[finding.key] = finding.value;
          }
          return acc;
        }, {} as Record<string, string>),
        evidence_sources: formData.evidenceSources ? formData.evidenceSources.split(',').map(s => s.trim()) : [],
        contraindications: formData.contraindications || 'none',
        cost_estimate: formData.costEstimate ? parseFloat(formData.costEstimate) : 0,
        time_estimate: formData.timeEstimate,
        expires_at: formData.expiresAt ? formData.expiresAt.toISOString() : null,
        tags: formData.tags ? formData.tags.split(',').map(s => s.trim()) : [],
        ai_model_version: formData.aiModelVersion,
      };

      // Call centralized API service
      const response = await aiPredictionAPI.submitAISuggestion(apiPayload, user?.access_token || '');
      console.log('feed back response',response)
      if (response.ok && response.data) {
        const responseData = response.data as APIResponse;
        
        if (responseData.success) {
          // Show success toast
          Toast.show({
            type: 'success',
            text1: 'Success!',
            text2: responseData.message || 'Suggestion submitted successfully',
            position: 'top',
            visibilityTime: 4000,
          });
          
          // Store API response data
          setApiResponse(responseData.data);
          // Show success modal with API response data
          setShowSuccessModal(true);
        } else {
          throw new Error(responseData.message || 'Failed to submit suggestion');
        }
      } else {
        throw new Error(response.problem || 'HTTP request failed');
      }
    } catch (error) {
      console.error('Submission Error:', error);
      
      // Show error toast
      Toast.show({
        type: 'error',
        text1: 'Error',
        text2: error instanceof Error ? error.message : 'Failed to submit suggestion. Please try again.',
        position: 'top',
        visibilityTime: 5000,
      });
    } finally {
      setIsSubmitting(false);
    }
  }, [formData, validateForm, user]);

  /**
   * Handle success modal close
   */
  const handleSuccessModalClose = useCallback(() => {
    setShowSuccessModal(false);
    navigation.goBack();
  }, [navigation]);

  /**
   * Handle back navigation
   */
  const handleGoBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  // ============================================================================
  // RENDER FUNCTIONS
  // ============================================================================

  /**
   * Render dropdown options
   */
  const renderDropdownOptions = useCallback((
    options: Array<{ label: string; value: any; color?: string }>,
    currentValue: any,
    onSelect: (value: any) => void
  ) => (
    <View style={styles.dropdownOptions}>
      {options.map((option) => (
        <TouchableOpacity
          key={option.value}
          style={[
            styles.dropdownOption,
            currentValue === option.value && styles.dropdownOptionSelected
          ]}
          onPress={() => onSelect(option.value)}
        >
          <Text style={[
            styles.dropdownOptionText,
            currentValue === option.value && styles.dropdownOptionTextSelected,
            option.color && { color: option.color }
          ]}>
            {option.label}
          </Text>
          {currentValue === option.value && (
            <Icon name="check" size={16} color={theme.colors.primary} />
          )}
        </TouchableOpacity>
      ))}
    </View>
  ), []);

  /**
   * Render related findings section
   */
  const renderRelatedFindings = useCallback(() => (
    <View style={styles.relatedFindingsContainer}>
      <Text style={styles.sectionTitle}>Related Findings</Text>
      {formData.relatedFindings.map((finding, index) => (
        <View key={index} style={styles.relatedFindingItem}>
          <TextInput
            style={[styles.input, styles.relatedFindingKey]}
            value={finding.key}
            onChangeText={(value) => handleUpdateRelatedFinding(index, 'key', value)}
            placeholder="Key"
            placeholderTextColor={theme.colors.textMuted}
          />
          <TextInput
            style={[styles.input, styles.relatedFindingValue]}
            value={finding.value}
            onChangeText={(value) => handleUpdateRelatedFinding(index, 'value', value)}
            placeholder="Value"
            placeholderTextColor={theme.colors.textMuted}
          />
          <TouchableOpacity
            style={styles.removeButton}
            onPress={() => handleRemoveRelatedFinding(index)}
            accessibilityRole="button"
            accessibilityLabel="Remove related finding"
          >
            <Icon name="trash-2" size={18} color={theme.colors.error} />
          </TouchableOpacity>
        </View>
      ))}
      <TouchableOpacity
        style={styles.addButton}
        onPress={handleAddRelatedFinding}
      >
        <Text style={styles.addButtonText}>Add</Text>
      </TouchableOpacity>
    </View>
  ), [formData.relatedFindings, handleUpdateRelatedFinding, handleRemoveRelatedFinding, handleAddRelatedFinding]);

  // ============================================================================
  // RENDER
  // ============================================================================

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor={theme.colors.background} />
      
      {/* Header */}

             <KeyboardAvoidingView 
         style={styles.keyboardAvoidingView}
         behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 0}
         enabled={Platform.OS === 'ios'}
       >
         <ScrollView 
           style={styles.scrollView}
           contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
           keyboardShouldPersistTaps="handled"
         >
          {/* Patient ID */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Patient ID</Text>
            <TextInput
              style={[styles.input, styles.disabledInput]}
              value={formData.patientId}
              editable={false}
              placeholder="Patient ID"
              placeholderTextColor={theme.colors.textMuted}
            />
          </View>

          {/* Suggestion Type */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Suggestion Type</Text>
            <View style={styles.dropdownContainer}>
              <TouchableOpacity
                style={styles.dropdown}
                onPress={() => setShowSuggestionTypeDropdown(!showSuggestionTypeDropdown)}
              >
                <Text style={styles.dropdownText}>{formData.suggestionType}</Text>
                <Icon name="chevron-down" size={20} color={theme.colors.textSecondary} />
              </TouchableOpacity>
              {showSuggestionTypeDropdown && renderDropdownOptions(
                SUGGESTION_TYPE_OPTIONS,
                formData.suggestionType,
                (value) => handleDropdownSelect('suggestionType', value)
              )}
            </View>
          </View>

          {/* Title */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Title</Text>
            <TextInput
              style={styles.input}
              value={formData.title}
              onChangeText={(value) => handleFieldChange('title', value)}
              placeholder="Recommended CT Scan"
              placeholderTextColor={theme.colors.textMuted}
            />
          </View>

          {/* Suggestion Text */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Suggestion Text</Text>
            <TextInput
              style={[styles.input, styles.textArea]}
              value={formData.suggestionText}
              onChangeText={(value) => handleFieldChange('suggestionText', value)}
              placeholder="Describe your suggestion with clinical reasoning..."
              placeholderTextColor={theme.colors.textMuted}
              multiline
              numberOfLines={4}
              textAlignVertical="top"
            />
          </View>

          {/* Row 1: Confidence and Priority */}
          <View style={styles.formRow}>
            <View style={[styles.formGroup, styles.formGroupHalf]}>
              <Text style={styles.label}>Confidence (0-1)</Text>
              <TextInput
                style={styles.input}
                value={formData.confidence}
                onChangeText={(value) => handleFieldChange('confidence', value)}
                placeholder="0.9979"
                placeholderTextColor={theme.colors.textMuted}
                keyboardType="numeric"
              />
            </View>

            <View style={[styles.formGroup, styles.formGroupHalf]}>
              <Text style={styles.label}>Priority</Text>
              <View style={styles.dropdownContainer}>
                <TouchableOpacity
                  style={styles.dropdown}
                  onPress={() => setShowPriorityDropdown(!showPriorityDropdown)}
                >
                  <Text style={styles.dropdownText}>{formData.priority}</Text>
                  <Icon name="chevron-down" size={20} color={theme.colors.textSecondary} />
                </TouchableOpacity>
                {showPriorityDropdown && renderDropdownOptions(
                  PRIORITY_OPTIONS,
                  formData.priority,
                  (value) => handleDropdownSelect('priority', value)
                )}
              </View>
            </View>
          </View>

          {/* Row 2: Category and Cost Estimate */}
          <View style={styles.formRow}>
            <View style={[styles.formGroup, styles.formGroupHalf]}>
              <Text style={styles.label}>Category</Text>
              <TextInput
                style={styles.input}
                value={formData.category}
                onChangeText={(value) => handleFieldChange('category', value)}
                placeholder="Radiology"
                placeholderTextColor={theme.colors.textMuted}
              />
            </View>

            <View style={[styles.formGroup, styles.formGroupHalf]}>
              <Text style={styles.label}>Cost Estimate (USD)</Text>
              <TextInput
                style={styles.input}
                value={formData.costEstimate}
                onChangeText={(value) => handleFieldChange('costEstimate', value)}
                placeholder="Enter cost"
                placeholderTextColor={theme.colors.textMuted}
                keyboardType="numeric"
              />
            </View>
          </View>

          {/* Row 3: Time Estimate and Expires At */}
          <View style={styles.formRow}>
            <View style={[styles.formGroup, styles.formGroupHalf]}>
              <Text style={styles.label}>Time Estimate</Text>
              <TextInput
                style={styles.input}
                value={formData.timeEstimate}
                onChangeText={(value) => handleFieldChange('timeEstimate', value)}
                placeholder="1-2 hours"
                placeholderTextColor={theme.colors.textMuted}
              />
            </View>

                         <View style={[styles.formGroup, styles.formGroupHalf]}>
               <Text style={styles.label}>Expires At</Text>
               <TouchableOpacity
                 style={styles.dateInput}
                 onPress={() => setShowDatePicker(true)}
               >
                 <Text style={[
                   styles.dateText,
                   !formData.expiresAt && styles.placeholderText
                 ]}>
                   {formData.expiresAt 
                     ? formData.expiresAt.toLocaleDateString() 
                     : 'Select date'
                   }
                 </Text>
                 <Icon name="calendar" size={20} color={theme.colors.textSecondary} />
               </TouchableOpacity>
               <Text style={styles.helperText}>Date must be in the future</Text>
             </View>
          </View>

          {/* AI Model Version */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>AI Model Version</Text>
            <TextInput
              style={styles.input}
              value={formData.aiModelVersion}
              onChangeText={(value) => handleFieldChange('aiModelVersion', value)}
              placeholder="v2.1.0"
              placeholderTextColor={theme.colors.textMuted}
            />
          </View>

          {/* Evidence Sources */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Evidence Sources (comma-separated)</Text>
            <TextInput
              style={styles.input}
              value={formData.evidenceSources}
              onChangeText={(value) => handleFieldChange('evidenceSources', value)}
              placeholder="Evidence A, Protocol B"
              placeholderTextColor={theme.colors.textMuted}
            />
          </View>

          {/* Contraindications */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Contraindications</Text>
            <TextInput
              style={[styles.input, styles.textArea]}
              value={formData.contraindications}
              onChangeText={(value) => handleFieldChange('contraindications', value)}
              placeholder="Any known contraindications..."
              placeholderTextColor={theme.colors.textMuted}
              multiline
              numberOfLines={3}
              textAlignVertical="top"
            />
          </View>

          {/* Tags */}
          <View style={styles.formGroup}>
            <Text style={styles.label}>Tags (comma-separated)</Text>
            <TextInput
              style={styles.input}
              value={formData.tags}
              onChangeText={(value) => handleFieldChange('tags', value)}
              placeholder="emergency, chest, pulmonary"
              placeholderTextColor={theme.colors.textMuted}
            />
          </View>

          {/* Related Findings */}
          {renderRelatedFindings()}

                     {/* Submit Button */}
           <TouchableOpacity
             style={[styles.submitButton, isSubmitting && styles.submitButtonDisabled]}
             onPress={handleSubmitSuggestion}
             disabled={isSubmitting}
           >
             {isSubmitting ? (
               <Text style={styles.submitButtonText}>Submitting...</Text>
             ) : (
               <Text style={styles.submitButtonText}>Submit Suggestion</Text>
             )}
           </TouchableOpacity>
         </ScrollView>
       </KeyboardAvoidingView>

             {/* Date Picker */}
       {showDatePicker && (
         <DateTimePicker
           value={formData.expiresAt || new Date()}
           mode="date"
           display="default"
           onChange={handleDateChange}
           minimumDate={new Date()}
         />
       )}

             {/* Success Modal */}
       <CustomModal
         visible={showSuccessModal}
         title="Suggestion Submitted Successfully!"
         message={
           apiResponse ? 
           `Your suggestion has been submitted and will be reviewed by the medical team.\n\n` +
           `Suggestion ID: ${apiResponse.suggestion_id}\n` +
           `Status: ${apiResponse.status}\n` +
           `Created: ${new Date(apiResponse.created_at).toLocaleString()}`
           : 
           "Your suggestion has been successfully submitted and will be reviewed by the medical team."
         }
         type="success"
         confirmText="OK"
                  onConfirm={handleSuccessModalClose}
         onClose={handleSuccessModalClose}
       />
       
       {/* Toast Messages */}
       <Toast />
     </SafeAreaView>
   );
 };

// ============================================================================
// STYLES
// ============================================================================

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.md,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
    backgroundColor: theme.colors.background,
  },
  backButton: {
    padding: theme.spacing.sm,
  },
  headerTitle: {
    fontSize: theme.typography.fontSize.displaySmall,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
  },
  headerSpacer: {
    width: 40,
  },
     keyboardAvoidingView: {
     flex: 1,
     // Ensure this doesn't interfere with bottom tab navigation
     position: 'relative',
   },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    padding: theme.spacing.md,
    paddingBottom: theme.spacing.xl,
  },
  formGroup: {
    marginBottom: theme.spacing.md,
  },
  formGroupHalf: {
    flex: 1,
  },
  formRow: {
    flexDirection: 'row',
    gap: theme.spacing.md,
  },
  label: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.sm,
  },
  input: {
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: theme.borderRadius.medium,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textPrimary,
    backgroundColor: theme.colors.background,
  },
  disabledInput: {
    backgroundColor: theme.colors.backgroundAlt,
    color: theme.colors.textSecondary,
    borderColor: theme.colors.border,
  },
  textArea: {
    height: 80,
    textAlignVertical: 'top',
  },
  dropdownContainer: {
    position: 'relative',
  },
  dropdown: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: theme.borderRadius.medium,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    backgroundColor: theme.colors.background,
  },
  dropdownText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textPrimary,
  },
  dropdownOptions: {
    position: 'absolute',
    top: '100%',
    left: 0,
    right: 0,
    zIndex: 1000,
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: theme.borderRadius.medium,
    backgroundColor: theme.colors.background,
    marginTop: theme.spacing.xs,
    ...theme.shadows.medium,
  },
  dropdownOption: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
  dropdownOptionSelected: {
    backgroundColor: theme.colors.tertiary,
  },
  dropdownOptionText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textPrimary,
  },
  dropdownOptionTextSelected: {
    color: theme.colors.primary,
    fontFamily: theme.typography.fontFamily.medium,
  },
  dateInput: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: theme.borderRadius.medium,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    backgroundColor: theme.colors.background,
  },
  dateText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.regular,
    color: theme.colors.textPrimary,
  },
     placeholderText: {
     color: theme.colors.textMuted,
   },
   helperText: {
     fontSize: theme.typography.fontSize.bodySmall,
     fontFamily: theme.typography.fontFamily.regular,
     color: theme.colors.textMuted,
     marginTop: theme.spacing.xs,
     fontStyle: 'italic',
   },
  sectionTitle: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.textPrimary,
    marginBottom: theme.spacing.md,
  },
  relatedFindingsContainer: {
    marginBottom: theme.spacing.lg,
  },
  relatedFindingItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: theme.spacing.sm,
    marginBottom: theme.spacing.sm,
  },
  relatedFindingKey: {
    flex: 1,
  },
  relatedFindingValue: {
    flex: 1,
  },
  addButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: theme.borderRadius.medium,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    alignItems: 'center',
    alignSelf: 'flex-start',
  },
  addButtonText: {
    fontSize: theme.typography.fontSize.bodyMedium,
    fontFamily: theme.typography.fontFamily.medium,
    color: theme.colors.background,
  },
  removeButton: {
    padding: theme.spacing.xs,
    justifyContent: 'center',
    alignItems: 'center',
  },
  submitButton: {
    backgroundColor: theme.colors.primary,
    borderRadius: theme.borderRadius.medium,
    paddingVertical: theme.spacing.md,
    alignItems: 'center',
    marginTop: theme.spacing.lg,
    ...theme.shadows.medium,
  },
  submitButtonDisabled: {
    backgroundColor: theme.colors.textMuted,
  },
  submitButtonText: {
    fontSize: theme.typography.fontSize.bodyLarge,
    fontFamily: theme.typography.fontFamily.bold,
    color: theme.colors.background,
  },
});

export default AIPredictionDetailScreen;

/*
 * End of File: AIPredictionDetailScreen.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */
