import React from 'react';
import { View, Text, FlatList, ActivityIndicator, RefreshControl } from 'react-native';
import type { LocalModel } from '../../store/types';
import { createStyles } from './styles';
import { useTheme } from '../../theme/ThemeProvider';

interface EmptyListProps {
  message: string;
  submessage: string;
  colors: {
    text: string;
    border: string;
  };
}

function EmptyList({ message, submessage, colors }: EmptyListProps) {
  const styles = createStyles(colors);
  return (
    <View style={styles.emptyContainer}>
      <Text style={styles.emptyText}>{message}</Text>
      <Text style={styles.emptySubtext}>{submessage}</Text>
    </View>
  );
}

interface ModelsListProps {
  models: LocalModel[];
  isLoading: boolean;
  onRefresh: () => void;
  renderItem: (item: { item: LocalModel }) => React.ReactElement;
}

export default function ModelsList({
  models,
  isLoading,
  onRefresh,
  renderItem,
}: ModelsListProps) {
  const { colors } = useTheme();
  const styles = createStyles(colors);

  return (
    <View style={styles.modelsSection}>
      <View style={styles.modelsHeader}>
        <Text style={styles.sectionTitle}>
          Modèles locaux ({models.length})
        </Text>
      </View>

      {isLoading && models.length === 0 ? (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color={colors.primary} />
          <Text style={styles.loadingText}>Scan en cours...</Text>
        </View>
      ) : (
        <FlatList
          data={models}
          renderItem={renderItem}
          keyExtractor={(item) => item.path}
          ListEmptyComponent={
            <EmptyList
              message="Aucun fichier .gguf trouvé dans ce dossier"
              submessage="Placez vos modèles dans le dossier configuré"
              colors={colors}
            />
          }
          contentContainerStyle={styles.listContent}
          refreshControl={
            <RefreshControl
              refreshing={isLoading}
              onRefresh={onRefresh}
              colors={[colors.primary]}
              tintColor={colors.primary}
            />
          }
        />
      )}
    </View>
  );
}