"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AgentFleetDashboard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const fi_1 = require("react-icons/fi");
const react_3 = require("@chakra-ui/react");
const client_1 = require("@apollo/client");
const queries_js_1 = require("../../graphql/queries.js");
const mutations_js_1 = require("../../graphql/mutations.js");
const AgentCard_js_1 = require("../cards/AgentCard.js");
const FleetForm_js_1 = require("../forms/FleetForm.js");
const FleetHealthMonitor_js_1 = require("./FleetHealthMonitor.js");
const FleetOptimizer_js_1 = require("./FleetOptimizer.js");
const AgentFleetDashboard = ({ refreshInterval = 30000, enableRealTime = true, showFilters = true, }) => {
    // Theme and styling
    const theme = (0, react_3.useTheme)();
    const toast = (0, react_2.useToast)();
    const cardBg = (0, react_2.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_2.useColorModeValue)('gray.200', 'gray.600');
    // State management
    const [selectedFleet, setSelectedFleet] = (0, react_1.useState)(null);
    const [filters, setFilters] = (0, react_1.useState)({
        status: '',
        search: '',
    });
    // Modal controls
    const { isOpen: isFleetModalOpen, onOpen: onFleetModalOpen, onClose: onFleetModalClose, } = (0, react_2.useDisclosure)();
    // GraphQL queries and mutations
    const { data: fleetData, loading: fleetLoading, error: fleetError, refetch } = (0, client_1.useQuery)(queries_js_1.GET_AGENT_FLEETS, {
        pollInterval: refreshInterval,
    });
    const [createFleet] = (0, client_1.useMutation)(mutations_js_1.CREATE_AGENT_FLEET);
    const [updateFleet] = (0, client_1.useMutation)(mutations_js_1.UPDATE_AGENT_FLEET);
    const [deleteFleet] = (0, client_1.useMutation)(mutations_js_1.DELETE_AGENT_FLEET);
    // Filtered fleets
    const filteredFleets = (0, react_1.useMemo)(() => {
        if (!fleetData?.fleets)
            return [];
        return fleetData.fleets.filter((fleet) => {
            if (filters.status && fleet.status !== filters.status)
                return false;
            if (filters.search &&
                !fleet.name.toLowerCase().includes(filters.search.toLowerCase()) &&
                !fleet.description?.toLowerCase().includes(filters.search.toLowerCase()))
                return false;
            return true;
        });
    }, [fleetData, filters]);
    // Event handlers
    const handleCreateFleet = async (fleetData) => {
        try {
            await createFleet({
                variables: { input: fleetData },
            });
            toast({
                title: 'Fleet created',
                status: 'success',
                duration: 3000,
            });
            refetch();
        }
        catch (error) {
            toast({
                title: 'Error creating fleet',
                description: error.message,
                status: 'error',
                duration: 5000,
            });
        }
    };
    const handleUpdateFleet = async (fleetId, fleetData) => {
        try {
            await updateFleet({
                variables: { id: fleetId, input: fleetData },
            });
            toast({
                title: 'Fleet updated',
                status: 'success',
                duration: 3000,
            });
            refetch();
        }
        catch (error) {
            toast({
                title: 'Error updating fleet',
                description: error.message,
                status: 'error',
                duration: 5000,
            });
        }
    };
    const handleDeleteFleet = async (fleetId) => {
        try {
            await deleteFleet({
                variables: { id: fleetId },
            });
            toast({
                title: 'Fleet deleted',
                status: 'success',
                duration: 3000,
            });
            refetch();
        }
        catch (error) {
            toast({
                title: 'Error deleting fleet',
                description: error.message,
                status: 'error',
                duration: 5000,
            });
        }
    };
    // Loading state
    if (fleetLoading) {
        return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 6, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "2xl", fontWeight: "bold", children: "Agent Fleets" }), (0, jsx_runtime_1.jsx)(react_2.CircularProgress, { isIndeterminate: true, size: "8" })] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 6, children: [1, 2, 3].map((i) => ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 6, bg: cardBg, borderWidth: "1px", borderColor: borderColor, borderRadius: "lg", opacity: 0.5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { h: "20px", bg: "gray.200", borderRadius: "md" }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "100px", bg: "gray.200", borderRadius: "md" })] }) }, i))) })] }) }));
    }
    // Error state
    if (fleetError) {
        return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 6, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { color: "red.500", children: ["Error loading agent fleets: ", fleetError.message] }), (0, jsx_runtime_1.jsx)(react_2.Button, { onClick: () => refetch(), children: "Retry" })] }) }));
    }
    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", wrap: "wrap", spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "2xl", fontWeight: "bold", children: "Agent Fleets" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { leftIcon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiRefreshCw }), onClick: () => refetch(), size: "sm", variant: "outline", children: "Refresh" }), (0, jsx_runtime_1.jsx)(react_2.Button, { leftIcon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiPlus }), onClick: () => {
                                            setSelectedFleet(null);
                                            onFleetModalOpen();
                                        }, colorScheme: "blue", size: "sm", children: "New Fleet" })] })] }), showFilters && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 4, wrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Select, { placeholder: "Filter by status", value: filters.status, onChange: (e) => setFilters((prev) => ({ ...prev, status: e.target.value })), maxW: "200px", size: "sm", children: [(0, jsx_runtime_1.jsx)("option", { value: "active", children: "Active" }), (0, jsx_runtime_1.jsx)("option", { value: "paused", children: "Paused" }), (0, jsx_runtime_1.jsx)("option", { value: "error", children: "Error" })] }), (0, jsx_runtime_1.jsx)(react_2.Input, { placeholder: "Search fleets...", value: filters.search, onChange: (e) => setFilters((prev) => ({ ...prev, search: e.target.value })), maxW: "300px", size: "sm" })] })), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 6, children: filteredFleets.map((fleet) => ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 6, bg: cardBg, borderWidth: "1px", borderColor: borderColor, borderRadius: "lg", _hover: { borderColor: 'blue.500', cursor: 'pointer' }, onClick: () => {
                                setSelectedFleet(fleet);
                                onFleetModalOpen();
                            }, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", children: fleet.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.500", children: [fleet.agents.length, " Agents"] })] }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: fleet.status === 'active'
                                                    ? 'green'
                                                    : fleet.status === 'paused'
                                                        ? 'yellow'
                                                        : 'red', children: fleet.status })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", noOfLines: 2, children: fleet.description }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.500", children: "Active Agents" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", children: fleet.agents.filter((agent) => agent.status === 'running').length })] }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.500", children: "Error Rate" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "bold", color: fleet.errorRate > 5 ? 'red.500' : fleet.errorRate > 2 ? 'yellow.500' : 'green.500', children: [fleet.errorRate.toFixed(1), "%"] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "flex-end", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: fleet.status === 'active' ? 'Pause Fleet' : 'Resume Fleet', children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: (e) => {
                                                        e.stopPropagation();
                                                        handleUpdateFleet(fleet.id, {
                                                            status: fleet.status === 'active' ? 'paused' : 'active',
                                                        });
                                                    }, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fleet.status === 'active' ? fi_1.FiPause : fi_1.FiPlay }) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Edit Fleet", children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", onClick: (e) => {
                                                        e.stopPropagation();
                                                        setSelectedFleet(fleet);
                                                        onFleetModalOpen();
                                                    }, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiEdit2 }) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Delete Fleet", children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", colorScheme: "red", onClick: (e) => {
                                                        e.stopPropagation();
                                                        handleDeleteFleet(fleet.id);
                                                    }, children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiTrash2 }) }) })] })] }) }, fleet.id))) })] }), (0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFleetModalOpen, onClose: onFleetModalClose, size: "6xl", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { children: selectedFleet ? `Fleet: ${selectedFleet.name}` : 'Create New Fleet' }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { children: selectedFleet ? ((0, jsx_runtime_1.jsxs)(react_2.Tabs, { children: [(0, jsx_runtime_1.jsxs)(react_2.TabList, { children: [(0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Overview" }), (0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Health Monitor" }), (0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Optimization" }), (0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Settings" })] }), (0, jsx_runtime_1.jsxs)(react_2.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_2.TabPanel, { children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "bold", children: "Fleet Details" }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", children: "Status" }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: selectedFleet.status === 'active'
                                                                                    ? 'green'
                                                                                    : selectedFleet.status === 'paused'
                                                                                        ? 'yellow'
                                                                                        : 'red', children: selectedFleet.status })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", children: "Created" }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: new Date(selectedFleet.created).toLocaleString() })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", children: "Description" }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: selectedFleet.description })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "bold", mb: 4, children: ["Agents (", selectedFleet.agents.length, ")"] }), (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 4, children: selectedFleet.agents.map((agent) => ((0, jsx_runtime_1.jsx)(AgentCard_js_1.AgentCard, { agent: agent }, agent.id))) })] })] }) }), (0, jsx_runtime_1.jsx)(react_2.TabPanel, { children: (0, jsx_runtime_1.jsx)(FleetHealthMonitor_js_1.FleetHealthMonitor, { fleetId: selectedFleet.id }) }), (0, jsx_runtime_1.jsx)(react_2.TabPanel, { children: (0, jsx_runtime_1.jsx)(FleetOptimizer_js_1.FleetOptimizer, { fleetId: selectedFleet.id }) }), (0, jsx_runtime_1.jsx)(react_2.TabPanel, { children: (0, jsx_runtime_1.jsx)(FleetForm_js_1.FleetForm, { fleet: selectedFleet, onSubmit: async (data) => {
                                                            await handleUpdateFleet(selectedFleet.id, data);
                                                            onFleetModalClose();
                                                        } }) })] })] })) : ((0, jsx_runtime_1.jsx)(FleetForm_js_1.FleetForm, { onSubmit: async (data) => {
                                        await handleCreateFleet(data);
                                        onFleetModalClose();
                                    } })) })] })] })] }));
};
exports.AgentFleetDashboard = AgentFleetDashboard;
exports.default = exports.AgentFleetDashboard;
//# sourceMappingURL=AgentFleetDashboard.js.map