import { useRouterState } from '@tanstack/react-router'
import { ArrowLeft, ArrowRight, Columns2, PanelRight, Save, X } from 'lucide-react'
import { useEffect, useRef } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useKnowledgeStore } from '@/stores/knowledge'
export function EditorToolbar() {
const { t } = useTranslation()
const {
currentFilePath,
history,
historyIndex,
goBack,
goForward,
infoPanelOpen,
toggleInfoPanel,
splitEditorOpen,
closeSplit,
openSplit,
} = useKnowledgeStore()
const canGoBack = historyIndex > 0
const canGoForward = historyIndex < history.length - 1
const fileName = currentFilePath?.split('/').pop()?.replace(/\.md$/, '') ?? ''
const handleSave = () => {
document.dispatchEvent(new CustomEvent('knowledge:save'))
}
// ⌘S keyboard shortcut — only on knowledge routes (B5 fix)
const router = useRouterState()
const pathnameRef = useRef(router.location.pathname)
pathnameRef.current = router.location.pathname
useEffect(() => {
const handler = (e: KeyboardEvent) => {
if (!pathnameRef.current.startsWith('/knowledge')) return
if ((e.metaKey || e.ctrlKey) && e.key === 's') {
e.preventDefault()
handleSave()
}
}
window.addEventListener('keydown', handler)
return () => window.removeEventListener('keydown', handler)
}, [handleSave])
return (
<div className="flex items-center gap-1 px-3 py-1.5 border-b bg-muted/30 min-h-[40px]">
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={() => goBack()}
disabled={!canGoBack}
title={t('knowledge.goBack')}
>
<ArrowLeft className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={() => goForward()}
disabled={!canGoForward}
title={t('knowledge.goForward')}
>
<ArrowRight className="h-4 w-4" />
</Button>
<span className="text-sm font-medium truncate mx-3">{fileName || 'Knowledge'}</span>
<div className="flex-1" />
{/* Save */}
{currentFilePath && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={handleSave}
title={t('common.save')}
>
<Save className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>{t('knowledge.saveWithShortcut')}</TooltipContent>
</Tooltip>
)}
{/* Split editor */}
{!splitEditorOpen && currentFilePath && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={() => openSplit(currentFilePath)}
title={t('knowledge.openSplitView')}
>
<Columns2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>{t('knowledge.splitView')}</TooltipContent>
</Tooltip>
)}
{/* Close split */}
{splitEditorOpen && (
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={closeSplit}
title={t('knowledge.closeSplit')}
>
<X className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>{t('knowledge.closeSplitWithShortcut')}</TooltipContent>
</Tooltip>
)}
{/* Info panel toggle */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon"
className="h-7 w-7"
onClick={toggleInfoPanel}
title={t('knowledge.toggleInfoPanel')}
>
<PanelRight className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
{infoPanelOpen ? t('knowledge.hideInfoPanel') : t('knowledge.showInfoPanel')}
</TooltipContent>
</Tooltip>
</div>
)
}