import * as React from 'react';

import { AppearanceThemeMenu } from '@/components/common/AppearanceToggle';
import { Breadcrumbs } from '@/components/breadcrumbs';
import { GlobalSearch } from '@/components/global-search';
import { IconButton } from '@/components/common/IconButton';
import { Button } from '@/components/ui/button';
import { Icon } from '@/components/ui/icon';
import { SidebarTrigger } from '@/components/ui/sidebar';
import { useI18n } from '@/hooks/use-i18n';
import { cn } from '@/lib/utils';
import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';

export function AppSidebarHeader({
    breadcrumbs = [],
}: {
    breadcrumbs?: BreadcrumbItemType[];
}) {
    const [searchOpen, setSearchOpen] = React.useState(false);
    const { t } = useI18n();

    React.useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                e.preventDefault();
                setSearchOpen((prev) => !prev);
            }
        };

        document.addEventListener('keydown', handleKeyDown);
        return () => document.removeEventListener('keydown', handleKeyDown);
    }, []);

    return (
        <>
            <header className="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
                <div className="flex flex-1 items-center gap-2">
                    <SidebarTrigger className="-ml-1" />
                    <Breadcrumbs breadcrumbs={breadcrumbs} />
                </div>
                <div className="flex items-center gap-2">
                    <AppearanceThemeMenu />
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={() => setSearchOpen(true)}
                        className={cn(
                            'text-muted-foreground h-8 gap-2 text-sm',
                            'hidden sm:flex',
                        )}
                    >
                        <Icon icon="material-symbols:search" className="size-4" />
                        <span>{t('common.search.trigger_label')}</span>
                        <kbd className="bg-muted pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100">
                            <span className="text-xs">⌘</span>K
                        </kbd>
                    </Button>
                    <IconButton
                        variant="text"
                        color="ghost"
                        size="sm"
                        onClick={() => setSearchOpen(true)}
                        className="sm:hidden"
                        aria-label={t('common.search.trigger_label')}
                        icon="solar:magnifer-bold-duotone"
                    />
                </div>
            </header>
            <GlobalSearch open={searchOpen} onOpenChange={setSearchOpen} />
        </>
    );
}