import {
Badge,
Box,
Button,
Flex,
Grid,
Icon,
Skeleton,
Stack,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
Tooltip,
useClipboard,
} from "@chakra-ui/react";
import { __ } from "@wordpress/i18n";
import React from "react";
import {
FiAlertCircle,
FiAlertTriangle,
FiCalendar,
FiCheck,
FiCheckCircle,
FiCopy,
FiFileText,
FiInfo,
FiSend,
FiServer,
FiXCircle,
} from "react-icons/fi";
// ─── Helpers ────────────────────────────────────────────────────────────────
const getStatusMeta = (status: string | number) => {
const code = Number(status);
if (code >= 200 && code < 300)
return {
scheme: "green",
label: __("Success", "everest-forms-pro"),
icon: FiCheckCircle,
heroBg: "green.50",
heroBorder: "green.200",
heroText: "green.700",
iconColor: "green.500",
};
if (code >= 300 && code < 400)
return {
scheme: "orange",
label: __("Redirect", "everest-forms-pro"),
icon: FiAlertTriangle,
heroBg: "orange.50",
heroBorder: "orange.200",
heroText: "orange.700",
iconColor: "orange.500",
};
if (code >= 400 && code < 500)
return {
scheme: "red",
label: __("Client Error", "everest-forms-pro"),
icon: FiXCircle,
heroBg: "red.50",
heroBorder: "red.200",
heroText: "red.700",
iconColor: "red.500",
};
if (code >= 500)
return {
scheme: "red",
label: __("Server Error", "everest-forms-pro"),
icon: FiAlertCircle,
heroBg: "red.50",
heroBorder: "red.200",
heroText: "red.700",
iconColor: "red.500",
};
return {
scheme: "gray",
label: __("Unknown", "everest-forms-pro"),
icon: FiInfo,
heroBg: "gray.50",
heroBorder: "gray.200",
heroText: "gray.700",
iconColor: "gray.400",
};
};
const tryPrettyJson = (value: string) => {
if (!value) return "—";
try {
return JSON.stringify(JSON.parse(value), null, 2);
} catch {
return value;
}
};
// ─── Sub-components ──────────────────────────────────────────────────────────
const MetaCard = ({
icon,
label,
value,
}: {
icon: React.ElementType;
label: string;
value: string;
}) => (
{label}
{value || "—"}
);
const CopyButton = ({ value }: { value: string }) => {
const { hasCopied, onCopy } = useClipboard(value || "");
return (
: }
variant="ghost"
colorScheme={hasCopied ? "green" : "gray"}
color={hasCopied ? "green.300" : "gray.500"}
_hover={{ color: hasCopied ? "green.300" : "white", bg: "whiteAlpha.200" }}
fontSize="11px"
px="8px"
h="26px"
>
{hasCopied
? __("Copied", "everest-forms-pro")
: __("Copy", "everest-forms-pro")}
);
};
const CodeBlock = ({
children,
value,
label,
}: {
children: React.ReactNode;
value: string;
label: string;
}) => (
{/* Toolbar */}
{label}
{/* Code */}
{children}
);
const LoadingSkeleton = () => (
{/* Hero skeleton */}
{/* Meta cards skeleton */}
{[1, 2, 3].map((i) => (
))}
{/* Log skeleton */}
{/* Code skeleton */}
);
// ─── Main Component ──────────────────────────────────────────────────────────
const ApiLogView: React.FC = ({ singleLogData, isLoading }: any) => {
if (isLoading || !singleLogData || Object.keys(singleLogData).length === 0) {
return ;
}
const { created_date, form_name, log, request, response, source, status } =
singleLogData;
const { scheme, label, icon: StatusIcon, heroBg, heroBorder, heroText, iconColor } =
getStatusMeta(status);
const prettyRequest = tryPrettyJson(request);
const prettyResponse = tryPrettyJson(response);
return (
{/* ── Status Hero ─────────────────────────────────────── */}
{status}
{label}
{__("HTTP Status Code", "everest-forms-pro")}
{/* ── Metadata Cards ──────────────────────────────────── */}
{/* ── Log Message ─────────────────────────────────────── */}
{__("Log Message", "everest-forms-pro")}
{log || "—"}
{/* ── Request / Response Tabs ──────────────────────────── */}
{__("Request", "everest-forms-pro")}
{__("Response", "everest-forms-pro")}
{prettyRequest}
{prettyResponse}
);
};
export default ApiLogView;