import VdapApi from '../../hooks/useVdapApi.js';
import {Flex, Spinner, Text, Box, Center} from "@chakra-ui/react"; // Adjust path as needed


export default function LlmAlChangesQuadPlot(props) {
    console.log("3. Quad Plot loaded");
    let tp_percent = 0;
    let tn_percent = 0;
    let fp_percent = 0;
    let fn_percent = 0;

    // Clean, single-line data fetching
    const { data: apiData, isLoading, error } = VdapApi('/api/v2/llm_quadrant_plot');

    if (isLoading) return (
        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center">
            <Spinner size="xl" color="blue.400" thickness="4px" />
        </Flex>
    );

    if (error) return (
        <Flex w="100%" h="100%" bg="gray.800" borderRadius="md" align="center" justify="center" p={4}>
            <Text color="red.400">{error}</Text>
        </Flex>
    );

    if (apiData.length === 0) return (
        <Flex height="100%" width="100%" align="center" justify="center" bg="gray.800" borderRadius="md">
            <Text color="gray.400">No alert level quad plot data available.</Text>
        </Flex>
    );

    if (apiData) {
        console.log(apiData);
        tp_percent = ((apiData[0]['tp_count']/apiData[0]['tot_count'])*100).toFixed(2);
        tn_percent = ((apiData[0]['tn_count']/apiData[0]['tot_count'])*100).toFixed(2);
        fp_percent = ((apiData[0]['fp_count']/apiData[0]['tot_count'])*100).toFixed(2);
        fn_percent = ((apiData[0]['fn_count']/apiData[0]['tot_count'])*100).toFixed(2);
    }

    return (
        <Flex direction="column" w="100%" h="100%" borderRadius="lg">
            <Flex direction="row" w="100%" bg="gray.800" borderTopRadius="lg" justifyItems="center" alignItems="start" p={2} pb={0} pl={4} justifyContent="end">
                {/*<Text fontWeight="bold" fontSize="lg" color="white">Alert Level Changes Quad Plot</Text>*/}
                <Text bg="cyan.200/5" borderRadius="sm" padding="1" fontWeight="normal" fontSize="sm" color="white">All time</Text>
            </Flex>
            <Flex direction="column" w="100%" h="100%" bg="gray.800" gap="2" padding="2" borderBottomRadius="lg">
                <Flex direction="row" w="100%" h="100%" gap="2">
                    <Center bg={`blue.200/${tp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                            <Text>True Positive</Text>
                            <Text fontSize="lg"> {tp_percent}% </Text>
                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tp_count']}/{apiData[0]['tot_count']} </Text>
                        </Flex>
                    </Center>
                    <Center bg={`blue.200/${tn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                            <Text>True Negative</Text>
                            <Text fontSize="lg"> {tn_percent}% </Text>
                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['tn_count']}/{apiData[0]['tot_count']} </Text>
                        </Flex>
                    </Center>
                </Flex>
                <Flex direction="row" w="100%" h="100%" gap="2">
                    <Center bg={`blue.200/${fp_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                            <Text>False Positive</Text>
                            <Text fontSize="lg"> {fp_percent}% </Text>
                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fp_count']}/{apiData[0]['tot_count']} </Text>
                        </Flex>
                    </Center>
                    <Center bg={`blue.200/${fn_percent % 50}`} w="100%" h="100%" borderRadius="lg" color="white" fontSize="sm" fontWeight="bold">
                        <Flex direction="column" w="100%" h="100%" justifyContent="center" alignItems="center">
                            <Text>False Negative</Text>
                            <Text fontSize="lg"> {fn_percent}% </Text>
                            <Text color="gray.400" fontSize="xs" fontWeight="normal"> {apiData[0]['fn_count']}/{apiData[0]['tot_count']} </Text>
                        </Flex>
                    </Center>
                </Flex>
            </Flex>
        </Flex>
    )

}