"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelComparison = 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 Textarea_1 = require("../forms/Textarea");
const ModelComparison = ({ availableModels = [
    { id: 'gpt-4', name: 'GPT-4', provider: 'OpenAI' },
    { id: 'gpt-3.5-turbo', name: 'GPT-3.5 Turbo', provider: 'OpenAI' },
    { id: 'claude-3-opus', name: 'Claude 3 Opus', provider: 'Anthropic' },
    { id: 'claude-3-sonnet', name: 'Claude 3 Sonnet', provider: 'Anthropic' },
], onCompare, maxModels = 4, showMetrics = true, showCost = true, highlightBest = true, }) => {
    const [prompt, setPrompt] = (0, react_1.useState)('');
    const [selectedModels, setSelectedModels] = (0, react_1.useState)([]);
    const [results, setResults] = (0, react_1.useState)([]);
    const [isComparing, setIsComparing] = (0, react_1.useState)(false);
    const handleModelToggle = (modelId) => {
        if (selectedModels.includes(modelId)) {
            setSelectedModels(selectedModels.filter(id => id !== modelId));
        }
        else if (selectedModels.length < maxModels) {
            setSelectedModels([...selectedModels, modelId]);
        }
    };
    const handleCompare = async () => {
        if (!prompt.trim() || selectedModels.length < 2)
            return;
        setIsComparing(true);
        try {
            if (onCompare) {
                const results = await onCompare(prompt, selectedModels);
                setResults(results);
            }
            else {
                // Mock comparison results
                const mockResults = selectedModels.map(modelId => {
                    const model = availableModels.find(m => m.id === modelId);
                    return {
                        model: model.name,
                        provider: model.provider,
                        response: `This is a sample response from ${model.name}. The actual response would contain the AI's answer to: "${prompt}"`,
                        responseTime: Math.random() * 2000 + 500,
                        tokenCount: Math.floor(Math.random() * 500) + 100,
                        cost: Math.random() * 0.05,
                        qualityScore: Math.random() * 20 + 80,
                    };
                });
                await new Promise(resolve => setTimeout(resolve, 2000));
                setResults(mockResults);
            }
        }
        catch (error) {
            console.error('Comparison failed:', error);
        }
        finally {
            setIsComparing(false);
        }
    };
    const getBestMetric = (metric, lower = false) => {
        if (results.length === 0)
            return null;
        const values = results.map(r => r[metric]).filter(v => v !== undefined);
        return lower ? Math.min(...values) : Math.max(...values);
    };
    const formatMetric = (value, type) => {
        switch (type) {
            case 'time':
                return `${(value / 1000).toFixed(2)}s`;
            case 'cost':
                return `$${value.toFixed(4)}`;
            case 'score':
                return `${value.toFixed(1)}%`;
            default:
                return value.toString();
        }
    };
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "model-comparison", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold mb-6", children: "Model Comparison" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4 mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: ["Select Models to Compare (min 2, max ", maxModels, ")"] }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-2", children: availableModels.map((model) => ((0, jsx_runtime_1.jsxs)("label", { className: `flex items-center p-3 border rounded-lg cursor-pointer transition-colors ${selectedModels.includes(model.id)
                                            ? 'border-blue-500 bg-blue-50'
                                            : 'border-gray-200 hover:border-gray-300'} ${!selectedModels.includes(model.id) && selectedModels.length >= maxModels
                                            ? 'opacity-50 cursor-not-allowed'
                                            : ''}`, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedModels.includes(model.id), onChange: () => handleModelToggle(model.id), disabled: !selectedModels.includes(model.id) && selectedModels.length >= maxModels, className: "mr-2" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-sm", children: model.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500", children: model.provider })] })] }, model.id))) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Test Prompt" }), (0, jsx_runtime_1.jsx)(Textarea_1.Textarea, { value: prompt, onChange: (e) => setPrompt(e.target.value), placeholder: "Enter a prompt to test across selected models...", rows: 4, className: "w-full" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleCompare, disabled: !prompt.trim() || selectedModels.length < 2 || isComparing, loading: isComparing, className: "w-full", children: isComparing ? 'Comparing Models...' : 'Compare Models' })] }), results.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [showMetrics && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [(0, jsx_runtime_1.jsx)(MetricSummary, { label: "Fastest Response", value: formatMetric(getBestMetric('responseTime', true) || 0, 'time'), icon: "\u26A1" }), (0, jsx_runtime_1.jsx)(MetricSummary, { label: "Most Tokens", value: (getBestMetric('tokenCount') || 0).toLocaleString(), icon: "\uD83D\uDCDD" }), showCost && ((0, jsx_runtime_1.jsx)(MetricSummary, { label: "Lowest Cost", value: formatMetric(getBestMetric('cost', true) || 0, 'cost'), icon: "\uD83D\uDCB0" })), results[0].qualityScore !== undefined && ((0, jsx_runtime_1.jsx)(MetricSummary, { label: "Best Quality", value: formatMetric(getBestMetric('qualityScore') || 0, 'score'), icon: "\u2B50" }))] })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: results.map((result, index) => {
                                const isBestTime = highlightBest && result.responseTime === getBestMetric('responseTime', true);
                                const isBestCost = highlightBest && showCost && result.cost === getBestMetric('cost', true);
                                const isBestQuality = highlightBest && result.qualityScore === getBestMetric('qualityScore');
                                return ((0, jsx_runtime_1.jsxs)("div", { className: `border rounded-lg p-4 ${isBestQuality ? 'border-green-500 bg-green-50' : 'border-gray-200'}`, 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-gray-900", children: result.model }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500", children: result.provider })] }), showMetrics && ((0, jsx_runtime_1.jsxs)("div", { className: "text-right space-y-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: `text-sm ${isBestTime ? 'text-green-600 font-semibold' : 'text-gray-600'}`, children: [formatMetric(result.responseTime, 'time'), isBestTime && ' ⚡'] }), showCost && ((0, jsx_runtime_1.jsxs)("div", { className: `text-sm ${isBestCost ? 'text-green-600 font-semibold' : 'text-gray-600'}`, children: [formatMetric(result.cost, 'cost'), isBestCost && ' 💰'] })), result.qualityScore !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: `text-sm ${isBestQuality ? 'text-green-600 font-semibold' : 'text-gray-600'}`, children: ["Quality: ", formatMetric(result.qualityScore, 'score'), isBestQuality && ' ⭐'] }))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "bg-gray-50 rounded p-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-700 whitespace-pre-wrap", children: result.response }) }), showMetrics && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex justify-between text-xs text-gray-500", children: [(0, jsx_runtime_1.jsxs)("span", { children: [result.tokenCount, " tokens"] }), (0, jsx_runtime_1.jsxs)("span", { children: ["Model: ", result.model] })] }))] }, index));
                            }) })] })), !isComparing && results.length === 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-center py-12 text-gray-500", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-4", children: "\uD83E\uDD16" }), (0, jsx_runtime_1.jsx)("p", { children: "Select models and enter a prompt to compare responses" })] }))] }) }));
};
exports.ModelComparison = ModelComparison;
const MetricSummary = ({ label, value, icon }) => {
    return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-3 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl mb-1", children: icon }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: label }), (0, jsx_runtime_1.jsx)("div", { className: "font-semibold text-gray-900", children: value })] }));
};
exports.default = exports.ModelComparison;
//# sourceMappingURL=ModelComparison.js.map