'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { FolderOpen, Github, LayoutGrid, Loader2, Plus, Sparkles } from 'lucide-react';
import { cn } from '../../../lib/utils.js';
import { DeploymentStatusProvider } from '../../../hooks/deployment-status-provider.js';
import { ControlCenterEmptyState } from '../../features/control-center/control-center-empty-state.js';
import { ApplicationCard } from './application-card.js';
import { listDeployments } from '../../../app/actions/list-deployments.js';
export function ApplicationsPageClient({ className }) {
    const router = useRouter();
    const [showCreatePrompt, setShowCreatePrompt] = useState(false);
    const { data: applications = [], isLoading } = useQuery({
        queryKey: ['applications'],
        queryFn: async () => {
            const res = await fetch('/api/applications');
            if (!res.ok)
                throw new Error('Failed to fetch applications');
            return res.json();
        },
        staleTime: 30_000,
    });
    // Live dev-server deployments — seeds the DeploymentStatusProvider so the
    // app cards reflect previews started on /application/[id] (or another tab)
    // instead of resetting every time this page mounts. Without this seed the
    // provider's `fullyHydrated` flag (set by the empty SSR hydrate) blocks
    // each card's `ensureHydrated` from fetching, leaving previews invisible.
    const { data: deployments = [] } = useQuery({
        queryKey: ['deployments', 'all'],
        queryFn: () => listDeployments(),
        staleTime: 0,
        refetchInterval: 3_000,
    });
    const sorted = useMemo(() => [...applications].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()), [applications]);
    return (_jsx(DeploymentStatusProvider, { initialDeployments: deployments, children: _jsxs("div", { "data-testid": "applications-page-client", className: cn('relative flex min-h-full flex-col', className), children: [_jsxs("div", { className: "flex flex-1 flex-col gap-4 p-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(LayoutGrid, { className: "text-muted-foreground h-4 w-4" }), _jsx("h1", { className: "text-sm font-bold tracking-tight", children: "Applications" }), !isLoading ? (_jsxs("span", { className: "text-muted-foreground text-[10px]", children: [applications.length, " ", applications.length === 1 ? 'app' : 'apps'] })) : null] }), isLoading ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" }) })) : sorted.length === 0 ? (_jsx("div", { className: "flex flex-1 items-center justify-center", children: _jsx(ControlCenterEmptyState, { onApplicationCreated: (appId) => {
                                    router.push(`/application/${appId}`);
                                } }) })) : (_jsxs("div", { "data-testid": "applications-page-grid", className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: [_jsx(NewApplicationCard, { onDescribe: () => setShowCreatePrompt(true), onOpenLocalDirectory: async () => {
                                        const { pickFolder } = await import('../../common/add-repository-button/pick-folder.js');
                                        const path = await pickFolder();
                                        if (!path)
                                            return;
                                        const { adoptLocalDirectory } = await import('../../../app/actions/adopt-local-directory.js');
                                        const result = await adoptLocalDirectory({ repositoryPath: path });
                                        if (result.applicationId) {
                                            router.push(`/application/${result.applicationId}`);
                                        }
                                    }, onImportGitHub: () => window.dispatchEvent(new CustomEvent('shep:open-github-import')) }), sorted.map((app) => (_jsx(ApplicationCard, { application: app }, app.id)))] }))] }), showCreatePrompt ? (_jsx("div", { className: "absolute inset-0 z-40", children: _jsx(ControlCenterEmptyState, { onApplicationCreated: (appId) => {
                            router.push(`/application/${appId}`);
                        }, onClose: () => setShowCreatePrompt(false), className: "bg-background" }) })) : null] }) }));
}
/**
 * NewApplicationCard — a placeholder card that lives at the end of the
 * applications grid. At rest it shows a subtle dashed border with a
 * centered + icon and label. On hover the + fades out and a vertical
 * list of creation options slides in so the user can pick a path
 * without the card feeling cluttered at a glance.
 */
function NewApplicationCard({ onDescribe, onOpenLocalDirectory, onImportGitHub, }) {
    const options = [
        {
            icon: _jsx(Sparkles, { className: "h-4 w-4" }),
            label: 'Describe with AI',
            description: 'Tell Shep what to build — it scaffolds + ships',
            onClick: onDescribe,
            accent: 'text-indigo-500 bg-indigo-100 dark:bg-indigo-900/60',
        },
        ...(onOpenLocalDirectory
            ? [
                {
                    icon: _jsx(FolderOpen, { className: "h-4 w-4" }),
                    label: 'Open local project',
                    description: 'Pick an existing folder and continue from there',
                    onClick: onOpenLocalDirectory,
                    accent: 'text-amber-600 bg-amber-100 dark:bg-amber-900/40',
                },
            ]
            : []),
        ...(onImportGitHub
            ? [
                {
                    icon: _jsx(Github, { className: "h-4 w-4" }),
                    label: 'Import from GitHub',
                    description: 'Connect an existing repo to manage here',
                    onClick: onImportGitHub,
                    accent: 'text-foreground bg-muted',
                },
            ]
            : []),
    ];
    return (_jsxs("div", { className: cn('group relative flex cursor-pointer flex-col overflow-hidden rounded-sm border-2', 'border-dashed border-indigo-200 bg-transparent transition-all duration-200', 'hover:border-indigo-400 hover:bg-indigo-500/[0.03]', 'dark:border-indigo-900 dark:hover:border-indigo-700', 'min-h-[280px]'), onClick: onDescribe, children: [_jsxs("div", { className: cn('absolute inset-0 flex flex-col items-center justify-center gap-3', 'transition-opacity duration-200 group-hover:opacity-0', 'pointer-events-none'), children: [_jsx("div", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-indigo-100 text-indigo-500 dark:bg-indigo-900/60 dark:text-indigo-400", children: _jsx(Plus, { className: "h-5 w-5 stroke-[2]" }) }), _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-foreground text-sm font-semibold", children: "New application" }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-[11px]", children: "Click to get started" })] })] }), _jsxs("div", { className: cn('absolute inset-0 flex flex-col justify-center gap-1.5 px-4', 'translate-y-3 opacity-0 transition-all duration-200', 'group-hover:translate-y-0 group-hover:opacity-100'), children: [_jsx("p", { className: "text-muted-foreground mb-1 px-1 text-[10px] font-medium tracking-wide uppercase", children: "How would you like to start?" }), options.map((opt) => (_jsxs("button", { type: "button", onClick: (e) => {
                            e.stopPropagation();
                            opt.onClick();
                        }, className: cn('flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2.5 text-left', 'border-border/60 bg-background/80 border transition-all duration-150', 'hover:border-indigo-300 hover:bg-indigo-50 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/40'), children: [_jsx("span", { className: cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-md', opt.accent), children: opt.icon }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-foreground text-[12px] font-semibold", children: opt.label }), _jsx("div", { className: "text-muted-foreground truncate text-[10px]", children: opt.description })] })] }, opt.label)))] })] }));
}
