'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useRef, useEffect } from 'react';
import { Book } from '@phosphor-icons/react';
import { cn } from '@/lib/utils';
import { RequestDetails } from './request-details';
import { DocPage } from './doc-page';
import { ChangelogPage } from './changelog-page';
import { NotFoundPage } from './not-found-page';
import { GraphQLPlayground } from '../playground/graphql-playground';
/**
 * Find a request by ID in the collection
 */ function findRequestById(collection, id) {
    // Check direct requests
    if (collection.requests) {
        const found = collection.requests.find((r)=>r.id === id);
        if (found) return found;
    }
    // Check in folders recursively
    function searchFolders(folders) {
        if (!folders) return null;
        for (const folder of folders){
            if (folder.requests) {
                const found = folder.requests.find((r)=>r.id === id);
                if (found) return found;
            }
            if (folder.folders) {
                const found = searchFolders(folder.folders);
                if (found) return found;
            }
        }
        return null;
    }
    return searchFolders(collection.folders);
}
/**
 * ContentRouter - Renders content based on URL route state
 * 
 * This component is the single place that determines what content to show
 * based on the URL hash. It derives all state from the route.
 */ export function ContentRouter({ routeState, collection, activeTabConfig, isGraphQLTab, isChangelogTab, graphqlOperations, graphqlSchemaSDL, graphqlEndpoint, onSearch, contentRef }) {
    const { contentType, contentId } = routeState;
    const localContentRef = useRef(null);
    const actualRef = contentRef || localContentRef;
    // Derive content from route state
    const derivedContent = useMemo(()=>{
        // GraphQL operation
        if (isGraphQLTab && contentType === 'endpoint' && contentId) {
            const operation = graphqlOperations.find((op)=>op.id === contentId);
            if (operation) {
                return {
                    type: 'graphql',
                    operation
                };
            }
        }
        // REST endpoint
        if (contentType === 'endpoint' && contentId) {
            const request = findRequestById(collection, contentId);
            if (request) {
                return {
                    type: 'endpoint',
                    request
                };
            }
            // Endpoint not found
            return {
                type: 'not-found',
                slug: `endpoint/${contentId}`
            };
        }
        // Doc page
        if (contentType === 'page' && contentId) {
            return {
                type: 'page',
                slug: contentId
            };
        }
        // Section scroll (handled elsewhere, show page if we have one)
        if (contentType === 'section' && contentId) {
            // Section navigation usually means scroll within current page
            // For now, treat as a doc lookup
            return {
                type: 'section',
                sectionId: contentId
            };
        }
        // Changelog tab
        if (isChangelogTab) {
            return {
                type: 'changelog'
            };
        }
        // Default empty state
        return {
            type: 'empty'
        };
    }, [
        contentType,
        contentId,
        isGraphQLTab,
        isChangelogTab,
        graphqlOperations,
        collection
    ]);
    // Handle section scrolling
    useEffect(()=>{
        if (derivedContent.type === 'section' && 'sectionId' in derivedContent) {
            const element = document.getElementById(derivedContent.sectionId);
            if (element) {
                setTimeout(()=>{
                    element.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }, 100);
            }
        }
    }, [
        derivedContent
    ]);
    // Determine if content needs flex layout (for playgrounds)
    const needsFlexLayout = derivedContent.type === 'graphql' || derivedContent.type === 'changelog';
    return /*#__PURE__*/ _jsx("div", {
        ref: actualRef,
        className: cn("docs-content-area flex-1 bg-background min-w-0", needsFlexLayout ? "overflow-hidden flex flex-col" : "overflow-y-auto scroll-smooth"),
        children: derivedContent.type === 'graphql' && 'operation' in derivedContent ? /*#__PURE__*/ _jsx("div", {
            className: "flex-1 flex flex-col h-full",
            children: /*#__PURE__*/ _jsx(GraphQLPlayground, {
                endpoint: graphqlEndpoint || '',
                defaultQuery: derivedContent.operation.query,
                operations: graphqlOperations,
                selectedOperationId: derivedContent.operation.id,
                hideExplorer: true,
                headers: {},
                theme: "dark",
                schemaSDL: graphqlSchemaSDL
            })
        }) : derivedContent.type === 'changelog' ? /*#__PURE__*/ _jsx(ChangelogPage, {
            releases: collection.changelogReleases || [],
            tabName: activeTabConfig?.tab
        }) : derivedContent.type === 'endpoint' && 'request' in derivedContent ? /*#__PURE__*/ _jsx(RequestDetails, {
            request: derivedContent.request
        }) : derivedContent.type === 'page' && 'slug' in derivedContent ? /*#__PURE__*/ _jsx(DocPage, {
            slug: derivedContent.slug,
            onSearch: onSearch
        }) : derivedContent.type === 'not-found' && 'slug' in derivedContent ? /*#__PURE__*/ _jsx(NotFoundPage, {
            slug: derivedContent.slug,
            onSearch: onSearch
        }) : derivedContent.type === 'section' ? // Section navigation - show empty state while scrolling to section
        /*#__PURE__*/ _jsx("div", {
            className: "flex-1 flex items-center justify-center bg-background",
            children: /*#__PURE__*/ _jsxs("div", {
                className: "text-center text-muted-foreground",
                children: [
                    /*#__PURE__*/ _jsx(Book, {
                        className: "h-12 w-12 mx-auto mb-3 opacity-40"
                    }),
                    /*#__PURE__*/ _jsx("p", {
                        className: "text-sm",
                        children: "Scrolling to section..."
                    })
                ]
            })
        }) : /*#__PURE__*/ _jsx("div", {
            className: "flex-1 flex items-center justify-center bg-background",
            children: /*#__PURE__*/ _jsxs("div", {
                className: "text-center text-muted-foreground",
                children: [
                    /*#__PURE__*/ _jsx(Book, {
                        className: "h-12 w-12 mx-auto mb-3 opacity-40"
                    }),
                    /*#__PURE__*/ _jsx("p", {
                        className: "text-sm",
                        children: "Select an endpoint from the sidebar"
                    })
                ]
            })
        })
    });
}
export { findRequestById };
