'use client';

import React, { useEffect, useState } from 'react';
import { Box, Tabs, Tab, Card, CardMedia, CardContent, Typography, Button, Chip, Avatar, Stack } from '@mui/material';
import { useMyNavigation } from '@/hooks/useMyNavigation';
import Loader from '@/components/common/Loader';
import useMainFetch from '@/hooks/useMainFetch';
import { IUserData } from '@/app/[locale]/(views)/profile/components/IAboutUser';
import { ColumnData, MyTable } from '@/components/common/MyTable';
import BasePagination from '@/components/ui-kit/BasePagination';
import { DEFAULT_PAGE_SIZE } from '@/helpers/constants';
import { PartyStatusList } from '@/data/party/party.model';
import { useMyTranslation } from '@/hooks/useMyTranslation';

interface IProduct {
    id: string;
    partyName: string;
    boxName: string;
    cargoId: string;
    trekId: string;
    name: string;
    amount: number;
    weight: number;
    price: number;
    totalPrice: number;
    status: string;
    hasImage: boolean;
    imageUrl: string;
    packetName: string;
}

interface IProductData {
    data: {
        data: IProduct[];
        totalPages: number;
        totalElements: number;
    };
}

export default function ProfilePage() {
    const t = useMyTranslation();
    const { replace } = useMyNavigation();
    const [category, setCategory] = useState('barchasi');
    const [page, setPage] = useState(1);
    const [pageSize] = useState(DEFAULT_PAGE_SIZE);

    const fetchProductsData = useMainFetch({
        key: 'products-data',
        endpoint: '/me/products',
        generateData: res => res.data,
    });

    const fetchUserData = useMainFetch({
        key: 'user-data',
        endpoint: '/me',
        generateData: res => res.data,
    });

    const columns: ColumnData<IProduct>[] = [
        {
            dataKey: 'id',
            label: 'No',
            width: 70,
        },
        {
            dataKey: 'name',
            label: 'Nomi',
            width: 200,
        },
        {
            dataKey: 'trekId',
            label: 'TrekID',
            width: 130,
        },
        {
            dataKey: 'status',
            label: 'Status',
            width: 160,
            renderCell: data => {
                return <Box width={160}>{t(data.status)}</Box>;
            },
        },
        {
            dataKey: 'packetName',
            label: 'Paket',
            width: 140,
        },
        {
            dataKey: 'amount',
            label: 'Miqdori',
            width: 120,
        },
        // {
        //     dataKey: 'price',
        //     label: 'Narxi',
        //     width: 120,
        // },
        // {
        //     dataKey: 'totalPrice',
        //     label: 'Jami narxi',
        //     width: 120,
        // },
        {
            dataKey: 'weight',
            label: t("weight"),
            width: 70,
        },
    ];

    const productsData = fetchProductsData.data as IProductData | undefined;

    const userData = fetchUserData.data as IUserData | undefined;

    useEffect(() => {
        if (userData?.registered === false) {
            replace('/profile/user-data');
        }
    }, [userData?.registered]);

    const handleChange = (newPage: number) => {
        setTimeout(() => {
            setPage(newPage);
        }, 100);
    };

    if (fetchUserData?.isLoading || fetchProductsData?.isLoading || !productsData)
        return (
            <Box position={'relative'} sx={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center' }}>
                <Loader />
            </Box>
        );

    return (
        <Box sx={{ p: 2 }}>
            <Box mt={2} display='flex' flexDirection='column' gap={2}>
                <Box mb={6}>
                    <MyTable columns={columns} data={productsData?.data?.data} loading={false} />
                </Box>
                <Stack direction={'row'} justifyContent={'center'}>
                    <BasePagination
                        page={page}
                        pageSize={pageSize}
                        totalCount={productsData?.data?.totalPages || 0}
                        onChange={handleChange}
                    />
                </Stack>
            </Box>
        </Box>
    );
}
