import { useEffect, useMemo, useState } from "react";
import { useLockFn } from "ahooks";
import yaml from "js-yaml";
import { useTranslation } from "react-i18next";
import {
  DndContext,
  closestCenter,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragEndEvent,
} from "@dnd-kit/core";
import {
  SortableContext,
  sortableKeyboardCoordinates,
  useSortable,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Virtuoso } from "react-virtuoso";
import MonacoEditor from "react-monaco-editor";
import { useForm } from "react-hook-form";

import {
  getNetworkInterfaces,
  readProfileFile,
  saveProfileFile,
} from "@/services/cmds";
import getSystem from "@/utils/get-system";
import { useThemeMode } from "@/services/states";
import { BaseSearchBox } from "../base/base-search-box";
import { showNotice } from "@/services/noticeService";
import { cn } from "@root/lib/utils";

// --- Компоненты shadcn/ui и иконки ---
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  DialogClose,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import { Separator } from "@/components/ui/separator";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { Badge } from "@/components/ui/badge";
import { Form, FormControl, FormField, FormItem, FormLabel, FormDescription } from "@/components/ui/form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Check,
  ChevronsUpDown,
  GripVertical,
  Trash2,
  Undo2,
  ArrowDownToLine,
  ArrowUpToLine,
} from "lucide-react";


// --- Вспомогательные функции, константы и валидаторы ---
const portValidator = (value: string): boolean => /^(?:[1-9]\d{0,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(value);
const ipv4CIDRValidator = (value: string): boolean => /^(?:(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))\.){3}(?:[1-9]?[0-9]|1[0-9][0-9]|2(?:[0-4][0-9]|5[0-5]))(?:\/(?:[12]?[0-9]|3[0-2]))?$/.test(value);
const ipv6CIDRValidator = (value: string): boolean => /^([0-9a-fA-F]{1,4}(?::[0-9a-fA-F]{1,4}){7}|::|:(?::[0-9a-fA-F]{1,4}){1,6}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,5}|(?:[0-9a-fA-F]{1,4}:){2}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){3}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){4}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){5}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,6}:)\/(?:12[0-8]|1[01][0-9]|[1-9]?[0-9])$/.test(value);
const builtinProxyPolicies = ["DIRECT", "REJECT", "REJECT-DROP", "PASS"];
interface Props {
  proxiesUid: string;
  mergeUid: string;
  profileUid: string;
  property: string;
  open: boolean;
  onClose: () => void;
  onSave?: (prev?: string, curr?: string) => void;
}

// --- Новый компонент Combobox (одиночный выбор) ---
const Combobox = ({ options, value, onSelect, placeholder }: { options: string[], value: string, onSelect: (value: string) => void, placeholder?: string }) => {
    const [open, setOpen] = useState(false);
    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between font-normal">
                    {value || placeholder || "Select..."}
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
                <Command>
                    <CommandInput placeholder="Search..." />
                    <CommandEmpty>No results found.</CommandEmpty>
                    <CommandList>
                        {options.map((option) => (
                            <CommandItem key={option} value={option} onSelect={(currentValue) => { onSelect(options.find(opt => opt.toLowerCase() === currentValue) || ''); setOpen(false); }}>
                                <Check className={cn("mr-2 h-4 w-4", value === option ? "opacity-100" : "opacity-0")} />
                                {option}
                            </CommandItem>
                        ))}
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
};

// --- Новый компонент MultiSelectCombobox (множественный выбор) ---
const MultiSelectCombobox = ({ options, value, onChange, placeholder }: { options: string[], value: string[], onChange: (value: string[]) => void, placeholder?: string }) => {
    const [open, setOpen] = useState(false);
    const selectedSet = new Set(value);

    const handleSelect = (currentValue: string) => {
        const newSet = new Set(selectedSet);
        if (newSet.has(currentValue)) {
            newSet.delete(currentValue);
        } else {
            newSet.add(currentValue);
        }
        onChange(Array.from(newSet));
    };

    return (
        <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
                <Button variant="outline" role="combobox" aria-expanded={open} className="w-full justify-between font-normal h-auto min-h-10">
                    <div className="flex gap-1 flex-wrap">
                        {value && value.length > 0 ? value.map(item => <Badge key={item} variant="secondary">{item}</Badge>) : <span className="text-muted-foreground">{placeholder || "Select..."}</span>}
                    </div>
                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[--radix-popover-trigger-width] p-0">
                <Command>
                    <CommandInput placeholder="Search..." />
                    <CommandEmpty>No results found.</CommandEmpty>
                    <CommandList>
                        {options.map((option) => (
                            <CommandItem key={option} value={option} onSelect={() => handleSelect(option)} className="cursor-pointer">
                                <Check className={cn("mr-2 h-4 w-4", selectedSet.has(option) ? "opacity-100" : "opacity-0")} />
                                {option}
                            </CommandItem>
                        ))}
                    </CommandList>
                </Command>
            </PopoverContent>
        </Popover>
    );
};

