'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { Code2, Terminal, FolderOpen, Play, Square, Loader2 } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
import { Button } from '../../ui/button.js';
import { useFeatureFlags } from '../../../hooks/feature-flags-context.js';
function RepoActionButtons({ repositoryPath, callbacks, }) {
    const { t } = useTranslation('web');
    const featureFlags = useFeatureFlags();
    const [ideLoading, setIdeLoading] = useState(false);
    const [shellLoading, setShellLoading] = useState(false);
    const [folderLoading, setFolderLoading] = useState(false);
    const [serverLoading, setServerLoading] = useState(false);
    const isRunning = callbacks.isServerRunning(repositoryPath);
    const handleIde = useCallback(async () => {
        setIdeLoading(true);
        try {
            await callbacks.onOpenIde(repositoryPath);
        }
        finally {
            setIdeLoading(false);
        }
    }, [callbacks, repositoryPath]);
    const handleShell = useCallback(async () => {
        setShellLoading(true);
        try {
            await callbacks.onOpenShell(repositoryPath);
        }
        finally {
            setShellLoading(false);
        }
    }, [callbacks, repositoryPath]);
    const handleFolder = useCallback(async () => {
        setFolderLoading(true);
        try {
            await callbacks.onOpenFolder(repositoryPath);
        }
        finally {
            setFolderLoading(false);
        }
    }, [callbacks, repositoryPath]);
    const handleServer = useCallback(async () => {
        setServerLoading(true);
        try {
            if (isRunning) {
                await callbacks.onStopServer(repositoryPath);
            }
            else {
                await callbacks.onStartServer(repositoryPath);
            }
        }
        finally {
            setServerLoading(false);
        }
    }, [callbacks, repositoryPath, isRunning]);
    return (_jsxs(_Fragment, { children: [_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": t('repositoryNode.openInIde'), disabled: ideLoading, onClick: (e) => {
                                    e.stopPropagation();
                                    handleIde();
                                }, className: "text-muted-foreground cursor-pointer rounded-full transition-colors hover:text-blue-500", children: ideLoading ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Code2, { className: "h-3 w-3" })) }) }), _jsx(TooltipContent, { children: t('repositoryNode.openInIde') })] }) }), _jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": t('repositoryNode.openInShell'), disabled: shellLoading, onClick: (e) => {
                                    e.stopPropagation();
                                    handleShell();
                                }, className: "text-muted-foreground cursor-pointer rounded-full transition-colors hover:text-blue-500", children: shellLoading ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(Terminal, { className: "h-3 w-3" })) }) }), _jsx(TooltipContent, { children: t('repositoryNode.openInShell') })] }) }), _jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": t('repositoryNode.openFolder'), disabled: folderLoading, onClick: (e) => {
                                    e.stopPropagation();
                                    handleFolder();
                                }, className: "text-muted-foreground cursor-pointer rounded-full transition-colors hover:text-blue-500", children: folderLoading ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : (_jsx(FolderOpen, { className: "h-3 w-3" })) }) }), _jsx(TooltipContent, { children: t('repositoryNode.openFolder') })] }) }), featureFlags.envDeploy ? (_jsx(TooltipProvider, { delayDuration: 300, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": isRunning ? t('repositoryNode.stopDevServer') : t('repositoryNode.startDevServer'), disabled: serverLoading, onClick: (e) => {
                                    e.stopPropagation();
                                    handleServer();
                                }, className: isRunning
                                    ? 'cursor-pointer rounded-full text-green-600 transition-colors hover:text-red-500'
                                    : 'text-muted-foreground cursor-pointer rounded-full transition-colors hover:text-green-500', children: serverLoading ? (_jsx(Loader2, { className: "h-3 w-3 animate-spin" })) : isRunning ? (_jsx(Square, { className: "h-3 w-3" })) : (_jsx(Play, { className: "h-3 w-3" })) }) }), _jsx(TooltipContent, { children: isRunning ? t('repositoryNode.stopDevServer') : t('repositoryNode.startDevServer') })] }) })) : null] }));
}
export function RepositoryGroupActionsManager({ tableContainer, renderTick, callbacks, }) {
    const [portalEntries, setPortalEntries] = useState([]);
    // Re-discover portal targets whenever the container changes OR Tabulator re-renders (renderTick).
    // Tabulator destroys and recreates group header DOM on tree expand/collapse, so renderTick
    // forces re-discovery even when the container element reference stays the same.
    useEffect(() => {
        if (!tableContainer) {
            setPortalEntries([]);
            return;
        }
        const elements = tableContainer.querySelectorAll('[data-repo-actions]');
        const entries = [];
        elements.forEach((el) => {
            const repoPath = el.getAttribute('data-repo-actions');
            if (repoPath) {
                entries.push({
                    element: el,
                    repositoryPath: repoPath,
                    repositoryId: el.getAttribute('data-repo-id') ?? undefined,
                });
            }
        });
        setPortalEntries((prev) => {
            if (prev.length !== entries.length)
                return entries;
            for (let i = 0; i < entries.length; i++) {
                if (prev[i].element !== entries[i].element ||
                    prev[i].repositoryPath !== entries[i].repositoryPath) {
                    return entries;
                }
            }
            return prev;
        });
    }, [tableContainer, renderTick]);
    const portals = portalEntries.map((entry) => createPortal(_jsx(RepoActionButtons, { repositoryPath: entry.repositoryPath, callbacks: callbacks }, entry.repositoryPath), entry.element, `repo-actions-${entry.repositoryPath}`));
    if (portals.length === 0)
        return null;
    return (_jsxs(_Fragment, { children: [null, portals] }));
}
