import React from 'react';
import { Box } from '@chakra-ui/react';
import { http, HttpResponse } from 'msw'; // Import MSW
import LlmAlChangesQuadPlot from './LlmAlChangesQuadPlot';

export default {
    title: 'Dashboard Widgets/LLM AL Changes Quad Plot',
    component: LlmAlChangesQuadPlot,
    decorators: [
        (Story) => (
            <Box
                w="100%" maxW="1800px" h="400px"
                border="2px dashed" borderColor="gray.600" p={2}
                resize="both" overflow="auto"
            >
                <Story />
            </Box>
        ),
    ],
};

const mockData = [
    { tp: 50 },
    { tn: 250 },
    { fp: 10 },
    { fn: 5 },
    { tot_count: 315}
];

// Scenario LIVE: call our API for real
export const LivePopulated = {};

// Scenario 1: Successful API Call
export const Populated = {
    parameters: {
        msw: {
            handlers: [
                // Intercept the exact URL your component is trying to fetch
                http.get('*/api/v2/llm_quadrant_plot', () => {
                    // Return a 200 OK with the mock JSON
                    return HttpResponse.json(mockData);
                }),
            ],
        },
    },
};

// Scenario 2: The 500 Server Crash
export const ServerCrash = {
    parameters: {
        msw: {
            handlers: [
                http.get('*/api/v2/llm_quad_plot', () => {
                    // Return a 500 Error
                    return new HttpResponse(null, { status: 500 });
                }),
            ],
        },
    },
};

// Scenario 3: Empty State (API works, but no data returned)
export const EmptyData = {
    parameters: {
        msw: {
            handlers: [
                http.get('*/api/v2/llm_quad_plot', () => {
                    return HttpResponse.json([]);
                }),
            ],
        },
    },
};