import { useRouter } from 'expo-router';
import React, { useCallback, useEffect, useState } from 'react';
import {
    ActivityIndicator,
    FlatList,
    RefreshControl,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { getMessageList } from '@/services/base';

interface MessageItem {
  id: string;
  title: string;
  content: string;
  createTime: string;
  type?: string;
}

export default function MessageScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  
  const [messages, setMessages] = useState<MessageItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [pageNum, setPageNum] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const pageSize = 10;

  const loadData = useCallback(async (page: number, isRefresh = false) => {
    if (loading && !isRefresh) return;
    
    try {
      if (isRefresh) {
        setRefreshing(true);
      } else {
        setLoading(true);
      }

      const res = await getMessageList(page, pageSize);
      const records = res?.records || [];
      
      if (isRefresh) {
        setMessages(records);
      } else {
        setMessages(prev => [...prev, ...records]);
      }
      
      setHasMore(records.length >= pageSize);
      setPageNum(page);
    } catch (error) {
      console.error('获取消息失败:', error);
    } finally {
      setLoading(false);
      setRefreshing(false);
    }
  }, [loading]);

  useEffect(() => {
    loadData(1, true);
  }, []);

  const handleRefresh = () => {
    loadData(1, true);
  };

  const handleLoadMore = () => {
    if (hasMore && !loading) {
      loadData(pageNum + 1);
    }
  };

  const handleBack = () => {
    router.back();
  };

  const renderItem = ({ item }: { item: MessageItem }) => (
    <View style={styles.cell}>
      <View style={styles.cellHeader}>
        <View style={styles.icon}>
          <Text style={styles.iconText}>🔔</Text>
        </View>
        <Text style={styles.title} numberOfLines={1}>{item.title}</Text>
        <Text style={styles.time}>{item.createTime}</Text>
      </View>
      <Text style={styles.content}>{item.content}</Text>
    </View>
  );

  const renderEmpty = () => (
    <View style={styles.emptyBox}>
      <Text style={styles.emptyText}>暂无消息</Text>
    </View>
  );

  const renderFooter = () => {
    if (!hasMore && messages.length > 0) {
      return (
        <View style={styles.footer}>
          <Text style={styles.footerText}>没有更多了</Text>
        </View>
      );
    }
    if (loading && messages.length > 0) {
      return (
        <View style={styles.footer}>
          <ActivityIndicator size="small" color="#999" />
        </View>
      );
    }
    return null;
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      
      {/* 顶部导航 */}
      <View style={[styles.header, { paddingTop: insets.top }]}>
        <TouchableOpacity style={styles.backBtn} onPress={handleBack}>
          <Text style={styles.backIcon}>‹</Text>
        </TouchableOpacity>
        <Text style={styles.headerTitle}>消息</Text>
        <View style={styles.placeholder} />
      </View>

      <FlatList
        data={messages}
        renderItem={renderItem}
        keyExtractor={(item, index) => item.id || String(index)}
        contentContainerStyle={[
          styles.listContent,
          messages.length === 0 && styles.emptyList
        ]}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={handleRefresh}
            colors={['#FC7D2E']}
            tintColor="#FC7D2E"
          />
        }
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.2}
        ListEmptyComponent={!loading ? renderEmpty : null}
        ListFooterComponent={renderFooter}
      />
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#1a1a2e',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 10,
    height: 80,
    backgroundColor: 'transparent',
  },
  backBtn: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backIcon: {
    fontSize: 32,
    color: '#fff',
    fontWeight: 'bold',
  },
  headerTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#fff',
  },
  placeholder: {
    width: 40,
  },
  listContent: {
    paddingHorizontal: 14,
    paddingBottom: 30,
  },
  emptyList: {
    flex: 1,
  },
  cell: {
    backgroundColor: '#fff',
    borderRadius: 10,
    padding: 15,
    marginTop: 10,
  },
  cellHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: '#333',
    justifyContent: 'center',
    alignItems: 'center',
  },
  iconText: {
    fontSize: 10,
  },
  title: {
    flex: 1,
    fontSize: 14,
    fontWeight: 'bold',
    color: '#333',
    marginLeft: 10,
  },
  time: {
    fontSize: 12,
    color: '#999',
  },
  content: {
    fontSize: 14,
    color: '#666',
    marginTop: 8,
    lineHeight: 20,
  },
  emptyBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 200,
  },
  emptyText: {
    fontSize: 14,
    color: '#999',
  },
  footer: {
    paddingVertical: 20,
    alignItems: 'center',
  },
  footerText: {
    fontSize: 12,
    color: '#999',
  },
});