import { memo } from 'react'

interface OrderSaveButtonProps {
  hasUnsavedChanges: boolean
  isSaving: boolean
  lastSaveError: string | null
  onSave: () => Promise<void>
  onClearError: () => void
  changedCount?: number
}

export const OrderSaveButton = memo(
  ({
    hasUnsavedChanges,
    isSaving,
    lastSaveError,
    onSave,
    onClearError,
    changedCount = 0,
  }: OrderSaveButtonProps) => {
    return (
      <div className="flex items-center gap-2">
        {/* Ошибка сохранения */}
        {lastSaveError && (
          <div className="flex items-center gap-1 rounded-md bg-destructive/10 px-2 py-1">
            <svg
              className="h-3 w-3 text-destructive"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
              />
            </svg>
            <span className="text-xs text-destructive" title={lastSaveError}>
              Ошибка сохранения порядка
            </span>
            <button
              onClick={onClearError}
              className="ml-1 text-destructive/60 hover:text-destructive"
            >
              <svg
                className="h-3 w-3"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            </button>
          </div>
        )}

        {/* Индикатор сохранения */}
        {isSaving && (
          <div className="flex items-center text-muted-foreground">
            <svg
              className="h-3.5 w-3.5 animate-spin"
              fill="none"
              viewBox="0 0 24 24"
            >
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
              ></circle>
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
              ></path>
            </svg>
            <span className="ml-1 text-xs">Сохранение порядка...</span>
          </div>
        )}

        {/* Кнопка сохранения порядка */}
        <button
          onClick={onSave}
          disabled={isSaving || !hasUnsavedChanges}
          className={`flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors ${
            hasUnsavedChanges
              ? 'bg-primary text-primary-foreground hover:bg-primary/90'
              : lastSaveError
                ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
                : 'bg-muted text-muted-foreground'
          } disabled:opacity-50`}
          title={
            lastSaveError
              ? 'Повторить сохранение порядка'
              : hasUnsavedChanges
                ? `Сохранить изменения порядка (${changedCount} шаблонов)`
                : 'Порядок сохранен'
          }
        >
          <svg
            className="h-3 w-3"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"
            />
          </svg>
          {lastSaveError
            ? 'Повторить'
            : hasUnsavedChanges
              ? `Сохранить порядок (${changedCount})`
              : 'Порядок сохранен'}
        </button>
      </div>
    )
  }
)

OrderSaveButton.displayName = 'OrderSaveButton'