// --- Новый компонент для элемента списка групп ---
const EditorGroupItem = ({ type, group, onDelete, id }: { type: string, group: IProxyGroupConfig, onDelete: () => void, id: string }) => {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
    const style = { transform: CSS.Transform.toString(transform), transition, zIndex: isDragging ? 100 : undefined };
    const isDelete = type === 'delete';
    return (
        <div ref={setNodeRef} style={style} className="flex items-center p-2 mb-1 rounded-md bg-secondary" {...attributes}>
            <div {...listeners} className="cursor-grab p-1 text-muted-foreground hover:bg-accent rounded-sm"><GripVertical className="h-5 w-5" /></div>
            <p className={`flex-1 truncate text-sm ${isDelete ? 'line-through text-muted-foreground' : ''}`}>{group.name}</p>
            <Button variant="ghost" size="icon" className="h-7 w-7" onClick={onDelete}>
                {isDelete ? <Undo2 className="h-4 w-4" /> : <Trash2 className="h-4 w-4 text-destructive" />}
            </Button>
        </div>
    )
};

export const GroupsEditorViewer = (props: Props) => {
    const { mergeUid, proxiesUid, profileUid, property, open, onClose, onSave } = props;
    const { t } = useTranslation();
    const themeMode = useThemeMode();
    const [prevData, setPrevData] = useState("");
    const [currData, setCurrData] = useState("");
    const [visualization, setVisualization] = useState(true);
    const [match, setMatch] = useState(() => (_: string) => true);
    const [interfaceNameList, setInterfaceNameList] = useState<string[]>([]);
    
    const form = useForm<IProxyGroupConfig>({
        defaultValues: { type: "select", name: "", interval: 300, timeout: 5000, "max-failed-times": 5, lazy: true },
    });
    const { control, watch, handleSubmit, getValues } = form;

    const [groupList, setGroupList] = useState<IProxyGroupConfig[]>([]);
    const [proxyPolicyList, setProxyPolicyList] = useState<string[]>([]);
    const [proxyProviderList, setProxyProviderList] = useState<string[]>([]);
    const [prependSeq, setPrependSeq] = useState<IProxyGroupConfig[]>([]);
    const [appendSeq, setAppendSeq] = useState<IProxyGroupConfig[]>([]);
    const [deleteSeq, setDeleteSeq] = useState<string[]>([]);

    const filteredPrependSeq = useMemo(() => prependSeq.filter((group) => match(group.name)), [prependSeq, match]);
    const filteredGroupList = useMemo(() => groupList.filter((group) => match(group.name)), [groupList, match]);
    const filteredAppendSeq = useMemo(() => appendSeq.filter((group) => match(group.name)), [appendSeq, match]);

    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));

    const reorder = (list: IProxyGroupConfig[], startIndex: number, endIndex: number) => {
        const result = Array.from(list);
        const [removed] = result.splice(startIndex, 1);
        result.splice(endIndex, 0, removed);
        return result;
    };
    
    const onPrependDragEnd = async (event: DragEndEvent) => {
        const { active, over } = event;
        if (over && active.id !== over.id) {
            let activeIndex = 0;
            let overIndex = 0;
            prependSeq.forEach((item, index) => {
                if (item.name === active.id) activeIndex = index;
                if (item.name === over.id) overIndex = index;
            });
            setPrependSeq(reorder(prependSeq, activeIndex, overIndex));
        }
    };
    
    const onAppendDragEnd = async (event: DragEndEvent) => {
        const { active, over } = event;
        if (over && active.id !== over.id) {
            let activeIndex = 0;
            let overIndex = 0;
            appendSeq.forEach((item, index) => {
                if (item.name === active.id) activeIndex = index;
                if (item.name === over.id) overIndex = index;
            });
            setAppendSeq(reorder(appendSeq, activeIndex, overIndex));
        }
    };
    
    const fetchContent = async () => {
        try {
            let data = await readProfileFile(property);
            let obj = yaml.load(data) as ISeqProfileConfig | null;
            setPrependSeq(obj?.prepend || []);
            setAppendSeq(obj?.append || []);
            setDeleteSeq(obj?.delete || []);
            setPrevData(data);
            setCurrData(data);
        } catch (error) { console.error("Failed to fetch or parse content:", error); }
    };
    
    useEffect(() => {
        if (currData === "" || !visualization) return;
        try {
            let obj = yaml.load(currData) as { prepend: [], append: [], delete: [] } | null;
            setPrependSeq(obj?.prepend || []);
            setAppendSeq(obj?.append || []);
            setDeleteSeq(obj?.delete || []);
        } catch (e) { /* Ignore parsing errors while typing */ }
    }, [visualization, currData]);
    
    useEffect(() => {
        if (prependSeq && appendSeq && deleteSeq && visualization) {
            const serialize = () => {
                try {
                    setCurrData(yaml.dump({ prepend: prependSeq, append: appendSeq, delete: deleteSeq }, { forceQuotes: true }));
                } catch (e: any) { showNotice("error", e?.message || e?.toString() || "YAML dump error"); }
            };
            if (window.requestIdleCallback) { window.requestIdleCallback(serialize); } else { setTimeout(serialize, 0); }
        }
    }, [prependSeq, appendSeq, deleteSeq, visualization]);
    
    const fetchProxyPolicy = async () => {
        try {
            let data = await readProfileFile(profileUid);
            let proxiesData = await readProfileFile(proxiesUid);
            let originGroupsObj = yaml.load(data) as { "proxy-groups": IProxyGroupConfig[] } | null;
            let originProxiesObj = yaml.load(data) as { proxies: [] } | null;
            let originProxies = originProxiesObj?.proxies || [];
            let moreProxiesObj = yaml.load(proxiesData) as ISeqProfileConfig | null;
            let morePrependProxies = moreProxiesObj?.prepend || [];
            let moreAppendProxies = moreProxiesObj?.append || [];
            let moreDeleteProxies = moreProxiesObj?.delete || ([] as string[] | { name: string }[]);
            let proxies = morePrependProxies.concat(originProxies.filter((proxy: any) => !moreDeleteProxies.some((del: any) => (del.name || del) === proxy.name)), moreAppendProxies);

            setProxyPolicyList(Array.from(new Set(builtinProxyPolicies.concat(
                prependSeq.map((group) => group.name),
                originGroupsObj?.["proxy-groups"].map((group) => group.name).filter((name) => !deleteSeq.includes(name)) || [],
                appendSeq.map((group) => group.name),
                proxies.map((proxy: any) => proxy.name),
            ))));
        } catch(error) { console.error("Failed to fetch proxy policy:", error) }
    };

    const fetchProfile = async () => {
        try {
            let data = await readProfileFile(profileUid);
            let mergeData = await readProfileFile(mergeUid);
            let globalMergeData = await readProfileFile("Merge");

            let originGroupsObj = yaml.load(data) as { "proxy-groups": IProxyGroupConfig[] } | null;
            let originProviderObj = yaml.load(data) as { "proxy-providers": {} } | null;
            let originProvider = originProviderObj?.["proxy-providers"] || {};
            let moreProviderObj = yaml.load(mergeData) as { "proxy-providers": {} } | null;
            let moreProvider = moreProviderObj?.["proxy-providers"] || {};
            let globalProviderObj = yaml.load(globalMergeData) as { "proxy-providers": {} } | null;
            let globalProvider = globalProviderObj?.["proxy-providers"] || {};
            let provider = { ...originProvider, ...moreProvider, ...globalProvider };

            setProxyProviderList(Object.keys(provider));
            setGroupList(originGroupsObj?.["proxy-groups"] || []);
        } catch(error) { console.error("Failed to fetch profile:", error) }
    };
    
    const getInterfaceNameList = async () => {
        try {
            let list = await getNetworkInterfaces();
            setInterfaceNameList(list);
        } catch (error) { console.error("Failed to get network interfaces:", error) }
    };
    
    useEffect(() => { fetchProxyPolicy(); }, [prependSeq, appendSeq, deleteSeq]);
    
    useEffect(() => {
        if (open) {
          fetchContent();
          fetchProxyPolicy();
          fetchProfile();
          getInterfaceNameList();
        }
      }, [open]);

    const validateGroup = () => {
        let group = getValues();
        if (group.name === "") {
            throw new Error(t("Group Name Required"));
        }
    };
    
    const handleSave = useLockFn(async () => {
        try {
            await saveProfileFile(property, currData);
            showNotice("success", t("Saved Successfully"));
            onSave?.(prevData, currData);
            onClose();
        } catch (err: any) {
            showNotice("error", err.toString());
        }
    });

    const groupType = watch("type");

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="min-w-6xl h-[90vh] flex flex-col">
                <DialogHeader>
                    <div className="flex justify-between items-center pr-8">
                        <DialogTitle>{t("Edit Groups")}</DialogTitle>
                        <Button variant="outline" size="sm" onClick={() => setVisualization(prev => !prev)}>
                            {visualization ? t("Advanced") : t("Visualization")}
                        </Button>
                    </div>
                </DialogHeader>

                <div className="flex-1 min-h-0 mt-4">
                    {visualization ? (
                        <Form {...form}>
                            <form className="h-full flex gap-4">
                                {/* Левая панель: Конструктор групп */}
                                <div className="w-1/2 flex flex-col border rounded-md p-4">
                                    <h3 className="text-lg font-medium mb-4">Constructor</h3>
                                    <Separator className="mb-4"/>
                                    <div className="space-y-3 overflow-y-auto p-1 -mr-3 ">
                                        <FormField control={control} name="type" render={({ field }) => (<FormItem><FormLabel>{t("Group Type")}</FormLabel><Select onValueChange={field.onChange} defaultValue={field.value}><FormControl><SelectTrigger><SelectValue/></SelectTrigger></FormControl><SelectContent><SelectItem value="select">select</SelectItem><SelectItem value="url-test">url-test</SelectItem><SelectItem value="fallback">fallback</SelectItem><SelectItem value="load-balance">load-balance</SelectItem><SelectItem value="relay">relay</SelectItem></SelectContent></Select></FormItem>)}/>
                                        <FormField control={control} name="name" render={({ field }) => (<FormItem><FormLabel>{t("Group Name")}</FormLabel><FormControl><Input {...field} required/></FormControl></FormItem>)}/>
                                        <FormField control={control} name="icon" render={({ field }) => (<FormItem><FormLabel>{t("Proxy Group Icon")}</FormLabel><FormControl><Input {...field}/></FormControl></FormItem>)}/>
                                        <FormField control={control} name="proxies" render={({ field }) => (<FormItem><FormLabel>{t("Use Proxies")}</FormLabel><MultiSelectCombobox options={proxyPolicyList} value={field.value || []} onChange={field.onChange} placeholder={t("Select proxies...")} /></FormItem>)}/>
                                        <FormField control={control} name="use" render={({ field }) => (<FormItem><FormLabel>{t("Use Provider")}</FormLabel><MultiSelectCombobox options={proxyProviderList} value={field.value || []} onChange={field.onChange} placeholder={t("Select providers...")} /></FormItem>)}/>
                                        {(groupType === "url-test" || groupType === "fallback") && <>
                                            <FormField control={control} name="url" render={({ field }) => (<FormItem><FormLabel>{t("Health Check Url")}</FormLabel><FormControl><Input placeholder="https://cp.cloudflare.com/generate_204" {...field}/></FormControl></FormItem>)}/>
                                            <FormField control={control} name="interval" render={({ field }) => (<FormItem><FormLabel>{t("Interval")}</FormLabel><FormControl><div className="flex items-center gap-2"><Input type="number" placeholder="300" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/><span className="text-sm text-muted-foreground">{t("seconds")}</span></div></FormControl></FormItem>)}/>
                                            <FormField control={control} name="timeout" render={({ field }) => (<FormItem><FormLabel>{t("Timeout")}</FormLabel><FormControl><div className="flex items-center gap-2"><Input type="number" placeholder="5000" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/><span className="text-sm text-muted-foreground">{t("millis")}</span></div></FormControl></FormItem>)}/>
                                            <FormField control={control} name="max-failed-times" render={({ field }) => (<FormItem><FormLabel>{t("Max Failed Times")}</FormLabel><FormControl><Input type="number" placeholder="5" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/></FormControl></FormItem>)}/>
                                        </>}
                                        <FormField control={control} name="interface-name" render={({ field }) => (<FormItem><FormLabel>{t("Interface Name")}</FormLabel><Combobox options={interfaceNameList} value={field.value} onSelect={field.onChange} /></FormItem>)}/>
                                        <FormField control={control} name="routing-mark" render={({ field }) => (<FormItem><FormLabel>{t("Routing Mark")}</FormLabel><FormControl><Input type="number" value={field.value} onChange={e => field.onChange(parseInt(e.target.value, 10) || 0)}/></FormControl></FormItem>)}/>
                                        {(groupType === "url-test" || groupType === "fallback" || groupType === "load-balance") && <>
                                          <FormField control={control} name="lazy" render={({ field }) => (<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3"><FormLabel>{t("Lazy")}</FormLabel><FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl></FormItem>)} />
                                          <FormField control={control} name="disable-udp" render={({ field }) => (<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3"><FormLabel>{t("Disable UDP")}</FormLabel><FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl></FormItem>)} />
                                        </>}
                                        <FormField control={control} name="hidden" render={({ field }) => (<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3"><FormLabel>{t("Hidden")}</FormLabel><FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl></FormItem>)} />
                                    </div>
                                    <div className="flex flex-col gap-2 mt-auto pt-4">
                                        <Button type="button" onClick={() => { try { validateGroup(); const newGroup = getValues(); if ([...prependSeq, ...groupList, ...appendSeq].every(g => g.name !== newGroup.name)) setPrependSeq([newGroup, ...prependSeq]); else throw new Error(t("Group Name Already Exists")); } catch (err: any) { showNotice("error", err.message); }}}><ArrowUpToLine className="mr-2 h-4 w-4" />{t("Prepend Group")}</Button>
                                        <Button type="button" onClick={() => { try { validateGroup(); const newGroup = getValues(); if ([...prependSeq, ...groupList, ...appendSeq].every(g => g.name !== newGroup.name)) setAppendSeq([...appendSeq, newGroup]); else throw new Error(t("Group Name Already Exists")); } catch (err: any) { showNotice("error", err.message); }}}><ArrowDownToLine className="mr-2 h-4 w-4" />{t("Append Group")}</Button>
                                    </div>
                                </div>
                                
                                <Separator orientation="vertical" />
                                
                                <div className="w-1/2 flex flex-col">
                                    <BaseSearchBox onSearch={(matcher) => setMatch(() => matcher)} />
                                    <div className="flex-1 min-h-0 mt-2 rounded-md border">
                                        <Virtuoso
                                            className="h-full"
                                            totalCount={filteredGroupList.length + (filteredPrependSeq.length > 0 ? 1 : 0) + (filteredAppendSeq.length > 0 ? 1 : 0)}
                                            itemContent={(index) => {
                                                let shift = filteredPrependSeq.length > 0 ? 1 : 0;
                                                if (filteredPrependSeq.length > 0 && index === 0) {
                                                    return (<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onPrependDragEnd}><SortableContext items={filteredPrependSeq.map(x => x.name)}>{filteredPrependSeq.map((item) => (<EditorGroupItem key={item.name} id={item.name} type="prepend" group={item} onDelete={() => setPrependSeq(prependSeq.filter(v => v.name !== item.name))} />))}</SortableContext></DndContext>);
                                                } else if (index < filteredGroupList.length + shift) {
                                                    const newIndex = index - shift;
                                                    const currentGroup = filteredGroupList[newIndex];
                                                    return (<EditorGroupItem key={currentGroup.name} id={currentGroup.name} type={deleteSeq.includes(currentGroup.name) ? "delete" : "original"} group={currentGroup} onDelete={() => { if (deleteSeq.includes(currentGroup.name)) { setDeleteSeq(deleteSeq.filter(v => v !== currentGroup.name)); } else { setDeleteSeq((prev) => [...prev, currentGroup.name]); }}} />);
                                                } else {
                                                    return (<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onAppendDragEnd}><SortableContext items={filteredAppendSeq.map(x => x.name)}>{filteredAppendSeq.map((item) => (<EditorGroupItem key={item.name} id={item.name} type="append" group={item} onDelete={() => setAppendSeq(appendSeq.filter(v => v.name !== item.name))} />))}</SortableContext></DndContext>);
                                                }
                                            }}
                                        />
                                    </div>
                                </div>
                            </form>
                        </Form>
                    ) : (
                        <div className="h-full rounded-md border">
                            <MonacoEditor height="100%" language="yaml" value={currData} theme={themeMode === "light" ? "vs" : "vs-dark"} options={{ tabSize: 2, minimap: { enabled: document.documentElement.clientWidth >= 1500 }, mouseWheelZoom: true, quickSuggestions: { strings: true, comments: true, other: true }, padding: { top: 16 }, fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${getSystem() === "windows" ? ", twemoji mozilla" : ""}`, fontLigatures: false, smoothScrolling: true }} onChange={(value) => setCurrData(value)} />
                        </div>
                    )}
                </div>

                <DialogFooter className="mt-4">
                    <DialogClose asChild><Button type="button" variant="outline">{t("Cancel")}</Button></DialogClose>
                    <Button type="button" onClick={handleSubmit(handleSave)}>{t("Save")}</Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
};