"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataVisualization = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Card_1 = require("../common/Card");
const Select_1 = require("../forms/Select");
const Button_1 = require("../forms/Button");
const DataVisualization = ({ data = [], title = 'AI Model Performance', chartType = 'line', height = 400, showLegend = true, showGrid = true, enableInteraction = true, colorScheme = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'], onDataPointClick, }) => {
    const [selectedChartType, setSelectedChartType] = (0, react_1.useState)(chartType);
    const [hoveredPoint, setHoveredPoint] = (0, react_1.useState)(null);
    // Generate mock data if none provided
    const visualizationData = (0, react_1.useMemo)(() => {
        if (data.length > 0)
            return data;
        // Mock data generation
        const models = ['GPT-4', 'Claude-3', 'Gemini-Pro', 'Llama-2'];
        const metrics = ['Accuracy', 'Speed', 'Cost', 'Quality'];
        return Array.from({ length: 20 }, (_, i) => ({
            x: models[i % models.length],
            y: Math.random() * 100,
            category: metrics[Math.floor(i / models.length) % metrics.length],
            metadata: {
                timestamp: new Date(Date.now() - i * 3600000),
                details: 'Sample data point',
            },
        }));
    }, [data]);
    const categories = (0, react_1.useMemo)(() => {
        const cats = new Set(visualizationData.map(d => d.category).filter(Boolean));
        return Array.from(cats);
    }, [visualizationData]);
    const renderLineChart = () => {
        const maxY = Math.max(...visualizationData.map(d => d.y));
        const points = visualizationData.map((point, i) => {
            const x = (i / (visualizationData.length - 1)) * 100;
            const y = 100 - (point.y / maxY) * 100;
            return { ...point, x, y };
        });
        return ((0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: height, className: "overflow-visible", children: [showGrid && ((0, jsx_runtime_1.jsx)("g", { className: "grid", children: [0, 25, 50, 75, 100].map(y => ((0, jsx_runtime_1.jsx)("line", { x1: "0%", y1: `${y}%`, x2: "100%", y2: `${y}%`, stroke: "#e5e7eb", strokeDasharray: "2,2" }, y))) })), (0, jsx_runtime_1.jsx)("polyline", { points: points.map(p => `${p.x}%,${p.y}%`).join(' '), fill: "none", stroke: colorScheme[0], strokeWidth: "2" }), enableInteraction && points.map((point, i) => ((0, jsx_runtime_1.jsx)("circle", { cx: `${point.x}%`, cy: `${point.y}%`, r: "4", fill: colorScheme[0], className: "cursor-pointer hover:r-6", onMouseEnter: () => setHoveredPoint(visualizationData[i]), onMouseLeave: () => setHoveredPoint(null), onClick: () => onDataPointClick?.(visualizationData[i]) }, i)))] }));
    };
    const renderBarChart = () => {
        const maxY = Math.max(...visualizationData.map(d => d.y));
        const barWidth = 100 / visualizationData.length;
        return ((0, jsx_runtime_1.jsx)("svg", { width: "100%", height: height, children: visualizationData.map((point, i) => {
                const barHeight = (point.y / maxY) * 100;
                const categoryIndex = categories.indexOf(point.category || '');
                const color = colorScheme[categoryIndex % colorScheme.length];
                return ((0, jsx_runtime_1.jsx)("g", { children: (0, jsx_runtime_1.jsx)("rect", { x: `${i * barWidth}%`, y: `${100 - barHeight}%`, width: `${barWidth * 0.8}%`, height: `${barHeight}%`, fill: color, className: "cursor-pointer hover:opacity-80", onMouseEnter: () => setHoveredPoint(point), onMouseLeave: () => setHoveredPoint(null), onClick: () => onDataPointClick?.(point) }) }, i));
            }) }));
    };
    const renderPieChart = () => {
        const total = visualizationData.reduce((sum, d) => sum + d.y, 0);
        let currentAngle = 0;
        return ((0, jsx_runtime_1.jsx)("svg", { width: "100%", height: height, viewBox: "0 0 200 200", children: visualizationData.map((point, i) => {
                const percentage = point.y / total;
                const angle = percentage * 360;
                const startAngle = currentAngle;
                const endAngle = currentAngle + angle;
                currentAngle = endAngle;
                const x1 = 100 + 80 * Math.cos((startAngle * Math.PI) / 180);
                const y1 = 100 + 80 * Math.sin((startAngle * Math.PI) / 180);
                const x2 = 100 + 80 * Math.cos((endAngle * Math.PI) / 180);
                const y2 = 100 + 80 * Math.sin((endAngle * Math.PI) / 180);
                const largeArc = angle > 180 ? 1 : 0;
                return ((0, jsx_runtime_1.jsx)("path", { d: `M 100 100 L ${x1} ${y1} A 80 80 0 ${largeArc} 1 ${x2} ${y2} Z`, fill: colorScheme[i % colorScheme.length], className: "cursor-pointer hover:opacity-80", onMouseEnter: () => setHoveredPoint(point), onMouseLeave: () => setHoveredPoint(null), onClick: () => onDataPointClick?.(point) }, i));
            }) }));
    };
    const renderChart = () => {
        switch (selectedChartType) {
            case 'line':
                return renderLineChart();
            case 'bar':
                return renderBarChart();
            case 'pie':
                return renderPieChart();
            default:
                return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-full text-gray-500", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-2", children: "\uD83D\uDCC8" }), (0, jsx_runtime_1.jsxs)("p", { children: [selectedChartType, " chart coming soon"] })] }) }));
        }
    };
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "data-visualization", 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: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsxs)(Select_1.Select, { value: selectedChartType, onChange: (e) => setSelectedChartType(e.target.value), className: "w-32", children: [(0, jsx_runtime_1.jsx)("option", { value: "line", children: "Line Chart" }), (0, jsx_runtime_1.jsx)("option", { value: "bar", children: "Bar Chart" }), (0, jsx_runtime_1.jsx)("option", { value: "pie", children: "Pie Chart" }), (0, jsx_runtime_1.jsx)("option", { value: "scatter", children: "Scatter Plot" }), (0, jsx_runtime_1.jsx)("option", { value: "area", children: "Area Chart" }), (0, jsx_runtime_1.jsx)("option", { value: "heatmap", children: "Heatmap" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: "sm", children: "Export" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", style: { height }, children: [renderChart(), hoveredPoint && enableInteraction && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute top-0 right-0 bg-white border rounded-lg shadow-lg p-3 pointer-events-none", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-sm font-medium", children: [hoveredPoint.x, ": ", hoveredPoint.y.toFixed(2)] }), hoveredPoint.category && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-gray-600", children: ["Category: ", hoveredPoint.category] }))] }))] }), showLegend && categories.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mt-6 flex flex-wrap gap-4", children: categories.map((category, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 rounded", style: { backgroundColor: colorScheme[i % colorScheme.length] } }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-700", children: category })] }, category))) })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 grid grid-cols-4 gap-4 text-center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: visualizationData.length }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: "Data Points" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-600", children: Math.max(...visualizationData.map(d => d.y)).toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: "Max Value" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-yellow-600", children: (visualizationData.reduce((sum, d) => sum + d.y, 0) / visualizationData.length).toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: "Average" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: Math.min(...visualizationData.map(d => d.y)).toFixed(1) }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: "Min Value" })] })] })] }) }));
};
exports.DataVisualization = DataVisualization;
exports.default = exports.DataVisualization;
//# sourceMappingURL=DataVisualization.js.map