/*
 * File: CaseQueue.tsx
 * Description: Component to display a list of cases in the queue
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import { Card, InfoCard } from '../../../../shared/src/components/Card';
import { CustomIcon } from '../../../../shared/src/components/Icons';
import { Colors, Spacing, Typography } from '../../../../shared/src/theme';
import { Case } from '../redux/dashboardSlice';

interface CaseQueueProps {
  cases: Case[];
  onSelect: (item: Case) => void;
}

/**
 * CaseQueue - displays a list of cases in the queue
 */
const CaseQueue: React.FC<CaseQueueProps> = ({ cases, onSelect }) => {
  if (!cases.length) {
    return <InfoCard><Text style={styles.empty}>No cases in queue.</Text></InfoCard>;
  }
  return (
    <FlatList
      data={cases}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity onPress={() => onSelect(item)}>
          <Card style={styles.card}>
            <View style={styles.row}>
              <CustomIcon
                name={item.status === 'critical' ? 'alert' : item.status === 'urgent' ? 'alert-outline' : 'check-circle'}
                color={item.status === 'critical' ? Colors.error : item.status === 'urgent' ? Colors.warning : Colors.success}
                size={24}
              />
              <View style={styles.info}>
                <Text style={styles.patient}>{item.patientName}</Text>
                <Text style={styles.desc}>{item.description}</Text>
              </View>
              <Text style={styles.confidence}>{item.aiConfidence}%</Text>
            </View>
          </Card>
        </TouchableOpacity>
      )}
    />
  );
};

const styles = StyleSheet.create({
  card: {
    marginBottom: Spacing.sm,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  info: {
    flex: 1,
    marginLeft: Spacing.sm,
  },
  patient: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.md,
    color: Colors.textPrimary,
  },
  desc: {
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.sm,
    color: Colors.textSecondary,
  },
  confidence: {
    fontFamily: Typography.fontFamily.bold,
    fontSize: Typography.fontSize.md,
    color: Colors.info,
    marginLeft: Spacing.sm,
  },
  empty: {
    textAlign: 'center',
    color: Colors.textMuted,
    fontFamily: Typography.fontFamily.regular,
    fontSize: Typography.fontSize.md,
  },
});

export default CaseQueue;

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