import { useSafeNavigation } from '@/hook/useSafeNavigation'
import { Template } from '@/type/template'
import { ArrowLeft, FileText, Loader2, Settings, Wrench } from 'lucide-react'
import React from 'react'
import { useNavigate } from 'react-router-dom'
import { Button } from 'shared/ui/button'

interface HeaderBarProps {
  template: Template
  onBack: () => void
  hasUnsavedChanges?: boolean
  isSaving?: boolean
  onBeforeNavigate?: () => Promise<void>
}

export const HeaderBar: React.FC<HeaderBarProps> = ({
  template,
  onBack,
  hasUnsavedChanges = false,
  isSaving = false,
  onBeforeNavigate,
}) => {
  const navigate = useNavigate()

  // Хук для безопасной навигации
  const { safeNavigate, isNavigating } = useSafeNavigation({
    onBeforeNavigate,
    hasUnsavedChanges,
    isSaving,
  })

  return (
    <div className="flex-shrink-0 border-b bg-card px-4 py-2">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Button
            variant="ghost"
            size="icon"
            onClick={onBack}
            disabled={isNavigating || isSaving}
          >
            {isNavigating ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <ArrowLeft className="h-4 w-4" />
            )}
          </Button>
          <div className="flex items-center space-x-2">
            <Settings className="h-5 w-5" />
            <h1 className="text-lg font-semibold">Редактор шаблонов</h1>
            <span className="text-sm text-muted-foreground">—</span>
            <span className="text-sm text-muted-foreground">
              {template.name}
            </span>
          </div>
        </div>
        <div className="flex gap-2">
          <Button
            variant="link"
            size="sm"
            onClick={() => safeNavigate(`/templates/${template.id}/elements`)}
            disabled={isNavigating || isSaving}
            className="flex items-center gap-1 hover:bg-muted"
          >
            {isNavigating ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                <span className="text-sm">Сохранение...</span>
              </>
            ) : (
              <>
                <Wrench className="h-4 w-4" />
                <span className="text-sm">Редактор интерфейса</span>
              </>
            )}
          </Button>
          <Button
            variant="link"
            size="sm"
            onClick={() => safeNavigate(`/templates/${template.id}/protocols`)}
            disabled={isNavigating || isSaving}
            className="flex items-center gap-1 hover:bg-muted"
          >
            {isNavigating ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                <span className="text-sm">Сохранение...</span>
              </>
            ) : (
              <>
                <FileText className="h-4 w-4" />
                <span className="text-sm">Создать протокол</span>
              </>
            )}
          </Button>
        </div>
      </div>
    </div>
  )
}
