"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelStatusGrid = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Card_1 = require("../common/Card");
const Button_1 = require("../forms/Button");
const ModelStatusGrid = ({ columns = 4, showResponseTime = true, showAvailability = true, showCostPerToken = false, testQueriesEnabled = true, autoRefresh = true, compactView = false, refreshInterval = 30000, onModelTest, }) => {
    const [models, setModels] = (0, react_1.useState)([]);
    const [lastUpdated, setLastUpdated] = (0, react_1.useState)(new Date());
    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
    const [testingModel, setTestingModel] = (0, react_1.useState)(null);
    const [testPrompt, setTestPrompt] = (0, react_1.useState)('');
    const [showTestModal, setShowTestModal] = (0, react_1.useState)(false);
    const [selectedModel, setSelectedModel] = (0, react_1.useState)(null);
    (0, react_1.useEffect)(() => {
        const fetchModels = async () => {
            setIsLoading(true);
            try {
                // Mock data - replace with actual API call
                const mockModels = [
                    {
                        id: 'gpt-4',
                        name: 'GPT-4',
                        provider: 'OpenAI',
                        status: 'healthy',
                        responseTime: 850,
                        availability: 99.8,
                        costPerToken: 0.00003,
                        lastChecked: new Date(),
                        capabilities: ['text', 'function-calling'],
                    },
                    {
                        id: 'gpt-3.5-turbo',
                        name: 'GPT-3.5 Turbo',
                        provider: 'OpenAI',
                        status: 'healthy',
                        responseTime: 420,
                        availability: 99.9,
                        costPerToken: 0.000002,
                        lastChecked: new Date(),
                        capabilities: ['text', 'function-calling'],
                    },
                    {
                        id: 'claude-3-opus',
                        name: 'Claude 3 Opus',
                        provider: 'Anthropic',
                        status: 'degraded',
                        responseTime: 1200,
                        availability: 97.5,
                        costPerToken: 0.000075,
                        lastChecked: new Date(),
                        capabilities: ['text', 'vision'],
                    },
                    {
                        id: 'apple-intelligence',
                        name: 'Apple Intelligence',
                        provider: 'Apple',
                        status: 'healthy',
                        responseTime: 200,
                        availability: 100,
                        lastChecked: new Date(),
                        capabilities: ['text', 'privacy-first'],
                    },
                ];
                setModels(mockModels);
                setLastUpdated(new Date());
            }
            catch (error) {
                console.error('Failed to fetch model status:', error);
            }
            finally {
                setIsLoading(false);
            }
        };
        fetchModels();
        if (autoRefresh && refreshInterval > 0) {
            const interval = setInterval(fetchModels, refreshInterval);
            return () => clearInterval(interval);
        }
    }, [autoRefresh, refreshInterval]);
    const getStatusColor = (status) => {
        switch (status) {
            case 'healthy':
                return 'bg-green-500';
            case 'degraded':
                return 'bg-yellow-500';
            case 'down':
                return 'bg-red-500';
            default:
                return 'bg-gray-500';
        }
    };
    const getStatusText = (status) => {
        switch (status) {
            case 'healthy':
                return 'Healthy';
            case 'degraded':
                return 'Degraded';
            case 'down':
                return 'Down';
            default:
                return 'Unknown';
        }
    };
    const handleTestModel = async (modelId) => {
        if (!testPrompt.trim() || !onModelTest)
            return;
        setTestingModel(modelId);
        try {
            await onModelTest(modelId, testPrompt);
        }
        catch (error) {
            console.error('Model test failed:', error);
        }
        finally {
            setTestingModel(null);
            setShowTestModal(false);
            setTestPrompt('');
        }
    };
    const openTestModal = (modelId) => {
        setSelectedModel(modelId);
        setShowTestModal(true);
    };
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "model-status-grid", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-gray-200 rounded w-1/3" }), (0, jsx_runtime_1.jsx)("div", { className: `grid grid-cols-${columns} gap-4`, children: [...Array(columns * 2)].map((_, i) => ((0, jsx_runtime_1.jsx)("div", { className: "h-32 bg-gray-200 rounded" }, i))) })] }) }) }));
    }
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "model-status-grid", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold", children: "Model Status" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-gray-500", children: ["Last updated: ", lastUpdated.toLocaleTimeString()] })] }), (0, jsx_runtime_1.jsx)("div", { className: `grid grid-cols-${columns} gap-4`, children: models.map((model) => ((0, jsx_runtime_1.jsxs)("div", { className: `border rounded-lg p-4 ${model.status === 'healthy' ? 'border-green-200 bg-green-50' :
                            model.status === 'degraded' ? 'border-yellow-200 bg-yellow-50' :
                                'border-red-200 bg-red-50'}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-semibold text-sm", children: model.name }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-gray-600", children: model.provider })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: `w-3 h-3 rounded-full ${getStatusColor(model.status)}` }), (0, jsx_runtime_1.jsx)("span", { className: "ml-2 text-xs font-medium", children: getStatusText(model.status) })] })] }), !compactView && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 mb-4", children: [showResponseTime && model.responseTime && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Response Time" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [model.responseTime, "ms"] })] })), showAvailability && model.availability && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Availability" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: [model.availability, "%"] })] })), showCostPerToken && model.costPerToken && ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-xs", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-gray-600", children: "Cost/Token" }), (0, jsx_runtime_1.jsxs)("span", { className: "font-medium", children: ["$", model.costPerToken.toFixed(6)] })] }))] })), model.capabilities && model.capabilities.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-1", children: model.capabilities.map((capability) => ((0, jsx_runtime_1.jsx)("span", { className: "px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded", children: capability }, capability))) }) })), testQueriesEnabled && ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: "sm", variant: "outline", onClick: () => openTestModal(model.id), disabled: model.status === 'down' || testingModel === model.id, className: "w-full", children: testingModel === model.id ? 'Testing...' : 'Test Model' }))] }, model.id))) }), showTestModal && ((0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-white rounded-lg p-6 w-96 max-w-full", children: [(0, jsx_runtime_1.jsxs)("h3", { className: "text-lg font-semibold mb-4", children: ["Test ", models.find(m => m.id === selectedModel)?.name] }), (0, jsx_runtime_1.jsx)("textarea", { value: testPrompt, onChange: (e) => setTestPrompt(e.target.value), placeholder: "Enter test prompt...", className: "w-full h-32 p-3 border rounded-lg resize-none" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end space-x-3 mt-4", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "outline", onClick: () => {
                                            setShowTestModal(false);
                                            setTestPrompt('');
                                        }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => selectedModel && handleTestModel(selectedModel), disabled: !testPrompt.trim() || testingModel === selectedModel, loading: testingModel === selectedModel, children: "Run Test" })] })] }) }))] }) }));
};
exports.ModelStatusGrid = ModelStatusGrid;
exports.default = exports.ModelStatusGrid;
//# sourceMappingURL=ModelStatusGrid.js.map