'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import Link from "next/link";
import Image from "next/image";
import { ArrowSquareOut, List, ChatCircle, X, MagnifyingGlass } from "@phosphor-icons/react";
import { ThemeToggle } from "@/components/theme-toggle";
import { useMobile } from "@/lib/api-docs/mobile-context";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
// Default logo fallback
const DEFAULT_LOGO = {
    url: 'https://cdn.prod.website-files.com/639181964f4fe88697a20a0a/67af64a5ba42bb659b8560c9_Logo%20(3).svg',
    alt: 'Logo',
    width: 80,
    height: 24
};
export function DocsHeader({ navigationTabs = [], activeTab, onTabChange, docsName, docsLogo, docsHeader, docsNavbar, onSearchClick }) {
    const { isMobile, isLeftSidebarOpen, isRightSidebarOpen, toggleLeftSidebar, toggleRightSidebar } = useMobile();
    // Use config values with defaults
    // Support both single URL and separate light/dark logos
    const hasLightDarkLogos = docsLogo?.light && docsLogo?.dark;
    const logo = {
        url: docsLogo?.url || DEFAULT_LOGO.url,
        light: docsLogo?.light,
        dark: docsLogo?.dark,
        alt: docsLogo?.alt || DEFAULT_LOGO.alt,
        width: docsLogo?.width || DEFAULT_LOGO.width,
        height: docsLogo?.height || DEFAULT_LOGO.height
    };
    const showSearch = docsHeader?.showSearch !== false // Default true
    ;
    const showThemeToggle = docsHeader?.showThemeToggle !== false // Default true
    ;
    const navbarLinks = docsNavbar?.links || [];
    const navbarPrimary = docsNavbar?.primary;
    // Use navigation tabs directly from config (already ordered)
    const tabs = navigationTabs.sort((a, b)=>a.order - b.order);
    return /*#__PURE__*/ _jsxs("header", {
        className: "docs-header sticky top-0 z-50 bg-background border-b border-border",
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "flex h-14 w-full items-center justify-between px-3 sm:px-6",
                children: [
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-2",
                        children: [
                            isMobile && /*#__PURE__*/ _jsx(Button, {
                                variant: "ghost",
                                size: "icon",
                                onClick: toggleLeftSidebar,
                                className: "docs-header-menu-button lg:hidden h-9 w-9",
                                "aria-label": isLeftSidebarOpen ? "Close menu" : "Open menu",
                                children: isLeftSidebarOpen ? /*#__PURE__*/ _jsx(X, {
                                    className: "h-5 w-5",
                                    weight: "bold"
                                }) : /*#__PURE__*/ _jsx(List, {
                                    className: "h-5 w-5",
                                    weight: "bold"
                                })
                            }),
                            /*#__PURE__*/ _jsxs(Link, {
                                href: docsLogo?.href || "/",
                                className: "docs-header-logo flex items-center gap-2 sm:gap-3 min-h-[44px] min-w-[44px] touch-manipulation",
                                children: [
                                    hasLightDarkLogos ? /*#__PURE__*/ _jsxs(_Fragment, {
                                        children: [
                                            /*#__PURE__*/ _jsx(Image, {
                                                src: logo.light,
                                                alt: logo.alt,
                                                width: logo.width,
                                                height: logo.height,
                                                className: "w-auto dark:hidden pointer-events-none",
                                                style: {
                                                    height: logo.height
                                                },
                                                priority: true
                                            }),
                                            /*#__PURE__*/ _jsx(Image, {
                                                src: logo.dark,
                                                alt: logo.alt,
                                                width: logo.width,
                                                height: logo.height,
                                                className: "w-auto hidden dark:block pointer-events-none",
                                                style: {
                                                    height: logo.height
                                                },
                                                priority: true
                                            })
                                        ]
                                    }) : /*#__PURE__*/ _jsx(Image, {
                                        src: logo.url,
                                        alt: logo.alt,
                                        width: logo.width,
                                        height: logo.height,
                                        className: "w-auto dark:invert pointer-events-none",
                                        style: {
                                            height: logo.height
                                        },
                                        priority: true
                                    }),
                                    docsName && /*#__PURE__*/ _jsxs(_Fragment, {
                                        children: [
                                            /*#__PURE__*/ _jsx("div", {
                                                className: "hidden sm:block h-5 w-px bg-border"
                                            }),
                                            /*#__PURE__*/ _jsx("span", {
                                                className: "docs-header-title hidden sm:inline text-sm font-medium text-muted-foreground pointer-events-none",
                                                children: docsName
                                            })
                                        ]
                                    })
                                ]
                            })
                        ]
                    }),
                    showSearch && /*#__PURE__*/ _jsx("div", {
                        className: "docs-header-search hidden md:flex flex-1 max-w-md mx-6",
                        children: /*#__PURE__*/ _jsxs("button", {
                            onClick: onSearchClick,
                            className: "relative w-full flex items-center gap-2 px-3 h-9 bg-muted/50 border border-border rounded-md text-sm text-muted-foreground hover:bg-muted/70 transition-colors",
                            children: [
                                /*#__PURE__*/ _jsx(MagnifyingGlass, {
                                    className: "h-4 w-4"
                                }),
                                /*#__PURE__*/ _jsx("span", {
                                    className: "flex-1 text-left",
                                    children: "Search..."
                                }),
                                /*#__PURE__*/ _jsx("kbd", {
                                    className: "pointer-events-none hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium",
                                    children: "⌘K"
                                })
                            ]
                        })
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex items-center gap-1 sm:gap-2",
                        children: [
                            navbarLinks.length > 0 && /*#__PURE__*/ _jsx("nav", {
                                className: "docs-header-nav hidden lg:flex items-center gap-1",
                                children: navbarLinks.map((link)=>/*#__PURE__*/ _jsxs(Link, {
                                        href: link.href,
                                        className: "docs-header-nav-link flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-sm transition-colors",
                                        ...link.external && {
                                            target: "_blank",
                                            rel: "noopener noreferrer"
                                        },
                                        children: [
                                            /*#__PURE__*/ _jsx("span", {
                                                children: link.label
                                            }),
                                            link.external && /*#__PURE__*/ _jsx(ArrowSquareOut, {
                                                className: "h-3.5 w-3.5",
                                                weight: "bold"
                                            })
                                        ]
                                    }, link.href))
                            }),
                            navbarPrimary && /*#__PURE__*/ _jsx(Button, {
                                asChild: true,
                                size: "sm",
                                className: "docs-header-button docs-button-primary hidden sm:flex",
                                children: /*#__PURE__*/ _jsx(Link, {
                                    href: navbarPrimary.href,
                                    children: navbarPrimary.label
                                })
                            }),
                            showThemeToggle && /*#__PURE__*/ _jsx(ThemeToggle, {}),
                            isMobile && /*#__PURE__*/ _jsx(Button, {
                                variant: "ghost",
                                size: "icon",
                                onClick: toggleRightSidebar,
                                className: "docs-header-button lg:hidden h-9 w-9",
                                "aria-label": isRightSidebarOpen ? "Close assistant" : "Open assistant",
                                children: isRightSidebarOpen ? /*#__PURE__*/ _jsx(X, {
                                    className: "h-5 w-5",
                                    weight: "bold"
                                }) : /*#__PURE__*/ _jsx(ChatCircle, {
                                    className: "h-5 w-5",
                                    weight: "fill"
                                })
                            })
                        ]
                    })
                ]
            }),
            tabs.length > 0 && /*#__PURE__*/ _jsx("div", {
                className: "docs-tabs flex items-center px-3 sm:px-6 border-y border-border overflow-x-auto overflow-y-visible bg-muted/50 dark:bg-muted/20",
                children: tabs.map((t)=>/*#__PURE__*/ _jsxs("button", {
                        onClick: ()=>onTabChange(t.id),
                        className: cn('docs-tab relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors', activeTab === t.id ? 'docs-tab-active text-foreground font-semibold' : 'text-muted-foreground hover:text-foreground'),
                        children: [
                            t.tab,
                            activeTab === t.id && /*#__PURE__*/ _jsx("span", {
                                className: "absolute bottom-0 left-0 right-0 h-[2px] rounded-full bg-primary z-10"
                            })
                        ]
                    }, t.id))
            })
        ]
    });
}
