/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from 'react';
import { Box, Title } from '@mantine/core';
import io from 'socket.io-client';
import { WorkingPage } from '../components/dashboard';
import { IBid, IWebBid } from '../system/type';

// Dùng singleton để giữ kết nối WebSocket khi chuyển trang
const socket = io('http://localhost:4000', {
    autoConnect: true, // Tránh tự động kết nối khi import file
    transports: ['websocket'], // Chỉ dùng WebSocket để giảm độ trễ
});

export default function DashBoard() {
    const [workingData, setWorkingData] = useState<(IWebBid & { type: string })[] | (IBid & { type: string })[]>([]);

    useEffect(() => {
        socket.connect();

        socket.on('connect', () => {
            console.log('✅ WebSocket connected:', socket.id);

            // 🔥 Gửi yêu cầu lấy dữ liệu ngay khi kết nối
            socket.emit('getBidsData');
        });

        socket.on('disconnect', () => {
            console.log('❌ WebSocket disconnected');
        });

        socket.on('bidsUpdated', (data: IWebBid[]) => {
            console.log('📢 Bids Data:', data);

            const array = data.reduce((prev, cur) => {
                if (cur.children?.length > 0) {
                    prev = [...prev, ...cur.children];
                }
                prev.push(cur);
                return prev;
            }, [] as any[]);

            const newData = array.map((item) => {
                if (item.children) {
                    return {
                        ...item,
                        type: 'API_BID',
                    };
                }

                return {
                    ...item,
                    type: 'PRODUCT_TAB',
                };
            });
            setWorkingData(newData);
        });

        return () => {
            console.log('🔌 Cleanup WebSocket listeners...');
            socket.off('bidsUpdated');
            socket.off('working');
            socket.off('connect');
            socket.off('disconnect');
            socket.disconnect();
        };
    }, []);

    return (
        <Box>
            <Title order={2} mb="md">
                Admin Dashboard
            </Title>

            <Box className="grid grid-cols-4 gap-4">
                {workingData.map((item, index) => (
                    <WorkingPage socket={socket} data={item} key={item.id + index} />
                ))}
            </Box>
        </Box>
    );
}