"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModelCard = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * ModelCard Component
 *
 * Displays individual model information in a card format
 * Used by ModelRegistry for model listing
 */
const react_1 = require("react");
const lucide_react_1 = require("lucide-react");
/**
 * ModelCard - Individual model display component
 *
 * Features:
 * - Model information display
 * - Status indicators
 * - Performance metrics
 * - Action buttons
 * - Keyboard navigation
 * - Loading states
 * - Responsive design
 */
const ModelCardComponent = ({ model, onEdit, onDeploy, onDelete, onViewVersions, onClick, showActions = true, className = '' }) => {
    // Handle loading state
    if (model?.loading) {
        return ((0, jsx_runtime_1.jsx)("div", { className: `model-card bg-white rounded-lg shadow-md p-6 w-full max-w-sm md:max-w-md ${className}`, "data-testid": "model-card", children: (0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse space-y-4", "data-testid": "model-loading", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-gray-200 rounded w-3/4" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 bg-gray-200 rounded w-1/2" }), (0, jsx_runtime_1.jsx)("div", { className: "h-16 bg-gray-200 rounded" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-8 bg-gray-200 rounded w-16" }), (0, jsx_runtime_1.jsx)("div", { className: "h-8 bg-gray-200 rounded w-16" })] })] }) }));
    }
    // Handle null/undefined model
    if (!model) {
        return ((0, jsx_runtime_1.jsx)("div", { className: `model-card bg-white rounded-lg shadow-md p-6 w-full max-w-sm md:max-w-md ${className}`, "data-testid": "model-card", children: (0, jsx_runtime_1.jsx)("div", { className: "text-center text-gray-500", children: (0, jsx_runtime_1.jsx)("p", { children: "Invalid model data" }) }) }));
    }
    // Status styling
    const getStatusClasses = (status) => {
        switch (status) {
            case 'active':
                return 'text-green-600 bg-green-100';
            case 'inactive':
                return 'text-red-600 bg-red-100';
            case 'pending':
                return 'text-yellow-600 bg-yellow-100';
            case 'error':
                return 'text-red-600 bg-red-100';
            default:
                return 'text-gray-600 bg-gray-100';
        }
    };
    // Format date helper
    const formatDate = (dateString) => {
        try {
            return new Date(dateString).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
            });
        }
        catch {
            return 'Unknown';
        }
    };
    // Event handlers
    const handleCardClick = () => {
        onClick?.(model);
    };
    const handleKeyDown = (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onClick?.(model);
        }
    };
    const handleEdit = (e) => {
        e.stopPropagation();
        onEdit?.(model);
    };
    const handleDeploy = (e) => {
        e.stopPropagation();
        onDeploy?.(model);
    };
    const handleDelete = (e) => {
        e.stopPropagation();
        if (window.confirm(`Are you sure you want to delete ${model.name}?`)) {
            onDelete?.(model);
        }
    };
    const handleViewVersions = (e) => {
        e.stopPropagation();
        onViewVersions?.(model);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `model-card bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer w-full max-w-sm md:max-w-md ${className}`, "data-testid": "model-card", role: "button", tabIndex: 0, "aria-label": `Model card for ${model.name}`, onClick: handleCardClick, onKeyDown: handleKeyDown, children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-6 pb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between mb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold text-gray-900 mb-1", children: model.name }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2 text-sm text-gray-600", children: [(0, jsx_runtime_1.jsx)("span", { children: model.provider }), (0, jsx_runtime_1.jsx)("span", { children: "\u2022" }), (0, jsx_runtime_1.jsxs)("span", { children: ["v", model.version] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: `px-2 py-1 rounded-full text-xs font-medium ${getStatusClasses(model.status)}`, "data-testid": "model-status", children: (0, jsx_runtime_1.jsx)("span", { className: "capitalize", children: model.status }) })] }), model.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-600 mb-4 line-clamp-2", "data-testid": "model-description", children: model.description })), model.metrics && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-3 mb-4 p-3 bg-gray-50 rounded-lg", "data-testid": "performance-metrics", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center mb-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Gauge, { className: "w-3 h-3 text-blue-500 mr-1" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-500", children: "Accuracy" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-medium text-gray-900", children: [Math.round((model.metrics.accuracy || 0) * 100), "%"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center mb-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "w-3 h-3 text-green-500 mr-1" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-500", children: "Latency" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-medium text-gray-900", children: [model.metrics.latency, "ms"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center mb-1", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { className: "w-3 h-3 text-purple-500 mr-1" }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-500", children: "Throughput" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-medium text-gray-900", children: [model.metrics.throughput, " RPS"] })] })] })), model.deployment_config && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-4 text-xs text-gray-500 mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Cpu, { className: "w-3 h-3 mr-1" }), (0, jsx_runtime_1.jsx)("span", { children: model.deployment_config.environment })] }), model.deployment_config.replicas && ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: (0, jsx_runtime_1.jsxs)("span", { children: [model.deployment_config.replicas, " replicas"] }) }))] })), model.tags && model.tags.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-1 mb-4", children: [model.tags.slice(0, 3).map((tag, index) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Tag, { className: "w-2 h-2 mr-1" }), tag] }, index))), model.tags.length > 3 && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-gray-500", children: ["+", model.tags.length - 3, " more"] }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-500 space-y-1", children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Created: ", formatDate(model.created_at)] }), (0, jsx_runtime_1.jsxs)("div", { children: ["Updated: ", formatDate(model.updated_at)] })] })] }), showActions && ((0, jsx_runtime_1.jsx)("div", { className: "px-6 pb-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between space-x-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [onEdit && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleEdit, className: "flex items-center px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors", "data-testid": "edit-button", "aria-label": `Edit ${model.name}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Edit3, { className: "w-3 h-3 mr-1" }), "Edit"] })), onDeploy && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleDeploy, className: "flex items-center px-3 py-1.5 text-xs font-medium text-green-600 bg-green-50 rounded-md hover:bg-green-100 transition-colors", "data-testid": "deploy-button", "aria-label": `Deploy ${model.name}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Rocket, { className: "w-3 h-3 mr-1" }), "Deploy"] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex space-x-2", children: [onViewVersions && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleViewVersions, className: "flex items-center px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-50 rounded-md hover:bg-gray-100 transition-colors", "data-testid": "versions-button", "aria-label": `View versions of ${model.name}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.History, { className: "w-3 h-3 mr-1" }), "Versions"] })), onDelete && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleDelete, className: "flex items-center px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 rounded-md hover:bg-red-100 transition-colors", "data-testid": "delete-button", "aria-label": `Delete ${model.name}`, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-3 h-3 mr-1" }), "Delete"] }))] })] }) }))] }));
};
// Memoize for performance
exports.ModelCard = (0, react_1.memo)(ModelCardComponent);
exports.ModelCard.displayName = 'ModelCard';
//# sourceMappingURL=ModelCard.js.map