/*
 * File: PatientDetailsScreen.tsx
 * Description: Comprehensive patient details screen with DICOM image viewer
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React, { useEffect, useState, useCallback, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  StatusBar,
  Alert,
  Dimensions,
  Image,
  FlatList,
  RefreshControl,
} from 'react-native';
import { theme } from '../../../theme/theme';
import { useAppDispatch } from '../../../store/hooks';
import Icon from 'react-native-vector-icons/Feather';
import { SafeAreaView } from 'react-native-safe-area-context';

// Import types
import { MedicalCase, PatientDetails, Series } from '../../../shared/types';

// Import components
import { ImageViewer } from '../components';
import { API_CONFIG } from '../../../shared/utils';

// Get screen dimensions
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

// ============================================================================
// INTERFACES
// ============================================================================

interface PatientDetailsScreenProps {
  navigation: any;
  route: {
    params: {
      patientId: string;
      patientName: string;
      medicalCase: MedicalCase;
    };
  };
}

interface ParsedPatientData {
  patientDetails: PatientDetails;
  series: Series[];
}

// ============================================================================
// PATIENT DETAILS SCREEN COMPONENT
// ============================================================================

/**
 * PatientDetailsScreen Component
 * 
 * Purpose: Comprehensive patient details display with DICOM image viewer
 * 
 * Features:
 * - Full patient demographic information
 * - Medical case details and status
 * - DICOM series information
 * - Image gallery with thumbnail previews
 * - Real-time data updates
 * - Emergency actions for critical cases
 * - Medical history and notes
 * - Modern healthcare-focused UI design
 * - Responsive layout for different screen sizes
 */
