import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState, } from "react";
import { CheckCircle2, CircleSlash, DatabaseZap, RefreshCw, Search, } from "lucide-react";
import { Button } from "../../../components/ui/button";
import { Card } from "../../../components/ui/card";
import { SettingsPanelLayout } from "../SettingsPanelLayout";
import { getFieldTypeSerializers, } from "../../services/systemService";
export function FieldTypeSerializersPanel() {
    const [state, setState] = useState("idle");
    const [error, setError] = useState();
    const [items, setItems] = useState([]);
    const [query, setQuery] = useState("");
    const load = useCallback(async () => {
        setState("loading");
        setError(undefined);
        const result = await getFieldTypeSerializers();
        if (result.type !== "success" || !result.data) {
            setState("error");
            setError(result.details ||
                result.summary ||
                "Failed to load field type serializers.");
            return;
        }
        setItems(result.data);
        setState("success");
    }, []);
    useEffect(() => {
        void load();
    }, [load]);
    const filteredItems = useMemo(() => {
        const trimmed = query.trim().toLowerCase();
        if (!trimmed)
            return items;
        return items.filter((item) => [
            item.group,
            item.name,
            item.path,
            item.serializerType,
            item.serializerFullType,
        ]
            .filter(Boolean)
            .some((value) => value.toLowerCase().includes(trimmed)));
    }, [items, query]);
    return (_jsx(SettingsPanelLayout, { children: _jsx(Card, { icon: _jsx(DatabaseZap, { strokeWidth: 1, className: "h-5 w-5" }), title: "Field type serializers", description: "Sitecore field types and the Parhelia serializer used for editor values.", headerActions: _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void load(), disabled: state === "loading", children: [_jsx(RefreshCw, { className: `mr-2 h-4 w-4 ${state === "loading" ? "animate-spin" : ""}`, strokeWidth: 1.5 }), "Refresh"] }), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-neutral-grey-50 pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2", strokeWidth: 1.5 }), _jsx("input", { type: "search", value: query, onChange: (event) => setQuery(event.target.value), placeholder: "Search field types", className: "border-border-default text-neutral-grey-100 placeholder:text-neutral-grey-50 focus:border-component-suggestions focus:ring-component-suggestions h-9 w-full rounded-md border bg-white pr-3 pl-9 text-sm transition-colors outline-none focus:ring-2" })] }), state === "error" && (_jsx("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red rounded-lg border p-4 text-sm", children: error })), state === "loading" && items.length === 0 && (_jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 text-sm", children: [_jsx(RefreshCw, { className: "h-4 w-4 animate-spin", strokeWidth: 1.5 }), "Loading field type serializers..."] })), state !== "loading" && filteredItems.length === 0 && !error && (_jsxs("div", { className: "border-border-default bg-neutral-grey-5 rounded-lg border p-6 text-center", children: [_jsx(CircleSlash, { className: "text-neutral-grey-50 mx-auto mb-3 h-8 w-8", strokeWidth: 1.5 }), _jsx("p", { className: "text-neutral-grey-50 text-sm", children: "No field type serializers match the current search." })] })), filteredItems.length > 0 && (_jsx("div", { className: "border-border-default overflow-hidden rounded-lg border bg-white", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "divide-border-default min-w-full divide-y text-sm", children: [_jsx("thead", { className: "bg-neutral-grey-5", children: _jsxs("tr", { children: [_jsx(TableHeader, { children: "Field type" }), _jsx(TableHeader, { children: "Group" }), _jsx(TableHeader, { children: "Serializer" }), _jsx(TableHeader, { children: "Path" })] }) }), _jsx("tbody", { className: "divide-border-default divide-y bg-white", children: filteredItems.map((item) => (_jsxs("tr", { className: "hover:bg-neutral-grey-5", children: [_jsxs("td", { className: "px-4 py-3 align-top", children: [_jsx("div", { className: "text-neutral-grey-100 font-medium", children: item.name }), _jsx("div", { className: "text-neutral-grey-50 mt-1 font-mono text-[11px]", children: item.itemId })] }), _jsx("td", { className: "px-4 py-3 align-top", children: _jsx("span", { className: "rounded-badge bg-neutral-grey-5 badge-pad-sm text-2xs text-neutral-grey-100 font-medium", children: item.group }) }), _jsx("td", { className: "px-4 py-3 align-top", children: _jsxs("div", { className: "flex min-w-56 items-start gap-2", children: [item.hasCustomSerializer ? (_jsx(CheckCircle2, { className: "text-feedback-green mt-0.5 h-4 w-4 shrink-0", strokeWidth: 1.5 })) : (_jsx(CircleSlash, { className: "text-neutral-grey-50 mt-0.5 h-4 w-4 shrink-0", strokeWidth: 1.5 })), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-neutral-grey-100 font-medium", children: item.serializerType }), item.serializerFullType && (_jsx("div", { className: "text-neutral-grey-50 mt-1 font-mono text-[11px] break-all", children: item.serializerFullType }))] })] }) }), _jsx("td", { className: "px-4 py-3 align-top", children: _jsx("div", { className: "text-neutral-grey-50 max-w-xl font-mono text-[11px] break-all", children: item.path }) })] }, item.itemId))) })] }) }) }))] }) }) }));
}
function TableHeader({ children }) {
    return (_jsx("th", { className: "text-neutral-grey-50 px-4 py-2 text-left text-xs font-medium tracking-wide", children: children }));
}
export default FieldTypeSerializersPanel;
//# sourceMappingURL=FieldTypeSerializersPanel.js.map