'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * AppViewTabs — right-pane view switcher for the app top bar.
 *
 * Segmented-control style: a pill-shaped bg-muted container with each
 * view rendered as a rounded-sm button inside. Active tab sits on a
 * raised bg-background card with a subtle shadow; inactive tabs sink
 * into the container and reveal a soft hover background. Mirrors the
 * toolbar tab control in macOS Sonoma / Windows 11 Settings / VS Code
 * command palette — compact, rounded, depth-via-shadow not stripes.
 *
 * Folds in the old standalone `RunDevButton` ("Preview") functionality:
 * the Web tab now owns the local dev-server lifecycle. Clicking the Web
 * tab while no server is running starts it AND switches the view in one
 * click — same one-button experience as the old Preview button. The
 * Web tab's icon flips to a state-aware indicator (idle / spinner /
 * pulsing green dot / red triangle) so a glance at the tab tells the
 * user what's going on, without needing a second top-bar control.
 *
 * Stop is reachable from inside the Web pane content (web-preview-tab
 * URL bar) — that's the natural place: when you're looking at the live
 * preview is when you want a stop button, not when you're on a
 * different tab.
 */
import { useCallback } from 'react';
import { Code2, Globe, Loader2, Terminal, TriangleAlert } from 'lucide-react';
import { DeploymentState } from '../../../../../../packages/core/src/domain/generated/output.js';
import { Tabs, TabsList, TabsTrigger } from '../../ui/tabs.js';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
import { cn } from '../../../lib/utils.js';
export const VIEW_TABS = ['ide', 'terminal', 'web'];
export const VIEW_LABELS = {
    ide: 'IDE',
    terminal: 'Terminal',
    web: 'Web',
};
const VIEW_ICONS = {
    ide: Code2,
    terminal: Terminal,
    web: Globe,
};
function deriveWebStatus(deploy, isBuilding) {
    if (isBuilding)
        return 'building';
    if (deploy.deployError)
        return 'error';
    if (deploy.status === DeploymentState.Booting || deploy.deployLoading)
        return 'booting';
    if (deploy.status === DeploymentState.Ready && deploy.url)
        return 'ready';
    return 'idle';
}
function webTooltip(status, deploy) {
    switch (status) {
        case 'ready':
            return `Live preview running at ${deploy.url} — click to view`;
        case 'booting':
            return 'Starting dev server… click to view progress';
        case 'building':
            return 'Your app is being built — preview will start once setup finishes';
        case 'error':
            return `Dev server failed: ${deploy.deployError ?? 'unknown error'} — click Web tab to retry`;
        default:
            return 'Click to start the local dev server and preview the app';
    }
}
export function AppViewTabs({ active, onChange, disabledTabs = [], deploy, isBuilding = false, }) {
    const webStatus = deriveWebStatus(deploy, isBuilding);
    const handleTabChange = useCallback((value) => {
        const next = value;
        onChange(next);
        // Skip click-to-deploy while building — the user is just peeking
        // at the "Building your app…" placeholder, not asking us to run
        // a dev server against an incomplete project tree.
        if (next === 'web' && !isBuilding && (webStatus === 'idle' || webStatus === 'error')) {
            void deploy.deploy();
        }
    }, [onChange, webStatus, deploy, isBuilding]);
    return (_jsx(TooltipProvider, { delayDuration: 400, children: _jsx(Tabs, { value: active, onValueChange: handleTabChange, className: "contents", children: _jsx(TabsList, { className: cn('bg-muted/60 border-border/60 inline-flex h-8 shrink-0 items-center gap-0.5 rounded-md border p-0.5'), children: VIEW_TABS.map((view) => {
                    const Icon = VIEW_ICONS[view];
                    const disabled = disabledTabs.includes(view);
                    const tooltip = view === 'web' ? webTooltip(webStatus, deploy) : VIEW_LABELS[view];
                    const trigger = (_jsxs(TabsTrigger, { value: view, disabled: disabled, className: cn('text-muted-foreground hover:text-foreground inline-flex h-7 items-center gap-1.5 rounded-[5px] px-2.5 text-[12px] font-medium whitespace-nowrap', 'transition-all duration-150 ease-out', 'data-[state=inactive]:hover:bg-background/60', 'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs', 'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-none', disabled && 'cursor-not-allowed opacity-40 hover:bg-transparent', !disabled && 'cursor-pointer'), children: [view === 'web' ? (_jsx(WebTabIcon, { status: webStatus, BaseIcon: Icon })) : (_jsx(Icon, { className: "size-3.5" })), VIEW_LABELS[view]] }));
                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: trigger }), _jsx(TooltipContent, { side: "bottom", sideOffset: 6, className: "max-w-xs text-[11px]", children: tooltip })] }, view));
                }) }) }) }));
}
/**
 * Web-tab icon — swaps glyph + adds a status overlay dot based on the
 * dev-server state. Separate component so the TabsTrigger markup stays
 * scannable.
 */
function WebTabIcon({ status, BaseIcon, }) {
    if (status === 'booting' || status === 'building') {
        return _jsx(Loader2, { className: "text-primary size-3.5 animate-spin" });
    }
    if (status === 'error') {
        return _jsx(TriangleAlert, { className: "text-destructive size-3.5" });
    }
    return (_jsxs("span", { className: "relative inline-flex", children: [_jsx(BaseIcon, { className: "size-3.5" }), status === 'ready' ? (_jsxs("span", { "aria-hidden": "true", className: "absolute -end-0.5 -top-0.5 inline-flex size-1.5", children: [_jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-60" }), _jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-emerald-500" })] })) : null] }));
}