const PatientDetailsScreen: React.FC<PatientDetailsScreenProps> = ({ navigation, route }) => {
  // ============================================================================
  // STATE MANAGEMENT
  // ============================================================================
  
  const dispatch = useAppDispatch();
  
  // Route parameters
  const { patientId, patientName, medicalCase } = route.params;
  
  // Local state
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
  const [showFullImage, setShowFullImage] = useState(false);
  const [activeTab, setActiveTab] = useState<'overview' | 'images' | 'history'>('overview');

  // ============================================================================
  // DATA PARSING & PROCESSING
  // ============================================================================

  /**
   * Parse Patient Data
   * 
   * Purpose: Safely parse JSON strings from medical case data
   */
  const parsedData: ParsedPatientData = useMemo(() => {
    const parseJsonSafely = (jsonString: string | object) => {
      if (typeof jsonString === 'object') {
        return jsonString;
      }
      if (typeof jsonString === 'string') {
        try {
          return JSON.parse(jsonString);
        } catch (error) {
          console.warn('Failed to parse JSON:', error);
          return {};
        }
      }
      return {};
    };

    const patientDetails = parseJsonSafely(medicalCase.patientdetails);
    const series = parseJsonSafely(patientDetails.series);

    return {
      patientDetails: patientDetails.patientdetails || patientDetails,
      series: Array.isArray(series) ? series : [],
    };
  }, [medicalCase]);

  // ============================================================================
  // LIFECYCLE METHODS
  // ============================================================================

  /**
   * Component Mount Effect
   * 
   * Purpose: Initialize screen and set up navigation
   */
  useEffect(() => {
    // Set navigation title
    navigation.setOptions({
      title: patientName || 'Patient Details',
      headerShown: false,
    });
  }, [navigation, patientName]);

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

  /**
   * Handle Refresh
   * 
   * Purpose: Pull-to-refresh functionality
   */
  const handleRefresh = useCallback(async () => {
    setIsRefreshing(true);
    // TODO: Implement refresh logic
    setTimeout(() => {
      setIsRefreshing(false);
    }, 1000);
  }, []);

  /**
   * Handle Image Press
   * 
   * Purpose: Open full-screen image viewer for selected series
   * 
   * @param seriesIndex - Index of the series
   */
  const handleImagePress = useCallback((seriesIndex: number) => {
    setSelectedImageIndex(seriesIndex);
    setShowFullImage(true);
  }, []);

  /**
   * Handle Close Image Viewer
   * 
   * Purpose: Close full-screen image viewer
   */
  const handleCloseImageViewer = useCallback(() => {
    setShowFullImage(false);
  }, []);

  /**
   * Get All Images from Series
   * 
   * Purpose: Extract image paths from DICOM series pngpath
   */
  const getAllImages = useCallback(() => {
    const images: string[] = [];
    parsedData.series.forEach(series => {
      // Use pngpath for actual image display
      if (series.pngpath && typeof series.pngpath === 'string') {
        images.push(series.pngpath);
      }
    });
    return images;
  }, [parsedData.series]);

  /**
   * Get Series Info for Image Index
   * 
   * Purpose: Get series information for a given image index
   */
  const getSeriesInfoForImage = useCallback((imageIndex: number) => {
    if (imageIndex >= 0 && imageIndex < parsedData.series.length) {
      const series = parsedData.series[imageIndex];
      return {
        seriesNum: series.SeriesNum || '1',
        seriesDesc: series.SerDes || 'Unnamed Series',
        imageInSeries: 1,
        totalInSeries: 1
      };
    }
    return {
      seriesNum: '1',
      seriesDesc: 'Unknown Series',
      imageInSeries: 1,
      totalInSeries: 1
    };
  }, [parsedData.series]);

  /**
   * Handle Emergency Action
   * 
   * Purpose: Handle emergency actions for critical patients
   */
  const handleEmergencyAction = useCallback(() => {
    Alert.alert(
      'Emergency Action Required',
      `Patient ${parsedData.patientDetails.Name} requires immediate attention`,
      [
        {
          text: 'Call Code Blue',
          style: 'destructive',
          onPress: () => {
            // TODO: Implement emergency code calling
            Alert.alert('Emergency', 'Code Blue activated');
          },
        },
        {
          text: 'Alert Team',
          onPress: () => {
            // TODO: Implement team alerting
            Alert.alert('Alert', 'Team notified');
          },
        },
        {
          text: 'Cancel',
          style: 'cancel',
        },
      ]
    );
  }, [parsedData.patientDetails.Name]);

  /**
   * Handle Back Navigation
   * 
   * Purpose: Navigate back to previous screen
   */
  const handleBackPress = useCallback(() => {
    navigation.goBack();
  }, [navigation]);

  // ============================================================================
  // RENDER HELPERS
  // ============================================================================

  /**
   * Render Patient Header
   * 
   * Purpose: Render patient identification and status section
   */
  const renderPatientHeader = () => (
    <View style={styles.patientHeader}>
      <View style={styles.patientInfo}>
        <View style={styles.patientAvatar}>
          <Icon name="user" size={32} color={theme.colors.primary} />
        </View>
        <View style={styles.patientDetails}>
          <Text style={styles.patientName}>
            {parsedData.patientDetails.Name || 'Unknown Patient'}
          </Text>
          <Text style={styles.patientId}>
            MRN: {parsedData.patientDetails.PatID || 'N/A'}
          </Text>
          <View style={styles.patientMeta}>
            <Text style={styles.patientMetaText}>
              {parsedData.patientDetails.PatAge || 'N/A'} • {parsedData.patientDetails.PatSex || 'N/A'}
            </Text>
            <View style={[
              styles.statusBadge,
              { backgroundColor: getStatusColor(medicalCase.type) }
            ]}>
              <Text style={styles.statusText}>{medicalCase.type}</Text>
            </View>
          </View>
        </View>
      </View>
      
      {medicalCase.type === 'Critical' && (
        <TouchableOpacity
          style={styles.emergencyButton}
          onPress={handleEmergencyAction}
        >
          <Icon name="alert-triangle" size={20} color={theme.colors.background} />
          <Text style={styles.emergencyButtonText}>EMERGENCY</Text>
        </TouchableOpacity>
      )}
    </View>
  );

  /**
   * Render Tab Navigation
   * 
   * Purpose: Render tab navigation for different sections
   */
  const renderTabNavigation = () => (
    <View style={styles.tabContainer}>
      {[
        { key: 'overview', label: 'Overview', icon: 'info' },
                 { key: 'images', label: 'Images', icon: 'image', count: parsedData.series.length },
        { key: 'history', label: 'History', icon: 'clock' },
      ].map((tab) => (
        <TouchableOpacity
          key={tab.key}
          style={[
            styles.tabButton,
            activeTab === tab.key && styles.activeTabButton
          ]}
          onPress={() => setActiveTab(tab.key as any)}
        >
          <Icon 
            name={tab.icon as any} 
            size={18} 
            color={activeTab === tab.key ? theme.colors.primary : theme.colors.textSecondary} 
          />
          <Text style={[
            styles.tabLabel,
            activeTab === tab.key && styles.activeTabLabel
          ]}>
            {tab.label}
          </Text>
          {tab.count !== undefined && (
            <View style={styles.tabCount}>
              <Text style={styles.tabCountText}>{tab.count}</Text>
            </View>
          )}
        </TouchableOpacity>
      ))}
    </View>
  );

  /**
   * Render Overview Tab
   * 
   * Purpose: Render patient overview information
   */
  const renderOverviewTab = () => (
    <View style={styles.tabContent}>
      {/* Medical Case Information */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Case Information</Text>
        <View style={styles.infoGrid}>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Case ID</Text>
            <Text style={styles.infoValue}>{medicalCase.id}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Type</Text>
            <Text style={styles.infoValue}>{medicalCase.type}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Created</Text>
            <Text style={styles.infoValue}>
              {new Date(medicalCase.created_at).toLocaleDateString()}
            </Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Updated</Text>
            <Text style={styles.infoValue}>
              {new Date(medicalCase.updated_at).toLocaleDateString()}
            </Text>
          </View>
        </View>
      </View>

      {/* Patient Details */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Patient Details</Text>
        <View style={styles.infoGrid}>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Name</Text>
            <Text style={styles.infoValue}>{parsedData.patientDetails.Name || 'N/A'}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Age</Text>
            <Text style={styles.infoValue}>{parsedData.patientDetails.PatAge || 'N/A'}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Sex</Text>
            <Text style={styles.infoValue}>{parsedData.patientDetails.PatSex || 'N/A'}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Status</Text>
            <Text style={styles.infoValue}>{parsedData.patientDetails.Status || 'N/A'}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Institution</Text>
            <Text style={styles.infoValue}>{parsedData.patientDetails.InstName || 'N/A'}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>Modality</Text>
            <Text style={styles.infoValue}>{parsedData.patientDetails.Modality || 'N/A'}</Text>
          </View>
        </View>
      </View>

      {/* Series Information */}
      {parsedData.series.length > 0 && (
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>Imaging Series</Text>
          <View style={styles.seriesInfo}>
            <Text style={styles.seriesText}>
              {parsedData.series.length} series available
            </Text>
                         <Text style={styles.seriesText}>
               Total series: {parsedData.series.length}
             </Text>
          </View>
        </View>
      )}
    </View>
  );

  /**
   * Render Images Tab
   * 
   * Purpose: Render DICOM image gallery
   */
  const renderImagesTab = () => (
    <View style={styles.tabContent}>
      {parsedData.series.length === 0 ? (
        <View style={styles.emptyState}>
          <Icon name="image" size={48} color={theme.colors.textMuted} />
          <Text style={styles.emptyStateTitle}>No Images Available</Text>
          <Text style={styles.emptyStateSubtitle}>
            No DICOM images are currently available for this patient
          </Text>
        </View>
      ) : (
        <View style={styles.imagesContainer}>
          <Text style={styles.sectionTitle}>DICOM Images</Text>
          
          {parsedData.series.map((series, seriesIndex) => (
            <View key={seriesIndex} style={styles.seriesContainer}>
                             <View style={styles.seriesHeader}>
                 <Text style={styles.seriesTitle}>
                   Series {series.SeriesNum}: {series.SerDes || 'Unnamed Series'}
                 </Text>
                 <Text style={styles.seriesMeta}>
                   {series.ImgTotalinSeries || '0'} images in Path • {series.ViePos || 'Unknown position'}
                 </Text>
               </View>
               
               {/* Series Details */}
               <View style={styles.seriesDetails}>
                 <View style={styles.seriesDetailItem}>
                   <Text style={styles.seriesDetailLabel}>Series Number:</Text>
                   <Text style={styles.seriesDetailValue}>
                     {series.SeriesNum || 'N/A'}
                   </Text>
                 </View>
                 <View style={styles.seriesDetailItem}>
                   <Text style={styles.seriesDetailLabel}>Total Images:</Text>
                   <Text style={styles.seriesDetailValue}>
                     {series.ImgTotalinSeries || '0'}
                   </Text>
                 </View>
                 <View style={styles.seriesDetailItem}>
                   <Text style={styles.seriesDetailLabel}>Description:</Text>
                   <Text style={styles.seriesDetailValue} numberOfLines={2}>
                     {series.SerDes || 'N/A'}
                   </Text>
                 </View>
                 {series.Path && Array.isArray(series.Path) && (
                   <View style={styles.seriesDetailItem}>
                     <Text style={styles.seriesDetailLabel}>Path Array:</Text>
                     <Text style={styles.seriesDetailValue} numberOfLines={2}>
                       {series.Path.length} URLs available
                     </Text>
                   </View>
                 )}
                 {series.ViePos && (
                   <View style={styles.seriesDetailItem}>
                     <Text style={styles.seriesDetailLabel}>View Position:</Text>
                     <Text style={styles.seriesDetailValue}>
                       {series.ViePos}
                     </Text>
                   </View>
                 )}
               </View>
               
               {/* Series Image */}
               {series.pngpath ? (
                 <TouchableOpacity
                   style={styles.imageThumbnail}
                   onPress={() => handleImagePress(seriesIndex)}
                 >
                   <Image
                     source={{ uri: API_CONFIG.DICOM_BASE_URL + series.pngpath }}
                     style={styles.thumbnailImage}
                     resizeMode="cover"
                   />
                   <View style={styles.imageOverlay}>
                     <Text style={styles.imageNumber}>Series Image</Text>
                   </View>
                 </TouchableOpacity>
               ) : (
                 <View style={styles.noImagePlaceholder}>
                   <Icon name="image" size={48} color={theme.colors.textMuted} />
                   <Text style={styles.noImageText}>No Image Available</Text>
                 </View>
               )}
            </View>
          ))}
        </View>
      )}
    </View>
  );

  /**
   * Render History Tab
   * 
   * Purpose: Render patient medical history
   */
  const renderHistoryTab = () => (
    <View style={styles.tabContent}>
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Medical History</Text>
        <View style={styles.historyItem}>
          <Icon name="calendar" size={16} color={theme.colors.textSecondary} />
          <Text style={styles.historyText}>
            Case created on {new Date(medicalCase.created_at).toLocaleDateString()}
          </Text>
        </View>
        <View style={styles.historyItem}>
          <Icon name="clock" size={16} color={theme.colors.textSecondary} />
          <Text style={styles.historyText}>
            Last updated on {new Date(medicalCase.updated_at).toLocaleDateString()}
          </Text>
        </View>
        <View style={styles.historyItem}>
          <Icon name="activity" size={16} color={theme.colors.textSecondary} />
          <Text style={styles.historyText}>
            Status: {medicalCase.type} case
          </Text>
        </View>
      </View>

      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Notes</Text>
        <Text style={styles.notesText}>
          No additional notes available for this patient case.
        </Text>
      </View>
    </View>
  );

  /**
   * Get Status Color
   * 
   * Purpose: Get appropriate color for patient status
   * 
   * @param status - Patient status
   */
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Critical':
        return theme.colors.error;
      case 'Emergency':
        return theme.colors.warning;
      case 'Routine':
        return theme.colors.success;
      default:
        return theme.colors.info;
    }
  };

  // ============================================================================
  // MAIN RENDER
  // ============================================================================

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor={theme.colors.background} />
      
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={handleBackPress}
        >
          <Icon name="arrow-left" size={24} color={theme.colors.textPrimary} />
        </TouchableOpacity>
        <View style={styles.headerTitle}>
          <Text style={styles.headerTitleText}>Patient Details</Text>
          <Text style={styles.headerSubtitleText}>Emergency Department</Text>
        </View>
        <TouchableOpacity
          style={styles.refreshButton}
          onPress={handleRefresh}
          disabled={isRefreshing}
        >
          <Icon 
            name="refresh-cw" 
            size={20} 
            color={isRefreshing ? theme.colors.textMuted : theme.colors.primary} 
          />
        </TouchableOpacity>
      </View>

      {/* Patient Header */}
      {renderPatientHeader()}

      {/* Tab Navigation */}
      {renderTabNavigation()}

      {/* Tab Content */}
      <ScrollView
        style={styles.content}
        showsVerticalScrollIndicator={false}
        refreshControl={
          <RefreshControl
            refreshing={isRefreshing}
            onRefresh={handleRefresh}
            colors={[theme.colors.primary]}
            tintColor={theme.colors.primary}
          />
        }
      >
        {activeTab === 'overview' && renderOverviewTab()}
        {activeTab === 'images' && renderImagesTab()}
        {activeTab === 'history' && renderHistoryTab()}
      </ScrollView>

      {/* Full-Screen Image Viewer */}
      <View style={{position:'absolute',top:0,left:0,right:0,bottom:0}}>
      <ImageViewer
        visible={showFullImage}
        images={getAllImages()}
        initialIndex={selectedImageIndex}
        onClose={handleCloseImageViewer}
        patientName={parsedData.patientDetails.Name || 'Unknown Patient'}
        seriesInfo={`Series ${getSeriesInfoForImage(selectedImageIndex).seriesNum}: ${getSeriesInfoForImage(selectedImageIndex).seriesDesc}`}
      />
      </View>
    </SafeAreaView>
  );
};

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.colors.background,
  },
  
  // Header Styles
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    backgroundColor: theme.colors.background,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
  backButton: {
    padding: theme.spacing.sm,
    marginRight: theme.spacing.sm,
  },
  headerTitle: {
    flex: 1,
    alignItems: 'center',
  },
  headerTitleText: {
    fontSize: 18,
    fontWeight: 'bold',
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.bold,
  },
  headerSubtitleText: {
    fontSize: 12,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
  },
  refreshButton: {
    padding: theme.spacing.sm,
    marginLeft: theme.spacing.sm,
  },
  
  // Patient Header Styles
  patientHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.lg,
    backgroundColor: theme.colors.background,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
  patientInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  patientAvatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: theme.colors.backgroundAlt,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: theme.spacing.md,
  },
  patientDetails: {
    flex: 1,
  },
  patientName: {
    fontSize: 20,
    fontWeight: 'bold',
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.bold,
    marginBottom: 4,
  },
  patientId: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.medium,
    marginBottom: 8,
  },
  patientMeta: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  patientMetaText: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
  },
  statusBadge: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
  },
  statusText: {
    fontSize: 12,
    fontWeight: 'bold',
    color: theme.colors.background,
    textTransform: 'uppercase',
  },
  emergencyButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: theme.colors.error,
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 8,
    shadowColor: theme.colors.error,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 4,
  },
  emergencyButtonText: {
    color: theme.colors.background,
    fontSize: 12,
    fontWeight: 'bold',
    marginLeft: 8,
    textTransform: 'uppercase',
  },
  
  // Tab Navigation Styles
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: theme.colors.background,
    borderBottomWidth: 1,
    borderBottomColor: theme.colors.border,
  },
  tabButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: theme.spacing.md,
    paddingHorizontal: theme.spacing.sm,
    position: 'relative',
  },
  activeTabButton: {
    borderBottomWidth: 2,
    borderBottomColor: theme.colors.primary,
  },
  tabLabel: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.medium,
    marginLeft: 8,
  },
  activeTabLabel: {
    color: theme.colors.primary,
    fontFamily: theme.typography.fontFamily.bold,
  },
  tabCount: {
    backgroundColor: theme.colors.primary,
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
    marginLeft: 8,
  },
  tabCountText: {
    color: theme.colors.background,
    fontSize: 10,
    fontWeight: 'bold',
  },
  
  // Content Styles
  content: {
    flex: 1,
  },
  tabContent: {
    padding: theme.spacing.md,
  },
  
  // Section Styles
  section: {
    marginBottom: theme.spacing.lg,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.bold,
    marginBottom: theme.spacing.md,
  },
  
  // Info Grid Styles
  infoGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  infoItem: {
    width: '48%',
    marginBottom: theme.spacing.md,
  },
  infoLabel: {
    fontSize: 12,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.medium,
    marginBottom: 4,
    textTransform: 'uppercase',
  },
  infoValue: {
    fontSize: 14,
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.regular,
  },
  
  // Series Info Styles
  seriesInfo: {
    backgroundColor: theme.colors.backgroundAlt,
    padding: theme.spacing.md,
    borderRadius: 8,
  },
  seriesText: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
    marginBottom: 4,
  },
  
  // Images Styles
  imagesContainer: {
    marginTop: theme.spacing.sm,
  },
  seriesContainer: {
    marginBottom: theme.spacing.lg,
  },
  seriesHeader: {
    marginBottom: theme.spacing.md,
  },
  seriesTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.bold,
    marginBottom: 4,
  },
  seriesMeta: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
  },
  imageList: {
    paddingRight: theme.spacing.md,
  },
  imageThumbnail: {
    width: 120,
    height: 120,
    borderRadius: 8,
    marginRight: theme.spacing.sm,
    position: 'relative',
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  thumbnailImage: {
    width: '100%',
    height: '100%',
    borderRadius: 8,
  },
  imageOverlay: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingVertical: 4,
    paddingHorizontal: 8,
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
  },
  imageNumber: {
    color: theme.colors.background,
    fontSize: 10,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  
  // History Styles
  historyItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: theme.spacing.sm,
  },
  historyText: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
    marginLeft: theme.spacing.sm,
  },
  notesText: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
    lineHeight: 20,
  },
  
  // Empty State Styles
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: theme.spacing.xl,
  },
  emptyStateTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.bold,
    marginTop: theme.spacing.md,
    marginBottom: theme.spacing.sm,
  },
  emptyStateSubtitle: {
    fontSize: 14,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.regular,
    textAlign: 'center',
    lineHeight: 20,
  },
  
  // No Image Placeholder Styles
  noImagePlaceholder: {
    width: 120,
    height: 120,
    borderRadius: 8,
    marginRight: theme.spacing.sm,
    backgroundColor: theme.colors.backgroundAlt,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderStyle: 'dashed',
  },
  noImageText: {
    fontSize: 10,
    color: theme.colors.textMuted,
    fontFamily: theme.typography.fontFamily.regular,
    textAlign: 'center',
    marginTop: 4,
  },
  
  // Series Details Styles
  seriesDetails: {
    backgroundColor: theme.colors.backgroundAlt,
    padding: theme.spacing.sm,
    borderRadius: 8,
    marginBottom: theme.spacing.md,
  },
  seriesDetailItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: theme.spacing.xs,
  },
  seriesDetailLabel: {
    fontSize: 12,
    color: theme.colors.textSecondary,
    fontFamily: theme.typography.fontFamily.medium,
    flex: 1,
  },
  seriesDetailValue: {
    fontSize: 12,
    color: theme.colors.textPrimary,
    fontFamily: theme.typography.fontFamily.regular,
    flex: 2,
    textAlign: 'right',
  },
});

export default PatientDetailsScreen;

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