'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useMemo } from 'react';
import { CheckCircle, Circle, Trash, Plus, WarningCircle } from '@phosphor-icons/react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/lib/utils';
let idCounter = 0;
const generateId = ()=>`kv_${Date.now()}_${idCounter++}`;
export function KeyValueEditor({ items, onChange, title = 'Parameters', keyLabel = 'Name', valueLabel = 'Value', showDescription = false, readOnly = false, showError = false }) {
    // Ensure there's always an empty row at the end for new entries
    const workingItems = useMemo(()=>{
        if (items.length === 0 || items[items.length - 1].key !== '') {
            return [
                ...items,
                {
                    id: generateId(),
                    key: '',
                    value: '',
                    active: true,
                    description: ''
                }
            ];
        }
        return items;
    }, [
        items
    ]);
    const updateItem = useCallback((index, updates)=>{
        const newItems = workingItems.map((item, i)=>i === index ? {
                ...item,
                ...updates
            } : item);
        const filtered = newItems.filter((item, i)=>i === newItems.length - 1 || item.key !== '' || item.value !== '');
        onChange(filtered.filter((item)=>item.key !== '' || item.value !== ''));
    }, [
        workingItems,
        onChange
    ]);
    const deleteItem = useCallback((index)=>{
        const newItems = workingItems.filter((_, i)=>i !== index);
        onChange(newItems.filter((item)=>item.key !== ''));
    }, [
        workingItems,
        onChange
    ]);
    const addItem = useCallback(()=>{
        onChange([
            ...items,
            {
                id: generateId(),
                key: '',
                value: '',
                active: true,
                description: ''
            }
        ]);
    }, [
        items,
        onChange
    ]);
    const clearAll = useCallback(()=>{
        onChange([]);
    }, [
        onChange
    ]);
    const toggleActive = useCallback((index)=>{
        const item = workingItems[index];
        if (item) {
            updateItem(index, {
                active: !item.active
            });
        }
    }, [
        workingItems,
        updateItem
    ]);
    const activeCount = useMemo(()=>{
        return items.filter((item)=>item.active && item.key).length;
    }, [
        items
    ]);
    const hasItems = items.some((item)=>item.key !== '');
    return /*#__PURE__*/ _jsx(TooltipProvider, {
        children: /*#__PURE__*/ _jsxs("div", {
            className: "flex flex-1 flex-col h-full",
            children: [
                /*#__PURE__*/ _jsxs("div", {
                    className: cn("sticky top-0 z-10 flex items-center justify-between border-b bg-muted/30 px-4 py-2", showError ? "border-red-500 bg-red-500/5" : "border-border"),
                    children: [
                        /*#__PURE__*/ _jsxs("div", {
                            className: "flex items-center gap-2",
                            children: [
                                showError && /*#__PURE__*/ _jsx(WarningCircle, {
                                    className: "h-4 w-4 text-red-500 animate-pulse",
                                    weight: "fill"
                                }),
                                /*#__PURE__*/ _jsx("label", {
                                    className: cn("truncate font-semibold text-sm", showError ? "text-red-500" : "text-foreground"),
                                    children: title
                                }),
                                activeCount > 0 && /*#__PURE__*/ _jsx("span", {
                                    className: "text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full",
                                    children: activeCount
                                })
                            ]
                        }),
                        /*#__PURE__*/ _jsxs("div", {
                            className: "flex items-center gap-1",
                            children: [
                                hasItems && /*#__PURE__*/ _jsxs(Tooltip, {
                                    children: [
                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
                                            asChild: true,
                                            children: /*#__PURE__*/ _jsx(Button, {
                                                variant: "ghost",
                                                size: "icon",
                                                className: "h-7 w-7 text-muted-foreground hover:text-destructive",
                                                onClick: clearAll,
                                                disabled: readOnly,
                                                children: /*#__PURE__*/ _jsx(Trash, {
                                                    className: "h-3.5 w-3.5"
                                                })
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                            children: "Clear all"
                                        })
                                    ]
                                }),
                                /*#__PURE__*/ _jsxs(Tooltip, {
                                    children: [
                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
                                            asChild: true,
                                            children: /*#__PURE__*/ _jsx(Button, {
                                                variant: "ghost",
                                                size: "icon",
                                                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
                                                onClick: addItem,
                                                disabled: readOnly,
                                                children: /*#__PURE__*/ _jsx(Plus, {
                                                    className: "h-3.5 w-3.5"
                                                })
                                            })
                                        }),
                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                            children: "Add new"
                                        })
                                    ]
                                })
                            ]
                        })
                    ]
                }),
                /*#__PURE__*/ _jsxs("div", {
                    className: "flex-1 overflow-auto",
                    children: [
                        workingItems.length > 0 && /*#__PURE__*/ _jsxs("table", {
                            className: "w-full text-sm",
                            children: [
                                /*#__PURE__*/ _jsx("thead", {
                                    className: "text-xs text-muted-foreground sticky top-0 z-10",
                                    children: /*#__PURE__*/ _jsxs("tr", {
                                        className: "bg-background border-b border-border/40 shadow-sm",
                                        children: [
                                            /*#__PURE__*/ _jsx("th", {
                                                className: "text-left font-medium px-3 py-2.5 w-[45%] bg-background",
                                                children: keyLabel
                                            }),
                                            /*#__PURE__*/ _jsx("th", {
                                                className: "text-left font-medium px-3 py-2.5 w-[45%] bg-background",
                                                children: valueLabel
                                            }),
                                            showDescription && /*#__PURE__*/ _jsx("th", {
                                                className: "text-left font-medium px-3 py-2.5 bg-background",
                                                children: "Description"
                                            }),
                                            /*#__PURE__*/ _jsx("th", {
                                                className: "w-16 bg-background"
                                            })
                                        ]
                                    })
                                }),
                                /*#__PURE__*/ _jsx("tbody", {
                                    children: workingItems.map((item, index)=>{
                                        const isLastEmpty = index === workingItems.length - 1 && !item.key;
                                        return /*#__PURE__*/ _jsxs("tr", {
                                            className: `border-b border-border/50 hover:bg-muted/20 group ${!item.active ? 'opacity-50' : ''}`,
                                            children: [
                                                /*#__PURE__*/ _jsx("td", {
                                                    className: "px-2 py-1.5",
                                                    children: /*#__PURE__*/ _jsx(Input, {
                                                        type: "text",
                                                        value: item.key,
                                                        onChange: (e)=>updateItem(index, {
                                                                key: e.target.value
                                                            }),
                                                        placeholder: isLastEmpty ? `Add ${keyLabel.toLowerCase()}...` : '',
                                                        className: "h-9 bg-background border border-border/60 focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:border-primary/50 placeholder:text-muted-foreground/50",
                                                        disabled: readOnly
                                                    })
                                                }),
                                                /*#__PURE__*/ _jsx("td", {
                                                    className: "px-2 py-1.5",
                                                    children: /*#__PURE__*/ _jsx(Input, {
                                                        type: "text",
                                                        value: item.value,
                                                        onChange: (e)=>updateItem(index, {
                                                                value: e.target.value
                                                            }),
                                                        placeholder: isLastEmpty ? `Add ${valueLabel.toLowerCase()}...` : '',
                                                        className: "h-9 bg-background border border-border/60 focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:border-primary/50 placeholder:text-muted-foreground/50",
                                                        disabled: readOnly
                                                    })
                                                }),
                                                showDescription && /*#__PURE__*/ _jsx("td", {
                                                    className: "px-2 py-1.5",
                                                    children: /*#__PURE__*/ _jsx(Input, {
                                                        type: "text",
                                                        value: item.description || '',
                                                        onChange: (e)=>updateItem(index, {
                                                                description: e.target.value
                                                            }),
                                                        placeholder: "",
                                                        className: "h-9 bg-background border border-border/60 focus-visible:ring-1 focus-visible:ring-primary/30 focus-visible:border-primary/50 text-muted-foreground",
                                                        disabled: readOnly
                                                    })
                                                }),
                                                /*#__PURE__*/ _jsx("td", {
                                                    className: "px-2 py-1.5",
                                                    children: /*#__PURE__*/ _jsx("div", {
                                                        className: "flex items-center justify-end gap-0.5",
                                                        children: !isLastEmpty && /*#__PURE__*/ _jsxs(_Fragment, {
                                                            children: [
                                                                /*#__PURE__*/ _jsxs(Tooltip, {
                                                                    children: [
                                                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
                                                                            asChild: true,
                                                                            children: /*#__PURE__*/ _jsx(Button, {
                                                                                variant: "ghost",
                                                                                size: "icon",
                                                                                className: "h-7 w-7",
                                                                                onClick: ()=>toggleActive(index),
                                                                                disabled: readOnly,
                                                                                children: item.active ? /*#__PURE__*/ _jsx(CheckCircle, {
                                                                                    className: "h-4 w-4 text-green-500",
                                                                                    weight: "fill"
                                                                                }) : /*#__PURE__*/ _jsx(Circle, {
                                                                                    className: "h-4 w-4 text-muted-foreground"
                                                                                })
                                                                            })
                                                                        }),
                                                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                                                            children: item.active ? 'Disable' : 'Enable'
                                                                        })
                                                                    ]
                                                                }),
                                                                /*#__PURE__*/ _jsxs(Tooltip, {
                                                                    children: [
                                                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
                                                                            asChild: true,
                                                                            children: /*#__PURE__*/ _jsx(Button, {
                                                                                variant: "ghost",
                                                                                size: "icon",
                                                                                className: "h-7 w-7 text-muted-foreground hover:text-destructive",
                                                                                onClick: ()=>deleteItem(index),
                                                                                disabled: readOnly,
                                                                                children: /*#__PURE__*/ _jsx(Trash, {
                                                                                    className: "h-3.5 w-3.5"
                                                                                })
                                                                            })
                                                                        }),
                                                                        /*#__PURE__*/ _jsx(TooltipContent, {
                                                                            children: "Remove"
                                                                        })
                                                                    ]
                                                                })
                                                            ]
                                                        })
                                                    })
                                                })
                                            ]
                                        }, item.id);
                                    })
                                })
                            ]
                        }),
                        !hasItems && workingItems.length <= 1 && /*#__PURE__*/ _jsxs("div", {
                            className: "flex flex-col items-center justify-center py-8 text-center",
                            children: [
                                /*#__PURE__*/ _jsxs("p", {
                                    className: "text-xs text-muted-foreground",
                                    children: [
                                        "No ",
                                        title.toLowerCase(),
                                        " added yet"
                                    ]
                                }),
                                /*#__PURE__*/ _jsxs("p", {
                                    className: "text-xs text-muted-foreground mt-1",
                                    children: [
                                        "Click ",
                                        /*#__PURE__*/ _jsx(Plus, {
                                            className: "h-3 w-3 inline"
                                        }),
                                        " to add one"
                                    ]
                                })
                            ]
                        })
                    ]
                })
            ]
        })
    });
}
