asios/app/(tabs)/index.tsx

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

import { Banner } from '@/components/home/Banner';
import { GoodsList } from '@/components/home/GoodsList';
import { IPFilter } from '@/components/home/IPFilter';
import { QuickEntry } from '@/components/home/QuickEntry';
import { SearchBar } from '@/components/home/SearchBar';
import { Images } from '@/constants/images';

// API 服务
import { getIPList, IPItem } from '@/services/award';
import { BannerItem, getPageConfig, TabItem } from '@/services/base';
import { getGoodsList, GoodsItem, GoodsListParams } from '@/services/mall';

export default function HomeScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const [refreshing, setRefreshing] = useState(false);
  const [loading, setLoading] = useState(true);

  // 数据状态
  const [goods, setGoods] = useState<GoodsItem[]>([]);
  const [banners, setBanners] = useState<BannerItem[]>([]);
  const [tabs, setTabs] = useState<TabItem[]>([]);
  const [ipList, setIpList] = useState<IPItem[]>([]);
  const [ipIndex, setIpIndex] = useState(0);

  // 搜索参数
  const [searchParams, setSearchParams] = useState<GoodsListParams>({
    current: 1,
    size: 15,
    keyword: '',
    worksId: '',
  });

  // 加载商品列表
  const loadGoods = useCallback(async (params: GoodsListParams, append = false) => {
    try {
      const data = await getGoodsList(params);
      if (append) {
        setGoods((prev) => [...prev, ...data]);
      } else {
        setGoods(data);
      }
    } catch (error) {
      console.error('加载商品失败:', error);
    }
  }, []);

  // 加载 IP 列表
  const loadIPList = useCallback(async () => {
    try {
      const data = await getIPList();
      const allIP: IPItem = { id: '', name: '所有IP' };
      setIpList([allIP, ...data.filter((item) => item !== null)]);
    } catch (error) {
      console.error('加载IP列表失败:', error);
    }
  }, []);

  // 加载页面配置
  const loadPageConfig = useCallback(async () => {
    try {
      const bannerConfig = await getPageConfig('index_banner');
      if (bannerConfig?.components?.[0]?.elements) {
        setBanners(bannerConfig.components[0].elements);
      }

      const iconConfig = await getPageConfig('index_icon');
      if (iconConfig?.components?.[0]?.elements) {
        setTabs(iconConfig.components[0].elements);
      }
    } catch (error) {
      console.error('加载页面配置失败:', error);
    }
  }, []);

  // 初始化数据
  const initData = useCallback(async () => {
    setLoading(true);
    await Promise.all([loadGoods(searchParams), loadIPList(), loadPageConfig()]);
    setLoading(false);
  }, []);

  useEffect(() => {
    initData();
  }, []);

  // 下拉刷新
  const onRefresh = async () => {
    setRefreshing(true);
    const newParams = { ...searchParams, current: 1 };
    setSearchParams(newParams);
    await Promise.all([loadGoods(newParams), loadIPList(), loadPageConfig()]);
    setRefreshing(false);
  };

  // 搜索
  const handleSearch = async (keyword: string) => {
    const newParams = { ...searchParams, keyword, current: 1 };
    setSearchParams(newParams);
    await loadGoods(newParams);
  };

  // Banner 点击
  const handleBannerPress = (item: BannerItem) => {
    console.log('Banner pressed:', item);
  };

  // 功能入口点击
  const handleQuickEntryPress = (item: TabItem) => {
    console.log('Quick entry pressed:', item);
  };

  // IP 筛选
  const handleIPSelect = async (item: IPItem, index: number) => {
    setIpIndex(index);
    const newParams = { ...searchParams, worksId: item.id, current: 1 };
    setSearchParams(newParams);
    await loadGoods(newParams);
  };

  // 商品点击
  const handleGoodsPress = (item: GoodsItem) => {
    router.push(`/product/${item.id}` as any);
  };

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#fff" />
        <Text style={styles.loadingText}>加载中...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <ImageBackground
        source={{ uri: Images.common.indexBg }}
        style={styles.background}
        resizeMode="cover"
      >
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={{ paddingTop: insets.top + 10 }}
          showsVerticalScrollIndicator={false}
          refreshControl={
            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#fff" />
          }
        >
          {/* 搜索栏 */}
          <SearchBar onSearch={handleSearch} />

          {/* Banner 轮播 */}
          {banners.length > 0 && <Banner data={banners} onPress={handleBannerPress} />}

          {/* 功能入口 */}
          <View style={styles.section}>
            {tabs.length > 0 && <QuickEntry data={tabs} onPress={handleQuickEntryPress} />}

            {/* IP 分类筛选 */}
            {ipList.length > 0 && (
              <IPFilter data={ipList} activeIndex={ipIndex} onSelect={handleIPSelect} />
            )}
          </View>

          {/* 商品列表 */}
          <GoodsList data={goods} onItemPress={handleGoodsPress} />
        </ScrollView>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  background: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  section: {
    paddingHorizontal: 10,
  },
  loadingContainer: {
    flex: 1,
    backgroundColor: '#1a1a2e',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    color: '#fff',
    marginTop: 10,
    fontSize: 14,
  },
});