import ConversationsSvg from '@/assets/icons/svg/conversations.svg';
import MoreArrowSvg from '@/assets/icons/svg/moreArrow.svg';
import PointsSvg from '@/assets/icons/svg/points.svg';
import StoriesSvg from '@/assets/icons/svg/stories.svg';
import UsedStorageSvg from '@/assets/icons/svg/usedStorage.svg';
import AskNavbar from '@/components/layout/ask';
import AlbumComponent from '@/components/owner/album';
import CategoryComponent from '@/components/owner/category';
import CountComponent from '@/components/owner/count';
import CreateCountComponent from '@/components/owner/createCount';
import Ranking from '@/components/owner/ranking';
import ResourceComponent from '@/components/owner/resource';
import SettingModal from '@/components/owner/setting';
import UserInfo from '@/components/owner/userName';
import { formatDuration } from '@/components/utils/time';
import { checkAuthStatus } from '@/lib/auth';
import { fetchApi } from '@/lib/server-api-util';
import { CountData, UserInfoDetails } from '@/types/user';
import { useRouter } from 'expo-router';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FlatList, ScrollView, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function OwnerPage() {
    const insets = useSafeAreaInsets();
    const { t } = useTranslation();
    const router = useRouter();

    useEffect(() => {
        const checkAuth = async () => {
            const authStatus = await checkAuthStatus(router);
            if (!authStatus) {
                router.push('/login');
            }
        };
        checkAuth();
    }, [router]);

    // 设置弹窗
    const [modalVisible, setModalVisible] = useState(false);

    // 数据统计
    const [countData, setCountData] = useState<CountData>({} as CountData);

    // 获取数量统计 --- 需要轮询
    const getCountData = () => {
        fetchApi("/material/statistics").then((res) => {
            setCountData(res as CountData);
        });

    }

    // 获取用户信息
    const [userInfoDetails, setUserInfoDetails] = useState<UserInfoDetails>({} as UserInfoDetails);
    const getUserInfo = () => {
        fetchApi("/membership/personal-center-info").then((res) => {
            setUserInfoDetails(res as UserInfoDetails);
        })
    }
    // 设计轮询获取数量统计
    // useEffect(() => {
    //     const interval = setInterval(() => {
    //         getCountData();
    //     }, 1000);
    //     return () => clearInterval(interval);
    // }, []);

    // 初始化获取用户信息
    useEffect(() => {
        getUserInfo();
        getCountData();
    }, []);

    return (
        <View style={[styles.container, { paddingTop: insets.top }]}>
            <FlatList
                data={[]} // 空数据，因为我们只需要渲染一次
                renderItem={null} // 不需要渲染项目
                contentContainerStyle={styles.contentContainer}
                showsVerticalScrollIndicator={false}
                ListHeaderComponent={
                    <View style={{ gap: 16 }}>
                        {/* 用户信息 */}
                        <UserInfo userInfo={userInfoDetails} />

                        {/* 设置栏 */}
                        <AlbumComponent setModalVisible={setModalVisible} />

                        {/* 资源数据 */}
                        <View style={styles.resourceContainer}>
                            <View style={{ gap: 16, width: "80%" }}>
                                <ResourceComponent title={t("generalSetting.usedStorage", { ns: "personal" })} data={{ all: userInfoDetails.total_bytes, used: countData.used_bytes }} icon={<UsedStorageSvg />} isFormatBytes={true} />
                                <ResourceComponent title={t("generalSetting.remainingPoints", { ns: "personal" })} data={{ all: userInfoDetails.total_points, used: userInfoDetails.remain_points }} icon={<PointsSvg />} />
                            </View>
                            <View style={{ alignItems: 'flex-end', flex: 1 }}>
                                <MoreArrowSvg />
                            </View>
                        </View>
                        {/* 数据统计 */}
                        <CountComponent
                            data={[{ title: t("generalSetting.totalVideo", { ns: "personal" }), number: countData?.counter?.total_count?.video_count || 0 }, { title: t("generalSetting.totalPhoto", { ns: "personal" }), number: countData?.counter?.total_count?.photo_count || 0 }, { title: t("generalSetting.live", { ns: "personal" }), number: countData?.counter?.total_count?.live_count || 0 }, { title: t("generalSetting.videoLength", { ns: "personal" }), number: formatDuration(countData?.counter?.total_count?.video_length || 0) }]}
                        />

                        {/* 分类 */}
                        <View style={{ height: 145 }}>
                            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 16 }} >
                                {countData?.counter?.category_count && Object.entries(countData?.counter?.category_count).map(([key, value], index) => {
                                    return (
                                        <CategoryComponent
                                            key={index}
                                            title={key}
                                            data={[{ title: 'Video', number: value.video_count }, { title: 'Photo', number: value.photo_count }, { title: 'Length', number: formatDuration(value.video_length || 0) }]}
                                            bgSvg={value.cover_url}
                                            style={{ aspectRatio: 1, flex: 1 }}
                                        />
                                    )
                                })}
                            </ScrollView>
                        </View>

                        {/* 作品数据 */}
                        <View className='flex flex-row justify-between gap-[1rem]'>
                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg />} number={userInfoDetails.stories_count} />
                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg />} number={userInfoDetails.conversations_count} />
                        </View>

                        {/* 排行榜 */}
                        <Ranking data={userInfoDetails.title_rankings} />
                    </View>
                }
            />
            {/* 设置弹窗 */}
            <SettingModal modalVisible={modalVisible} setModalVisible={setModalVisible} userInfo={userInfoDetails.user_info} />

            {/* 导航栏 */}
            <AskNavbar />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        paddingBottom: 86,
    },
    contentContainer: {
        paddingHorizontal: 16,
    },
    resourceContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 16,
        backgroundColor: "#FAF9F6",
        padding: 16,
        borderRadius: 18,
        paddingTop: 20
    },
    userInfo: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 16,
    },
    medal: {
        marginLeft: 16,
    },
    backButton: {
        padding: 4,
    },
    headerTitle: {
        fontSize: 18,
        fontWeight: '600',
        color: '#333',
    },
    content: {
        flex: 1,
    },
    profileSection: {
        backgroundColor: '#fff',
        padding: 20,
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    avatarContainer: {
        marginRight: 16,
    },
    avatar: {
        width: 70,
        height: 70,
        borderRadius: 35,
        borderWidth: 2,
        borderColor: '#FFD38D',
    },
    profileInfo: {
        flex: 1,
    },
    userName: {
        fontSize: 18,
        fontWeight: '600',
        color: '#333',
        marginBottom: 4,
    },
    userPhone: {
        fontSize: 14,
        color: '#666',
    },
    editButton: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 8,
        borderWidth: 1,
        borderColor: '#eee',
        borderRadius: 15,
    },
    editButtonText: {
        marginLeft: 4,
        color: '#666',
        fontSize: 14,
    },
    menuContainer: {
        backgroundColor: '#fff',
        paddingHorizontal: 16,
    },
    menuItem: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#f5f5f5',
    },
    menuItemText: {
        flex: 1,
        marginLeft: 12,
        fontSize: 16,
        color: '#333',
    },
    arrowIcon: {
        marginLeft: 'auto',
    },
});