import {
    PanelLeftCloseIcon,
    PanelLeftOpenIcon,
    PanelRightCloseIcon,
    PanelRightOpenIcon,
} from 'lucide-react';
import { Breadcrumbs } from '@/components/breadcrumbs';
import { LocaleSwitcher } from '@/components/locale-switcher';
import { Button } from '@/components/ui/button';
import { useSidebar } from '@/components/ui/sidebar';
import { useLanguage } from '@/contexts/language-context';
import { cn } from '@/lib/utils';

function AppSidebarTrigger() {
    const { toggleSidebar, state, isMobile } = useSidebar();
    const { direction } = useLanguage();
    const isRtl = direction === 'rtl';
    const collapsed = isMobile || state === 'collapsed';
    const OpenIcon = isRtl ? PanelRightOpenIcon : PanelLeftOpenIcon;
    const CloseIcon = isRtl ? PanelRightCloseIcon : PanelLeftCloseIcon;

    return (
        <Button
            data-sidebar="trigger"
            variant="outline"
            size="icon"
            className="size-8 shrink-0 rounded-lg border-border/70 bg-background/80 shadow-sm"
            onClick={toggleSidebar}
        >
            {collapsed ? <OpenIcon className="size-4" /> : <CloseIcon className="size-4" />}
            <span className="sr-only">Toggle sidebar</span>
        </Button>
    );
}

export function AppSidebarHeader({ breadcrumbs = [] }) {
    return (
        <header className="sticky top-0 z-20 shrink-0 px-3 pt-3 md:px-5 md:pt-4">
            <div
                className={cn(
                    'flex h-14 items-center gap-3 rounded-2xl border border-border/60 px-3 shadow-sm backdrop-blur-md md:px-4',
                    'bg-[var(--navbar-bg)]',
                )}
            >
                <div className="flex min-w-0 flex-1 items-center gap-3">
                    <AppSidebarTrigger />
                    <div className="bg-border/70 hidden h-6 w-px sm:block" aria-hidden />
                    <Breadcrumbs breadcrumbs={breadcrumbs} />
                </div>
                <LocaleSwitcher variant="zinc" className="shrink-0" />
            </div>
        </header>
    );
}