import { FlashList } from "@shopify/flash-list";
import { StyleSheet, Text, View } from "react-native";

import { ConversationListItem } from "@/features/im/components/conversation-list-item";
import type { ConversationItem } from "@/features/im/types/conversation";

type ConversationListProps = {
  data: ConversationItem[];
  isLoading?: boolean;
  onPressItem?: (item: ConversationItem) => void;
};

export function ConversationList({
  data,
  isLoading = false,
  onPressItem,
}: ConversationListProps) {
  if (isLoading) {
    return (
      <View style={styles.emptyContainer}>
        <Text style={styles.emptyTitle}>会话加载中...</Text>
      </View>
    );
  }

  if (data.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <Text style={styles.emptyTitle}>暂无会话</Text>
        <Text style={styles.emptyHint}>试试更换关键字</Text>
      </View>
    );
  }

  return (
    <FlashList
      contentInsetAdjustmentBehavior="automatic"
      contentContainerStyle={styles.contentContainer}
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <ConversationListItem item={item} onPress={onPressItem} />
      )}
      showsVerticalScrollIndicator={false}
    />
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: 28,
    paddingTop: 16,
  },
  emptyContainer: {
    alignItems: "center",
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 24,
  },
  emptyTitle: {
    color: "#666B73",
    fontSize: 17,
    fontWeight: "600",
  },
  emptyHint: {
    color: "#A0A4AA",
    fontSize: 13,
    marginTop: 6,
  },
});