"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WorkflowAuditDisplay = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Workflow Audit Display Component
 * Shows validation history, compliance status, and trends
 */
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const recharts_1 = require("recharts");
const fi_1 = require("react-icons/fi");
const workflowAudit_1 = require("../../utils/workflowAudit");
const WorkflowAuditDisplay = ({ workflowId, onIssueClick, maxHistoryItems = 10, }) => {
    const [summary, setSummary] = (0, react_1.useState)(null);
    const [history, setHistory] = (0, react_1.useState)([]);
    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
    const toast = (0, react_2.useToast)();
    const bgColor = (0, react_2.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_2.useColorModeValue)('gray.200', 'gray.700');
    (0, react_1.useEffect)(() => {
        const loadAuditData = () => {
            try {
                const auditSummary = workflowAudit_1.workflowAudit.getAuditSummary(workflowId);
                const auditHistory = workflowAudit_1.workflowAudit.getWorkflowHistory(workflowId)
                    .slice(0, maxHistoryItems);
                setSummary(auditSummary);
                setHistory(auditHistory);
            }
            catch (error) {
                toast({
                    title: 'Error loading audit data',
                    description: 'Failed to load workflow audit history',
                    status: 'error',
                    duration: 5000,
                    isClosable: true,
                });
            }
            finally {
                setIsLoading(false);
            }
        };
        loadAuditData();
    }, [workflowId, maxHistoryItems, toast]);
    const handleExportAudit = () => {
        try {
            const auditData = workflowAudit_1.workflowAudit.exportAuditData(workflowId);
            const blob = new Blob([auditData], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `workflow-audit-${workflowId}-${new Date().toISOString()}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            toast({
                title: 'Audit data exported',
                description: 'Workflow audit data has been downloaded',
                status: 'success',
                duration: 3000,
                isClosable: true,
            });
        }
        catch (error) {
            toast({
                title: 'Export failed',
                description: 'Failed to export workflow audit data',
                status: 'error',
                duration: 5000,
                isClosable: true,
            });
        }
    };
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 4, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: "Loading audit data..." }) }));
    }
    if (!summary) {
        return ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 4, textAlign: "center", children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: "No audit data available" }) }));
    }
    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", p: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xl", fontWeight: "bold", children: "Workflow Audit" }), (0, jsx_runtime_1.jsx)(react_2.Button, { leftIcon: (0, jsx_runtime_1.jsx)(fi_1.FiDownload, {}), onClick: handleExportAudit, size: "sm", variant: "outline", children: "Export Audit" })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, bg: bgColor, borderRadius: "md", borderWidth: 1, borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "semibold", mb: 4, children: "Compliance Status" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Stat, { children: [(0, jsx_runtime_1.jsx)(react_2.StatLabel, { children: "Security" }), (0, jsx_runtime_1.jsx)(react_2.StatNumber, { children: summary.complianceStatus.security ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "green", children: "Compliant" })) : ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "red", children: "Non-Compliant" })) }), (0, jsx_runtime_1.jsxs)(react_2.StatHelpText, { children: ["Last checked: ", new Date(summary.complianceStatus.lastChecked).toLocaleString()] })] }), (0, jsx_runtime_1.jsxs)(react_2.Stat, { children: [(0, jsx_runtime_1.jsx)(react_2.StatLabel, { children: "Admin" }), (0, jsx_runtime_1.jsx)(react_2.StatNumber, { children: summary.complianceStatus.admin ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "green", children: "Compliant" })) : ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "red", children: "Non-Compliant" })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Stat, { children: [(0, jsx_runtime_1.jsx)(react_2.StatLabel, { children: "Data" }), (0, jsx_runtime_1.jsx)(react_2.StatNumber, { children: summary.complianceStatus.data ? ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "green", children: "Compliant" })) : ((0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "red", children: "Non-Compliant" })) })] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, bg: bgColor, borderRadius: "md", borderWidth: 1, borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "semibold", mb: 4, children: "Validation Metrics" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Stat, { children: [(0, jsx_runtime_1.jsx)(react_2.StatLabel, { children: "Success Rate" }), (0, jsx_runtime_1.jsxs)(react_2.StatNumber, { children: [summary.successRate.toFixed(1), "%"] }), (0, jsx_runtime_1.jsxs)(react_2.StatHelpText, { children: [(0, jsx_runtime_1.jsx)(react_2.StatArrow, { type: summary.successRate > 80 ? 'increase' : 'decrease' }), summary.totalValidations, " total validations"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Stat, { children: [(0, jsx_runtime_1.jsx)(react_2.StatLabel, { children: "Average Issues" }), (0, jsx_runtime_1.jsx)(react_2.StatNumber, { children: summary.averageIssuesPerValidation.toFixed(1) }), (0, jsx_runtime_1.jsx)(react_2.StatHelpText, { children: "per validation" })] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, bg: bgColor, borderRadius: "md", borderWidth: 1, borderColor: borderColor, height: "300px", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "semibold", mb: 4, children: "Validation Trend" }), (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.LineChart, { data: summary.validationTrend, children: [(0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { strokeDasharray: "3 3" }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: "date" }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, {}), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, {}), (0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: "successCount", stroke: "#48BB78", name: "Successful" }), (0, jsx_runtime_1.jsx)(recharts_1.Line, { type: "monotone", dataKey: "failureCount", stroke: "#F56565", name: "Failed" })] }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, bg: bgColor, borderRadius: "md", borderWidth: 1, borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "semibold", mb: 4, children: "Most Common Issues" }), (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { children: "Issue" }), (0, jsx_runtime_1.jsx)(react_2.Th, { isNumeric: true, children: "Count" }), (0, jsx_runtime_1.jsx)(react_2.Th, { isNumeric: true, children: "Percentage" })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: summary.mostCommonIssues.map((issue) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { onClick: () => onIssueClick?.(issue.code), cursor: onIssueClick ? 'pointer' : 'default', _hover: onIssueClick ? { bg: 'gray.50' } : undefined, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { children: issue.code }), (0, jsx_runtime_1.jsx)(react_2.Td, { isNumeric: true, children: issue.count }), (0, jsx_runtime_1.jsxs)(react_2.Td, { isNumeric: true, children: [(0, jsx_runtime_1.jsx)(react_2.Progress, { value: issue.percentage, size: "sm", colorScheme: issue.percentage > 50 ? 'red' : 'yellow' }), issue.percentage.toFixed(1), "%"] })] }, issue.code))) })] })] }), (0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: true, children: (0, jsx_runtime_1.jsxs)(react_2.AccordionItem, { children: [(0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", textAlign: "left", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "lg", fontWeight: "semibold", children: "Validation History" }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionIcon, {})] }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { pb: 4, children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { children: "Timestamp" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Action" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Status" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Issues" })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: history.map((entry) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Td, { children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(fi_1.FiClock, {}), (0, jsx_runtime_1.jsx)(react_2.Text, { children: new Date(entry.timestamp).toLocaleString() })] }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "blue", children: entry.action }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: entry.validationResult.isValid ? ((0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(fi_1.FiCheckCircle, { color: "green" }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: "Valid" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.HStack, { children: [(0, jsx_runtime_1.jsx)(fi_1.FiAlertCircle, { color: "red" }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: "Invalid" })] })) }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { children: [entry.validationResult.errors.length, " errors,", ' ', entry.validationResult.warnings.length, " warnings"] }) })] }, entry.timestamp))) })] }) })] }) })] }));
};
exports.WorkflowAuditDisplay = WorkflowAuditDisplay;
//# sourceMappingURL=WorkflowAuditDisplay.js.map